@serendie/ui
Version:
Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric
336 lines (335 loc) • 10.2 kB
JavaScript
import { jsx as s, jsxs as r } from "react/jsx-runtime";
import x from "react";
import { steps_exports as t } from "../../node_modules/@ark-ui/react/dist/components/steps/steps.js";
import { SerendieSymbolCheck as u } from "@serendie/symbols";
import { cx as h } from "../../styled-system/css/cx.js";
import { sva as b } from "../../styled-system/css/sva.js";
const S = b({
slots: [
"root",
"list",
"item",
"trigger",
"indicator",
"indicatorInner",
"checkIcon",
"number",
"separator",
"textContent",
"title",
"description"
],
base: {
root: {
display: "flex",
gap: "sd.system.dimension.spacing.none"
},
list: {
display: "flex",
gap: "sd.system.dimension.spacing.none"
},
separator: {
position: "absolute",
backgroundColor: "sd.system.color.component.outlineDim",
zIndex: 1,
"&[data-complete]": {
backgroundColor: "sd.system.color.impression.primary"
}
},
item: {
display: "flex",
position: "relative",
flex: "1"
},
trigger: {
display: "flex",
alignItems: "center",
gap: "sd.system.dimension.spacing.small",
background: "none",
border: "none",
cursor: "default",
padding: "sd.system.dimension.spacing.none",
position: "relative",
zIndex: 2
},
indicator: {
display: "flex",
alignItems: "center",
justifyContent: "center",
borderRadius: "sd.system.dimension.radius.full",
flexShrink: 0,
position: "relative",
zIndex: 3,
backgroundColor: "sd.system.color.component.surface"
},
indicatorInner: {
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "100%",
height: "100%",
borderRadius: "sd.system.dimension.radius.full",
color: "inherit"
},
checkIcon: {
width: "sd.system.dimension.spacing.medium",
height: "sd.system.dimension.spacing.medium"
},
number: {
fontWeight: "500"
},
textContent: {
display: "flex",
flexDirection: "column",
gap: "sd.system.dimension.spacing.extraSmall",
zIndex: 1
},
title: {
textStyle: "sd.system.typography.label.large_compact",
color: "sd.system.color.component.onSurface",
"[data-incomplete] &": {
color: "sd.system.color.interaction.disabledOnSurface"
}
},
description: {
textStyle: "sd.system.typography.label.small_compact",
color: "sd.system.color.component.onSurfaceVariant",
"[data-incomplete] &": {
color: "sd.system.color.interaction.disabledOnSurface"
}
}
},
variants: {
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"
}
}
}
}
},
compoundVariants: [
{
orientation: "horizontal",
size: "large",
css: {
separator: {
top: "sd.system.dimension.spacing.small",
left: "calc(50% + var(--spacing-sd-system-dimension-spacing-small))",
right: "calc(-50% + var(--spacing-sd-system-dimension-spacing-small))"
}
}
},
{
orientation: "horizontal",
size: "small",
css: {
separator: {
top: "calc(var(--spacing-sd-system-dimension-spacing-small) / 2 - var(--spacing-sd-reference-dimension-scale-1))",
left: "calc(50% + var(--spacing-sd-system-dimension-spacing-small) / 2)",
right: "calc(-50% + var(--spacing-sd-system-dimension-spacing-small) / 2)"
}
}
},
{
orientation: "vertical",
size: "large",
css: {
item: {
paddingBottom: "sd.system.dimension.spacing.twoExtraLarge"
},
trigger: {
alignItems: "flex-start",
gap: "sd.system.dimension.spacing.extraSmall"
},
textContent: {
paddingTop: "sd.system.dimension.spacing.twoExtraSmall"
},
separator: {
left: "calc(var(--spacing-sd-system-dimension-spacing-small) - 0.5px)",
top: "sd.system.dimension.spacing.small",
bottom: "-sd.system.dimension.spacing.large"
},
title: {
textStyle: "sd.system.typography.label.large_compact"
}
}
},
{
orientation: "vertical",
size: "small",
css: {
item: {
paddingBottom: "sd.system.dimension.spacing.extraLarge",
"--steps-indicator-size": "var(--spacing-sd-system-dimension-spacing-small)",
"--steps-indicator-offset": "var(--spacing-sd-system-dimension-spacing-large)"
},
trigger: {
alignItems: "flex-start",
gap: "sd.system.dimension.spacing.large"
},
indicator: {
marginTop: "var(--steps-indicator-offset)"
},
textContent: {
marginTop: "calc(var(--spacing-sd-system-dimension-spacing-large) + var(--spacing-sd-reference-dimension-scale-2))"
},
separator: {
left: "calc(var(--steps-indicator-size) / 2 - 0.5px)",
top: "calc(var(--steps-indicator-offset) + var(--steps-indicator-size) + var(--spacing-sd-system-dimension-spacing-twoExtraSmall))",
bottom: "calc(-1 * var(--steps-indicator-offset) + var(--spacing-sd-system-dimension-spacing-twoExtraSmall))"
},
title: {
textStyle: "sd.system.typography.label.large_compact"
}
}
}
],
defaultVariants: {
orientation: "horizontal",
type: "default",
size: "large"
}
}), v = x.forwardRef(
({ items: o, direction: c = "horizontal", type: a = "default", className: d, ...m }, p) => {
const g = a === "subtle" ? "small" : "large", l = c, e = S({ orientation: l, size: g, type: a });
return /* @__PURE__ */ s(
t.Root,
{
ref: p,
...m,
count: o.length,
orientation: l,
className: h(e.root, d),
children: /* @__PURE__ */ s(t.List, { className: e.list, children: o.map((n, i) => {
const y = i === o.length - 1;
return /* @__PURE__ */ r(t.Item, { index: i, className: e.item, children: [
/* @__PURE__ */ r(t.Trigger, { className: e.trigger, children: [
/* @__PURE__ */ s(t.Indicator, { className: e.indicator, children: /* @__PURE__ */ s("div", { className: e.indicatorInner, children: a !== "subtle" && /* @__PURE__ */ s(t.ItemContext, { children: (f) => f.completed ? /* @__PURE__ */ s(
u,
{
className: e.checkIcon
}
) : /* @__PURE__ */ s("span", { className: e.number, children: i + 1 }) }) }) }),
/* @__PURE__ */ r("div", { className: e.textContent, children: [
/* @__PURE__ */ s("div", { className: e.title, children: n.title }),
n.description && /* @__PURE__ */ s("div", { className: e.description, children: n.description })
] })
] }),
!y && /* @__PURE__ */ s(t.Separator, { className: e.separator })
] }, i);
}) })
}
);
}
);
v.displayName = "Steps";
export {
v as Steps,
S as stepsStyles
};