@volksverpetzer/ui-web 0.5.0 → 0.7.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/Badge.css

@@ -4,12 +4,19 @@
   gap: var(--vvp-spacing-xs, 4px);
   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: 600;
   line-height: 1.4;
   white-space: nowrap;
 }
 
+.vvp-ui-badge--size-sm {
+  font-size: var(--vvp-font-size-xs, 12px);
+}
+
+.vvp-ui-badge--size-md {
+  font-size: var(--vvp-font-size-base, 16px);
+}
+
 .vvp-ui-badge__icon {
   display: inline-flex;
   width: 0.8em;

package/dist/Badge.d.ts

@@ -1,8 +1,11 @@
 import type { HTMLAttributes, ReactNode } from "react";
 import "./Badge.css";
 export type BadgeVariant = "primary" | "accent" | "neutral" | "error" | "pruefpunkt";
+export type BadgeSize = "sm" | "md";
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     variant?: BadgeVariant;
+    /** @default "md" */
+    size?: BadgeSize;
     /** Rendered before the label — an SVG icon, sized to match the text. */
     icon?: ReactNode;
     children: ReactNode;
@@ -13,4 +16,4 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  * color itself as text) rather than a solid fill, so it reads as a label
  * rather than a button.
  */
-export declare function Badge({ variant, icon, className, children, ...rest }: BadgeProps): import("react").JSX.Element;
+export declare function Badge({ variant, size, icon, className, children, ...rest }: BadgeProps): import("react").JSX.Element;

package/dist/Badge.js

@@ -6,8 +6,13 @@ import "./Badge.css";
  * color itself as text) rather than a solid fill, so it reads as a label
  * rather than a button.
  */
-export function Badge({ variant = "neutral", icon, className, children, ...rest }) {
-    const classes = ["vvp-ui-badge", `vvp-ui-badge--${variant}`, className]
+export function Badge({ variant = "neutral", size = "md", icon, className, children, ...rest }) {
+    const classes = [
+        "vvp-ui-badge",
+        `vvp-ui-badge--${variant}`,
+        `vvp-ui-badge--size-${size}`,
+        className,
+    ]
         .filter(Boolean)
         .join(" ");
     return (_jsxs("span", { className: classes, ...rest, children: [icon ? (_jsx("span", { className: "vvp-ui-badge__icon", "aria-hidden": "true", children: icon })) : null, children] }));

package/dist/Input.css

@@ -0,0 +1,48 @@
+.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);
+  background: var(--vvp-background, #fff);
+  color: var(--vvp-text, #111);
+  padding: var(--vvp-spacing-sm, 8px) var(--vvp-spacing-md, 10px);
+  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;
+}
+
+.vvp-ui-input::placeholder {
+  color: var(--vvp-text-muted, #666);
+}
+
+.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);
+}
+
+.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 {
+  box-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--vvp-error, #c62828) 25%, transparent);
+}

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/index.d.ts

@@ -2,3 +2,6 @@ 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";

package/dist/index.js

@@ -2,3 +2,6 @@ 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";

package/dist/styles.css

@@ -1,15 +1,37 @@
+.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;
   gap: var(--vvp-spacing-xs, 4px);
   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: 600;
   line-height: 1.4;
   white-space: nowrap;
 }
 
+.vvp-ui-badge--size-sm {
+  font-size: var(--vvp-font-size-xs, 12px);
+}
+
+.vvp-ui-badge--size-md {
+  font-size: var(--vvp-font-size-base, 16px);
+}
+
 .vvp-ui-badge__icon {
   display: inline-flex;
   width: 0.8em;
@@ -141,6 +163,55 @@
   border: 1px solid var(--vvp-surface-input, #badde8);
 }
 
+.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);
+  background: var(--vvp-background, #fff);
+  color: var(--vvp-text, #111);
+  padding: var(--vvp-spacing-sm, 8px) var(--vvp-spacing-md, 10px);
+  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;
+}
+
+.vvp-ui-input::placeholder {
+  color: var(--vvp-text-muted, #666);
+}
+
+.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);
+}
+
+.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 {
+  box-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--vvp-error, #c62828) 25%, transparent);
+}
+
 .vvp-ui-progress {
   width: 100%;
   text-align: center;
@@ -224,3 +295,64 @@
   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;
+}
+

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@volksverpetzer/ui-web",
-  "version": "0.5.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.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.",
   "type": "module",
   "license": "MIT",
   "repository": {