@volksverpetzer/ui-web 0.2.0 → 0.3.0

package/dist/ProgressBar.css

@@ -0,0 +1,82 @@
+.vvp-ui-progress {
+  width: 100%;
+  text-align: center;
+}
+
+.vvp-ui-progress__amounts {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: var(--vvp-spacing-sm, 8px);
+  margin-bottom: var(--vvp-spacing-sm, 8px);
+  flex-wrap: wrap;
+}
+
+.vvp-ui-progress__total {
+  font-weight: 700;
+  font-size: var(--vvp-font-size-xxl, 24px);
+  line-height: 1.2;
+}
+
+.vvp-ui-progress__goal {
+  font-size: var(--vvp-font-size-sm, 14px);
+  color: var(--vvp-text-muted, #666);
+}
+
+.vvp-ui-progress__track-row {
+  display: flex;
+  flex-wrap: nowrap;
+  width: 100%;
+  gap: 0;
+}
+
+.vvp-ui-progress__step {
+  display: flex;
+  flex-direction: column;
+  gap: var(--vvp-spacing-xs, 4px);
+  min-width: 0;
+}
+
+.vvp-ui-progress__track {
+  width: 100%;
+  height: 24px;
+  background: var(--vvp-surface-disabled, #ddd);
+  border: 1px solid var(--vvp-surface-input, #badde8);
+  overflow: hidden;
+  position: relative;
+}
+
+.vvp-ui-progress__step:first-child .vvp-ui-progress__track {
+  border-top-left-radius: var(--vvp-radius-full, 9999px);
+  border-bottom-left-radius: var(--vvp-radius-full, 9999px);
+}
+
+.vvp-ui-progress__step:last-child .vvp-ui-progress__track {
+  border-top-right-radius: var(--vvp-radius-full, 9999px);
+  border-bottom-right-radius: var(--vvp-radius-full, 9999px);
+}
+
+.vvp-ui-progress__step + .vvp-ui-progress__step .vvp-ui-progress__track {
+  border-left: 0;
+}
+
+.vvp-ui-progress__fill {
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(120deg, var(--vvp-accent, #db2685), color-mix(in srgb, var(--vvp-accent, #db2685) 85%, black));
+  transition: width 300ms ease-out;
+}
+
+.vvp-ui-progress__step-label {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 2px;
+  font-size: var(--vvp-font-size-sm, 14px);
+  color: var(--vvp-text-muted, #666);
+  text-align: right;
+}
+
+.vvp-ui-progress__step-label strong {
+  color: var(--vvp-text, #111);
+}

package/dist/ProgressBar.d.ts

@@ -0,0 +1,23 @@
+import type { HTMLAttributes } from "react";
+import "./ProgressBar.css";
+export interface ProgressBarMilestone {
+    value: number;
+    label: string;
+}
+export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
+    total: number;
+    goal: number;
+    /**
+     * Stretch goals to render as separate segments, e.g. for a campaign with
+     * multiple funding tiers. Omit (or pass a single entry) for a plain bar
+     * with one segment running from 0 to `goal` — the common case.
+     */
+    milestones?: ProgressBarMilestone[];
+}
+/**
+ * Campaign donation progress bar — one segment by default (0 to `goal`), or
+ * multiple stacked segments when `milestones` has more than one entry.
+ * Styled off the `--vvp-*` custom properties emitted by
+ * `@volksverpetzer/design-tokens`, same as the other components here.
+ */
+export declare function ProgressBar({ total, goal, milestones, className, ...rest }: ProgressBarProps): import("react").JSX.Element;

package/dist/ProgressBar.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./ProgressBar.css";
+const formatEuro = (value) => value.toLocaleString("de-DE", { minimumFractionDigits: 0, maximumFractionDigits: 0 }) + " €";
+/**
+ * Campaign donation progress bar — one segment by default (0 to `goal`), or
+ * multiple stacked segments when `milestones` has more than one entry.
+ * Styled off the `--vvp-*` custom properties emitted by
+ * `@volksverpetzer/design-tokens`, same as the other components here.
+ */
+export function ProgressBar({ total, goal, milestones, className, ...rest }) {
+    const steps = milestones && milestones.length > 1 ? [...milestones].sort((a, b) => a.value - b.value) : [{ value: goal, label: "" }];
+    const isSingleStep = steps.length === 1;
+    const target = steps[steps.length - 1].value;
+    const segments = steps.map((step, index) => {
+        const start = index === 0 ? 0 : steps[index - 1].value;
+        const range = step.value - start;
+        const filled = Math.min(Math.max(total - start, 0), range);
+        const percent = range > 0 ? Math.min(100, (filled / range) * 100) : 0;
+        const width = target > 0 ? (range / target) * 100 : 0;
+        return { ...step, start, range, filled, percent, width };
+    });
+    const classes = ["vvp-ui-progress", className].filter(Boolean).join(" ");
+    return (_jsxs("div", { className: classes, ...rest, children: [isSingleStep ? (_jsxs("div", { className: "vvp-ui-progress__amounts", children: [_jsx("span", { className: "vvp-ui-progress__total", children: formatEuro(total) }), _jsxs("span", { className: "vvp-ui-progress__goal", children: [" von ", formatEuro(goal)] })] })) : null, _jsx("div", { className: "vvp-ui-progress__track-row", role: "group", "aria-label": "Spendenfortschritt", children: segments.map((segment, index) => {
+                    const valueNow = Math.min(Math.max(total, segment.start), segment.value);
+                    return (_jsxs("div", { className: "vvp-ui-progress__step", style: { flexBasis: `${segment.width}%`, flexGrow: segment.width, flexShrink: 0 }, children: [_jsx("div", { className: "vvp-ui-progress__track", role: "progressbar", "aria-valuemin": segment.start, "aria-valuemax": segment.value, "aria-valuenow": valueNow, "aria-valuetext": isSingleStep
+                                    ? `${formatEuro(total)} von ${formatEuro(goal)}`
+                                    : `${formatEuro(total)} insgesamt gesammelt, ${formatEuro(segment.filled)} von ${formatEuro(segment.range)} für „${segment.label}“`, "aria-label": isSingleStep
+                                    ? `${formatEuro(total)} von ${formatEuro(goal)} gesammelt`
+                                    : `${segment.label} (${formatEuro(segment.value)})`, children: _jsx("div", { className: "vvp-ui-progress__fill", style: { width: `${segment.percent}%` } }) }), !isSingleStep ? (_jsxs("div", { className: "vvp-ui-progress__step-label", children: [_jsx("strong", { children: segment.label }), _jsx("span", { children: formatEuro(segment.value) })] })) : null] }, `${segment.value}-${index}`));
+                }) })] }));
+}

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export { Button, type ButtonProps, type ButtonVariant, type ButtonSize } from "./Button";
 export { Badge, type BadgeProps, type BadgeVariant } from "./Badge";
 export { Card, type CardProps } from "./Card";
+export { ProgressBar, type ProgressBarProps, type ProgressBarMilestone } from "./ProgressBar";

package/dist/index.js

@@ -1,3 +1,4 @@
 export { Button } from "./Button";
 export { Badge } from "./Badge";
 export { Card } from "./Card";
+export { ProgressBar } from "./ProgressBar";

package/dist/styles.css

@@ -117,3 +117,86 @@
   border: 1px solid var(--vvp-surface-input, #badde8);
 }
 
+.vvp-ui-progress {
+  width: 100%;
+  text-align: center;
+}
+
+.vvp-ui-progress__amounts {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: var(--vvp-spacing-sm, 8px);
+  margin-bottom: var(--vvp-spacing-sm, 8px);
+  flex-wrap: wrap;
+}
+
+.vvp-ui-progress__total {
+  font-weight: 700;
+  font-size: var(--vvp-font-size-xxl, 24px);
+  line-height: 1.2;
+}
+
+.vvp-ui-progress__goal {
+  font-size: var(--vvp-font-size-sm, 14px);
+  color: var(--vvp-text-muted, #666);
+}
+
+.vvp-ui-progress__track-row {
+  display: flex;
+  flex-wrap: nowrap;
+  width: 100%;
+  gap: 0;
+}
+
+.vvp-ui-progress__step {
+  display: flex;
+  flex-direction: column;
+  gap: var(--vvp-spacing-xs, 4px);
+  min-width: 0;
+}
+
+.vvp-ui-progress__track {
+  width: 100%;
+  height: 24px;
+  background: var(--vvp-surface-disabled, #ddd);
+  border: 1px solid var(--vvp-surface-input, #badde8);
+  overflow: hidden;
+  position: relative;
+}
+
+.vvp-ui-progress__step:first-child .vvp-ui-progress__track {
+  border-top-left-radius: var(--vvp-radius-full, 9999px);
+  border-bottom-left-radius: var(--vvp-radius-full, 9999px);
+}
+
+.vvp-ui-progress__step:last-child .vvp-ui-progress__track {
+  border-top-right-radius: var(--vvp-radius-full, 9999px);
+  border-bottom-right-radius: var(--vvp-radius-full, 9999px);
+}
+
+.vvp-ui-progress__step + .vvp-ui-progress__step .vvp-ui-progress__track {
+  border-left: 0;
+}
+
+.vvp-ui-progress__fill {
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(120deg, var(--vvp-accent, #db2685), color-mix(in srgb, var(--vvp-accent, #db2685) 85%, black));
+  transition: width 300ms ease-out;
+}
+
+.vvp-ui-progress__step-label {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 2px;
+  font-size: var(--vvp-font-size-sm, 14px);
+  color: var(--vvp-text-muted, #666);
+  text-align: right;
+}
+
+.vvp-ui-progress__step-label strong {
+  color: var(--vvp-text, #111);
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volksverpetzer/ui-web",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Shared brand-visible React components (Button, Badge, Card) for vvp_link_shortener, vvp_divi5_extensions, and crowdfunding. Plain, hand-scoped CSS (vvp-ui-* class prefix) consuming the --vvp-* custom properties emitted by @volksverpetzer/design-tokens — no Tailwind classes, so it drops into a Tailwind app and Divi's WordPress-embedded CSS alike.",
   "type": "module",
   "repository": {