npm - @volksverpetzer/ui-web - Versions diffs - 0.7.0 → 0.8.0 - Mend

@volksverpetzer/ui-web 0.7.0 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/Input.css CHANGED Viewed

@@ -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/ThemeToggle.css ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -5,3 +5,4 @@ export { ProgressBar, type ProgressBarProps, type ProgressBarMilestone, } from "
 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 CHANGED Viewed

@@ -5,3 +5,4 @@ export { ProgressBar, } from "./ProgressBar";
 export { Input } from "./Input";
 export { Alert } from "./Alert";
 export { Slider } from "./Slider";
+export { ThemeToggle } from "./ThemeToggle";

package/dist/styles.css CHANGED Viewed

@@ -163,22 +163,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 +193,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 +213,7 @@
 }
 .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);
 }
 .vvp-ui-progress {
@@ -356,3 +360,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 CHANGED Viewed

@@ -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.8.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": {