export let widget_button_group = (b) => {
let w = attr_or(b, "width", 240)
let h = attr_or(b, "height", 34)
let items_str = attr_or(b, "items", "One,Two,Three")
let active = attr_or(b, "active_index", 0)
let items = split(",", items_str)
let n = len(items)
let item_w = w / n
let bg_fill = attr_or(b, "background_fill", "var(--color-nav-bg)")
let active_fill = attr_or(b, "active_fill", "var(--color-link)")
let border_stroke = attr_or(b, "border_stroke", "var(--color-nav-border)")
let label_fill = attr_or(b, "label_fill", "currentColor")
let active_label_fill = attr_or(b, "active_label_fill", "#fff")
let radius = attr_or(b, "radius", 6)
let border_width = attr_or(b, "border_width", 1)
let separators = map(range(1, n), (i) => {
kind = "line",
x1 = i * item_w,
y1 = 0,
x2 = i * item_w,
y2 = h,
stroke = border_stroke,
stroke_width = 1
})
let active_bg = active >= 0 ? [{ kind = "rect", x = active * item_w, y = 0,
width = item_w, height = h, rx = radius, fill = active_fill }] : []
let labels = map(range(0, n), (i) => {
kind = "text",
x = i * item_w,
y = 0,
width = item_w,
height = h,
content = trim(items[i]),
font_size = 12,
fill = i == active ? active_label_fill : label_fill
})
concat(concat(concat([
{ kind = "rect", x = 0, y = 0, width = w, height = h, rx = radius,
fill = bg_fill, stroke = border_stroke, stroke_width = border_width }
], active_bg), separators), labels)
}