@volksverpetzer/ui-web 0.12.1 → 0.13.1

package/dist/PillGroup.css

@@ -0,0 +1,52 @@
+.vvp-ui-pill-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--vvp-spacing-sm, 8px);
+}
+
+.vvp-ui-pill-group__option {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid var(--vvp-surface, #e2f0f5);
+  border-radius: var(--vvp-radius-full, 9999px);
+  background: var(--vvp-background, #fff);
+  color: var(--vvp-text, #111);
+  font-family: inherit;
+  font-weight: 700;
+  cursor: pointer;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.vvp-ui-pill-group[data-size="md"] .vvp-ui-pill-group__option {
+  padding: var(--vvp-spacing-md, 10px) var(--vvp-spacing-xl, 20px);
+  font-size: var(--vvp-font-size-base, 16px);
+}
+
+.vvp-ui-pill-group[data-size="sm"] .vvp-ui-pill-group__option {
+  padding: var(--vvp-spacing-sm, 8px) var(--vvp-spacing-lg, 16px);
+  font-size: var(--vvp-font-size-sm, 14px);
+}
+
+.vvp-ui-pill-group__option:hover:not(:disabled) {
+  border-color: var(--vvp-primary-muted, #3893c0);
+}
+
+.vvp-ui-pill-group__option:focus-visible {
+  outline: 2px solid var(--vvp-primary-muted, #3893c0);
+  outline-offset: 2px;
+}
+
+.vvp-ui-pill-group__option:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.vvp-ui-pill-group__option[aria-checked="true"] {
+  background: var(--vvp-primary, #1b7194);
+  border-color: var(--vvp-primary, #1b7194);
+  color: var(--vvp-on-primary, #fff);
+}

package/dist/PillGroup.d.ts

@@ -0,0 +1,25 @@
+import "./PillGroup.css";
+export interface PillGroupOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+export interface PillGroupProps {
+    /** Visually hidden unless `label` is also rendered by the consumer via `aria-labelledby` — falls back to this as the accessible name. */
+    "aria-label"?: string;
+    options: PillGroupOption[];
+    value: string;
+    onChange: (value: string) => void;
+    size?: "sm" | "md";
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * A row of pill-shaped options for choosing one of a small, fixed set of
+ * values — the house alternative to a native `<select>` (see vvp_app's
+ * "pills over dropdowns" convention, now ported to web). Implements the
+ * ARIA APG radiogroup pattern: one `role="radio"` per pill, roving
+ * tabindex, and Left/Right (and Up/Down) arrow keys move both focus and
+ * selection, matching native `<select>`/radio-group keyboard behavior.
+ */
+export declare function PillGroup({ "aria-label": ariaLabel, options, value, onChange, size, disabled, className, }: PillGroupProps): import("react").JSX.Element;

package/dist/PillGroup.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId } from "react";
+import "./PillGroup.css";
+/**
+ * A row of pill-shaped options for choosing one of a small, fixed set of
+ * values — the house alternative to a native `<select>` (see vvp_app's
+ * "pills over dropdowns" convention, now ported to web). Implements the
+ * ARIA APG radiogroup pattern: one `role="radio"` per pill, roving
+ * tabindex, and Left/Right (and Up/Down) arrow keys move both focus and
+ * selection, matching native `<select>`/radio-group keyboard behavior.
+ */
+export function PillGroup({ "aria-label": ariaLabel, options, value, onChange, size = "md", disabled = false, className, }) {
+    const groupId = useId();
+    const selectNext = (fromIndex, direction) => {
+        const enabled = options
+            .map((opt, i) => ({ opt, i }))
+            .filter(({ opt }) => !opt.disabled);
+        if (enabled.length === 0)
+            return;
+        const currentPos = enabled.findIndex(({ i }) => i === fromIndex);
+        const nextPos = (currentPos + direction + enabled.length) % enabled.length;
+        const next = enabled[nextPos];
+        if (next)
+            onChange(next.opt.value);
+    };
+    const handleKeyDown = (e, i) => {
+        switch (e.key) {
+            case "ArrowRight":
+            case "ArrowDown":
+                e.preventDefault();
+                selectNext(i, 1);
+                break;
+            case "ArrowLeft":
+            case "ArrowUp":
+                e.preventDefault();
+                selectNext(i, -1);
+                break;
+        }
+    };
+    const classes = ["vvp-ui-pill-group", className].filter(Boolean).join(" ");
+    return (_jsx("div", { role: "radiogroup", "aria-label": ariaLabel, className: classes, "data-size": size, children: options.map((option, i) => {
+            const checked = option.value === value;
+            return (_jsx("button", { id: `${groupId}-${option.value}`, type: "button", role: "radio", "aria-checked": checked, disabled: disabled || option.disabled, tabIndex: checked ? 0 : -1, className: "vvp-ui-pill-group__option", onClick: () => onChange(option.value), onKeyDown: (e) => handleKeyDown(e, i), children: option.label }, option.value));
+        }) }));
+}

package/dist/ToolPage.css

@@ -132,6 +132,14 @@
   gap: var(--vvp-spacing-xs, 4px);
 }
 
+/*
+ * The decorative background is 220px tall and fades out; without extra space
+ * the content slot (a card, form, list) starts on top of the jagged edge.
+ */
+.vvp-ui-tool-page--with-background .vvp-ui-tool-page__content {
+  margin-top: var(--vvp-spacing-huge, 40px);
+}
+
 .vvp-ui-tool-page__content {
   width: 100%;
 }

package/dist/ToolPage.js

@@ -14,7 +14,13 @@ const GithubIcon = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", wid
  * photo) instead of the abstract shape.
  */
 export function ToolPage({ icon, title, tags, children, helpText, githubUrl, background = true, headerImage, centered = false, className, ...rest }) {
-    const classes = ["vvp-ui-tool-page", className].filter(Boolean).join(" ");
+    const classes = [
+        "vvp-ui-tool-page",
+        !headerImage && background && "vvp-ui-tool-page--with-background",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
     const innerClasses = [
         "vvp-ui-tool-page__inner",
         centered && "vvp-ui-tool-page__inner--centered",

package/dist/index.d.ts

@@ -8,4 +8,5 @@ export { Alert, type AlertProps, type AlertVariant } from "./Alert";
 export { Slider, type SliderProps } from "./Slider";
 export { ThemeToggle } from "./ThemeToggle";
 export { InputButton, type InputButtonProps } from "./InputButton";
+export { PillGroup, type PillGroupProps, type PillGroupOption, } from "./PillGroup";
 export { ToolPage, type ToolPageProps, type ToolPageTag } from "./ToolPage";

package/dist/index.js

@@ -8,4 +8,5 @@ export { Alert } from "./Alert";
 export { Slider } from "./Slider";
 export { ThemeToggle } from "./ThemeToggle";
 export { InputButton } from "./InputButton";
+export { PillGroup, } from "./PillGroup";
 export { ToolPage } from "./ToolPage";

package/dist/styles.css

@@ -309,6 +309,59 @@
   );
 }
 
+.vvp-ui-pill-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--vvp-spacing-sm, 8px);
+}
+
+.vvp-ui-pill-group__option {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid var(--vvp-surface, #e2f0f5);
+  border-radius: var(--vvp-radius-full, 9999px);
+  background: var(--vvp-background, #fff);
+  color: var(--vvp-text, #111);
+  font-family: inherit;
+  font-weight: 700;
+  cursor: pointer;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.vvp-ui-pill-group[data-size="md"] .vvp-ui-pill-group__option {
+  padding: var(--vvp-spacing-md, 10px) var(--vvp-spacing-xl, 20px);
+  font-size: var(--vvp-font-size-base, 16px);
+}
+
+.vvp-ui-pill-group[data-size="sm"] .vvp-ui-pill-group__option {
+  padding: var(--vvp-spacing-sm, 8px) var(--vvp-spacing-lg, 16px);
+  font-size: var(--vvp-font-size-sm, 14px);
+}
+
+.vvp-ui-pill-group__option:hover:not(:disabled) {
+  border-color: var(--vvp-primary-muted, #3893c0);
+}
+
+.vvp-ui-pill-group__option:focus-visible {
+  outline: 2px solid var(--vvp-primary-muted, #3893c0);
+  outline-offset: 2px;
+}
+
+.vvp-ui-pill-group__option:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.vvp-ui-pill-group__option[aria-checked="true"] {
+  background: var(--vvp-primary, #1b7194);
+  border-color: var(--vvp-primary, #1b7194);
+  color: var(--vvp-on-primary, #fff);
+}
+
 .vvp-ui-progress {
   width: 100%;
   text-align: center;
@@ -603,6 +656,14 @@
   gap: var(--vvp-spacing-xs, 4px);
 }
 
+/*
+ * The decorative background is 220px tall and fades out; without extra space
+ * the content slot (a card, form, list) starts on top of the jagged edge.
+ */
+.vvp-ui-tool-page--with-background .vvp-ui-tool-page__content {
+  margin-top: var(--vvp-spacing-huge, 40px);
+}
+
 .vvp-ui-tool-page__content {
   width: 100%;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volksverpetzer/ui-web",
-  "version": "0.12.1",
+  "version": "0.13.1",
   "description": "Shared brand-visible React components (Button, Badge, Card, ProgressBar, Input, Alert, Slider, ThemeToggle, InputButton) 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",
@@ -27,8 +27,8 @@
     "react": ">=19"
   },
   "devDependencies": {
-    "@types/react": "^19.2.18",
-    "react": "^19.2.3",
+    "@types/react": "^19.3.0",
+    "react": "^19.3.0",
     "typescript": "^6.0.3"
   },
   "scripts": {