@serendie/ui
Version:
Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric
132 lines (131 loc) • 3.88 kB
JavaScript
import { jsx as a } from "react/jsx-runtime";
import l from "react";
import { cx as m } from "../../../styled-system/css/cx.js";
import { cva as d } from "../../../styled-system/css/cva.js";
const p = d({
base: {
borderBottom: "1px solid",
borderColor: "sd.system.color.component.outline",
fontFamily: "Roboto, sans-serif",
color: "sd.system.color.component.onSurface",
textAlign: "left",
verticalAlign: "middle",
fontWeight: 400,
fontSize: "13px",
px: "sd.system.dimension.spacing.extraSmall",
py: "sd.system.dimension.spacing.twoExtraSmall",
height: "32px",
whiteSpace: "nowrap"
},
variants: {
type: {
default: {
background: "sd.system.color.component.surface"
},
success: {
background: "sd.system.color.impression.positiveContainerVariant"
},
notice: {
background: "sd.system.color.impression.noticeContainerVariant"
},
error: {
background: "sd.system.color.impression.negativeContainerVariant",
color: "sd.system.color.impression.onNegativeContainerVariant"
}
},
state: {
enabled: {},
hovered: {
background: "color-mix(in srgb, token(colors.sd.system.color.component.surface) 95%, token(colors.sd.system.color.component.inverseSurface) 5%)"
},
selected: {
background: "sd.system.color.component.inversePrimary"
}
},
size: {
small: { fontSize: "11px", height: "24px" },
medium: { fontSize: "13px", height: "32px" },
large: { fontSize: "15px", height: "40px" }
}
},
compoundVariants: [
{
type: "success",
state: "hovered",
css: {
background: "color-mix(in srgb, token(colors.sd.system.color.impression.positiveContainerVariant) 95%, token(colors.sd.system.color.component.inverseSurface) 5%)",
opacity: 0.95
}
},
{
type: "notice",
state: "hovered",
css: {
background: "color-mix(in srgb, token(colors.sd.system.color.impression.noticeContainerVariant) 95%, token(colors.sd.system.color.component.inverseSurface) 5%)",
opacity: 0.95
}
},
{
type: "error",
state: "hovered",
css: {
background: "color-mix(in srgb, token(colors.sd.system.color.impression.negativeContainerVariant) 95%, token(colors.sd.system.color.component.inverseSurface) 5%)",
opacity: 0.95
}
},
{
type: "success",
state: "selected",
css: {
background: "color-mix(in srgb, token(colors.sd.system.color.impression.positiveContainerVariant) 95%, token(colors.sd.system.color.component.inverseSurface) 5%)",
opacity: 0.98
}
},
{
type: "notice",
state: "selected",
css: {
background: "color-mix(in srgb, token(colors.sd.system.color.impression.noticeContainerVariant) 95%, token(colors.sd.system.color.component.inverseSurface) 5%)",
opacity: 0.98
}
},
{
type: "error",
state: "selected",
css: {
background: "color-mix(in srgb, token(colors.sd.system.color.impression.negativeContainerVariant) 95%, token(colors.sd.system.color.component.inverseSurface) 5%)",
opacity: 0.98
}
}
],
defaultVariants: {
type: "default",
state: "enabled"
}
}), y = ["default", "success", "notice", "error"], u = (o) => y.includes(o) ? o : "default", x = l.forwardRef(
({
children: o,
size: t = "medium",
type: r = "default",
state: e = "enabled",
className: n,
...c
}, i) => {
const s = u(r);
return /* @__PURE__ */ a(
"td",
{
ref: i,
role: "cell",
"data-type": s,
"data-state": e,
className: m(p({ size: t, type: s, state: e }), n),
...c,
children: o
}
);
}
);
export {
x as BodyCell
};