@ansiversa/components 0.0.21 → 0.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ansiversa/components",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "description": "Shared UI components and layouts for the Ansiversa ecosystem",
   "type": "module",
   "exports": {

package/src/AvPageHeader.astro

@@ -2,10 +2,12 @@
 import AvButton from "./AvButton.astro";
 import AvContainer from "./AvContainer.astro";
 
+type ButtonVariant = "primary" | "ghost" | "outline";
+
 interface Action {
   label: string;
   href: string;
-  variant?: string;
+  variant?: ButtonVariant;
 }
 
 interface Props {
@@ -21,22 +23,26 @@ const { title, description, primaryAction, secondaryAction } = Astro.props as Pr
 <section class="av-page-header">
   <AvContainer className="av-page-header__container">
     <div class="av-page-header__body">
-      <h1 class="av-page-header__title">{title}</h1>
+      <div class="av-page-header__top">
+        <h1 class="av-page-header__title">{title}</h1>
+
+        {(primaryAction || secondaryAction) && (
+          <div class="av-page-header__actions">
+            {primaryAction && (
+              <AvButton href={primaryAction.href} variant={primaryAction.variant ?? "primary"}>
+                {primaryAction.label}
+              </AvButton>
+            )}
+            {secondaryAction && (
+              <AvButton href={secondaryAction.href} variant={secondaryAction.variant ?? "ghost"}>
+                {secondaryAction.label}
+              </AvButton>
+            )}
+          </div>
+        )}
+      </div>
+
       {description && <p class="av-page-header__description">{description}</p>}
-      {(primaryAction || secondaryAction) && (
-        <div class="av-page-header__actions">
-          {primaryAction && (
-            <AvButton href={primaryAction.href} variant={primaryAction.variant ?? "primary"}>
-              {primaryAction.label}
-            </AvButton>
-          )}
-          {secondaryAction && (
-            <AvButton href={secondaryAction.href} variant={secondaryAction.variant ?? "ghost"}>
-              {secondaryAction.label}
-            </AvButton>
-          )}
-        </div>
-      )}
     </div>
   </AvContainer>
 </section>

package/src/styles/global.css

@@ -1003,6 +1003,11 @@
     @apply whitespace-nowrap;
   }
 
+  .av-stack {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
   /* --- USER AVATAR BUTTON --- */
 .av-user-avatar-button {
   position: relative;
@@ -1056,6 +1061,45 @@
   pointer-events: none;
 }
 
+/* AvPageHeader */
+.av-page-header__top {
+  display: flex;
+  flex-direction: column;   /* mobile: stacked */
+  align-items: flex-start;
+  gap: 0.75rem;
+}
+
+.av-page-header__actions {
+  display: flex;
+  flex-direction: column;   /* mobile: buttons one-per-row */
+  gap: 0.5rem;
+  width: 100%;              /* mobile: full width so buttons align nicely */
+}
+
+.av-page-header__actions .av-btn {
+  width: 100%;              /* mobile: full-width buttons */
+}
+
+/* Desktop */
+@media (min-width: 640px) {
+  .av-page-header__top {
+    flex-direction: row;    /* desktop: title left, actions right */
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+
+  .av-page-header__actions {
+    flex-direction: row;    /* desktop: inline actions */
+    width: auto;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+  }
+
+  .av-page-header__actions .av-btn {
+    width: auto;
+  }
+}
+
 /* Hover state */
 .av-user-avatar-button:hover::before {
   opacity: 1;