@volksverpetzer/ui-web 0.6.0 → 0.8.0

package/dist/Alert.css

@@ -0,0 +1,14 @@
+.vvp-ui-alert {
+  border-radius: var(--vvp-radius-sm, 8px);
+  border: 1px solid var(--vvp-surface-input, #badde8);
+  background: var(--vvp-background, #fff);
+  color: var(--vvp-text, #111);
+  padding: var(--vvp-spacing-md, 10px) var(--vvp-spacing-lg, 16px);
+  font-size: var(--vvp-font-size-sm, 14px);
+  line-height: 1.5;
+}
+
+.vvp-ui-alert--error {
+  border-color: var(--vvp-error, #c62828);
+  color: var(--vvp-error, #c62828);
+}

package/dist/Alert.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from "react";
+import "./Alert.css";
+export type AlertVariant = "neutral" | "error";
+export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
+    /** @default "neutral" */
+    variant?: AlertVariant;
+}
+/**
+ * Inline form/status feedback — validation errors, submission results.
+ * Plain container like `Card`; put whatever content (text, a title, an
+ * icon) you need inside.
+ */
+export declare function Alert({ variant, className, ...rest }: AlertProps): import("react").JSX.Element;

package/dist/Alert.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./Alert.css";
+/**
+ * Inline form/status feedback — validation errors, submission results.
+ * Plain container like `Card`; put whatever content (text, a title, an
+ * icon) you need inside.
+ */
+export function Alert({ variant = "neutral", className, ...rest }) {
+    const classes = [
+        "vvp-ui-alert",
+        variant === "error" && "vvp-ui-alert--error",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return _jsx("div", { role: "alert", className: classes, ...rest });
+}

package/dist/Input.css

@@ -0,0 +1,52 @@
+/*
+ * 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-md, 12px);
+  border: 1px solid var(--vvp-surface, #e2f0f5);
+  background: var(--vvp-background, #fff);
+  color: var(--vvp-text, #111);
+  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;
+}
+
+.vvp-ui-input::placeholder {
+  color: var(--vvp-text-muted, #666);
+}
+
+.vvp-ui-input:focus-visible {
+  outline: 2px solid var(--vvp-primary-muted, #3893c0);
+  outline-offset: 2px;
+}
+
+.vvp-ui-input:disabled {
+  background: var(--vvp-surface-disabled, #ddd);
+  color: var(--vvp-text-muted, #666);
+  cursor: not-allowed;
+}
+
+/*
+ * Consumers flag a failed-validation field via the native aria-invalid
+ * attribute rather than a bespoke prop — most form libraries already set
+ * it automatically, and it's the accessible way to mark the field anyway.
+ */
+.vvp-ui-input[aria-invalid="true"] {
+  border-color: var(--vvp-error, #c62828);
+}
+
+.vvp-ui-input[aria-invalid="true"]:focus-visible {
+  outline-color: var(--vvp-error, #c62828);
+}

package/dist/Input.d.ts

@@ -0,0 +1,11 @@
+import type { InputHTMLAttributes } from "react";
+import "./Input.css";
+export type InputProps = InputHTMLAttributes<HTMLInputElement>;
+/**
+ * Shared brand text input. Styled entirely off the `--vvp-*` custom
+ * properties emitted by `@volksverpetzer/design-tokens`, same as `Button`.
+ * Mark a field invalid with the native `aria-invalid` attribute rather than
+ * a bespoke `invalid` prop, so it composes with whatever validation a
+ * consumer already has (react-hook-form, Formik, or hand-rolled).
+ */
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Input.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import "./Input.css";
+/**
+ * Shared brand text input. Styled entirely off the `--vvp-*` custom
+ * properties emitted by `@volksverpetzer/design-tokens`, same as `Button`.
+ * Mark a field invalid with the native `aria-invalid` attribute rather than
+ * a bespoke `invalid` prop, so it composes with whatever validation a
+ * consumer already has (react-hook-form, Formik, or hand-rolled).
+ */
+export const Input = forwardRef(function Input({ className, ...rest }, ref) {
+    const classes = ["vvp-ui-input", className].filter(Boolean).join(" ");
+    return _jsx("input", { ref: ref, className: classes, ...rest });
+});

package/dist/Slider.css

@@ -0,0 +1,60 @@
+.vvp-ui-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: var(--vvp-spacing-sm, 8px);
+  margin: 0;
+  border-radius: var(--vvp-radius-full, 9999px);
+  background: linear-gradient(
+    to right,
+    var(--vvp-primary, #1b7194) 0%,
+    var(--vvp-primary, #1b7194) var(--vvp-ui-slider-fill, 0%),
+    var(--vvp-surface, #e2f0f5) var(--vvp-ui-slider-fill, 0%),
+    var(--vvp-surface, #e2f0f5) 100%
+  );
+  cursor: pointer;
+}
+
+.vvp-ui-slider:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/*
+ * Thumb: duplicated across the -webkit-/-moz- pseudo-elements because
+ * browsers drop an entire rule if any selector in it is unsupported — they
+ * can't be combined into one shared rule.
+ */
+.vvp-ui-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: var(--vvp-spacing-lg, 16px);
+  height: var(--vvp-spacing-lg, 16px);
+  border-radius: var(--vvp-radius-full, 9999px);
+  background: var(--vvp-primary, #1b7194);
+  border: 2px solid var(--vvp-background, #fff);
+  box-shadow: var(--vvp-elevation-xs, 0px 1px 1.41px rgba(0, 0, 0, 0.2));
+  cursor: pointer;
+}
+
+.vvp-ui-slider::-moz-range-thumb {
+  width: var(--vvp-spacing-lg, 16px);
+  height: var(--vvp-spacing-lg, 16px);
+  border-radius: var(--vvp-radius-full, 9999px);
+  background: var(--vvp-primary, #1b7194);
+  border: 2px solid var(--vvp-background, #fff);
+  box-shadow: var(--vvp-elevation-xs, 0px 1px 1.41px rgba(0, 0, 0, 0.2));
+  cursor: pointer;
+}
+
+.vvp-ui-slider::-moz-range-track {
+  background: transparent;
+}
+
+.vvp-ui-slider:disabled::-webkit-slider-thumb {
+  cursor: not-allowed;
+}
+
+.vvp-ui-slider:disabled::-moz-range-thumb {
+  cursor: not-allowed;
+}

package/dist/Slider.d.ts

@@ -0,0 +1,17 @@
+import type { InputHTMLAttributes } from "react";
+import "./Slider.css";
+export interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange"> {
+    value: number;
+    min?: number;
+    max: number;
+    step?: number;
+    onValueChange?: (value: number) => void;
+}
+/**
+ * Single-thumb range control — audio/video scrubbing, volume, numeric
+ * filters. A native `<input type="range">` under the hood (keyboard, touch,
+ * and screen-reader support come for free) themed with `--vvp-*` tokens.
+ * The filled portion up to the thumb is a CSS gradient driven by a custom
+ * property computed from `value`, so no extra DOM is needed for the track.
+ */
+export declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Slider.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import "./Slider.css";
+/**
+ * Single-thumb range control — audio/video scrubbing, volume, numeric
+ * filters. A native `<input type="range">` under the hood (keyboard, touch,
+ * and screen-reader support come for free) themed with `--vvp-*` tokens.
+ * The filled portion up to the thumb is a CSS gradient driven by a custom
+ * property computed from `value`, so no extra DOM is needed for the track.
+ */
+export const Slider = forwardRef(function Slider({ value, min = 0, max, step = 1, onValueChange, className, style, ...rest }, ref) {
+    const rawPercent = max > min ? ((value - min) / (max - min)) * 100 : 0;
+    const percent = Math.min(100, Math.max(0, rawPercent));
+    const classes = ["vvp-ui-slider", className].filter(Boolean).join(" ");
+    const fillStyle = {
+        ...style,
+        "--vvp-ui-slider-fill": `${percent}%`,
+    };
+    return (_jsx("input", { ref: ref, type: "range", className: classes, value: value, min: min, max: max, step: step, style: fillStyle, onChange: (event) => onValueChange?.(event.target.valueAsNumber), ...rest }));
+});

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

@@ -2,3 +2,7 @@ export { Button, type ButtonProps, type ButtonVariant, type ButtonSize, } from "
 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

@@ -2,3 +2,7 @@ export { Button, } from "./Button";
 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

@@ -1,3 +1,18 @@
+.vvp-ui-alert {
+  border-radius: var(--vvp-radius-sm, 8px);
+  border: 1px solid var(--vvp-surface-input, #badde8);
+  background: var(--vvp-background, #fff);
+  color: var(--vvp-text, #111);
+  padding: var(--vvp-spacing-md, 10px) var(--vvp-spacing-lg, 16px);
+  font-size: var(--vvp-font-size-sm, 14px);
+  line-height: 1.5;
+}
+
+.vvp-ui-alert--error {
+  border-color: var(--vvp-error, #c62828);
+  color: var(--vvp-error, #c62828);
+}
+
 .vvp-ui-badge {
   display: inline-flex;
   align-items: center;
@@ -148,6 +163,59 @@
   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-md, 12px);
+  border: 1px solid var(--vvp-surface, #e2f0f5);
+  background: var(--vvp-background, #fff);
+  color: var(--vvp-text, #111);
+  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;
+}
+
+.vvp-ui-input::placeholder {
+  color: var(--vvp-text-muted, #666);
+}
+
+.vvp-ui-input:focus-visible {
+  outline: 2px solid var(--vvp-primary-muted, #3893c0);
+  outline-offset: 2px;
+}
+
+.vvp-ui-input:disabled {
+  background: var(--vvp-surface-disabled, #ddd);
+  color: var(--vvp-text-muted, #666);
+  cursor: not-allowed;
+}
+
+/*
+ * Consumers flag a failed-validation field via the native aria-invalid
+ * attribute rather than a bespoke prop — most form libraries already set
+ * it automatically, and it's the accessible way to mark the field anyway.
+ */
+.vvp-ui-input[aria-invalid="true"] {
+  border-color: var(--vvp-error, #c62828);
+}
+
+.vvp-ui-input[aria-invalid="true"]:focus-visible {
+  outline-color: var(--vvp-error, #c62828);
+}
+
 .vvp-ui-progress {
   width: 100%;
   text-align: center;
@@ -231,3 +299,71 @@
   color: var(--vvp-text, #111);
 }
 
+.vvp-ui-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: var(--vvp-spacing-sm, 8px);
+  margin: 0;
+  border-radius: var(--vvp-radius-full, 9999px);
+  background: linear-gradient(
+    to right,
+    var(--vvp-primary, #1b7194) 0%,
+    var(--vvp-primary, #1b7194) var(--vvp-ui-slider-fill, 0%),
+    var(--vvp-surface, #e2f0f5) var(--vvp-ui-slider-fill, 0%),
+    var(--vvp-surface, #e2f0f5) 100%
+  );
+  cursor: pointer;
+}
+
+.vvp-ui-slider:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/*
+ * Thumb: duplicated across the -webkit-/-moz- pseudo-elements because
+ * browsers drop an entire rule if any selector in it is unsupported — they
+ * can't be combined into one shared rule.
+ */
+.vvp-ui-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: var(--vvp-spacing-lg, 16px);
+  height: var(--vvp-spacing-lg, 16px);
+  border-radius: var(--vvp-radius-full, 9999px);
+  background: var(--vvp-primary, #1b7194);
+  border: 2px solid var(--vvp-background, #fff);
+  box-shadow: var(--vvp-elevation-xs, 0px 1px 1.41px rgba(0, 0, 0, 0.2));
+  cursor: pointer;
+}
+
+.vvp-ui-slider::-moz-range-thumb {
+  width: var(--vvp-spacing-lg, 16px);
+  height: var(--vvp-spacing-lg, 16px);
+  border-radius: var(--vvp-radius-full, 9999px);
+  background: var(--vvp-primary, #1b7194);
+  border: 2px solid var(--vvp-background, #fff);
+  box-shadow: var(--vvp-elevation-xs, 0px 1px 1.41px rgba(0, 0, 0, 0.2));
+  cursor: pointer;
+}
+
+.vvp-ui-slider::-moz-range-track {
+  background: transparent;
+}
+
+.vvp-ui-slider:disabled::-webkit-slider-thumb {
+  cursor: not-allowed;
+}
+
+.vvp-ui-slider:disabled::-moz-range-thumb {
+  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.6.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.",
+  "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": {