@serendie/ui
Version:
Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric
115 lines (114 loc) • 3.53 kB
JavaScript
import { jsx as d } from "react/jsx-runtime";
import c from "react";
import { cx as a } from "../../styled-system/css/cx.js";
import { cva as m } from "../../styled-system/css/cva.js";
const e = m({
base: {
position: "relative",
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
overflow: "hidden",
color: "sd.system.color.component.onSurface",
outlineWidth: "sd.system.dimension.border.medium",
outlineStyle: "solid",
cursor: "pointer",
"& svg": {
width: "sd.reference.dimension.scale.8",
height: "sd.reference.dimension.scale.8"
},
_disabled: {
color: "sd.system.color.interaction.disabledOnSurface",
cursor: "not-allowed",
outlineColor: "transparent",
bg: "sd.system.color.interaction.disabled"
}
},
variants: {
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}"
}
}
},
defaultVariants: {
shape: "circle",
styleType: "filled",
size: "medium"
}
}), g = c.forwardRef(
({ icon: o, className: s, ...r }, n) => {
const [i, t] = e.splitVariantProps(r), l = e(i);
return /* @__PURE__ */ d("button", { ref: n, className: a(l, s), ...t, children: o });
}
);
export {
g as IconButton,
e as IconButtonStyle
};