@drivy/cobalt
Version:
Opinionated design system for Drivy's projects.
46 lines (45 loc) • 2.02 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { Steps } from "@ark-ui/react/steps";
import classnames from "classnames";
const Steps_Steps = ({ items })=>/*#__PURE__*/ jsx(Steps.Root, {
className: "cobalt-steps",
count: items.length,
orientation: "vertical",
children: items.map((item, index)=>{
const itemKey = index;
return /*#__PURE__*/ jsxs(Steps.Item, {
index: index,
className: classnames("cobalt-steps__item", {
"cobalt-steps__item--important": item.important
}),
children: [
/*#__PURE__*/ jsxs("div", {
className: "cobalt-steps__item__wrapper",
children: [
/*#__PURE__*/ jsx(Steps.Indicator, {
className: "cobalt-steps__item__indicator"
}),
/*#__PURE__*/ jsxs("div", {
className: "cobalt-steps__item__content",
children: [
/*#__PURE__*/ jsx("div", {
className: "cobalt-steps__item__label",
children: item.label
}),
/*#__PURE__*/ jsx("div", {
className: "cobalt-steps__item__description",
children: item.description
})
]
})
]
}),
/*#__PURE__*/ jsx(Steps.Separator, {
className: "cobalt-steps__item__separator"
})
]
}, itemKey);
})
});
export { Steps_Steps as Steps };
//# sourceMappingURL=index.js.map