@volksverpetzer/ui-web 0.3.0 → 0.4.0

package/dist/Badge.js

@@ -2,6 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import "./Badge.css";
 /** Small pill label — category tags, status markers, counts. */
 export function Badge({ variant = "neutral", className, children, ...rest }) {
-    const classes = ["vvp-ui-badge", `vvp-ui-badge--${variant}`, className].filter(Boolean).join(" ");
+    const classes = ["vvp-ui-badge", `vvp-ui-badge--${variant}`, className]
+        .filter(Boolean)
+        .join(" ");
     return (_jsx("span", { className: classes, ...rest, children: children }));
 }

package/dist/Button.d.ts

@@ -13,4 +13,4 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  * responsible for loading a brand's token CSS (or SCSS, for Divi) before
  * this renders.
  */
-export declare function Button({ variant, size, className, children, ...rest }: ButtonProps): import("react").JSX.Element;
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/Button.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import "./Button.css";
 /**
  * Shared brand button. Styled entirely off the `--vvp-*` custom properties
@@ -6,9 +7,14 @@ import "./Button.css";
  * responsible for loading a brand's token CSS (or SCSS, for Divi) before
  * this renders.
  */
-export function Button({ variant = "primary", size = "md", className, children, ...rest }) {
-    const classes = ["vvp-ui-btn", `vvp-ui-btn--${variant}`, `vvp-ui-btn--${size}`, className]
+export const Button = forwardRef(function Button({ variant = "primary", size = "md", className, children, ...rest }, ref) {
+    const classes = [
+        "vvp-ui-btn",
+        `vvp-ui-btn--${variant}`,
+        `vvp-ui-btn--${size}`,
+        className,
+    ]
         .filter(Boolean)
         .join(" ");
-    return (_jsx("button", { className: classes, ...rest, children: children }));
-}
+    return (_jsx("button", { ref: ref, className: classes, ...rest, children: children }));
+});

package/dist/Card.js

@@ -2,6 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import "./Card.css";
 /** Generic content surface — section grouping, list items, form containers. */
 export function Card({ bordered = false, className, children, ...rest }) {
-    const classes = ["vvp-ui-card", bordered && "vvp-ui-card--bordered", className].filter(Boolean).join(" ");
+    const classes = [
+        "vvp-ui-card",
+        bordered && "vvp-ui-card--bordered",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
     return (_jsx("div", { className: classes, ...rest, children: children }));
 }

package/dist/ProgressBar.js

@@ -1,6 +1,9 @@
 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 }) + " €";
+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.
@@ -8,7 +11,9 @@ const formatEuro = (value) => value.toLocaleString("de-DE", { minimumFractionDig
  * `@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 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) => {
@@ -22,7 +27,11 @@ export function ProgressBar({ total, goal, milestones, className, ...rest }) {
     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
+                    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`

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { Button, type ButtonProps, type ButtonVariant, type ButtonSize } from "./Button";
+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";
+export { ProgressBar, type ProgressBarProps, type ProgressBarMilestone, } from "./ProgressBar";

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volksverpetzer/ui-web",
-  "version": "0.3.0",
+  "version": "0.4.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": {