@vespera-ui/vue 0.1.0 → 0.4.0

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/index.ts
-import { defineComponent, h } from "vue";
+import { defineComponent, h, ref, useId } from "vue";
 var cx = (...parts) => parts.filter(Boolean).join(" ");
 var Button = defineComponent({
   name: "VspButton",
@@ -213,21 +213,1040 @@ var Checkbox = defineComponent({
     );
   }
 });
+var optValue = (o) => typeof o === "string" ? o : o.value;
+var optLabel = (o) => typeof o === "string" ? o : o.label;
+var Radio = defineComponent({
+  name: "VspRadio",
+  props: {
+    checked: Boolean,
+    label: { type: String, default: void 0 },
+    sub: { type: String, default: void 0 }
+  },
+  emits: ["select"],
+  setup(props, { emit }) {
+    return () => h(
+      "label",
+      {
+        class: "ui-opt",
+        onClick: (e) => {
+          e.preventDefault();
+          emit("select");
+        }
+      },
+      [
+        h("span", { class: cx("ui-radio-dot", props.checked && "on") }),
+        h("span", null, [
+          h("span", null, props.label),
+          props.sub ? h("span", { class: "ui-opt-sub" }, props.sub) : null
+        ])
+      ]
+    );
+  }
+});
+var RadioGroup = defineComponent({
+  name: "VspRadioGroup",
+  props: {
+    modelValue: { type: String, default: void 0 },
+    options: { type: Array, default: () => [] }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    return () => h(
+      "div",
+      { style: { display: "flex", flexDirection: "column", gap: "12px" } },
+      props.options.map(
+        (o) => h(Radio, {
+          key: optValue(o),
+          label: optLabel(o),
+          sub: typeof o === "object" ? o.sub : void 0,
+          checked: props.modelValue === optValue(o),
+          onSelect: () => emit("update:modelValue", optValue(o))
+        })
+      )
+    );
+  }
+});
+var Slider = defineComponent({
+  name: "VspSlider",
+  props: {
+    modelValue: { type: Number, default: 0 },
+    min: { type: Number, default: 0 },
+    max: { type: Number, default: 100 },
+    step: { type: Number, default: 1 }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    return () => h("input", {
+      type: "range",
+      class: "ui-slider",
+      value: props.modelValue,
+      min: props.min,
+      max: props.max,
+      step: props.step,
+      onInput: (e) => emit("update:modelValue", Number(e.target.value))
+    });
+  }
+});
+var NativeSelect = defineComponent({
+  name: "VspNativeSelect",
+  props: {
+    modelValue: { type: String, default: void 0 },
+    options: { type: Array, default: () => [] }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit, attrs }) {
+    return () => h(
+      "select",
+      {
+        class: "ui-select",
+        value: props.modelValue,
+        onChange: (e) => emit("update:modelValue", e.target.value),
+        ...attrs
+      },
+      props.options.map(
+        (o) => h("option", { key: optValue(o), value: optValue(o) }, optLabel(o))
+      )
+    );
+  }
+});
+var px = (v) => typeof v === "number" ? `${v}px` : v;
+var Progress = defineComponent({
+  name: "VspProgress",
+  props: {
+    value: { type: Number, default: 0 },
+    tone: { type: String, default: void 0 },
+    height: { type: Number, default: 6 }
+  },
+  setup(props) {
+    return () => h("div", { class: "meter", style: { height: px(props.height) } }, [
+      h("i", {
+        style: {
+          width: `${Math.min(100, props.value)}%`,
+          background: props.tone,
+          transition: "width .3s"
+        }
+      })
+    ]);
+  }
+});
+var Skeleton = defineComponent({
+  name: "VspSkeleton",
+  props: {
+    w: { type: [String, Number], default: "100%" },
+    h: { type: [String, Number], default: 12 },
+    r: { type: Number, default: 7 }
+  },
+  setup(props) {
+    return () => h("div", {
+      class: "skel",
+      style: { width: px(props.w), height: px(props.h), borderRadius: px(props.r) }
+    });
+  }
+});
+var initialsOf = (name) => name.split(" ").map((s) => s.charAt(0)).slice(0, 2).join("").toUpperCase();
+var Avatar = defineComponent({
+  name: "VspAvatar",
+  props: {
+    name: { type: String, required: true },
+    hue: { type: Number, default: 0 },
+    size: { type: Number, default: 34 }
+  },
+  setup(props) {
+    return () => h(
+      "span",
+      {
+        class: "vsp-avatar",
+        style: {
+          width: px(props.size),
+          height: px(props.size),
+          fontSize: px(props.size * 0.38),
+          background: `linear-gradient(140deg, oklch(0.62 0.16 ${props.hue}), oklch(0.55 0.17 ${(props.hue + 50) % 360}))`
+        }
+      },
+      initialsOf(props.name)
+    );
+  }
+});
+var AvatarGroup = defineComponent({
+  name: "VspAvatarGroup",
+  props: {
+    people: { type: Array, default: () => [] },
+    max: { type: Number, default: 4 },
+    size: { type: Number, default: 32 }
+  },
+  setup(props) {
+    return () => {
+      const shown = props.people.slice(0, props.max);
+      const extra = props.people.length - shown.length;
+      return h("div", { style: { display: "flex", alignItems: "center" } }, [
+        ...shown.map(
+          (p, i) => h(
+            "span",
+            {
+              key: i,
+              style: {
+                marginLeft: i ? "-10px" : "0",
+                border: "2px solid var(--surface-1)",
+                borderRadius: "50%",
+                position: "relative",
+                zIndex: shown.length - i
+              }
+            },
+            [h(Avatar, { name: p.name, hue: p.hue ?? 0, size: props.size })]
+          )
+        ),
+        extra > 0 ? h(
+          "span",
+          {
+            style: {
+              marginLeft: "-10px",
+              width: px(props.size),
+              height: px(props.size),
+              borderRadius: "50%",
+              display: "grid",
+              placeItems: "center",
+              background: "var(--surface-3)",
+              border: "2px solid var(--surface-1)",
+              fontSize: px(props.size * 0.34),
+              fontWeight: 700,
+              color: "var(--text-dim)"
+            }
+          },
+          `+${extra}`
+        ) : null
+      ]);
+    };
+  }
+});
+var Segmented = defineComponent({
+  name: "VspSegmented",
+  props: {
+    modelValue: { type: String, default: void 0 },
+    options: { type: Array, default: () => [] }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    return () => h(
+      "div",
+      { class: "ui-seg" },
+      props.options.map(
+        (o) => h(
+          "button",
+          {
+            key: o,
+            type: "button",
+            class: cx(props.modelValue === o && "on"),
+            onClick: () => emit("update:modelValue", o)
+          },
+          o
+        )
+      )
+    );
+  }
+});
+var ICON_PATHS = { chevL: "M15 18l-6-6 6-6", chevR: "M9 18l6-6-6-6", check: "M20 6L9 17l-5-5" };
+var svgIcon = (d, size = 14) => h(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: size,
+    height: size,
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": 2,
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  },
+  [h("path", { d })]
+);
+var Tabs = defineComponent({
+  name: "VspTabs",
+  props: {
+    tabs: { type: Array, default: () => [] },
+    modelValue: { type: String, default: void 0 }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit, slots }) {
+    return () => h("div", { class: "ui-tabs", style: { alignItems: "center" } }, [
+      ...props.tabs.map((t) => {
+        const id = typeof t === "string" ? t : t.value;
+        const label = typeof t === "string" ? t : t.label;
+        const count = typeof t === "object" ? t.count : void 0;
+        return h(
+          "button",
+          {
+            key: id,
+            type: "button",
+            class: cx("ui-tab", props.modelValue === id && "on"),
+            onClick: () => emit("update:modelValue", id)
+          },
+          [
+            label,
+            count != null ? h("span", { class: "badge badge-muted", style: { marginLeft: "7px" } }, count) : null
+          ]
+        );
+      }),
+      slots.right ? h("div", { style: { flex: 1 } }) : null,
+      slots.right?.()
+    ]);
+  }
+});
+var Breadcrumb = defineComponent({
+  name: "VspBreadcrumb",
+  props: { items: { type: Array, default: () => [] } },
+  setup(props) {
+    return () => h(
+      "nav",
+      { style: { display: "flex", alignItems: "center", gap: "7px", fontSize: "12.5px" } },
+      props.items.flatMap((it, i) => {
+        const last = i === props.items.length - 1;
+        return [
+          i > 0 ? h(
+            "span",
+            { key: `s${i}`, style: { color: "var(--text-faint)", display: "flex" } },
+            [svgIcon(ICON_PATHS.chevR, 13)]
+          ) : null,
+          h(
+            "span",
+            {
+              key: i,
+              style: {
+                color: last ? "var(--text)" : "var(--text-dim)",
+                fontWeight: last ? 600 : 500
+              }
+            },
+            it
+          )
+        ];
+      })
+    );
+  }
+});
+var Pagination = defineComponent({
+  name: "VspPagination",
+  props: {
+    modelValue: { type: Number, default: 0 },
+    pages: { type: Number, default: 1 }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    return () => {
+      const page = props.modelValue;
+      const nums = [];
+      for (let i = 0; i < props.pages; i++) {
+        if (i === 0 || i === props.pages - 1 || Math.abs(i - page) <= 1) nums.push(i);
+        else if (nums[nums.length - 1] !== "\u2026") nums.push("\u2026");
+      }
+      return h("div", { style: { display: "flex", gap: "4px", alignItems: "center" } }, [
+        h(
+          "button",
+          {
+            type: "button",
+            class: "btn btn-ghost btn-sm",
+            disabled: page === 0,
+            "aria-label": "Previous page",
+            onClick: () => emit("update:modelValue", page - 1)
+          },
+          [svgIcon(ICON_PATHS.chevL)]
+        ),
+        ...nums.map(
+          (n, i) => n === "\u2026" ? h(
+            "span",
+            {
+              key: `g${i}`,
+              class: "mono",
+              style: { padding: "0 6px", color: "var(--text-faint)" }
+            },
+            "\u2026"
+          ) : h(
+            "button",
+            {
+              key: n,
+              type: "button",
+              class: cx("btn", "btn-sm", n === page ? "btn-primary" : "btn-subtle"),
+              style: { minWidth: "32px", padding: 0 },
+              onClick: () => emit("update:modelValue", n)
+            },
+            n + 1
+          )
+        ),
+        h(
+          "button",
+          {
+            type: "button",
+            class: "btn btn-ghost btn-sm",
+            disabled: page >= props.pages - 1,
+            "aria-label": "Next page",
+            onClick: () => emit("update:modelValue", page + 1)
+          },
+          [svgIcon(ICON_PATHS.chevR)]
+        )
+      ]);
+    };
+  }
+});
+var Stepper = defineComponent({
+  name: "VspStepper",
+  props: {
+    steps: { type: Array, default: () => [] },
+    current: { type: Number, default: 0 }
+  },
+  setup(props) {
+    return () => h(
+      "div",
+      { class: "ui-steps" },
+      props.steps.flatMap((s, i) => [
+        i > 0 ? h("div", { key: `b${i}`, class: cx("ui-step-bar", i <= props.current && "done") }) : null,
+        h(
+          "div",
+          {
+            key: i,
+            class: cx(
+              "ui-step",
+              i < props.current && "done",
+              i === props.current && "active",
+              i > props.current && "pending"
+            )
+          },
+          [
+            h("span", { class: "ui-step-dot" }, [
+              i < props.current ? svgIcon(ICON_PATHS.check) : i + 1
+            ]),
+            h("span", { class: "ui-step-label" }, s)
+          ]
+        )
+      ])
+    );
+  }
+});
+var CircularProgress = defineComponent({
+  name: "VspCircularProgress",
+  props: {
+    value: { type: Number, default: 0 },
+    size: { type: Number, default: 76 },
+    thickness: { type: Number, default: 7 },
+    color: { type: String, default: "var(--accent)" },
+    label: { type: String, default: void 0 }
+  },
+  setup(props) {
+    return () => {
+      const r = (props.size - props.thickness) / 2;
+      const circ = 2 * Math.PI * r;
+      return h(
+        "div",
+        { style: { position: "relative", width: px(props.size), height: px(props.size) } },
+        [
+          h(
+            "svg",
+            { width: props.size, height: props.size, style: { transform: "rotate(-90deg)" } },
+            [
+              h("circle", {
+                cx: props.size / 2,
+                cy: props.size / 2,
+                r,
+                fill: "none",
+                stroke: "var(--surface-3)",
+                "stroke-width": props.thickness
+              }),
+              h("circle", {
+                cx: props.size / 2,
+                cy: props.size / 2,
+                r,
+                fill: "none",
+                stroke: props.color,
+                "stroke-width": props.thickness,
+                "stroke-linecap": "round",
+                "stroke-dasharray": circ,
+                "stroke-dashoffset": circ * (1 - Math.min(100, props.value) / 100),
+                style: { transition: "stroke-dashoffset .5s cubic-bezier(.3,.7,.3,1)" }
+              })
+            ]
+          ),
+          h(
+            "div",
+            {
+              class: "tnum",
+              style: {
+                position: "absolute",
+                inset: 0,
+                display: "grid",
+                placeItems: "center",
+                fontWeight: 800,
+                fontSize: px(props.size * 0.24)
+              }
+            },
+            props.label ?? `${Math.round(props.value)}%`
+          )
+        ]
+      );
+    };
+  }
+});
+var Stat = defineComponent({
+  name: "VspStat",
+  props: {
+    label: { type: String, default: void 0 },
+    value: { type: String, default: void 0 },
+    delta: { type: String, default: void 0 },
+    deltaDir: { type: String, default: "up" },
+    tone: { type: String, default: "var(--accent)" }
+  },
+  setup(props, { slots }) {
+    return () => h(
+      "div",
+      { class: "card card-pad", style: { display: "flex", alignItems: "center", gap: "13px" } },
+      [
+        slots.icon ? h(
+          "span",
+          {
+            style: {
+              width: "38px",
+              height: "38px",
+              borderRadius: "var(--r-sm)",
+              flexShrink: 0,
+              display: "grid",
+              placeItems: "center",
+              background: `color-mix(in oklab, ${props.tone} 14%, transparent)`,
+              color: props.tone
+            }
+          },
+          slots.icon()
+        ) : null,
+        h("div", { style: { minWidth: 0 } }, [
+          h("div", { class: "eyebrow" }, props.label),
+          h(
+            "div",
+            { style: { display: "flex", alignItems: "baseline", gap: "8px", marginTop: "3px" } },
+            [
+              h(
+                "span",
+                {
+                  class: "tnum",
+                  style: { fontSize: "22px", fontWeight: 800, letterSpacing: "-.02em" }
+                },
+                props.value
+              ),
+              props.delta != null ? h(
+                "span",
+                {
+                  class: cx("badge", props.deltaDir === "up" ? "badge-pos" : "badge-neg"),
+                  style: { padding: "1px 6px" }
+                },
+                [
+                  svgIcon(
+                    props.deltaDir === "up" ? "M12 19V5M5 12l7-7 7 7" : "M12 5v14M5 12l7 7 7-7",
+                    10
+                  ),
+                  props.delta
+                ]
+              ) : null
+            ]
+          )
+        ])
+      ]
+    );
+  }
+});
+var clockSvg = (size = 14) => h(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: size,
+    height: size,
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": 2,
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  },
+  [h("circle", { cx: 12, cy: 12, r: 9 }), h("path", { d: "M12 7v5l3 2" })]
+);
+var TL_TONE = {
+  pos: "var(--success)",
+  neg: "var(--danger)",
+  warn: "var(--warning)",
+  info: "var(--accent)"
+};
+var Timeline = defineComponent({
+  name: "VspTimeline",
+  props: { items: { type: Array, default: () => [] } },
+  setup(props) {
+    return () => h(
+      "div",
+      { class: "ui-tl" },
+      props.items.map((it, i) => {
+        const c = it.tone ? TL_TONE[it.tone] : void 0;
+        return h("div", { key: i, class: "ui-tl-item" }, [
+          h(
+            "span",
+            {
+              class: "ui-tl-dot",
+              style: c ? {
+                background: `color-mix(in oklab, ${c} 14%, transparent)`,
+                color: c,
+                borderColor: `color-mix(in oklab, ${c} 30%, transparent)`
+              } : void 0
+            },
+            [clockSvg()]
+          ),
+          h("div", { class: "ui-tl-body" }, [
+            h(
+              "div",
+              {
+                style: { display: "flex", alignItems: "baseline", gap: "8px", flexWrap: "wrap" }
+              },
+              [
+                h("span", { style: { fontWeight: 600, fontSize: "13.5px" } }, it.title),
+                it.time ? h("span", { class: "eyebrow", style: { marginLeft: "auto" } }, it.time) : null
+              ]
+            ),
+            it.body ? h(
+              "div",
+              { style: { fontSize: "12.5px", color: "var(--text-dim)", marginTop: "3px" } },
+              it.body
+            ) : null
+          ])
+        ]);
+      })
+    );
+  }
+});
+var DescriptionList = defineComponent({
+  name: "VspDescriptionList",
+  props: { items: { type: Array, default: () => [] } },
+  setup(props) {
+    return () => h(
+      "dl",
+      { class: "ui-dl" },
+      props.items.flatMap(([k, v], i) => {
+        const last = i === props.items.length - 1 ? "last" : "";
+        return [
+          h("dt", { key: `k${i}`, class: last }, k),
+          h("dd", { key: `v${i}`, class: last }, v)
+        ];
+      })
+    );
+  }
+});
+var BANNER_ICON = {
+  info: "M12 3l1.6 5L19 9.6l-5 1.6L12 16l-1.6-4.8L5 9.6l5.4-1.6z",
+  warn: "M18 8a6 6 0 00-12 0c0 7-3 9-3 9h18s-3-2-3-9",
+  accent: "M13 2L3 14h9l-1 8 10-12h-9l1-8z"
+};
+var X_PATH = "M18 6L6 18M6 6l12 12";
+var INBOX_PATH = "M22 12h-6l-2 3h-4l-2-3H2M5.45 5.11L2 12v6a2 2 0 002 2h16a2 2 0 002-2v-6l-3.45-6.89A2 2 0 0016.76 4H7.24a2 2 0 00-1.79 1.11z";
+var Banner = defineComponent({
+  name: "VspBanner",
+  props: {
+    tone: { type: String, default: "info" },
+    dismissible: Boolean
+  },
+  emits: ["dismiss"],
+  setup(props, { slots, emit }) {
+    return () => h("div", { class: cx("ui-banner", props.tone) }, [
+      slots.icon ? slots.icon() : svgIcon(BANNER_ICON[props.tone], 18),
+      h("div", { style: { flex: 1, fontSize: "13px", fontWeight: 500 } }, slots.default?.()),
+      slots.action?.(),
+      props.dismissible ? h(
+        "button",
+        {
+          type: "button",
+          class: "ui-banner-x",
+          "aria-label": "Dismiss",
+          onClick: () => emit("dismiss")
+        },
+        [svgIcon(X_PATH, 15)]
+      ) : null
+    ]);
+  }
+});
+var EmptyState = defineComponent({
+  name: "VspEmptyState",
+  props: {
+    title: { type: String, default: void 0 },
+    desc: { type: String, default: void 0 },
+    compact: Boolean
+  },
+  setup(props, { slots }) {
+    return () => h(
+      "div",
+      {
+        style: {
+          display: "grid",
+          placeItems: "center",
+          textAlign: "center",
+          padding: props.compact ? "32px 20px" : "56px 24px"
+        }
+      },
+      [
+        h("div", { style: { maxWidth: "340px" } }, [
+          h(
+            "span",
+            {
+              style: {
+                width: "56px",
+                height: "56px",
+                borderRadius: "16px",
+                display: "grid",
+                placeItems: "center",
+                margin: "0 auto 18px",
+                background: "color-mix(in oklab, var(--accent) 12%, transparent)",
+                color: "var(--accent)",
+                border: "1px solid color-mix(in oklab, var(--accent) 22%, transparent)"
+              }
+            },
+            slots.icon ? slots.icon() : [svgIcon(INBOX_PATH, 26)]
+          ),
+          h("div", { style: { fontSize: "17px", fontWeight: 700 } }, props.title),
+          props.desc ? h(
+            "p",
+            {
+              style: {
+                margin: "7px 0 0",
+                color: "var(--text-dim)",
+                fontSize: "13.5px",
+                lineHeight: 1.6
+              }
+            },
+            props.desc
+          ) : null,
+          slots.action ? h(
+            "div",
+            {
+              style: {
+                marginTop: "20px",
+                display: "flex",
+                gap: "8px",
+                justifyContent: "center"
+              }
+            },
+            slots.action()
+          ) : null
+        ])
+      ]
+    );
+  }
+});
+var Accordion = defineComponent({
+  name: "VspAccordion",
+  props: {
+    items: { type: Array, default: () => [] },
+    multiple: Boolean,
+    defaultOpen: { type: Array, default: () => [] }
+  },
+  setup(props) {
+    const open = ref(new Set(props.defaultOpen));
+    const toggle = (i) => {
+      const s = open.value;
+      const n = new Set(props.multiple ? s : []);
+      if (s.has(i)) n.delete(i);
+      else n.add(i);
+      open.value = n;
+    };
+    return () => h(
+      "div",
+      { class: "ui-acc" },
+      props.items.map(
+        (it, i) => h("div", { key: i, class: cx("ui-acc-item", open.value.has(i) && "open") }, [
+          h("button", { type: "button", class: "ui-acc-head", onClick: () => toggle(i) }, [
+            it.title,
+            h(
+              "svg",
+              {
+                class: "chev",
+                viewBox: "0 0 24 24",
+                width: 17,
+                height: 17,
+                fill: "none",
+                stroke: "currentColor",
+                "stroke-width": 2,
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round"
+              },
+              [h("path", { d: ICON_PATHS.chevR })]
+            )
+          ]),
+          h("div", { class: "ui-acc-bodywrap" }, [
+            h("div", null, [h("div", { class: "ui-acc-body" }, it.body)])
+          ])
+        ])
+      )
+    );
+  }
+});
+function smoothPath(pts) {
+  if (pts.length < 2) return "";
+  let d = `M ${pts[0][0]} ${pts[0][1]}`;
+  for (let i = 0; i < pts.length - 1; i++) {
+    const [x0, y0] = pts[i];
+    const [x1, y1] = pts[i + 1];
+    const cx2 = (x0 + x1) / 2;
+    d += ` C ${cx2} ${y0} ${cx2} ${y1} ${x1} ${y1}`;
+  }
+  return d;
+}
+var Sparkline = defineComponent({
+  name: "VspSparkline",
+  props: {
+    data: { type: Array, default: () => [] },
+    color: { type: String, default: "var(--accent)" },
+    w: { type: Number, default: 110 },
+    h: { type: Number, default: 34 },
+    fill: { type: Boolean, default: true }
+  },
+  setup(props) {
+    const gid = "spk" + useId().replace(/[^a-zA-Z0-9]/g, "");
+    return () => {
+      const data = props.data;
+      const min = Math.min(...data);
+      const max = Math.max(...data);
+      const rng = max - min || 1;
+      const pts = data.map((v, i) => [
+        i / (data.length - 1) * props.w,
+        props.h - 3 - (v - min) / rng * (props.h - 6)
+      ]);
+      const d = smoothPath(pts);
+      const last = pts[pts.length - 1] ?? [0, 0];
+      return h(
+        "svg",
+        {
+          width: props.w,
+          height: props.h,
+          viewBox: `0 0 ${props.w} ${props.h}`,
+          style: { display: "block", overflow: "visible" }
+        },
+        [
+          props.fill ? h("defs", null, [
+            h("linearGradient", { id: gid, x1: "0", x2: "0", y1: "0", y2: "1" }, [
+              h("stop", { offset: "0", "stop-color": props.color, "stop-opacity": "0.28" }),
+              h("stop", { offset: "1", "stop-color": props.color, "stop-opacity": "0" })
+            ])
+          ]) : null,
+          props.fill ? h("path", {
+            d: `${d} L ${props.w} ${props.h} L 0 ${props.h} Z`,
+            fill: `url(#${gid})`
+          }) : null,
+          h("path", {
+            d,
+            fill: "none",
+            stroke: props.color,
+            "stroke-width": "2",
+            "stroke-linecap": "round"
+          }),
+          h("circle", { cx: last[0], cy: last[1], r: "2.6", fill: props.color })
+        ]
+      );
+    };
+  }
+});
+var Donut = defineComponent({
+  name: "VspDonut",
+  props: {
+    data: { type: Array, default: () => [] },
+    size: { type: Number, default: 168 },
+    thickness: { type: Number, default: 22 }
+  },
+  setup(props) {
+    return () => {
+      const total = props.data.reduce((s, d) => s + d.value, 0) || 1;
+      const r = (props.size - props.thickness) / 2;
+      const c = props.size / 2;
+      const circ = 2 * Math.PI * r;
+      let acc = 0;
+      const segs = props.data.map((d, i) => {
+        const len = d.value / total * circ;
+        const seg = h("circle", {
+          key: i,
+          cx: c,
+          cy: c,
+          r,
+          fill: "none",
+          stroke: d.color,
+          "stroke-width": props.thickness,
+          "stroke-dasharray": `${len - 2.5} ${circ - len + 2.5}`,
+          "stroke-dashoffset": -acc,
+          "stroke-linecap": "round"
+        });
+        acc += len;
+        return seg;
+      });
+      return h("div", { style: { display: "flex", alignItems: "center", gap: "22px" } }, [
+        h(
+          "svg",
+          {
+            width: props.size,
+            height: props.size,
+            style: { transform: "rotate(-90deg)", flexShrink: 0 }
+          },
+          [
+            h("circle", {
+              cx: c,
+              cy: c,
+              r,
+              fill: "none",
+              stroke: "var(--surface-3)",
+              "stroke-width": props.thickness
+            }),
+            ...segs
+          ]
+        ),
+        h(
+          "div",
+          { style: { display: "flex", flexDirection: "column", gap: "9px", flex: 1 } },
+          props.data.map(
+            (d, i) => h(
+              "div",
+              {
+                key: i,
+                style: { display: "flex", alignItems: "center", gap: "9px", fontSize: "12.5px" }
+              },
+              [
+                h("i", {
+                  style: {
+                    width: "9px",
+                    height: "9px",
+                    borderRadius: "3px",
+                    background: d.color,
+                    flexShrink: 0
+                  }
+                }),
+                h("span", { style: { color: "var(--text-dim)", flex: 1 } }, d.label),
+                h(
+                  "span",
+                  { class: "mono tnum", style: { fontWeight: 600 } },
+                  `${Math.round(d.value / total * 100)}%`
+                )
+              ]
+            )
+          )
+        )
+      ]);
+    };
+  }
+});
+var StatCard = defineComponent({
+  name: "VspStatCard",
+  props: {
+    label: { type: String, default: void 0 },
+    value: { type: String, default: void 0 },
+    delta: { type: String, default: void 0 },
+    deltaDir: { type: String, default: "up" },
+    spark: { type: Array, default: void 0 },
+    sparkColor: { type: String, default: "var(--accent)" }
+  },
+  setup(props, { slots }) {
+    return () => h(
+      "div",
+      {
+        class: "card card-pad vsp-rise",
+        style: { display: "flex", flexDirection: "column", gap: "14px" }
+      },
+      [
+        h(
+          "div",
+          { style: { display: "flex", alignItems: "center", justifyContent: "space-between" } },
+          [
+            h("div", { style: { display: "flex", alignItems: "center", gap: "10px" } }, [
+              h(
+                "span",
+                {
+                  style: {
+                    width: "34px",
+                    height: "34px",
+                    borderRadius: "var(--r-sm)",
+                    display: "grid",
+                    placeItems: "center",
+                    background: "color-mix(in oklab, var(--accent) 13%, transparent)",
+                    color: "var(--accent)"
+                  }
+                },
+                slots.icon?.()
+              ),
+              h("span", { class: "eyebrow" }, props.label)
+            ]),
+            props.delta != null ? h(
+              "span",
+              { class: cx("badge", props.deltaDir === "up" ? "badge-pos" : "badge-neg") },
+              [
+                svgIcon(
+                  props.deltaDir === "up" ? "M12 19V5M5 12l7-7 7 7" : "M12 5v14M5 12l7 7 7-7",
+                  11
+                ),
+                props.delta
+              ]
+            ) : null
+          ]
+        ),
+        h(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "flex-end",
+              justifyContent: "space-between",
+              gap: "12px"
+            }
+          },
+          [
+            h(
+              "div",
+              {
+                class: "tnum",
+                style: {
+                  fontSize: "30px",
+                  fontWeight: 800,
+                  letterSpacing: "-.02em",
+                  lineHeight: 1
+                }
+              },
+              props.value
+            ),
+            props.spark ? h(Sparkline, { data: props.spark, color: props.sparkColor }) : null
+          ]
+        )
+      ]
+    );
+  }
+});
 export {
+  Accordion,
   Alert,
+  Avatar,
+  AvatarGroup,
   Badge,
+  Banner,
+  Breadcrumb,
   Button,
   Card,
   CardHead,
   Checkbox,
+  CircularProgress,
+  DescriptionList,
   Divider,
+  Donut,
+  EmptyState,
   Field,
   IconButton,
   Input,
   Kbd,
+  NativeSelect,
+  Pagination,
+  Progress,
+  Radio,
+  RadioGroup,
+  Segmented,
+  Skeleton,
+  Slider,
+  Sparkline,
   Spinner,
+  Stat,
+  StatCard,
+  Stepper,
   Switch,
+  Tabs,
   Tag,
-  Textarea
+  Textarea,
+  Timeline,
+  smoothPath
 };
 //# sourceMappingURL=index.js.map