@volksverpetzer/ui-web 0.9.0 → 0.10.0

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

@@ -7,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

@@ -7,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

@@ -217,6 +217,32 @@
   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

package/package.json

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