@ansiversa/components 0.0.25 → 0.0.27

package/package.json

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

package/src/styles/global.css

@@ -246,6 +246,10 @@
     @apply text-[0.65rem] text-slate-400 uppercase tracking-[0.18em];
   }
 
+.av-gradient-text {
+  @apply bg-gradient-to-r from-cyan-300 via-cyan-200 to-purple-300 bg-clip-text text-transparent;
+}
+
   .av-navbar-actions {
     @apply flex items-center gap-2;
   }
@@ -268,6 +272,76 @@
 
   /* Hero / Sections -------------------------------------- */
 
+/* Web page helpers (hero / sections) --------------------- */
+
+.av-kicker {
+  @apply inline-flex items-center gap-2 rounded-full border border-slate-700/70 bg-slate-900/70 px-3 py-1 text-[0.7rem] uppercase tracking-[0.16em] text-slate-300;
+}
+
+.av-hero-lead {
+  @apply mt-4 text-base sm:text-lg text-slate-300 max-w-2xl;
+}
+
+.av-section-stack {
+  @apply space-y-10 md:space-y-12;
+}
+
+.av-row {
+  @apply flex items-center gap-3;
+}
+
+.av-row-wrap {
+  @apply flex items-center gap-3 flex-wrap;
+}
+
+.av-col-4 {
+  @apply grid gap-4 sm:grid-cols-2 lg:grid-cols-4;
+}
+
+.av-list {
+  @apply space-y-2 text-sm text-slate-300;
+}
+
+.av-list > li {
+  @apply flex items-start gap-2;
+}
+
+.av-muted-link {
+  @apply text-slate-400 hover:text-slate-200 underline decoration-slate-700/60 hover:decoration-slate-400/60 underline-offset-4 transition-colors;
+}
+
+.av-quote {
+  @apply my-4 rounded-2xl border border-slate-800/70 bg-slate-950/60 p-4 text-sm italic text-slate-300;
+}
+
+.av-search {
+  @apply w-full rounded-2xl border border-slate-800/70 bg-slate-950/60 px-4 py-3 shadow-xl backdrop-blur-xl;
+}
+
+.av-steps--compact .av-steps-list {
+  @apply gap-3;
+}
+
+/* About / Founder --------------------------------------- */
+
+.av-founder-layout {
+  @apply mt-6 grid gap-6 lg:grid-cols-[220px_1fr] items-start;
+}
+
+.av-founder-photo-wrap {
+  @apply rounded-2xl border border-slate-800/70 bg-slate-950/60 p-3 shadow-xl backdrop-blur-xl;
+}
+
+.av-founder-photo {
+  @apply w-full h-auto rounded-xl object-cover;
+}
+
+.av-founder-copy {
+  @apply text-sm text-slate-300 space-y-4;
+}
+
+
+
   .av-hero {
     @apply py-16 md:py-24;
   }
@@ -316,6 +390,49 @@
     @apply grid gap-5 md:gap-6 md:grid-cols-3;
   }
 
+/* Pricing ------------------------------------------------ */
+
+.av-pricing-grid {
+  @apply grid gap-5 md:gap-6 lg:grid-cols-3 items-stretch;
+}
+
+.av-pricing-grid .av-card {
+  @apply h-full;
+}
+
+.av-pricing-table-wrapper {
+  @apply mt-6 overflow-x-auto rounded-2xl border border-slate-800/70 bg-slate-950/60 shadow-xl backdrop-blur-xl;
+}
+
+.av-pricing-table {
+  @apply w-full min-w-[860px] border-collapse text-left text-sm text-slate-300;
+}
+
+.av-pricing-table thead {
+  @apply text-xs uppercase tracking-[0.12em] text-slate-500;
+}
+
+.av-pricing-table thead tr {
+  @apply border-b border-slate-800;
+}
+
+.av-pricing-table th,
+.av-pricing-table td {
+  @apply px-4 py-3 align-top;
+}
+
+.av-pricing-table tbody tr {
+  @apply border-b border-slate-900/80;
+}
+
+.av-pricing-table tbody tr:hover {
+  @apply bg-slate-900/50;
+}
+
+.av-pricing-chip {
+  @apply inline-flex items-center rounded-full border border-slate-700/70 bg-slate-900/80 px-2.5 py-0.5 text-[0.7rem] text-slate-200;
+}
+
   /* Steps / Timeline-ish --------------------------------- */
 
   .av-card-heading {
@@ -364,6 +481,40 @@
     @apply text-sm text-slate-300;
   }
 
+/* Templates (grid + card) ------------------------------ */
+
+.av-template-grid {
+  @apply w-full;
+}
+
+.av-template-grid__items {
+  @apply grid gap-5 md:gap-6 sm:grid-cols-2 lg:grid-cols-3;
+}
+
+.av-template-card {
+  @apply rounded-2xl border border-slate-800/70 bg-slate-950/80 p-5 shadow-xl backdrop-blur-xl flex flex-col gap-3;
+}
+
+.av-template-card__header {
+  @apply flex items-start justify-between gap-3;
+}
+
+.av-template-card__name {
+  @apply text-sm font-semibold text-slate-100;
+}
+
+.av-template-card__accent {
+  @apply h-2 w-2 rounded-full bg-cyan-400/80;
+}
+
+.av-template-card__description {
+  @apply text-sm text-slate-400;
+}
+
+.av-template-card__actions {
+  @apply mt-1 flex items-center gap-2 flex-wrap;
+}
+
   /* Buttons ---------------------------------------------- */
 
   .av-btn {
@@ -419,6 +570,12 @@
 
   /* Forms ------------------------------------------------- */
 
+.av-text-error {
+  @apply text-xs text-rose-300;
+}
+
+
+
   .av-form-group {
     @apply space-y-1.5;
   }
@@ -462,6 +619,25 @@
     @apply text-xs text-slate-400;
   }
 
+/* Form field helpers (labels / wrappers) --------------- */
+
+.av-field {
+  @apply space-y-1.5;
+}
+
+.av-field__label,
+.av-input-label {
+  @apply text-xs font-medium text-slate-300;
+}
+
+.av-input-required {
+  @apply text-rose-300;
+}
+
+.av-input-select-wrapper {
+  @apply relative;
+}
+
   /* Navbar / Nav ----------------------------------------- */
 
   .av-navbar {
@@ -502,6 +678,58 @@
     @apply inline-flex items-center rounded-full border border-slate-700/50 bg-slate-900/70 px-2.5 py-0.5 text-[0.7rem] text-slate-300;
   }
 
+/* Feature / Item lists --------------------------------- */
+
+.av-feature-list {
+  @apply space-y-3;
+}
+
+.av-feature-item {
+  @apply flex items-start gap-3;
+}
+
+.av-feature-dot {
+  @apply mt-1.5 h-2 w-2 rounded-full bg-slate-600;
+}
+
+.av-feature-dot--primary {
+  @apply bg-cyan-400;
+}
+
+.av-feature-dot--secondary {
+  @apply bg-purple-400;
+}
+
+.av-item-list {
+  @apply divide-y divide-slate-800/60;
+}
+
+.av-item-list__item {
+  @apply py-4 flex flex-col gap-1;
+}
+
+.av-item-list__title {
+  @apply text-sm font-semibold text-slate-100;
+}
+
+.av-item-list__subtitle {
+  @apply text-xs text-slate-400;
+}
+
+.av-item-list__meta {
+  @apply text-[0.75rem] text-slate-500;
+}
+
+/* Chip list -------------------------------------------- */
+
+.av-chip-list {
+  @apply flex flex-wrap items-center gap-2;
+}
+
+.av-chip-list__chip {
+  @apply inline-flex items-center rounded-full border border-slate-700/70 bg-slate-900/80 px-2.5 py-0.5 text-[0.7rem] text-slate-300;
+}
+
   /* Alerts ----------------------------------------------- */
 
   .av-alert {
@@ -524,6 +752,24 @@
     @apply rounded-lg border px-3.5 py-2.5 text-xs md:text-sm flex items-start gap-3 border-rose-500/60 bg-rose-500/10 text-rose-50;
   }
 
+/* Empty state ------------------------------------------ */
+
+.av-empty-state {
+  @apply rounded-2xl border border-slate-800/70 bg-slate-950/80 p-6 md:p-7 shadow-xl backdrop-blur-xl;
+}
+
+.av-empty-state__body {
+  @apply flex flex-col items-center text-center gap-3 max-w-xl mx-auto;
+}
+
+.av-empty-state__title {
+  @apply text-base md:text-lg font-semibold text-slate-100;
+}
+
+.av-empty-state__description {
+  @apply text-sm text-slate-400;
+}
+
   /* Tables ----------------------------------------------- */
 
   .av-table {
@@ -589,6 +835,64 @@
     @apply grid gap-3 sm:grid-cols-2;
   }
 
+.av-auth-brand {
+  @apply inline-flex;
+}
+
+.av-auth-brand--center {
+  @apply justify-center;
+}
+
+.av-auth-back__button-row {
+  @apply flex items-center justify-center gap-2 flex-wrap;
+}
+
+/* Signout page ------------------------------------------ */
+
+.av-auth-signout {
+  @apply max-w-md w-full mx-auto;
+}
+
+.av-auth-signout__card {
+  @apply p-6 md:p-7;
+}
+
+.av-auth-signout__badge {
+  @apply inline-flex items-center justify-center gap-2 rounded-full border border-slate-700/70 bg-slate-900/70 px-3 py-1 text-[0.75rem] text-slate-200;
+}
+
+.av-auth-signout__heading {
+  @apply text-lg font-semibold text-slate-100;
+}
+
+.av-auth-signout__copy {
+  @apply text-sm text-slate-400;
+}
+
+.av-auth-signout__status-grid {
+  @apply mt-3 grid gap-3;
+}
+
+.av-auth-signout__status-card {
+  @apply rounded-2xl border border-slate-800/70 bg-slate-950/60 p-3.5 flex items-start gap-3;
+}
+
+.av-auth-signout__status-indicator {
+  @apply mt-1 h-2 w-2 rounded-full bg-emerald-400/80 flex-none;
+}
+
+.av-auth-signout__status-title {
+  @apply block text-sm font-semibold text-slate-200;
+}
+
+.av-auth-signout__status-description {
+  @apply block text-xs text-slate-400;
+}
+
+.av-auth-signout__footer {
+  @apply mt-4 text-xs text-slate-500 text-center;
+}
+
   /* Footer ----------------------------------------------- */
 
   .av-footer {
@@ -611,6 +915,10 @@
     @apply text-[0.78rem] text-slate-500 hidden sm:inline;
   }
 
+.av-caption {
+  @apply text-[0.78rem] text-slate-500;
+}
+
   /* User menu / avatar ----------------------------------- */
 
   .av-user-menu-wrapper {
@@ -746,6 +1054,36 @@
     stroke-width: 1.75;
   }
 
+/* Toolbar ---------------------------------------------- */
+
+.av-toolbar {
+  @apply border-b border-slate-800/60 bg-slate-950/40 backdrop-blur-xl;
+}
+
+.av-toolbar__container {
+  @apply w-full max-w-5xl mx-auto px-5 py-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between;
+}
+
+.av-toolbar__meta {
+  @apply flex flex-col gap-1;
+}
+
+.av-toolbar__actions {
+  @apply flex items-center gap-2 flex-wrap;
+}
+
+.av-toolbar__status {
+  @apply inline-flex items-center gap-2 text-xs text-slate-400;
+}
+
+.av-toolbar__status-dot {
+  @apply h-2 w-2 rounded-full bg-slate-600;
+}
+
+.av-toolbar__status-text {
+  @apply text-xs text-slate-400;
+}
+
   /* AvPageHeader (NEW) ----------------------------------- */
 
   .av-page-header {