@ansiversa/components 0.0.39 → 0.0.40

package/index.ts

@@ -25,4 +25,6 @@ export { default as AvChipList } from './src/AvChipList.astro';
 export { default as AvTemplateCard } from './src/AvTemplateCard.astro';
 export { default as AvTemplateGrid } from './src/AvTemplateGrid.astro';
 export { default as AvDrawer } from './src/AvDrawer.astro';
-export * from "./src/alpine";
+export { default as AvAccordion } from './src/AvAccordion.astro';
+export { default as AvConfirmDialog } from './src/AvConfirmDialog.astro';
+export * from "./src/alpine";

package/package.json

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

package/src/AvAccordion.astro

@@ -0,0 +1,123 @@
+---
+export interface AvAccordionItem {
+  id?: string;
+  title: string;
+  content: string;
+  disabled?: boolean;
+}
+
+interface Props {
+  items: AvAccordionItem[];
+  mode?: "single" | "multiple";
+  defaultOpenIds?: string[];
+  variant?: "default" | "soft" | "auth";
+  className?: string;
+  [attrs: string]: any;
+}
+
+const {
+  items = [],
+  mode = "multiple",
+  defaultOpenIds = [],
+  variant = "default",
+  className = "",
+  ...attrs
+} = Astro.props as Props;
+
+const accordionId = `av-accordion-${Math.random().toString(36).slice(2)}`;
+
+const preparedItems = items.map((item, index) => {
+  const id = item.id ?? `item-${index}`;
+  const isDefaultOpen = !item.disabled && defaultOpenIds?.includes(id);
+
+  return {
+    ...item,
+    id,
+    isDefaultOpen,
+  };
+});
+
+const wrapperClass = [
+  "av-accordion",
+  `av-accordion--${variant}`,
+  className,
+]
+  .filter(Boolean)
+  .join(" ");
+
+const isSingleMode = mode === "single";
+const needsScript = isSingleMode || preparedItems.some((item) => item.disabled);
+
+const scriptContent = `
+  const root = document.getElementById("${accordionId}");
+  const isSingleMode = ${JSON.stringify(isSingleMode)};
+
+  if (root) {
+    root.addEventListener("click", (event) => {
+      const target = event.target;
+      const summary = target instanceof HTMLElement ? target.closest("summary") : null;
+      if (!summary) return;
+
+      const details = summary.parentElement;
+      if (details?.dataset.disabled === "true") {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    });
+
+    root.addEventListener("toggle", (event) => {
+      const details = event.target;
+      if (!(details instanceof HTMLDetailsElement)) return;
+
+      const isDisabled = details.dataset.disabled === "true";
+      if (isDisabled && details.open) {
+        details.open = false;
+        return;
+      }
+
+      if (isSingleMode && details.open) {
+        root
+          .querySelectorAll("details[data-av-accordion-item]")
+          .forEach((item) => {
+            if (item !== details && item instanceof HTMLDetailsElement) {
+              item.open = false;
+            }
+          });
+      }
+    });
+  }
+`;
+---
+
+<div
+  id={accordionId}
+  class={wrapperClass}
+  data-av-accordion-root
+  data-mode={mode}
+  {...attrs}
+>
+  {preparedItems.map((item) => (
+    <details
+      class={`av-accordion__item ${item.disabled ? "is-disabled" : ""}`}
+      open={item.isDefaultOpen}
+      data-av-accordion-item
+      data-id={item.id}
+      data-disabled={item.disabled ? "true" : undefined}
+      aria-disabled={item.disabled ? "true" : undefined}
+      disabled={item.disabled ? true : undefined}
+    >
+      <summary
+        class="av-accordion__summary"
+        aria-disabled={item.disabled ? "true" : undefined}
+        tabindex={item.disabled ? -1 : undefined}
+      >
+        <span class="av-accordion__icon" aria-hidden="true"></span>
+        <span class="av-accordion__title">{item.title}</span>
+      </summary>
+
+      <div class="av-accordion__content" set:html={item.content}></div>
+    </details>
+  ))}
+</div>
+
+{needsScript ? <script is:inline set:html={scriptContent}></script> : null}

package/src/AvConfirmDialog.astro

@@ -0,0 +1,129 @@
+---
+import AvButton from "./AvButton.astro";
+
+interface Props {
+  id: string;
+  title?: string;
+  description?: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  variant?: "default" | "danger";
+  busy?: boolean;
+  className?: string;
+}
+
+const {
+  id,
+  title = "Confirm",
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  variant = "default",
+  busy = false,
+  className = "",
+} = Astro.props as Props;
+
+const labelId = `${id}-title`;
+const descId = description ? `${id}-desc` : undefined;
+const dialogClass = `av-dialog av-dialog--${variant} ${className}`.trim();
+const dialogIdLiteral = JSON.stringify(id);
+---
+
+<dialog
+  id={id}
+  class={dialogClass}
+  aria-modal="true"
+  aria-labelledby={labelId}
+  aria-describedby={description ? descId : undefined}
+>
+  <div class="av-dialog__panel" role="document">
+    <div class="av-dialog__header">
+      <h2 class="av-dialog__title" id={labelId}>{title}</h2>
+      {description ? <p class="av-dialog__desc" id={descId}>{description}</p> : null}
+    </div>
+
+    <div class="av-dialog__footer">
+      <AvButton type="button" variant="ghost" size="md" data-av-cancel disabled={busy}>
+        {cancelLabel}
+      </AvButton>
+
+      <AvButton
+        type="button"
+        variant="primary"
+        size="md"
+        data-av-confirm
+        className={variant === "danger" ? "av-dialog__confirm--danger" : ""}
+        disabled={busy}
+      >
+        {busy ? "Working…" : confirmLabel}
+      </AvButton>
+    </div>
+  </div>
+</dialog>
+
+<script is:inline>
+  (() => {
+    const dialog = document.getElementById(${dialogIdLiteral});
+    if (!dialog || !(dialog instanceof HTMLDialogElement)) return;
+
+    const confirmBtn = dialog.querySelector("[data-av-confirm]");
+    const cancelBtn = dialog.querySelector("[data-av-cancel]");
+
+    function openDialogById(targetId) {
+      const target = document.getElementById(targetId);
+      if (!target || !(target instanceof HTMLDialogElement)) return;
+
+      if (!target.open && typeof target.showModal === "function") {
+        target.showModal();
+      }
+    }
+
+    function closeDialogById(targetId) {
+      const target = document.getElementById(targetId);
+      if (!target || !(target instanceof HTMLDialogElement)) return;
+
+      if (target.open) {
+        target.close();
+      }
+    }
+
+    function dispatch(name) {
+      dialog.dispatchEvent(
+        new CustomEvent(name, {
+          bubbles: true,
+          detail: { id: dialog.id },
+        })
+      );
+    }
+
+    const open = () => openDialogById(dialog.id);
+    const close = () => closeDialogById(dialog.id);
+
+    window.AvDialog = window.AvDialog || {};
+    window.AvDialog.open = (targetId) => openDialogById(targetId);
+    window.AvDialog.close = (targetId) => closeDialogById(targetId);
+
+    confirmBtn?.addEventListener("click", () => {
+      dispatch("av-confirm");
+      close();
+    });
+
+    cancelBtn?.addEventListener("click", () => {
+      dispatch("av-cancel");
+      close();
+    });
+
+    dialog.addEventListener("cancel", (event) => {
+      event.preventDefault();
+      dispatch("av-cancel");
+      close();
+    });
+
+    dialog.addEventListener("click", (event) => {
+      if (event.target === dialog) {
+        dispatch("av-cancel");
+        close();
+      }
+    });
+  })();
+</script>

package/src/styles/global.css

@@ -629,6 +629,56 @@
     box-shadow: none;
   }
 
+  /* Confirm Dialog --------------------------------------- */
+
+  .av-dialog {
+    @apply fixed m-0 w-[min(640px,92vw)] border-0 bg-transparent p-0 text-slate-100 inset-0;
+  }
+
+  .av-dialog[open] {
+    @apply grid place-items-center;
+  }
+
+  .av-dialog::backdrop {
+    @apply bg-slate-950/80 backdrop-blur-sm;
+  }
+
+  .av-dialog__panel {
+    @apply w-full rounded-2xl border border-slate-800/70 bg-slate-950/90 p-6 shadow-2xl flex flex-col gap-5;
+  }
+
+  .av-dialog__header {
+    @apply space-y-2;
+  }
+
+  .av-dialog__title {
+    @apply text-lg font-semibold text-slate-100;
+  }
+
+  .av-dialog__desc {
+    @apply text-sm leading-relaxed text-slate-400;
+  }
+
+  .av-dialog__footer {
+    @apply mt-1 flex items-center justify-end gap-3;
+  }
+
+  .av-dialog--danger .av-dialog__panel {
+    @apply border-rose-500/50 shadow-[0_20px_40px_rgba(244,63,94,0.25)];
+  }
+
+  .av-dialog--danger .av-dialog__title {
+    @apply text-rose-100;
+  }
+
+  .av-dialog__confirm--danger {
+    @apply border-rose-400/80 bg-rose-500/70 text-rose-50 shadow-[0_0_30px_rgba(244,63,94,0.35)];
+  }
+
+  .av-dialog__confirm--danger:hover {
+    @apply bg-rose-500/80 border-rose-200;
+  }
+
   /* Forms ------------------------------------------------- */
 
 .av-text-error {
@@ -1275,7 +1325,122 @@
     background-size: 200% 100%;
   }
 
+  /* Accordion */
+  .av-accordion {
+    border: 1px solid var(--av-border-subtle);
+    border-radius: var(--av-radius-sm);
+    background: var(--av-surface);
+    box-shadow: var(--av-shadow-soft);
+    overflow: hidden;
+  }
+
+  .av-accordion--soft {
+    background: var(--av-surface-soft);
+    border-color: rgba(148, 163, 184, 0.2);
+    box-shadow: none;
+  }
+
+  .av-accordion--auth {
+    background: rgba(255, 255, 255, 0.02);
+    border-color: var(--av-border-strong);
+    box-shadow: var(--av-shadow-soft);
+  }
+
+  .av-accordion__item {
+    border-bottom: 1px solid var(--av-border-subtle);
+    transition: background var(--av-transition-fast), border-color var(--av-transition-fast);
+  }
+
+  .av-accordion__item:last-of-type {
+    border-bottom: none;
+  }
+
+  .av-accordion__summary {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.95rem 1.1rem;
+    list-style: none;
+    cursor: pointer;
+    color: var(--av-text);
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    transition: color var(--av-transition-fast), background var(--av-transition-fast);
+  }
+
+  .av-accordion__summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .av-accordion__summary:hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+
+  .av-accordion--soft .av-accordion__summary:hover {
+    background: rgba(255, 255, 255, 0.02);
+  }
+
+  .av-accordion__icon {
+    width: 1.4rem;
+    height: 1.4rem;
+    border-radius: var(--av-radius-xs);
+    border: 1px solid var(--av-border-subtle);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--av-text-muted);
+    background: rgba(255, 255, 255, 0.02);
+    transition: transform var(--av-transition-fast), color var(--av-transition-fast),
+      background var(--av-transition-fast), border-color var(--av-transition-fast);
+  }
+
+  .av-accordion__icon::before {
+    content: "›";
+    transform: translateY(-1px);
+    display: block;
+    font-weight: 700;
+  }
+
+  details[open] > .av-accordion__summary .av-accordion__icon {
+    transform: rotate(90deg);
+    color: var(--av-text-strong);
+    border-color: var(--av-border-strong);
+    background: var(--av-primary-soft);
+  }
+
+  details[open] > .av-accordion__summary {
+    color: var(--av-text-strong);
+    background: rgba(255, 255, 255, 0.02);
+  }
+
+  .av-accordion__title {
+    flex: 1;
+    font-size: 1rem;
+  }
+
+  .av-accordion__content {
+    padding: 0 1.1rem 1.1rem 1.1rem;
+    color: var(--av-text-muted);
+    line-height: 1.7;
+    background: rgba(255, 255, 255, 0.01);
+  }
+
+  .av-accordion__item.is-disabled {
+    opacity: 0.6;
+    background: rgba(255, 255, 255, 0.02);
+  }
+
+  .av-accordion__item.is-disabled .av-accordion__summary {
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .av-accordion__item.is-disabled .av-accordion__icon {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: rgba(148, 163, 184, 0.2);
+  }
 
+  
   @keyframes av-shimmer {
     0% { background-position: 0 0; }
     100% { background-position: 200% 0; }