@ansiversa/components 0.0.42 → 0.0.44

package/index.ts

@@ -27,4 +27,8 @@ export { default as AvTemplateGrid } from './src/AvTemplateGrid.astro';
 export { default as AvDrawer } from './src/AvDrawer.astro';
 export { default as AvAccordion } from './src/AvAccordion.astro';
 export { default as AvConfirmDialog } from './src/AvConfirmDialog.astro';
+export { default as AvTable } from './src/AvTable.astro';
+export { default as AvTableToolbar } from './src/AvTableToolbar.astro';
+export { default as AvTablePagination } from './src/AvTablePagination.astro';
+
 export * from "./src/alpine";

package/package.json

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

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 {