@brumaombra/ui-vintage 0.9.4 → 0.9.5

package/AGENTS.md

@@ -33,7 +33,7 @@ Only build something new when no entry point fits, and compose it from library p
 - Icons are Hugeicons definitions: import each one from its own module (`import Rocket01Icon from '@hugeicons/core-free-icons/Rocket01Icon'`, never the `@hugeicons/core-free-icons` barrel, which makes the build parse the whole icon set) and pass them to `:icon` props, or render them with `HugeiconsIcon` from `@hugeicons/vue`. Both packages are peer dependencies, so the app must list them in its own `package.json`.
 - Form controls use `v-model`. Mark invalid fields with `aria-invalid` and show messages with `FieldError`.
 - Library strings are translated through vue-i18n (`uiVintage.*` keys). App copy belongs in the app's own locale files.
-- Pass links as plain paths (`to: '/settings'`, `app-link-to="/"`), never `localePath()` results: the components render `NuxtLinkLocale`, which adds the language prefix and navigates client-side. External URLs work in the same props. For your own link buttons, use `<Button as-child>` around a `NuxtLinkLocale`.
+- Pass links as plain paths (`to: '/settings'`, `app-link-to="/"`), never `localePath()` results: the components render `NuxtLinkLocale`, which adds the language prefix and navigates client-side. External URLs work in the same props. For link buttons, give the `Button` a `to` (it renders the localized link itself), never a link wrapped around a button.
 
 ## 4. Check your work
 

package/COMPONENTS.md

@@ -31,7 +31,7 @@ Buttons, segmented controls, menus, and keyboard hints.
 
 ### `@brumaombra/ui-vintage/button`
 
-Button with primary, secondary, ghost, link, and tone variants. Spring press feedback and a `loading` state that keeps the width stable. Use `as-child` to render a link.
+Button with primary, secondary, ghost, link, and tone variants. Spring press feedback and a `loading` state that keeps the width stable. Give it a `to` to make it a navigation button (a localized link, external URLs work too).
 
 ```ts
 import { Button, buttonVariants } from '@brumaombra/ui-vintage/button';
@@ -44,8 +44,8 @@ import type { ButtonVariants } from '@brumaombra/ui-vintage/button';
     Save changes
 </Button>
 
-<Button as-child>
-    <NuxtLink to="/pricing">Pricing</NuxtLink>
+<Button to="/pricing" variant="secondary">
+    Pricing
 </Button>
 ```
 
@@ -57,6 +57,7 @@ import type { ButtonVariants } from '@brumaombra/ui-vintage/button';
 | `size` | `ButtonVariants['size']` |  |
 | `loading` | `boolean` | `false` |
 | `disabled` | `boolean` | `false` |
+| `to` | `string` |  |
 | `class` | `HTMLAttributes['class']` |  |
 
 - **Also accepts** all props of Reka `PrimitiveProps`.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@brumaombra/ui-vintage",
-	"version": "0.9.4",
+	"version": "0.9.5",
 	"description": "Source-published Nuxt UI runtime with shared theme tokens and built-in Nuxt integrations.",
 	"private": false,
 	"author": "Mauro Brambilla",

package/src/components/blog/BlogIndexPage.vue

@@ -75,7 +75,7 @@ const headerStats = computed(() => [
 </script>
 
 <template>
-	<div class="space-y-16 md:space-y-24">
+	<div class="space-y-14 md:space-y-18">
 		<!-- Header section -->
 		<BlogHeaderSection :announcement="headerAnnouncement"
 			:title="props.title"

package/src/components/landing/landing-footer/LandingFooter.vue

@@ -71,7 +71,8 @@ const hasDarkLogo = computed(() => darkLogo.value !== lightLogo.value);
 
 <template>
 	<footer :class="cn('relative z-10 border-t border-border bg-card', props.class)">
-		<div :class="cn('mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8', props.containerClass)">
+		<!-- Same width and padding as the landing content, so the footer lines up with the page -->
+		<div :class="cn('mx-auto max-w-6xl px-3 py-12 sm:px-6 lg:px-8', props.containerClass)">
 			<div :class="cn('flex flex-col gap-8 md:flex-row md:items-start md:justify-between')">
 				<!-- Brand section -->
 				<div :class="cn('max-w-md flex-1', props.brandClass)">

package/src/components/stat-strip/StatStrip.vue

@@ -23,7 +23,8 @@ const props = withDefaults(defineProps<{
 <template>
 	<!-- Compact row of stats in one bordered strip -->
 	<ul v-if="props.items.length > 0" data-slot="stat-strip" :class="cn('inline-flex max-w-full flex-wrap items-stretch overflow-hidden rounded border border-border bg-card text-xs shadow-elevated-sm', props.class)">
-		<li v-for="(item, index) in props.items" :key="item.label" :class="['flex items-center gap-2 px-4 py-2.5', index > 0 && 'border-l border-border']">
+		<!-- Each stat draws a left and a top divider, shifted under the strip border where it is not needed (first column and first row), and grows to fill its row when the strip wraps -->
+		<li v-for="item in props.items" :key="item.label" class="-ml-px -mt-px flex grow items-center justify-center gap-2 border-l border-t border-border px-4 py-2.5">
 			<HugeiconsIcon v-if="item.icon" :icon="item.icon" class="size-4 shrink-0 text-primary" />
 			<span class="font-semibold text-foreground tabular-nums">
 				<AnimatedNumber v-if="props.animate && typeof item.value === 'number'" :value="item.value" :format-options="item.formatOptions" />

package/src/components/ui/button/Button.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import { NuxtLinkLocale } from '#components';
 import type { PrimitiveProps } from 'reka-ui';
-import type { HTMLAttributes } from 'vue';
+import { computed, type HTMLAttributes } from 'vue';
 import type { ButtonVariants } from '.';
 import { Primitive } from 'reka-ui';
 import { cn } from '../../../lib/utils';
@@ -13,16 +14,36 @@ const props = withDefaults(defineProps<PrimitiveProps & {
 	size?: ButtonVariants['size'];
 	loading?: boolean;
 	disabled?: boolean;
+	to?: string;
 	class?: HTMLAttributes['class'];
 }>(), {
 	as: 'button',
 	loading: false,
 	disabled: false
 });
+
+// Disabled or loading: the button can't be pressed (or followed, for a navigation button)
+const isInactive = computed(() => props.disabled || props.loading);
+
+// Same-page anchor (like #setup): a plain link, since there is no route to localize
+const isAnchor = computed(() => !!props.to?.startsWith('#'));
+
+// Element to render: a localized link for navigation buttons (a plain anchor for same-page links, a span while inactive so it can't be followed), otherwise the as element
+const element = computed(() => {
+	if (!props.to) return props.as;
+	if (isInactive.value) return 'span';
+	return isAnchor.value ? 'a' : NuxtLinkLocale;
+});
+
+// Link attribute for the rendered element (href for a plain anchor, to for the localized link)
+const linkAttributes = computed(() => {
+	if (!props.to || isInactive.value) return {};
+	return isAnchor.value ? { href: props.to } : { to: props.to };
+});
 </script>
 
 <template>
-	<Primitive data-slot="button" :data-variant="variant" :data-size="size" :data-loading="props.loading ? '' : undefined" :aria-busy="props.loading || undefined" :disabled="props.disabled || props.loading || undefined" :as="as" :as-child="asChild" :class="cn(buttonVariants({ variant, size }), props.class)">
+	<Primitive data-slot="button" :data-variant="variant" :data-size="size" :data-loading="props.loading ? '' : undefined" :aria-busy="props.loading || undefined" :disabled="(!props.to && isInactive) || undefined" :aria-disabled="(props.to && isInactive) || undefined" v-bind="linkAttributes" :as="element" :as-child="asChild" :class="cn(buttonVariants({ variant, size }), props.class)">
 		<!-- As-child buttons delegate rendering to the slotted element -->
 		<slot v-if="asChild" />
 

package/src/components/ui/button/index.ts

@@ -32,7 +32,7 @@ export const buttonVariants: (props?: ButtonVariants & ClassProp) => string = cv
 	[
 		"relative isolate inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 overflow-hidden whitespace-nowrap rounded text-xs font-semibold outline-none sm:text-sm",
 		"[transition:color_150ms,background-color_150ms,border-color_150ms,box-shadow_220ms,opacity_150ms,scale_380ms_var(--ease-spring)]",
-		"enabled:active:scale-[0.97] enabled:active:duration-75 disabled:pointer-events-none disabled:opacity-50 data-loading:cursor-wait data-loading:disabled:opacity-100",
+		"not-disabled:not-aria-disabled:active:scale-[0.97] not-disabled:not-aria-disabled:active:duration-75 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-loading:cursor-wait data-loading:disabled:opacity-100 data-loading:aria-disabled:opacity-100",
 		"focus-visible:ring-[3px] focus-visible:ring-ring/45",
 		"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
 		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",

package/src/nuxt-components.d.ts

@@ -2,4 +2,5 @@ declare module '#components' {
 	import type { DefineComponent } from 'vue';
 
 	export const NuxtImg: DefineComponent<Record<string, unknown>, Record<string, unknown>, any>;
+	export const NuxtLinkLocale: DefineComponent<Record<string, unknown>, Record<string, unknown>, any>;
 }