@volksverpetzer/ui-web 0.7.0 → 0.9.0

package/dist/Button.css

@@ -9,6 +9,7 @@
   cursor: pointer;
   font-family: inherit;
   line-height: 1;
+  text-decoration: none;
   transition:
     background-color 0.15s ease,
     color 0.15s ease,

package/dist/Input.css

@@ -1,19 +1,26 @@
+/*
+ * radius/border-color/padding are pinned to whichever existing token lands
+ * closest to vvp_crowdfunding's donation-form input (the component's actual
+ * first real consumer, pre-dating this package): radius 14px sits exactly
+ * between md/lg, resolved to md since that's the scale's own "buttons and
+ * form controls" step; padding 14px/16px both round to lg; the border color
+ * (#d8e6ee) is closer to --vvp-surface than the likelier-sounding
+ * --vvp-surface-input by actual RGB distance (~16 vs ~32).
+ */
 .vvp-ui-input {
   display: block;
   box-sizing: border-box;
   width: 100%;
   min-width: 0;
-  border-radius: var(--vvp-radius-sm, 8px);
-  border: 1px solid var(--vvp-surface-input, #badde8);
+  border-radius: var(--vvp-radius-md, 12px);
+  border: 1px solid var(--vvp-surface, #e2f0f5);
   background: var(--vvp-background, #fff);
   color: var(--vvp-text, #111);
-  padding: var(--vvp-spacing-sm, 8px) var(--vvp-spacing-md, 10px);
+  padding: var(--vvp-spacing-lg, 16px);
   font-family: inherit;
   font-size: var(--vvp-font-size-base, 16px);
   line-height: 1.4;
-  transition:
-    border-color 0.15s ease,
-    box-shadow 0.15s ease;
+  transition: border-color 0.15s ease;
 }
 
 .vvp-ui-input::placeholder {
@@ -21,10 +28,8 @@
 }
 
 .vvp-ui-input:focus-visible {
-  outline: none;
-  border-color: var(--vvp-primary, #1b7194);
-  box-shadow: 0 0 0 3px
-    color-mix(in srgb, var(--vvp-primary, #1b7194) 25%, transparent);
+  outline: 2px solid var(--vvp-primary-muted, #3893c0);
+  outline-offset: 2px;
 }
 
 .vvp-ui-input:disabled {
@@ -43,6 +48,5 @@
 }
 
 .vvp-ui-input[aria-invalid="true"]:focus-visible {
-  box-shadow: 0 0 0 3px
-    color-mix(in srgb, var(--vvp-error, #c62828) 25%, transparent);
+  outline-color: var(--vvp-error, #c62828);
 }

package/dist/LinkButton.css

@@ -0,0 +1,37 @@
+/*
+ * LinkButton's fixed look: a subtle bordered "pill card" with a soft
+ * drop shadow, distinct from Button's ghost variant (see LinkButton.tsx
+ * for why). Colors are expressed via the same --vvp-* tokens Button.css
+ * uses, so this stays in sync with the shared palette automatically.
+ *
+ * The shadow comes from @volksverpetzer/design-tokens'
+ * --vvp-elevation-accent-* — the one brand-tinted exception to that
+ * package's otherwise-neutral elevation scale (see elevation-accent.json).
+ * The literal color-mix() here is only a fallback for apps that haven't
+ * loaded elevation-accent.css; it must stay in sync with that token.
+ */
+.vvp-ui-linkbtn {
+  border-radius: var(--vvp-radius-md, 12px);
+  background: transparent;
+  color: var(--vvp-primary, #1b7194);
+  border: 1.5px solid var(--vvp-surface, #e2f0f5);
+  box-shadow: var(
+    --vvp-elevation-accent-rest,
+    0px 8px 20px color-mix(in srgb, var(--vvp-primary-muted, #3893c0) 6%, transparent)
+  );
+  transition:
+    transform 120ms ease,
+    box-shadow 120ms ease,
+    border-color 120ms ease,
+    background 120ms ease;
+}
+
+.vvp-ui-linkbtn:hover {
+  transform: translateY(-1px);
+  border-color: var(--vvp-primary-muted, #3893c0);
+  background: var(--vvp-surface, #e2f0f5);
+  box-shadow: var(
+    --vvp-elevation-accent-hover,
+    0px 8px 20px color-mix(in srgb, var(--vvp-primary-muted, #3893c0) 18%, transparent)
+  );
+}

package/dist/LinkButton.d.ts

@@ -0,0 +1,21 @@
+import type { AnchorHTMLAttributes, ReactNode } from "react";
+import type { ButtonSize } from "./Button";
+import "./Button.css";
+import "./LinkButton.css";
+export interface LinkButtonProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    href: string;
+    size?: ButtonSize;
+    children: ReactNode;
+}
+/**
+ * Anchor-based counterpart to `Button` — for navigation (external links,
+ * downloads), where an actual link is the correct element, not a button
+ * with an onClick that changes location.
+ *
+ * Unlike `Button`, this has no `variant` choice: a link is inherently a
+ * secondary/tertiary action, never a page's primary CTA, so it always
+ * renders the one bordered, low-emphasis look (see LinkButton.css) rather
+ * than reusing `Button`'s ghost variant directly — `Button`'s ghost shape
+ * is shared with `ThemeToggle`, which needs its own pill/circle geometry.
+ */
+export declare const LinkButton: import("react").ForwardRefExoticComponent<LinkButtonProps & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/LinkButton.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import "./Button.css";
+import "./LinkButton.css";
+/**
+ * Anchor-based counterpart to `Button` — for navigation (external links,
+ * downloads), where an actual link is the correct element, not a button
+ * with an onClick that changes location.
+ *
+ * Unlike `Button`, this has no `variant` choice: a link is inherently a
+ * secondary/tertiary action, never a page's primary CTA, so it always
+ * renders the one bordered, low-emphasis look (see LinkButton.css) rather
+ * than reusing `Button`'s ghost variant directly — `Button`'s ghost shape
+ * is shared with `ThemeToggle`, which needs its own pill/circle geometry.
+ */
+export const LinkButton = forwardRef(function LinkButton({ size = "md", className, children, ...rest }, ref) {
+    const classes = [
+        "vvp-ui-btn",
+        "vvp-ui-linkbtn",
+        `vvp-ui-btn--${size}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsx("a", { ref: ref, className: classes, ...rest, children: children }));
+});

package/dist/ThemeToggle.css

@@ -0,0 +1,6 @@
+.vvp-ui-theme-toggle {
+  position: fixed;
+  top: var(--vvp-spacing-lg, 16px);
+  right: var(--vvp-spacing-lg, 16px);
+  z-index: 50;
+}

package/dist/ThemeToggle.d.ts

@@ -0,0 +1,9 @@
+import "./ThemeToggle.css";
+/**
+ * Fixed-corner light/dark toggle. Persists to localStorage, falls back to
+ * `prefers-color-scheme`, and flips the `dark` class on `<html>` — the same
+ * convention the `--vvp-*` tokens' `.dark` scope expects. Browser-only (no
+ * Divi/React Native use case), so it always renders — there's no server
+ * variant to opt out of.
+ */
+export declare function ThemeToggle(): import("react").JSX.Element;

package/dist/ThemeToggle.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useSyncExternalStore } from "react";
+import { Button } from "./Button";
+import "./ThemeToggle.css";
+const STORAGE_KEY = "vvp-theme";
+const listeners = new Set();
+// Session fallback for when localStorage throws (private/sandboxed
+// contexts): without it, setIsDark's write would fail silently and
+// getIsDark would keep re-deriving the same value from matchMedia on every
+// read, making the toggle look inert even though the click registered.
+let memoryIsDark = null;
+function getIsDark() {
+    if (memoryIsDark !== null)
+        return memoryIsDark;
+    try {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if (stored)
+            return stored === "dark";
+    }
+    catch {
+        // localStorage can throw (e.g. blocked storage in private/sandboxed
+        // contexts) — fall back to OS preference below.
+    }
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+// The server can't know the stored/OS preference, so it always reports
+// light. useSyncExternalStore uses this consistently during hydration
+// (matching the server-rendered markup exactly), then re-renders with the
+// real client value right after — no hydration mismatch, unlike reading
+// localStorage in a mount effect.
+function getServerIsDark() {
+    return false;
+}
+function subscribe(callback) {
+    listeners.add(callback);
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    media.addEventListener("change", callback);
+    return () => {
+        listeners.delete(callback);
+        media.removeEventListener("change", callback);
+    };
+}
+function setIsDark(next) {
+    memoryIsDark = next;
+    try {
+        localStorage.setItem(STORAGE_KEY, next ? "dark" : "light");
+    }
+    catch {
+        // Storage unavailable — the toggle still works for this session via
+        // memoryIsDark above, it just won't persist across reloads.
+    }
+    listeners.forEach((listener) => listener());
+}
+function applyTheme(dark) {
+    document.documentElement.classList.toggle("dark", dark);
+}
+const SunIcon = () => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "12", r: "4" }), _jsx("path", { d: "M12 2v2" }), _jsx("path", { d: "M12 20v2" }), _jsx("path", { d: "m4.93 4.93 1.41 1.41" }), _jsx("path", { d: "m17.66 17.66 1.41 1.41" }), _jsx("path", { d: "M2 12h2" }), _jsx("path", { d: "M20 12h2" }), _jsx("path", { d: "m6.34 17.66-1.41 1.41" }), _jsx("path", { d: "m19.07 4.93-1.41 1.41" })] }));
+const MoonIcon = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" }) }));
+/**
+ * Fixed-corner light/dark toggle. Persists to localStorage, falls back to
+ * `prefers-color-scheme`, and flips the `dark` class on `<html>` — the same
+ * convention the `--vvp-*` tokens' `.dark` scope expects. Browser-only (no
+ * Divi/React Native use case), so it always renders — there's no server
+ * variant to opt out of.
+ */
+export function ThemeToggle() {
+    const isDark = useSyncExternalStore(subscribe, getIsDark, getServerIsDark);
+    // Only synchronizes the DOM with the resolved value — never calls
+    // setState, so it can't trigger cascading renders.
+    useEffect(() => {
+        applyTheme(isDark);
+    }, [isDark]);
+    return (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setIsDark(!isDark), "aria-label": isDark ? "Switch to light mode" : "Switch to dark mode", className: "vvp-ui-theme-toggle", children: isDark ? _jsx(SunIcon, {}) : _jsx(MoonIcon, {}) }));
+}

package/dist/index.d.ts

@@ -1,7 +1,9 @@
 export { Button, type ButtonProps, type ButtonVariant, type ButtonSize, } from "./Button";
+export { LinkButton, type LinkButtonProps } from "./LinkButton";
 export { Badge, type BadgeProps, type BadgeVariant } from "./Badge";
 export { Card, type CardProps } from "./Card";
 export { ProgressBar, type ProgressBarProps, type ProgressBarMilestone, } from "./ProgressBar";
 export { Input, type InputProps } from "./Input";
 export { Alert, type AlertProps, type AlertVariant } from "./Alert";
 export { Slider, type SliderProps } from "./Slider";
+export { ThemeToggle } from "./ThemeToggle";

package/dist/index.js

@@ -1,7 +1,9 @@
 export { Button, } from "./Button";
+export { LinkButton } from "./LinkButton";
 export { Badge } from "./Badge";
 export { Card } from "./Card";
 export { ProgressBar, } from "./ProgressBar";
 export { Input } from "./Input";
 export { Alert } from "./Alert";
 export { Slider } from "./Slider";
+export { ThemeToggle } from "./ThemeToggle";

package/dist/styles.css

@@ -85,6 +85,7 @@
   cursor: pointer;
   font-family: inherit;
   line-height: 1;
+  text-decoration: none;
   transition:
     background-color 0.15s ease,
     color 0.15s ease,
@@ -163,22 +164,29 @@
   border: 1px solid var(--vvp-surface-input, #badde8);
 }
 
+/*
+ * radius/border-color/padding are pinned to whichever existing token lands
+ * closest to vvp_crowdfunding's donation-form input (the component's actual
+ * first real consumer, pre-dating this package): radius 14px sits exactly
+ * between md/lg, resolved to md since that's the scale's own "buttons and
+ * form controls" step; padding 14px/16px both round to lg; the border color
+ * (#d8e6ee) is closer to --vvp-surface than the likelier-sounding
+ * --vvp-surface-input by actual RGB distance (~16 vs ~32).
+ */
 .vvp-ui-input {
   display: block;
   box-sizing: border-box;
   width: 100%;
   min-width: 0;
-  border-radius: var(--vvp-radius-sm, 8px);
-  border: 1px solid var(--vvp-surface-input, #badde8);
+  border-radius: var(--vvp-radius-md, 12px);
+  border: 1px solid var(--vvp-surface, #e2f0f5);
   background: var(--vvp-background, #fff);
   color: var(--vvp-text, #111);
-  padding: var(--vvp-spacing-sm, 8px) var(--vvp-spacing-md, 10px);
+  padding: var(--vvp-spacing-lg, 16px);
   font-family: inherit;
   font-size: var(--vvp-font-size-base, 16px);
   line-height: 1.4;
-  transition:
-    border-color 0.15s ease,
-    box-shadow 0.15s ease;
+  transition: border-color 0.15s ease;
 }
 
 .vvp-ui-input::placeholder {
@@ -186,10 +194,8 @@
 }
 
 .vvp-ui-input:focus-visible {
-  outline: none;
-  border-color: var(--vvp-primary, #1b7194);
-  box-shadow: 0 0 0 3px
-    color-mix(in srgb, var(--vvp-primary, #1b7194) 25%, transparent);
+  outline: 2px solid var(--vvp-primary-muted, #3893c0);
+  outline-offset: 2px;
 }
 
 .vvp-ui-input:disabled {
@@ -208,8 +214,45 @@
 }
 
 .vvp-ui-input[aria-invalid="true"]:focus-visible {
-  box-shadow: 0 0 0 3px
-    color-mix(in srgb, var(--vvp-error, #c62828) 25%, transparent);
+  outline-color: var(--vvp-error, #c62828);
+}
+
+/*
+ * LinkButton's fixed look: a subtle bordered "pill card" with a soft
+ * drop shadow, distinct from Button's ghost variant (see LinkButton.tsx
+ * for why). Colors are expressed via the same --vvp-* tokens Button.css
+ * uses, so this stays in sync with the shared palette automatically.
+ *
+ * The shadow comes from @volksverpetzer/design-tokens'
+ * --vvp-elevation-accent-* — the one brand-tinted exception to that
+ * package's otherwise-neutral elevation scale (see elevation-accent.json).
+ * The literal color-mix() here is only a fallback for apps that haven't
+ * loaded elevation-accent.css; it must stay in sync with that token.
+ */
+.vvp-ui-linkbtn {
+  border-radius: var(--vvp-radius-md, 12px);
+  background: transparent;
+  color: var(--vvp-primary, #1b7194);
+  border: 1.5px solid var(--vvp-surface, #e2f0f5);
+  box-shadow: var(
+    --vvp-elevation-accent-rest,
+    0px 8px 20px color-mix(in srgb, var(--vvp-primary-muted, #3893c0) 6%, transparent)
+  );
+  transition:
+    transform 120ms ease,
+    box-shadow 120ms ease,
+    border-color 120ms ease,
+    background 120ms ease;
+}
+
+.vvp-ui-linkbtn:hover {
+  transform: translateY(-1px);
+  border-color: var(--vvp-primary-muted, #3893c0);
+  background: var(--vvp-surface, #e2f0f5);
+  box-shadow: var(
+    --vvp-elevation-accent-hover,
+    0px 8px 20px color-mix(in srgb, var(--vvp-primary-muted, #3893c0) 18%, transparent)
+  );
 }
 
 .vvp-ui-progress {
@@ -356,3 +399,10 @@
   cursor: not-allowed;
 }
 
+.vvp-ui-theme-toggle {
+  position: fixed;
+  top: var(--vvp-spacing-lg, 16px);
+  right: var(--vvp-spacing-lg, 16px);
+  z-index: 50;
+}
+

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@volksverpetzer/ui-web",
-  "version": "0.7.0",
-  "description": "Shared brand-visible React components (Button, Badge, Card, ProgressBar, Input, Alert) 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.",
+  "version": "0.9.0",
+  "description": "Shared brand-visible React components (Button, Badge, Card, ProgressBar, Input, Alert, Slider, ThemeToggle) for vvp_link_shortener, vvp_divi5_extensions, crowdfunding, and vectorcrawl. 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",
   "license": "MIT",
   "repository": {