@serendie/ui
Version:
Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric
111 lines (110 loc) • 4.29 kB
TypeScript
import { default as React } from 'react';
export declare const IconButtonStyle: import('../../../styled-system/types').RecipeRuntimeFn<{
shape: {
rectangle: {
borderRadius: "sd.system.dimension.radius.medium";
};
circle: {
borderRadius: "sd.system.dimension.radius.full";
};
};
styleType: {
filled: {
color: "sd.system.color.impression.onPrimaryContainer";
bgColor: "sd.system.color.impression.primaryContainer";
_enabled: {
_hover: {
backgroundImage: "linear-gradient(0deg, {colors.sd.system.color.interaction.hovered} 0%, {colors.sd.system.color.interaction.hovered} 100%)";
};
_focusVisible: {
outlineWidth: "sd.system.dimension.border.medium";
outlineStyle: "solid";
outlineColor: "sd.system.color.interaction.hovered";
outlineOffset: "-1px";
backgroundImage: "linear-gradient(0deg, {colors.sd.system.color.interaction.hovered} 0%, {colors.sd.system.color.interaction.hovered} 100%)";
};
};
};
outlined: {
outlineColor: "sd.system.color.component.outline";
_enabled: {
_hover: {
bgColor: "sd.system.color.interaction.hoveredVariant";
};
_focusVisible: {
outlineColor: "sd.system.color.component.outlineDim";
bgColor: "sd.system.color.interaction.hoveredVariant";
};
};
};
ghost: {
outlineColor: "transparent";
_enabled: {
_hover: {
bgColor: "sd.system.color.interaction.hoveredVariant";
};
_focusVisible: {
bgColor: "sd.system.color.interaction.hoveredVariant";
outlineColor: "sd.system.color.component.outlineDim";
};
};
_disabled: {
bg: "transparent";
};
};
};
size: {
large: {
w: "{spacing.sd.reference.dimension.scale.17}";
h: "{spacing.sd.reference.dimension.scale.17}";
"& svg": {
width: "sd.reference.dimension.scale.12";
height: "sd.reference.dimension.scale.12";
};
};
medium: {
w: "{spacing.sd.reference.dimension.scale.13}";
h: "{spacing.sd.reference.dimension.scale.13}";
};
small: {
w: "{spacing.sd.reference.dimension.scale.10}";
h: "{spacing.sd.reference.dimension.scale.10}";
};
};
}>;
type StyleType = "filled" | "outlined" | "ghost";
type Size = "large" | "medium" | "small";
type RectangleProps = {
shape: "rectangle";
size?: Exclude<Size, "large">;
};
type CircleProps = {
shape: "circle";
size?: Exclude<Size, "large">;
styleType?: StyleType;
};
type CircleLargeProps = {
shape: "circle";
size: "large";
styleType?: Exclude<StyleType, "ghost">;
};
export declare const IconButton: React.ForwardRefExoticComponent<(Omit<{
shape?: "circle" | "rectangle" | undefined;
styleType?: "filled" | "outlined" | "ghost" | undefined;
size?: "small" | "large" | "medium" | undefined;
} & React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
icon: React.ReactElement;
} & RectangleProps, "ref"> | Omit<{
shape?: "circle" | "rectangle" | undefined;
styleType?: "filled" | "outlined" | "ghost" | undefined;
size?: "small" | "large" | "medium" | undefined;
} & React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
icon: React.ReactElement;
} & CircleProps, "ref"> | Omit<{
shape?: "circle" | "rectangle" | undefined;
styleType?: "filled" | "outlined" | "ghost" | undefined;
size?: "small" | "large" | "medium" | undefined;
} & React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
icon: React.ReactElement;
} & CircleLargeProps, "ref">) & React.RefAttributes<HTMLButtonElement>>;
export {};