@volksverpetzer/ui-web 0.8.0 → 0.9.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/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";

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";

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,44 @@
   outline-color: var(--vvp-error, #c62828);
 }
 
+/*
+ * 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,6 +1,6 @@
 {
   "name": "@volksverpetzer/ui-web",
-  "version": "0.8.0",
+  "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.",
   "type": "module",
   "license": "MIT",