@ansiversa/components 0.0.41 → 0.0.43

package/package.json

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

package/src/AvEmptyState.astro

@@ -3,23 +3,56 @@ import AvButton from "./AvButton.astro";
 import AvCard from "./AvCard.astro";
 
 interface Props {
-  title: string;
+  // preferred Ansiversa naming
+  headline?: string;
+
+  // current naming (keep for backward compatibility)
+  title?: string;
+
   description?: string;
+
+  // CTA
   ctaLabel?: string;
-  ctaHref?: string;
+  ctaHref?: string;        // if provided => link CTA
+  ctaDisabled?: boolean;   // if button CTA
+  className?: string;
 }
 
-const { title, description, ctaLabel, ctaHref } = Astro.props as Props;
+const {
+  headline,
+  title,
+  description,
+  ctaLabel,
+  ctaHref,
+  ctaDisabled = false,
+  className = "",
+  ...attrs
+} = Astro.props as Props & Record<string, any>;
+
+const resolvedTitle = headline ?? title ?? "Empty";
 ---
 
-<AvCard className="av-empty-state">
+<AvCard className={`av-empty-state ${className}`.trim()} {...attrs}>
   <div class="av-empty-state__body">
-    <h3 class="av-empty-state__title">{title}</h3>
+    <h3 class="av-empty-state__title">{resolvedTitle}</h3>
+
     {description && <p class="av-empty-state__description">{description}</p>}
-    {ctaLabel && ctaHref && (
-      <AvButton href={ctaHref} variant="primary">
-        {ctaLabel}
-      </AvButton>
-    )}
+
+    {ctaLabel ? (
+      ctaHref ? (
+        <AvButton href={ctaHref} variant="primary">
+          {ctaLabel}
+        </AvButton>
+      ) : (
+        <AvButton
+          type="button"
+          variant="primary"
+          disabled={ctaDisabled}
+          onclick="this.dispatchEvent(new CustomEvent('cta', { bubbles: true }))"
+        >
+          {ctaLabel}
+        </AvButton>
+      )
+    ) : null}
   </div>
 </AvCard>

package/src/AvTable.astro

@@ -0,0 +1,18 @@
+---
+interface Props {
+  caption?: string;
+  className?: string;
+  dense?: boolean;
+  stickyHeader?: boolean;
+  scroll?: boolean; // enable x-scroll container
+}
+
+const { caption, className = "", dense = false, stickyHeader = false, scroll = true } = Astro.props as Props;
+---
+
+<div class={`av-table ${scroll ? "av-table--scroll" : ""} ${dense ? "av-table--dense" : ""} ${stickyHeader ? "av-table--sticky" : ""} ${className}`}>
+  <table class="av-table__table">
+    {caption ? <caption class="av-table__caption">{caption}</caption> : null}
+    <slot />
+  </table>
+</div>

package/src/AvTablePagination.astro

@@ -0,0 +1,31 @@
+---
+import AvButton from "./AvButton.astro";
+
+interface Props {
+  page: number;
+  pageSize: number;
+  total: number;
+  prevHref?: string;
+  nextHref?: string;
+}
+
+const { page, pageSize, total, prevHref, nextHref } = Astro.props as Props;
+
+const from = total === 0 ? 0 : (page - 1) * pageSize + 1;
+const to = Math.min(page * pageSize, total);
+---
+
+<div class="av-table-pager" role="navigation" aria-label="Pagination">
+  <div class="av-table-pager__meta">
+    {from}-{to} of {total}
+  </div>
+
+  <div class="av-table-pager__buttons">
+    <AvButton href={prevHref} variant="ghost" size="sm" className={!prevHref ? "av-is-disabled" : ""}>
+      Prev
+    </AvButton>
+    <AvButton href={nextHref} variant="ghost" size="sm" className={!nextHref ? "av-is-disabled" : ""}>
+      Next
+    </AvButton>
+  </div>
+</div>

package/src/AvTableToolbar.astro

@@ -0,0 +1,32 @@
+---
+import AvButton from "./AvButton.astro";
+
+interface Props {
+  title: string;
+  subtitle?: string; // like "12 items"
+  className?: string;
+}
+
+const { title, subtitle, className = "" } = Astro.props as Props;
+---
+
+<div class={`av-table-toolbar ${className}`}>
+  <div class="av-table-toolbar__left">
+    <h1 class="av-table-toolbar__title">{title}</h1>
+    {subtitle ? <p class="av-table-toolbar__subtitle">{subtitle}</p> : null}
+  </div>
+
+  <div class="av-table-toolbar__right">
+    <slot name="right" />
+  </div>
+</div>
+
+<div class="av-table-toolbar__row">
+  <div class="av-table-toolbar__search">
+    <slot name="search" />
+  </div>
+
+  <div class="av-table-toolbar__actions">
+    <slot name="actions" />
+  </div>
+</div>

package/src/styles/global.css

@@ -680,6 +680,142 @@
     @apply bg-rose-500/80 border-rose-200;
   }
 
+  /* TABLE */
+.av-table {
+  border: 1px solid var(--ans-border);
+  border-radius: var(--ans-radius-lg);
+  background: var(--ans-surface);
+  overflow: hidden;
+}
+
+.av-table--scroll {
+  overflow-x: auto;
+}
+
+.av-table__table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  min-width: 720px;
+}
+
+.av-table--dense .av-table__table th,
+.av-table--dense .av-table__table td {
+  padding-top: 0.55rem;
+  padding-bottom: 0.55rem;
+}
+
+.av-table__caption {
+  text-align: left;
+  padding: 0.75rem 1rem;
+  color: var(--ans-muted);
+  font-size: 0.875rem;
+}
+
+.av-table__table thead th {
+  text-align: left;
+  font-weight: 600;
+  color: var(--ans-text);
+  background: var(--ans-surface-2);
+  border-bottom: 1px solid var(--ans-border);
+  padding: 0.8rem 1rem;
+  white-space: nowrap;
+}
+
+.av-table--sticky thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.av-table__table tbody td {
+  padding: 0.9rem 1rem;
+  border-bottom: 1px solid var(--ans-border);
+  color: var(--ans-text);
+  vertical-align: top;
+}
+
+.av-table__table tbody tr:hover td {
+  background: var(--ans-surface-2);
+}
+
+.av-table__cell-muted {
+  color: var(--ans-muted);
+}
+
+.av-table__cell-actions {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+  white-space: nowrap;
+}
+
+/* TOOLBAR */
+.av-table-toolbar {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 0.75rem;
+}
+
+.av-table-toolbar__title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.av-table-toolbar__subtitle {
+  margin-top: 0.25rem;
+  color: var(--ans-muted);
+  font-size: 0.875rem;
+}
+
+.av-table-toolbar__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+}
+
+.av-table-toolbar__search {
+  min-width: 260px;
+  flex: 1;
+}
+
+.av-table-toolbar__actions {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+}
+
+/* PAGER */
+.av-table-pager {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-top: 1rem;
+}
+
+.av-table-pager__meta {
+  color: var(--ans-muted);
+  font-size: 0.875rem;
+}
+
+.av-table-pager__buttons {
+  display: flex;
+  gap: 0.5rem;
+}
+
+/* DISABLED ANCHOR/BUTTON HELPER */
+.av-is-disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
   /* Forms ------------------------------------------------- */
 
 .av-text-error {