@volksverpetzer/ui-web 0.1.0

package/dist/Badge.css

@@ -0,0 +1,29 @@
+.vvp-ui-badge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: var(--vvp-radius-full, 9999px);
+  padding: var(--vvp-spacing-xs, 4px) var(--vvp-spacing-sm, 8px);
+  font-size: var(--vvp-font-size-xs, 12px);
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.vvp-ui-badge--primary {
+  background: var(--vvp-primary, #1b7194);
+  color: var(--vvp-on-primary, #fff);
+}
+
+.vvp-ui-badge--accent {
+  background: var(--vvp-accent, #db2685);
+  color: var(--vvp-on-primary, #fff);
+}
+
+.vvp-ui-badge--neutral {
+  background: var(--vvp-surface, #e2f0f5);
+  color: var(--vvp-text-muted, #666);
+}
+
+.vvp-ui-badge--error {
+  background: var(--vvp-error, #c62828);
+  color: var(--vvp-on-error, #fff);
+}

package/dist/Badge.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import "./Badge.css";
+export type BadgeVariant = "primary" | "accent" | "neutral" | "error";
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    variant?: BadgeVariant;
+    children: ReactNode;
+}
+/** Small pill label — category tags, status markers, counts. */
+export declare function Badge({ variant, className, children, ...rest }: BadgeProps): import("react").JSX.Element;

package/dist/Badge.js

@@ -0,0 +1,7 @@
+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(" ");
+    return (_jsx("span", { className: classes, ...rest, children: children }));
+}

package/dist/Button.css

@@ -0,0 +1,64 @@
+.vvp-ui-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--vvp-spacing-sm, 8px);
+  border: none;
+  border-radius: var(--vvp-radius-full, 9999px);
+  font-weight: 700;
+  cursor: pointer;
+  font-family: inherit;
+  line-height: 1;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease,
+    opacity 0.15s ease;
+}
+
+.vvp-ui-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.vvp-ui-btn--sm {
+  padding: var(--vvp-spacing-sm, 8px) var(--vvp-spacing-lg, 16px);
+  font-size: var(--vvp-font-size-sm, 14px);
+}
+
+.vvp-ui-btn--md {
+  padding: var(--vvp-spacing-md, 10px) var(--vvp-spacing-xl, 20px);
+  font-size: var(--vvp-font-size-base, 16px);
+}
+
+.vvp-ui-btn--lg {
+  padding: var(--vvp-spacing-lg, 16px) var(--vvp-spacing-xxl, 24px);
+  font-size: var(--vvp-font-size-lg, 18px);
+}
+
+.vvp-ui-btn--primary {
+  background: var(--vvp-primary, #1b7194);
+  color: var(--vvp-on-primary, #fff);
+}
+
+.vvp-ui-btn--primary:hover:not(:disabled) {
+  background: var(--vvp-primary-muted, #3893c0);
+}
+
+.vvp-ui-btn--secondary {
+  background: var(--vvp-surface, #e2f0f5);
+  color: var(--vvp-text, #111);
+}
+
+.vvp-ui-btn--secondary:hover:not(:disabled) {
+  background: var(--vvp-surface-input, #badde8);
+}
+
+.vvp-ui-btn--ghost {
+  background: transparent;
+  color: var(--vvp-primary, #1b7194);
+  border: 2px solid var(--vvp-primary, #1b7194);
+}
+
+.vvp-ui-btn--ghost:hover:not(:disabled) {
+  background: var(--vvp-surface, #e2f0f5);
+}

package/dist/Button.d.ts

@@ -0,0 +1,16 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import "./Button.css";
+export type ButtonVariant = "primary" | "secondary" | "ghost";
+export type ButtonSize = "sm" | "md" | "lg";
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    children: ReactNode;
+}
+/**
+ * Shared brand button. Styled entirely off the `--vvp-*` custom properties
+ * emitted by `@volksverpetzer/design-tokens` — the consuming app is
+ * 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;

package/dist/Button.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./Button.css";
+/**
+ * Shared brand button. Styled entirely off the `--vvp-*` custom properties
+ * emitted by `@volksverpetzer/design-tokens` — the consuming app is
+ * 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]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsx("button", { className: classes, ...rest, children: children }));
+}

package/dist/Card.css

@@ -0,0 +1,9 @@
+.vvp-ui-card {
+  background: var(--vvp-background, #fff);
+  border-radius: var(--vvp-radius-md, 12px);
+  padding: var(--vvp-spacing-lg, 16px);
+}
+
+.vvp-ui-card--bordered {
+  border: 1px solid var(--vvp-surface-input, #badde8);
+}

package/dist/Card.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import "./Card.css";
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    bordered?: boolean;
+    children: ReactNode;
+}
+/** Generic content surface — section grouping, list items, form containers. */
+export declare function Card({ bordered, className, children, ...rest }: CardProps): import("react").JSX.Element;

package/dist/Card.js

@@ -0,0 +1,7 @@
+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(" ");
+    return (_jsx("div", { className: classes, ...rest, children: children }));
+}

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/styles.css

@@ -0,0 +1,105 @@
+.vvp-ui-badge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: var(--vvp-radius-full, 9999px);
+  padding: var(--vvp-spacing-xs, 4px) var(--vvp-spacing-sm, 8px);
+  font-size: var(--vvp-font-size-xs, 12px);
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.vvp-ui-badge--primary {
+  background: var(--vvp-primary, #1b7194);
+  color: var(--vvp-on-primary, #fff);
+}
+
+.vvp-ui-badge--accent {
+  background: var(--vvp-accent, #db2685);
+  color: var(--vvp-on-primary, #fff);
+}
+
+.vvp-ui-badge--neutral {
+  background: var(--vvp-surface, #e2f0f5);
+  color: var(--vvp-text-muted, #666);
+}
+
+.vvp-ui-badge--error {
+  background: var(--vvp-error, #c62828);
+  color: var(--vvp-on-error, #fff);
+}
+
+.vvp-ui-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--vvp-spacing-sm, 8px);
+  border: none;
+  border-radius: var(--vvp-radius-full, 9999px);
+  font-weight: 700;
+  cursor: pointer;
+  font-family: inherit;
+  line-height: 1;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease,
+    opacity 0.15s ease;
+}
+
+.vvp-ui-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.vvp-ui-btn--sm {
+  padding: var(--vvp-spacing-sm, 8px) var(--vvp-spacing-lg, 16px);
+  font-size: var(--vvp-font-size-sm, 14px);
+}
+
+.vvp-ui-btn--md {
+  padding: var(--vvp-spacing-md, 10px) var(--vvp-spacing-xl, 20px);
+  font-size: var(--vvp-font-size-base, 16px);
+}
+
+.vvp-ui-btn--lg {
+  padding: var(--vvp-spacing-lg, 16px) var(--vvp-spacing-xxl, 24px);
+  font-size: var(--vvp-font-size-lg, 18px);
+}
+
+.vvp-ui-btn--primary {
+  background: var(--vvp-primary, #1b7194);
+  color: var(--vvp-on-primary, #fff);
+}
+
+.vvp-ui-btn--primary:hover:not(:disabled) {
+  background: var(--vvp-primary-muted, #3893c0);
+}
+
+.vvp-ui-btn--secondary {
+  background: var(--vvp-surface, #e2f0f5);
+  color: var(--vvp-text, #111);
+}
+
+.vvp-ui-btn--secondary:hover:not(:disabled) {
+  background: var(--vvp-surface-input, #badde8);
+}
+
+.vvp-ui-btn--ghost {
+  background: transparent;
+  color: var(--vvp-primary, #1b7194);
+  border: 2px solid var(--vvp-primary, #1b7194);
+}
+
+.vvp-ui-btn--ghost:hover:not(:disabled) {
+  background: var(--vvp-surface, #e2f0f5);
+}
+
+.vvp-ui-card {
+  background: var(--vvp-background, #fff);
+  border-radius: var(--vvp-radius-md, 12px);
+  padding: var(--vvp-spacing-lg, 16px);
+}
+
+.vvp-ui-card--bordered {
+  border: 1px solid var(--vvp-surface-input, #badde8);
+}
+

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@volksverpetzer/ui-web",
+  "version": "0.1.0",
+  "description": "Shared brand-visible React components (Button, Badge, Card) for vvp_link_shortener and vvp_divi5_extensions. 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",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "peerDependencies": {
+    "react": ">=19"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json && node scripts/bundle-css.mjs",
+    "check:ts": "tsc --noEmit -p tsconfig.json"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.18",
+    "react": "^19.2.3",
+    "typescript": "^5.9.3"
+  }
+}