@serendie/ui
Version:
Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric
129 lines (128 loc) • 4.52 kB
TypeScript
import { default as React } from 'react';
import { StepsRootProps } from '@ark-ui/react/steps';
import { RecipeVariantProps } from '../../../styled-system/css';
export declare const stepsStyles: import('../../../styled-system/types').SlotRecipeRuntimeFn<"number" | "item" | "title" | "description" | "list" | "separator" | "root" | "trigger" | "indicator" | "indicatorInner" | "checkIcon" | "textContent", {
orientation: {
horizontal: {
root: {
flexDirection: "row";
};
list: {
flexDirection: "row";
width: "100%";
};
separator: {
height: "sd.reference.dimension.scale.1";
};
item: {
flexDirection: "column";
alignItems: "center";
};
trigger: {
flexDirection: "column";
};
title: {
textAlign: "center";
};
description: {
textStyle: "sd.system.typography.label.small_compact";
textAlign: "center";
};
};
vertical: {
root: {
flexDirection: "column";
};
list: {
flexDirection: "column";
};
separator: {
width: "sd.reference.dimension.scale.1";
};
item: {
flexDirection: "column";
};
trigger: {
flexDirection: "row";
};
textContent: {
alignItems: "flex-start";
};
title: {
textStyle: "sd.system.typography.label.large_compact";
textAlign: "left";
};
description: {
textStyle: "sd.system.typography.label.small_compact";
textAlign: "left";
};
};
};
size: {
large: {
indicator: {
width: "sd.system.dimension.spacing.extraLarge";
height: "sd.system.dimension.spacing.extraLarge";
};
number: {
textStyle: "sd.system.typography.label.medium_compact";
};
};
small: {
indicator: {
width: "sd.system.dimension.spacing.small";
height: "sd.system.dimension.spacing.small";
};
number: {
textStyle: "sd.system.typography.label.small_compact";
};
title: {
textStyle: "sd.system.typography.label.medium_compact";
};
description: {
textStyle: "sd.system.typography.label.small_compact";
};
};
};
type: {
default: {
indicator: {
backgroundColor: "sd.system.color.interaction.disabled";
color: "sd.system.color.interaction.disabledOnSurface";
"&[data-complete]": {
backgroundColor: "sd.system.color.impression.secondary";
color: "sd.system.color.impression.onSecondary";
};
"&[data-current]": {
backgroundColor: "sd.system.color.impression.primary";
color: "sd.system.color.impression.onPrimary";
};
};
};
subtle: {
indicator: {
backgroundColor: "sd.system.color.interaction.disabledOnSurface";
"&[data-complete]": {
backgroundColor: "sd.system.color.impression.primary";
};
"&[data-current]": {
backgroundColor: "sd.system.color.component.surface";
borderWidth: "sd.system.dimension.border.thick";
borderStyle: "solid";
borderColor: "sd.system.color.impression.primary";
};
};
};
};
}>;
export interface StepsItemProps {
title: string;
description?: string;
}
type StepsStyleProps = RecipeVariantProps<typeof stepsStyles>;
export interface StepsProps extends Omit<StepsRootProps, "orientation">, Omit<NonNullable<StepsStyleProps>, "orientation" | "size"> {
items: StepsItemProps[];
direction?: "horizontal" | "vertical";
}
export declare const Steps: React.ForwardRefExoticComponent<StepsProps & React.RefAttributes<HTMLDivElement>>;
export {};