@ansiversa/components 0.0.3 → 0.0.4

package/package.json

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

package/src/AvBrand.astro

@@ -0,0 +1,41 @@
+---
+interface Props {
+  /** Link destination (default: home) */
+  href?: string;
+
+  /** Title text — default ANSIVERSA */
+  title?: string;
+
+  /** Subtitle text — default Curated Apps */
+  subtitle?: string;
+
+  /** Path to the logo icon (default: /favicon.svg) */
+  logo?: string;
+
+  /** Extra classes if needed */
+  className?: string;
+}
+
+const {
+  href = "/",
+  title = "ANSIVERSA",
+  subtitle = "Curated Apps",
+  logo = "/favicon.svg",
+  className = "",
+} = Astro.props;
+
+const classes = ["av-navbar-brand"];
+if (className) classes.push(className);
+const classAttr = classes.join(" ");
+---
+
+<a href={href} class={classAttr}>
+  <div class="av-navbar-brand__logo">
+    <img src={logo} alt="Ansiversa logo" />
+  </div>
+
+  <div class="av-navbar-brand__meta">
+    <span class="av-navbar-brand__title av-gradient-text">{title}</span>
+    <span class="av-navbar-brand__subtitle">{subtitle}</span>
+  </div>
+</a>

package/src/AvButton.astro

@@ -0,0 +1,69 @@
+---
+interface Props {
+  /** visual style */
+  variant?: "primary" | "ghost" | "outline";
+  /** size */
+  size?: "sm" | "md" | "lg";
+  /** full width */
+  block?: boolean;
+  /** if set, renders as <a> instead of <button> */
+  href?: string;
+  /** button type when rendering <button> */
+  type?: "button" | "submit" | "reset";
+  /** disabled state (for <button>) */
+  disabled?: boolean;
+  /** extra classes if ever needed */
+  className?: string;
+}
+
+const {
+  variant = "primary",
+  size = "md",
+  block = false,
+  href,
+  type = "button",
+  disabled = false,
+  className,
+} = Astro.props;
+
+// Build class list based on our global.css system
+const classes: string[] = [];
+
+// Variant (each variant class already includes av-btn base via @apply)
+if (variant === "primary") {
+  classes.push("av-btn-primary");
+} else if (variant === "ghost") {
+  classes.push("av-btn-ghost");
+} else if (variant === "outline") {
+  classes.push("av-btn-outline");
+}
+
+// Size
+if (size === "sm") {
+  classes.push("av-btn-sm");
+} else if (size === "lg") {
+  classes.push("av-btn-lg");
+}
+
+// Block
+if (block) {
+  classes.push("av-btn-block");
+}
+
+// Extra classes (optional)
+if (className) {
+  classes.push(className);
+}
+
+const classAttr = classes.join(" ");
+---
+
+{href ? (
+  <a href={href} class={classAttr}>
+    <slot />
+  </a>
+) : (
+  <button type={type} class={classAttr} disabled={disabled}>
+    <slot />
+  </button>
+)}

package/src/AvCard.astro

@@ -0,0 +1,38 @@
+---
+interface Props {
+  /** Visual style of the card */
+  variant?: "default" | "auth" | "soft";
+  /** Extra classes for the outer wrapper */
+  className?: string;
+}
+
+const {
+  variant = "default",
+  className = "",
+} = Astro.props as Props;
+
+const classes: string[] = [];
+
+// Base card class
+if (variant === "soft") {
+  classes.push("av-card-soft");
+} else {
+  // default and auth both use av-card base
+  classes.push("av-card");
+}
+
+// Auth-specific modifier
+if (variant === "auth") {
+  classes.push("av-card-auth");
+}
+
+if (className) {
+  classes.push(className);
+}
+
+const classAttr = classes.join(" ");
+---
+
+<div class={classAttr}>
+  <slot />
+</div>

package/src/AvCheckbox.astro

@@ -0,0 +1,56 @@
+---
+interface Props {
+  /** Checkbox label text (if no children slot is provided) */
+  label?: string;
+  /** Input name */
+  name?: string;
+  /** Input id */
+  id?: string;
+  /** Whether the checkbox is required */
+  required?: boolean;
+  /** Whether the checkbox is checked by default */
+  checked?: boolean;
+  /** Extra classes for the outer wrapper */
+  className?: string;
+  /** Optional hint text below the checkbox */
+  hint?: string;
+}
+
+const props = Astro.props as Props;
+
+const {
+  label,
+  name,
+  required = false,
+  checked = false,
+  className = "",
+  hint = "",
+} = props;
+
+const id = props.id ?? name ?? `checkbox-${Math.random().toString(36).slice(2)}`;
+
+const wrapperClasses: string[] = [];
+if (className) wrapperClasses.push(className);
+---
+
+<div class={wrapperClasses.join(" ")}>
+  <label class="av-inline-check" for={id}>
+    <input
+      id={id}
+      name={name}
+      type="checkbox"
+      class="av-checkbox"
+      required={required}
+      checked={checked}
+    />
+    <span>
+      {label ? label : <slot />}
+    </span>
+  </label>
+
+  {hint && (
+    <p class="av-form-hint">
+      {hint}
+    </p>
+  )}
+</div>

package/src/AvContainer.astro

@@ -0,0 +1,30 @@
+---
+interface Props {
+  /** Container size variant */
+  size?: "default" | "narrow" | "wide" | "full";
+
+  /** Extra classes */
+  className?: string;
+}
+
+const {
+  size = "default",
+  className = "",
+} = Astro.props;
+
+// Base
+const classes = ["av-container"];
+
+// Variants mapped to our custom classes from global.css
+if (size === "narrow") classes.push("av-container-narrow");
+if (size === "wide") classes.push("av-container-wide");
+if (size === "full") classes.push("av-container-full");
+
+if (className) classes.push(className);
+
+const classAttr = classes.join(" ");
+---
+
+<div class={classAttr}>
+  <slot />
+</div>

package/src/AvDivider.astro

@@ -0,0 +1,13 @@
+---
+interface Props {
+  /** Extra classes for customization */
+  className?: string;
+}
+
+const { className = "" } = Astro.props as Props;
+const classes = ["av-divider"];
+if (className) classes.push(className);
+const classAttr = classes.join(" ");
+---
+
+<div class={classAttr} />

package/src/AvFeatureItem.astro

@@ -0,0 +1,27 @@
+---
+interface Props {
+  /** Dot style */
+  variant?: "primary" | "secondary" | "default";
+  /** Extra classes for the item wrapper */
+  className?: string;
+}
+
+const {
+  variant = "default",
+  className = "",
+} = Astro.props as Props;
+
+const itemClasses = ["av-feature-item"];
+if (className) itemClasses.push(className);
+
+const dotClasses = ["av-feature-dot"];
+if (variant === "primary") dotClasses.push("av-feature-dot--primary");
+if (variant === "secondary") dotClasses.push("av-feature-dot--secondary");
+---
+
+<div class={itemClasses.join(" ")}>
+  <span class={dotClasses.join(" ")}></span>
+  <span>
+    <slot />
+  </span>
+</div>

package/src/AvFeatureList.astro

@@ -0,0 +1,15 @@
+---
+interface Props {
+  /** Extra classes for the list wrapper */
+  className?: string;
+}
+
+const { className = "" } = Astro.props as Props;
+const classes = ["av-feature-list"];
+if (className) classes.push(className);
+const classAttr = classes.join(" ");
+---
+
+<div class={classAttr}>
+  <slot />
+</div>

package/src/AvFooter.astro

@@ -0,0 +1,48 @@
+---
+interface FooterLink {
+  label: string;
+  href: string;
+}
+
+interface Props {
+  /** List of footer navigation links */
+  links?: FooterLink[];
+
+  /** Footer tagline text */
+  tagline?: string;
+
+  /** Extra classes for the wrapper */
+  className?: string;
+}
+
+const {
+  links = [
+    { label: "Terms", href: "#terms" },
+    { label: "Privacy", href: "#privacy" },
+  ],
+  tagline = "Advanced Next-Gen Software Innovation and Versatility.",
+  className = "",
+} = Astro.props;
+
+const classes = ["av-footer"];
+if (className) classes.push(className);
+const classAttr = classes.join(" ");
+---
+
+<footer class={classAttr}>
+  <div class="av-footer-inner">
+    <p class="av-caption">
+      © {new Date().getFullYear()} Ansiversa. All rights reserved.
+    </p>
+
+    <div class="av-footer-meta">
+      {links.map((item) => (
+        <a href={item.href} class="av-nav-link">{item.label}</a>
+      ))}
+
+      <span class="av-footer-separator">•</span>
+
+      <span class="av-footer-quote">{tagline}</span>
+    </div>
+  </div>
+</footer>

package/src/AvInput.astro

@@ -0,0 +1,96 @@
+---
+interface Props {
+  label?: string;
+  name?: string;
+  placeholder?: string;
+  type?: astroHTML.JSX.HTMLInputTypeAttribute;
+  value?: string;
+  required?: boolean;
+  disabled?: boolean;
+  className?: string;
+  inputClass?: string;
+  id?: string;
+  hint?: string;
+  autocomplete?: string;
+}
+
+const props = Astro.props as Props;
+
+const {
+  label,
+  name,
+  placeholder = "",
+  type = "text",
+  value,
+  required = false,
+  disabled = false,
+  className = "",
+  inputClass = "",
+  id = name ?? `input-${Math.random().toString(36).slice(2)}`,
+  hint = "",
+  autocomplete,
+} = props;
+
+const wrapperClasses = ["av-form-group", "av-input-wrapper"];
+if (className) wrapperClasses.push(className);
+
+const inputClasses = ["av-input"];
+if (inputClass) inputClasses.push(inputClass);
+
+const isPassword = type === "password";
+---
+
+<div 
+  class={wrapperClasses.join(" ")} 
+  x-data={isPassword ? `{ show: false }` : undefined}
+>
+  {label && (
+    <label class="av-label" for={id}>
+      {label}
+      {required && <span aria-hidden="true"> *</span>}
+    </label>
+  )}
+
+  <div class="av-input-password-container">
+    <input
+      id={id}
+      name={name}
+      type={isPassword ? undefined : type}
+      :type={isPassword ? `(show ? 'text' : 'password')` : undefined}
+      class={inputClasses.join(" ")}
+      placeholder={placeholder}
+      value={value}
+      required={required}
+      disabled={disabled}
+      autocomplete={autocomplete}
+    />
+
+    <!-- PASSWORD TOGGLE BUTTON -->
+    {isPassword && (
+      <button 
+        type="button" 
+        class="av-password-toggle"
+        @click="show = !show"
+        :aria-label="show ? 'Hide password' : 'Show password'"
+      >
+        <template x-if="!show">
+          <svg xmlns="http://www.w3.org/2000/svg" class="av-password-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            <path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z"/>
+            <circle cx="12" cy="12" r="3"/>
+          </svg>
+        </template>
+
+        <template x-if="show">
+          <svg xmlns="http://www.w3.org/2000/svg" class="av-password-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            <path d="M17.94 17.94A10.94 10.94 0 0 1 12 19c-7 0-11-7-11-7a21.77 21.77 0 0 1 5.06-5.94m3.07-1.6A10.94 10.94 0 0 1 12 5c7 0 11 7 11 7a21.77 21.77 0 0 1-2.25 3.2"/>
+            <line x1="1" y1="1" x2="23" y2="23"/>
+          </svg>
+        </template>
+      </button>
+    )}
+  </div>
+
+  {hint && (
+    <p class="av-form-hint">{hint}</p>
+  )}
+</div>

package/src/AvNavbar.astro

@@ -0,0 +1,20 @@
+---
+interface Props {
+  /** Extra classes for the header element */
+  className?: string;
+}
+
+const {
+  className = "",
+} = Astro.props;
+
+const classes = ["av-navbar"];
+if (className) classes.push(className);
+const classAttr = classes.join(" ");
+---
+
+<header class={classAttr}>
+  <div class="av-navbar-inner">
+    <slot />
+  </div>
+</header>

package/src/AvNavbarActions.astro

@@ -0,0 +1,168 @@
+---
+import AvButton from "./AvButton.astro";
+import { actions } from "astro:actions";
+
+interface NavLink {
+  label: string;
+  href: string;
+  variant?: "primary" | "ghost" | "outline";
+  className?: string;
+}
+
+interface User {
+  id: string;
+  email: string;
+  name?: string;
+}
+
+interface Props {
+  className?: string;
+  user?: User;
+}
+
+const { className = "", user } = Astro.props as Props;
+
+const classes = ["av-navbar-actions"];
+if (className) classes.push(className);
+const classAttr = classes.join(" ");
+
+const iconMap: Record<string, string> = {
+  Apps: `
+    <svg class="av-icon" viewBox='0 0 24 24'>
+      <rect x='3' y='3' width='7' height='7' rx='2'/>
+      <rect x='14' y='3' width='7' height='7' rx='2'/>
+      <rect x='3' y='14' width='7' height='7' rx='2'/>
+      <rect x='14' y='14' width='7' height='7' rx='2'/>
+    </svg>
+  `,
+  Pricing: `
+    <svg class="av-icon" viewBox='0 0 24 24'>
+      <path d='M6 3h7.586a2 2 0 0 1 1.414.586l4.414 4.414a2 2 0 0 1 0 2.828L13 18.242a2 2 0 0 1-2.828 0L3.586 11.657A2 2 0 0 1 3 10.243V6a3 3 0 0 1 3-3Z'/>
+      <path d='M9 6h.01'/>
+    </svg>
+  `,
+  About: `
+    <svg class="av-icon" viewBox='0 0 24 24'>
+      <circle cx='12' cy='8' r='3.25'/>
+      <path d='M6 19v-.5a5.5 5.5 0 0 1 11 0V19'/>
+      <path d='M12 12.5v2'/>
+    </svg>
+  `,
+  default: `
+    <svg class="av-icon" viewBox='0 0 24 24'>
+      <circle cx='12' cy='12' r='9'/>
+    </svg>
+  `,
+};
+
+function renderIcon(label: string) {
+  return iconMap[label] ?? iconMap.default;
+}
+
+// ALWAYS SHOW THESE LINKS
+const baseLinks: NavLink[] = [
+  { label: "Apps", href: "/apps" },
+  { label: "Pricing", href: "/pricing" },
+  { label: "About", href: "/about" },
+];
+
+// SIGN-IN link only for guests
+const authLink: NavLink = {
+  label: "Sign in",
+  href: "/login",
+  variant: "primary",
+};
+
+const userInitial =
+  (user?.name?.charAt(0) ?? user?.email?.charAt(0) ?? "?").toUpperCase();
+---
+
+<div class={classAttr}>
+  <!-- Left: Always visible -->
+  {baseLinks.map((item) => (
+    <AvButton
+      href={item.href}
+      variant="ghost"
+      className="av-nowrap"
+    >
+      <span class="av-nav-icon" set:html={renderIcon(item.label)}></span>
+      <span class="av-nav-label">{item.label}</span>
+    </AvButton>
+  ))}
+
+  <!-- Right: Sign-in OR User dropdown -->
+  {user ? (
+    <div class="av-user-menu-wrapper" x-data="{ open: false }">
+      <button
+        type="button"
+        class="av-user-avatar-button"
+        aria-label="Account menu"
+        aria-haspopup="menu"
+        x-on:click="open = !open"
+        x-bind:aria-expanded="open"
+      >
+        <span class="av-user-avatar-circle" aria-hidden="true">
+          {userInitial}
+        </span>
+        <span class="sr-only">Open user menu</span>
+      </button>
+
+      <div
+        x-show="open"
+        x-cloak
+        x-transition.origin.top.right
+        x-on:click.outside="open = false"
+        class="av-user-menu av-nav-user-menu"
+        role="menu"
+        aria-label="User menu"
+      >
+        <div class="av-user-menu-header">
+          <div class="av-user-menu-avatar">{userInitial}</div>
+          <div class="av-user-menu-meta">
+            <p class="av-user-menu-name">{user.name}</p>
+            <p class="av-user-menu-email">{user.email}</p>
+          </div>
+        </div>
+
+        <div class="av-user-menu-divider"></div>
+
+        <div class="av-nav-user-menu">
+          <a href="/dashboard" class="av-user-menu-item av-dropdown-item" role="menuitem">
+            <span>Dashboard</span>
+          </a>
+
+          <a
+            href="/change-password"
+            class="av-user-menu-item av-dropdown-item"
+            role="menuitem"
+          >
+            <span>Change password</span>
+          </a>
+
+          <a href="/settings" class="av-user-menu-item av-dropdown-item" role="menuitem">
+            <span>Settings</span>
+          </a>
+
+          <form method="POST" action="/signout">
+            <button
+              type="submit"
+              class="av-user-menu-item av-dropdown-item av-user-menu-item--danger"
+              role="menuitem"
+            >
+              <span>Sign out</span>
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  ) : (
+    <AvButton
+      href={authLink.href}
+      variant={authLink.variant}
+      className="av-nowrap"
+    >
+      <span class="av-nav-icon" set:html={renderIcon(authLink.label)}></span>
+      <span class="av-nav-label">{authLink.label}</span>
+    </AvButton>
+  )}
+</div>

package/src/AvTimeline.astro

@@ -0,0 +1,99 @@
+---
+export interface TimelineItem {
+  date: string;
+  title?: string;
+  body: string;
+}
+
+interface Props {
+  items: TimelineItem[];
+}
+
+const { items = [] } = Astro.props;
+---
+
+<div class="av-timeline">
+  {items.map((item, index) => (
+    <div
+      class={`av-timeline-row${
+        index === items.length - 1 ? " av-timeline-row--last" : ""
+      }`}
+    >
+      <div class="av-timeline-dot"></div>
+
+      <div class="av-timeline-content">
+        <h3 class="av-timeline-date">{item.date}</h3>
+        {item.title && <h4 class="av-timeline-title">{item.title}</h4>}
+        <p class="av-timeline-body">{item.body}</p>
+      </div>
+    </div>
+  ))}
+</div>
+
+<style>
+  .av-timeline {
+    margin-top: 2rem;
+    text-align: left; /* override parent center alignment */
+  }
+
+  .av-timeline-row {
+    position: relative;
+    padding-left: 2.2rem;
+    padding-bottom: 1.8rem;
+  }
+
+  /* Vertical line (per row, so it connects dot → next dot) */
+  .av-timeline-row::before {
+    content: "";
+    position: absolute;
+    left: 7px;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    background: var(--ans-border-subtle, rgba(148, 163, 184, 0.6));
+    border-radius: 999px;
+  }
+
+  /* Shorten the line on the last item so it ends nicely */
+  .av-timeline-row--last::before {
+    bottom: 0.9rem;
+  }
+
+  /* Dot sitting on the line */
+  .av-timeline-dot {
+    position: absolute;
+    left: 0;
+    top: 0.25rem;
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    background: var(--ans-primary, #6366f1);
+    border: 2px solid var(--ans-bg, #020617);
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35);
+    z-index: 1;
+  }
+
+  /* Text content */
+  .av-timeline-content {
+    position: relative;
+  }
+
+  .av-timeline-date {
+    margin: 0;
+    font-size: 1.05rem;
+    font-weight: 700;
+  }
+
+  .av-timeline-title {
+    margin: 0.15rem 0 0.4rem;
+    font-size: 0.98rem;
+    font-weight: 500;
+    opacity: 0.9;
+  }
+
+  .av-timeline-body {
+    margin: 0;
+    line-height: 1.6;
+    opacity: 0.88;
+  }
+</style>