@volksverpetzer/ui-web 0.8.0 → 0.10.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/InputButton.css

@@ -0,0 +1,25 @@
+.vvp-ui-input-button {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+
+/*
+ * Compound selectors (rather than relying on file load order) so these
+ * reliably win over Input's and Button's own same-specificity base rules
+ * regardless of how the package's CSS files get concatenated.
+ */
+.vvp-ui-input-button__field.vvp-ui-input {
+  padding-right: 7rem;
+}
+
+.vvp-ui-input-button__action.vvp-ui-btn {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  bottom: 2px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-top-right-radius: var(--vvp-radius-md, 12px);
+  border-bottom-right-radius: var(--vvp-radius-md, 12px);
+}

package/dist/InputButton.d.ts

@@ -0,0 +1,22 @@
+import type { InputHTMLAttributes, ReactNode } from "react";
+import "./InputButton.css";
+export interface InputButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "children"> {
+    /** Rendered inside the embedded action button, e.g. "Shorten". */
+    buttonLabel: ReactNode;
+    /** Disables just the action button — the input stays interactive (e.g. while a submission triggered by it is in flight). */
+    buttonDisabled?: boolean;
+    /** aria-label for the action button, for icon-only labels. */
+    buttonAriaLabel?: string;
+}
+/**
+ * A text input with a primary action button embedded in its right edge —
+ * the "paste a value and go" pattern (a URL shortener, an email signup
+ * field). Composes `Input` and `Button` (`variant="primary"`, `size="sm"`,
+ * `type="submit"`) rather than inventing new styling.
+ *
+ * The button's own rendered width is measured and applied as the input's
+ * right padding, so a longer label (e.g. a "Shortening…" loading state)
+ * never overlaps typed text. A fixed fallback covers the brief window
+ * before that measurement lands (first paint, or SSR).
+ */
+export declare const InputButton: import("react").ForwardRefExoticComponent<InputButtonProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/InputButton.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useLayoutEffect, useRef, useState, } from "react";
+import "./InputButton.css";
+import { Button } from "./Button";
+import { Input } from "./Input";
+// useLayoutEffect warns when it runs during SSR (no DOM to measure yet);
+// useEffect is a no-op there and picks up the real measurement on mount.
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+/**
+ * A text input with a primary action button embedded in its right edge —
+ * the "paste a value and go" pattern (a URL shortener, an email signup
+ * field). Composes `Input` and `Button` (`variant="primary"`, `size="sm"`,
+ * `type="submit"`) rather than inventing new styling.
+ *
+ * The button's own rendered width is measured and applied as the input's
+ * right padding, so a longer label (e.g. a "Shortening…" loading state)
+ * never overlaps typed text. A fixed fallback covers the brief window
+ * before that measurement lands (first paint, or SSR).
+ */
+export const InputButton = forwardRef(function InputButton({ buttonLabel, buttonDisabled, buttonAriaLabel, style, ...rest }, ref) {
+    const buttonRef = useRef(null);
+    const [buttonWidth, setButtonWidth] = useState(0);
+    useIsomorphicLayoutEffect(() => {
+        const button = buttonRef.current;
+        if (!button)
+            return;
+        const observer = new ResizeObserver(([entry]) => {
+            setButtonWidth(entry.borderBoxSize?.[0]?.inlineSize ?? entry.contentRect.width);
+        });
+        observer.observe(button);
+        return () => observer.disconnect();
+    }, []);
+    return (_jsxs("div", { className: "vvp-ui-input-button", children: [_jsx(Input, { ref: ref, className: "vvp-ui-input-button__field", style: {
+                    ...style,
+                    paddingRight: buttonWidth ? buttonWidth + 8 : undefined,
+                }, ...rest }), _jsx(Button, { ref: buttonRef, type: "submit", size: "sm", disabled: buttonDisabled, "aria-label": buttonAriaLabel, className: "vvp-ui-input-button__action", children: buttonLabel })] }));
+});

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

@@ -1,4 +1,5 @@
 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";
@@ -6,3 +7,4 @@ export { Input, type InputProps } from "./Input";
 export { Alert, type AlertProps, type AlertVariant } from "./Alert";
 export { Slider, type SliderProps } from "./Slider";
 export { ThemeToggle } from "./ThemeToggle";
+export { InputButton, type InputButtonProps } from "./InputButton";

package/dist/index.js

@@ -1,4 +1,5 @@
 export { Button, } from "./Button";
+export { LinkButton } from "./LinkButton";
 export { Badge } from "./Badge";
 export { Card } from "./Card";
 export { ProgressBar, } from "./ProgressBar";
@@ -6,3 +7,4 @@ export { Input } from "./Input";
 export { Alert } from "./Alert";
 export { Slider } from "./Slider";
 export { ThemeToggle } from "./ThemeToggle";
+export { InputButton } from "./InputButton";

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,
@@ -216,6 +217,70 @@
   outline-color: var(--vvp-error, #c62828);
 }
 
+.vvp-ui-input-button {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+
+/*
+ * Compound selectors (rather than relying on file load order) so these
+ * reliably win over Input's and Button's own same-specificity base rules
+ * regardless of how the package's CSS files get concatenated.
+ */
+.vvp-ui-input-button__field.vvp-ui-input {
+  padding-right: 7rem;
+}
+
+.vvp-ui-input-button__action.vvp-ui-btn {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  bottom: 2px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-top-right-radius: var(--vvp-radius-md, 12px);
+  border-bottom-right-radius: var(--vvp-radius-md, 12px);
+}
+
+/*
+ * 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 {
   width: 100%;
   text-align: center;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@volksverpetzer/ui-web",
-  "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.",
+  "version": "0.10.0",
+  "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",
   "repository": {