@mohasinac/appkit 2.2.0 → 2.3.1

package/dist/styles.css

@@ -0,0 +1,20 @@
+/*
+ * @mohasinac/appkit/styles
+ *
+ * Full stylesheet — design tokens + all UI component styles.
+ *
+ * Import once in your app root (e.g. app/globals.css or app/layout.tsx):
+ *
+ *   @import "@mohasinac/appkit/styles";
+ *
+ * or in a layout component:
+ *
+ *   import "@mohasinac/appkit/styles";
+ *
+ * To import only the design tokens:
+ *
+ *   @import "@mohasinac/appkit/tokens";
+ */
+
+@import "./tokens/tokens.css";
+@import "./ui/components/index.style.css";

package/dist/tokens/index.d.ts

@@ -252,6 +252,68 @@ export declare const LOCALE_CONFIG: {
     /** Postal code pattern for India (6 digits). */
     readonly postalPattern: RegExp;
 };
+/**
+ * Layout dimension constants (height, width strings for Tailwind).
+ */
+export declare const LAYOUT: {
+    readonly titleBarHeight: "h-12";
+    readonly navbarHeight: "h-10 md:h-12";
+    readonly sidebarWidth: "w-80";
+    readonly bottomNavHeight: "h-14";
+    readonly maxContentWidth: "max-w-[1920px]";
+    readonly containerWidth: "max-w-[1920px]";
+    readonly contentPadding: "px-4 md:px-6 lg:px-8";
+    readonly navPadding: "px-4 sm:px-6 lg:px-8";
+    readonly titleBarBg: "bg-white/90 dark:bg-slate-950/90 backdrop-blur-md border-b border-zinc-200/80 dark:border-slate-800/80";
+    readonly navbarBg: "bg-white/90 dark:bg-slate-950/90 backdrop-blur-md border-b border-zinc-200/80 dark:border-slate-800/80";
+    readonly sidebarBg: "bg-white dark:bg-slate-900 border-l border-zinc-200 dark:border-slate-800";
+    readonly bottomNavBg: "bg-white/90 dark:bg-slate-950/90 backdrop-blur-md border-t border-zinc-200/80 dark:border-slate-800/80";
+    readonly footerBg: "bg-zinc-50 dark:bg-slate-900 border-t border-zinc-200 dark:border-slate-800";
+    readonly fullScreen: "min-h-screen";
+    readonly flexCenter: "flex items-center justify-center";
+    readonly centerText: "text-center";
+    /** Full-width content zone: max screen-xl, centred, responsive px */
+    readonly content: "w-full max-w-screen-xl mx-auto px-4 sm:px-6 xl:px-8";
+    /** Narrow zone for forms, articles, policy pages */
+    readonly tight: "w-full max-w-3xl mx-auto px-4 sm:px-6";
+    /** Vertical rhythm padding for sections */
+    readonly section: "py-10 sm:py-14 xl:py-20";
+    /** Compact sections (filters, related products) */
+    readonly sectionSm: "py-6 sm:py-10";
+    /** Responsive gap for flex/grid children */
+    readonly gap: "gap-4 sm:gap-6 xl:gap-8";
+    /** Responsive vertical stack spacing */
+    readonly stack: "space-y-4 sm:space-y-6";
+    /** Kill trailing space from last child in a zone */
+    readonly noBleed: "pb-0 mb-0";
+    /** Kill top margin from first element in a zone */
+    readonly firstChild: "mt-0 pt-0";
+    /** Kill bottom margin from last element in a zone */
+    readonly lastChild: "mb-0 pb-0";
+    /** Combined bottom-nav bar (hidden on lg+, iPhone safe-area aware) */
+    readonly bottomNav: "fixed bottom-0 inset-x-0 z-50 flex justify-around items-center h-16 bg-white dark:bg-zinc-900 border-t border-zinc-200 dark:border-zinc-800 lg:hidden pb-[env(safe-area-inset-bottom)]";
+    /** Main content bottom padding to clear the bottom nav on mobile */
+    readonly mainPadBottomNav: "pb-20 lg:pb-0";
+    /** Standard card heights for consistency */
+    readonly cardHeight: {
+        readonly sm: "h-32";
+        readonly md: "h-48";
+        readonly lg: "h-64";
+        readonly xl: "h-80";
+        readonly product: "h-72";
+        readonly store: "h-56";
+        readonly event: "h-80";
+        readonly blog: "h-96";
+    };
+    /** Standard card widths for consistency */
+    readonly cardWidth: {
+        readonly sm: "w-32";
+        readonly md: "w-48";
+        readonly lg: "w-64";
+        readonly xl: "w-80";
+        readonly full: "w-full";
+    };
+};
 /**
  * Minimum item widths for auto-fill fluid grids matching the four
  * `fluid-grid-*` CSS utilities (defined in tailwind.config.js plugin).
@@ -362,6 +424,25 @@ export declare const THEME_CONSTANTS: {
         readonly bottomNav: "fixed bottom-0 inset-x-0 z-50 flex justify-around items-center h-16 bg-white dark:bg-zinc-900 border-t border-zinc-200 dark:border-zinc-800 lg:hidden pb-[env(safe-area-inset-bottom)]";
         /** Main content bottom padding to clear the bottom nav on mobile */
         readonly mainPadBottomNav: "pb-20 lg:pb-0";
+        /** Standard card heights for consistency */
+        readonly cardHeight: {
+            readonly sm: "h-32";
+            readonly md: "h-48";
+            readonly lg: "h-64";
+            readonly xl: "h-80";
+            readonly product: "h-72";
+            readonly store: "h-56";
+            readonly event: "h-80";
+            readonly blog: "h-96";
+        };
+        /** Standard card widths for consistency */
+        readonly cardWidth: {
+            readonly sm: "w-32";
+            readonly md: "w-48";
+            readonly lg: "w-64";
+            readonly xl: "w-80";
+            readonly full: "w-full";
+        };
     };
     readonly typography: {
         readonly pageTitle: "text-2xl md:text-3xl lg:text-4xl font-bold tracking-tight leading-tight";
@@ -420,6 +501,8 @@ export declare const THEME_CONSTANTS: {
         readonly cols1: "grid grid-cols-1";
         /** 1 → 2 */
         readonly cols2: "grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2";
+        /** 1 → 2 (md breakpoint) */
+        readonly cols2Md: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2";
         /** 1 → 2 → 3 → 4 on widescreen */
         readonly cols3: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4";
         /** 1 → 2 → 3 → 4 → 5 on widescreen */
@@ -428,6 +511,8 @@ export declare const THEME_CONSTANTS: {
         readonly cols5: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5";
         /** 2 → 3 → 4 → 5 → 6 */
         readonly cols6: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6";
+        /** 2 → 3 → 6 (lg breakpoint) */
+        readonly cols6Lg: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6";
         /**
          * Generic card grid — 1 col on portrait mobile → 5 on ultrawide.
          * Starts at 1 (not 2) so product cards with title+image+price are readable
@@ -518,6 +603,8 @@ export declare const THEME_CONSTANTS: {
         readonly imageWide: "relative aspect-video overflow-hidden bg-zinc-100 dark:bg-zinc-800";
         /** Square image wrapper */
         readonly imageSquare: "relative aspect-square overflow-hidden bg-zinc-100 dark:bg-zinc-800";
+        /** Banner aspect ratio — 4:3 on mobile, auto on md+ */
+        readonly aspectBanner: "aspect-[4/3] md:aspect-auto";
         /** Card body — flex-column, responsive padding */
         readonly body: "flex flex-col flex-1 gap-1 p-3 sm:p-4";
         /** Card footer — responsive padding */
@@ -671,6 +758,12 @@ export declare const THEME_CONSTANTS: {
         readonly safeAreaTop: "pt-[env(safe-area-inset-top)]";
         readonly safeAreaInline: "px-[env(safe-area-inset-left)] px-[env(safe-area-inset-right)]";
         readonly gradientText: "bg-gradient-to-r from-primary-600 to-primary-800 bg-clip-text text-transparent";
+        /** Text truncation utilities */
+        readonly textTruncate: "truncate";
+        readonly textClamp1: "line-clamp-1";
+        readonly textClamp2: "line-clamp-2";
+        readonly textClamp3: "line-clamp-3";
+        readonly textClamp4: "line-clamp-4";
     };
     readonly patterns: {
         readonly pageContainer: "min-h-screen bg-white dark:bg-slate-950";
@@ -726,6 +819,44 @@ export declare const THEME_CONSTANTS: {
     };
     /** Carousel navigation tokens — shared by HeroCarousel and SectionCarousel. */
     readonly carousel: {
+        /** Standard responsive per-view configs for carousels */
+        readonly perView: {
+            /** Default: 1 on mobile, 2 on sm, 3 on md+ */
+            readonly default: {
+                readonly base: 1;
+                readonly sm: 2;
+                readonly md: 3;
+            };
+            /** Cards: 1 on mobile, 2 on sm, 3 on md, 4 on lg+ */
+            readonly cards: {
+                readonly base: 1;
+                readonly sm: 2;
+                readonly md: 3;
+                readonly lg: 4;
+            };
+            /** Compact cards: 2 on mobile, 3 on sm, 4 on md, 5 on xl+ */
+            readonly compact: {
+                readonly base: 2;
+                readonly sm: 3;
+                readonly md: 4;
+                readonly xl: 5;
+            };
+            /** Reviews: 1 on mobile, 2 on sm, 3 on md/lg, 4 on 2xl+ */
+            readonly reviews: {
+                readonly base: 1;
+                readonly sm: 2;
+                readonly md: 3;
+                readonly lg: 3;
+                readonly "2xl": 4;
+            };
+            /** Events: 1 on mobile, 2 on sm, 3 on md/lg */
+            readonly events: {
+                readonly base: 1;
+                readonly sm: 2;
+                readonly md: 3;
+                readonly lg: 3;
+            };
+        };
         readonly arrow: "w-10 h-10 rounded-2xl bg-white/85 dark:bg-slate-800/90 backdrop-blur-sm shadow-lg border border-zinc-300/70 dark:border-slate-600 text-zinc-800 dark:text-zinc-200 hover:-translate-y-0.5 hover:bg-white hover:shadow-xl hover:border-zinc-400 dark:hover:border-slate-500 active:scale-95 transition-all duration-200 flex items-center justify-center";
         readonly dotActive: "w-8 h-2 !min-h-0 rounded-full bg-white shadow-sm transition-all duration-500";
         readonly dotInactive: "w-2 h-2 !min-h-0 rounded-full bg-white/55 shadow-sm transition-all duration-500";

package/dist/tokens/index.js

@@ -7,7 +7,7 @@
  *
  * In CSS/Tailwind prefer `var(--appkit-*)` references over these constants.
  */
-// ─── Brand Colors ──────────────────────────────────────────────────────────
+// --- Brand Colors ----------------------------------------------------------
 export const COLORS = {
     primary: {
         DEFAULT: "#84e122",
@@ -72,7 +72,7 @@ export const COLORS = {
         info: "#0284c7",
     },
 };
-// ─── Border Radius ─────────────────────────────────────────────────────────
+// --- Border Radius ---------------------------------------------------------
 export const RADIUS = {
     sm: "0.25rem",
     md: "0.375rem",
@@ -84,7 +84,7 @@ export const RADIUS = {
     btn: "0.75rem",
     full: "9999px",
 };
-// ─── Shadow ────────────────────────────────────────────────────────────────
+// --- Shadow ----------------------------------------------------------------
 export const SHADOWS = {
     sm: "0 1px 2px 0 rgba(0,0,0,0.05)",
     md: "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)",
@@ -94,7 +94,7 @@ export const SHADOWS = {
     glow: "0 0 20px rgba(80, 156, 2, 0.45)",
     glowPink: "0 0 20px rgba(233, 30, 140, 0.5)",
 };
-// ─── Z-index ───────────────────────────────────────────────────────────────
+// --- Z-index ---------------------------------------------------------------
 export const Z_INDEX = {
     dropdown: 30,
     searchBackdrop: 35,
@@ -106,7 +106,7 @@ export const Z_INDEX = {
     modal: 60,
     toast: 70,
 };
-// ─── Token helper ──────────────────────────────────────────────────────────
+// --- Token helper ----------------------------------------------------------
 /**
  * Returns a CSS custom property reference for the given token name.
  *
@@ -118,7 +118,7 @@ export const Z_INDEX = {
 export function token(name) {
     return `var(--appkit-${name})`;
 }
-// ─── Convenience groups ────────────────────────────────────────────────────
+// --- Convenience groups ----------------------------------------------------
 export const TOKENS = {
     colors: COLORS,
     radius: RADIUS,
@@ -126,7 +126,7 @@ export const TOKENS = {
     zIndex: Z_INDEX,
     token,
 };
-// ─── LOCALE_CONFIG ─────────────────────────────────────────────────────────
+// --- LOCALE_CONFIG ---------------------------------------------------------
 import { getDefaultCurrency, getDefaultLocale, getDefaultCountry, getDefaultTimezone, getDefaultPhonePrefix, } from "../core/baseline-resolver";
 /**
  * Locale and currency defaults.
@@ -227,7 +227,7 @@ const THEMED = {
 /**
  * Layout dimension constants (height, width strings for Tailwind).
  */
-const LAYOUT = {
+export const LAYOUT = {
     titleBarHeight: "h-12",
     navbarHeight: "h-10 md:h-12",
     sidebarWidth: "w-80",
@@ -267,6 +267,25 @@ const LAYOUT = {
     bottomNav: "fixed bottom-0 inset-x-0 z-50 flex justify-around items-center h-16 bg-white dark:bg-zinc-900 border-t border-zinc-200 dark:border-zinc-800 lg:hidden pb-[env(safe-area-inset-bottom)]",
     /** Main content bottom padding to clear the bottom nav on mobile */
     mainPadBottomNav: "pb-20 lg:pb-0",
+    /** Standard card heights for consistency */
+    cardHeight: {
+        sm: "h-32",
+        md: "h-48",
+        lg: "h-64",
+        xl: "h-80",
+        product: "h-72",
+        store: "h-56",
+        event: "h-80",
+        blog: "h-96",
+    },
+    /** Standard card widths for consistency */
+    cardWidth: {
+        sm: "w-32",
+        md: "w-48",
+        lg: "w-64",
+        xl: "w-80",
+        full: "w-full",
+    },
 };
 /**
  * Typography scale — fluid steps across sm/md/lg breakpoints.
@@ -340,6 +359,8 @@ const GRID = {
     cols1: "grid grid-cols-1",
     /** 1 → 2 */
     cols2: "grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2",
+    /** 1 → 2 (md breakpoint) */
+    cols2Md: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2",
     /** 1 → 2 → 3 → 4 on widescreen */
     cols3: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4",
     /** 1 → 2 → 3 → 4 → 5 on widescreen */
@@ -348,6 +369,8 @@ const GRID = {
     cols5: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5",
     /** 2 → 3 → 4 → 5 → 6 */
     cols6: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6",
+    /** 2 → 3 → 6 (lg breakpoint) */
+    cols6Lg: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6",
     /**
      * Generic card grid — 1 col on portrait mobile → 5 on ultrawide.
      * Starts at 1 (not 2) so product cards with title+image+price are readable
@@ -396,7 +419,7 @@ const GRID = {
     /** Filter sidebar + main content + optional right aside */
     withFilter: "grid grid-cols-1 lg:grid-cols-[220px_1fr] xl:grid-cols-[260px_1fr_200px] gap-4 xl:gap-6",
 };
-// ─── FLUID GRID ─────────────────────────────────────────────────────────────
+// --- FLUID GRID -------------------------------------------------------------
 /**
  * Minimum item widths for auto-fill fluid grids matching the four
  * `fluid-grid-*` CSS utilities (defined in tailwind.config.js plugin).
@@ -487,6 +510,8 @@ const CARD = {
     imageWide: "relative aspect-video overflow-hidden bg-zinc-100 dark:bg-zinc-800",
     /** Square image wrapper */
     imageSquare: "relative aspect-square overflow-hidden bg-zinc-100 dark:bg-zinc-800",
+    /** Banner aspect ratio — 4:3 on mobile, auto on md+ */
+    aspectBanner: "aspect-[4/3] md:aspect-auto",
     /** Card body — flex-column, responsive padding */
     body: "flex flex-col flex-1 gap-1 p-3 sm:p-4",
     /** Card footer — responsive padding */
@@ -584,13 +609,13 @@ const TRANSITIONS = {
  *   ```
  */
 const SKELETON = {
-    // ─ Pulse (fade) variant ────────────────────────────────────────────────────────────────
+    // - Pulse (fade) variant ----------------------------------------------------------------
     base: "animate-pulse rounded bg-zinc-200 dark:bg-slate-700/60",
     text: "animate-pulse rounded bg-zinc-200 dark:bg-slate-700/60 h-4",
     heading: "animate-pulse rounded bg-zinc-200 dark:bg-slate-700/60 h-7",
     image: "animate-pulse rounded-xl bg-zinc-200 dark:bg-slate-700/60",
     card: "animate-pulse rounded-2xl bg-zinc-200 dark:bg-slate-700/60",
-    // ─ Shimmer (sweep) variant ──────────────────────────────────────────────────────────
+    // - Shimmer (sweep) variant ----------------------------------------------------------
     shimmer: "animate-shimmer bg-[length:400%_100%] rounded bg-gradient-to-r from-zinc-200 via-zinc-100 to-zinc-200 dark:from-slate-800 dark:via-slate-700/60 dark:to-slate-800",
     shimmerText: "animate-shimmer bg-[length:400%_100%] h-4 rounded bg-gradient-to-r from-zinc-200 via-zinc-100 to-zinc-200 dark:from-slate-800 dark:via-slate-700/60 dark:to-slate-800",
     shimmerCard: "animate-shimmer bg-[length:400%_100%] rounded-2xl bg-gradient-to-r from-zinc-200 via-zinc-100 to-zinc-200 dark:from-slate-800 dark:via-slate-700/60 dark:to-slate-800",
@@ -625,6 +650,12 @@ const UTILITIES = {
     safeAreaTop: "pt-[env(safe-area-inset-top)]",
     safeAreaInline: "px-[env(safe-area-inset-left)] px-[env(safe-area-inset-right)]",
     gradientText: "bg-gradient-to-r from-primary-600 to-primary-800 bg-clip-text text-transparent",
+    /** Text truncation utilities */
+    textTruncate: "truncate",
+    textClamp1: "line-clamp-1",
+    textClamp2: "line-clamp-2",
+    textClamp3: "line-clamp-3",
+    textClamp4: "line-clamp-4",
 };
 /**
  * Common component pattern compositions.
@@ -779,6 +810,19 @@ export const THEME_CONSTANTS = {
     },
     /** Carousel navigation tokens — shared by HeroCarousel and SectionCarousel. */
     carousel: {
+        /** Standard responsive per-view configs for carousels */
+        perView: {
+            /** Default: 1 on mobile, 2 on sm, 3 on md+ */
+            default: { base: 1, sm: 2, md: 3 },
+            /** Cards: 1 on mobile, 2 on sm, 3 on md, 4 on lg+ */
+            cards: { base: 1, sm: 2, md: 3, lg: 4 },
+            /** Compact cards: 2 on mobile, 3 on sm, 4 on md, 5 on xl+ */
+            compact: { base: 2, sm: 3, md: 4, xl: 5 },
+            /** Reviews: 1 on mobile, 2 on sm, 3 on md/lg, 4 on 2xl+ */
+            reviews: { base: 1, sm: 2, md: 3, lg: 3, "2xl": 4 },
+            /** Events: 1 on mobile, 2 on sm, 3 on md/lg */
+            events: { base: 1, sm: 2, md: 3, lg: 3 },
+        },
         arrow: "w-10 h-10 rounded-2xl bg-white/85 dark:bg-slate-800/90 backdrop-blur-sm shadow-lg border border-zinc-300/70 dark:border-slate-600 text-zinc-800 dark:text-zinc-200 hover:-translate-y-0.5 hover:bg-white hover:shadow-xl hover:border-zinc-400 dark:hover:border-slate-500 active:scale-95 transition-all duration-200 flex items-center justify-center",
         dotActive: "w-8 h-2 !min-h-0 rounded-full bg-white shadow-sm transition-all duration-500",
         dotInactive: "w-2 h-2 !min-h-0 rounded-full bg-white/55 shadow-sm transition-all duration-500",

package/dist/tokens/tokens.css

@@ -14,7 +14,7 @@
  * Default values reflect a lime + magenta palette (override --appkit-color-primary etc. to rebrand).
  */
 
-/* ─── Colour — Brand ─────────────────────────────────────────────────────── */
+/* --- Colour — Brand ------------------------------------------------------- */
 :root {
   /* Primary — Lime Green (Beyblade green blades) */
   --appkit-color-primary:          #84e122;
@@ -73,7 +73,7 @@
   --appkit-color-accent-950:       #222730;
 }
 
-/* ─── Colour — Semantic (light mode defaults) ────────────────────────────── */
+/* --- Colour — Semantic (light mode defaults) ------------------------------ */
 :root {
   --appkit-color-bg:               #fafafa;    /* zinc-50 */
   --appkit-color-surface:          #ffffff;    /* white */
@@ -97,7 +97,7 @@
   --appkit-color-focus-ring:       #65c408;    /* primary-500 */
 }
 
-/* ─── Colour — Semantic (dark mode overrides) ────────────────────────────── */
+/* --- Colour — Semantic (dark mode overrides) ------------------------------ */
 .dark {
   --appkit-color-bg:               #020617;    /* slate-950 */
   --appkit-color-surface:          #0f172a;    /* slate-900 */
@@ -119,7 +119,7 @@
   --appkit-color-focus-ring:       #f063b9;    /* secondary-400 */
 }
 
-/* ─── Typography ─────────────────────────────────────────────────────────── */
+/* --- Typography ----------------------------------------------------------- */
 :root {
   --appkit-font-sans:      var(--font-body), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --appkit-font-display:   var(--font-display), "Poppins", ui-sans-serif, system-ui, sans-serif;
@@ -149,7 +149,7 @@
   --appkit-tracking-wider:   0.05em;
 }
 
-/* ─── Spacing ────────────────────────────────────────────────────────────── */
+/* --- Spacing -------------------------------------------------------------- */
 :root {
   --appkit-space-1:    0.25rem;    /*  4px */
   --appkit-space-2:    0.5rem;     /*  8px */
@@ -166,7 +166,7 @@
   --appkit-space-24:   6rem;       /* 96px */
 }
 
-/* ─── Border Radius ──────────────────────────────────────────────────────── */
+/* --- Border Radius -------------------------------------------------------- */
 :root {
   --appkit-radius-sm:   0.25rem;    /*  4px */
   --appkit-radius-md:   0.375rem;   /*  6px */
@@ -179,7 +179,7 @@
   --appkit-radius-full: 9999px;
 }
 
-/* ─── Shadow ─────────────────────────────────────────────────────────────── */
+/* --- Shadow --------------------------------------------------------------- */
 :root {
   --appkit-shadow-sm:      0 1px 2px 0 rgba(0,0,0,0.05);
   --appkit-shadow-md:      0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
@@ -190,7 +190,7 @@
   --appkit-shadow-glow-pink: 0 0 20px rgba(233, 30, 140, 0.5);
 }
 
-/* ─── Z-index ────────────────────────────────────────────────────────────── */
+/* --- Z-index -------------------------------------------------------------- */
 :root {
   --appkit-z-dropdown: 30;
   --appkit-z-search-backdrop: 35;
@@ -209,7 +209,7 @@
   --appkit-title-bar-height: 3rem;    /* h-12 = 48px */
 }
 
-/* ─── Transition ─────────────────────────────────────────────────────────── */
+/* --- Transition ----------------------------------------------------------- */
 :root {
   --appkit-duration-fast:   150ms;
   --appkit-duration-base:   200ms;

package/dist/ui/DataTable.js

@@ -85,37 +85,37 @@ pageSize: pageSizeProp, stickyHeader: stickyHeaderProp, striped: stripedProp, sh
         return sortedData.slice(start, start + pageSize);
     }, [sortedData, currentPage, externalPagination, pageSize]);
     const totalPages = Math.ceil(sortedData.length / pageSize);
-    // ─── Loading state ──────────────────────────────────────────────────────────
+    // --- Loading state ----------------------------------------------------------
     if (loading) {
-        return (_jsx("div", { className: "appkit-data-table__wrapper", children: _jsx("div", { className: "appkit-data-table__loading", children: _jsx(Spinner, { size: "lg", label: labelLoading }) }) }));
+        return (_jsx("div", { className: "appkit-data-table__wrapper", "data-section": "datatable-div-630", children: _jsx("div", { className: "appkit-data-table__loading", "data-section": "datatable-div-631", children: _jsx(Spinner, { size: "lg", label: labelLoading }) }) }));
     }
-    // ─── Empty state ────────────────────────────────────────────────────────────
+    // --- Empty state ------------------------------------------------------------
     if (data.length === 0) {
         if (emptyState)
             return _jsx(_Fragment, { children: emptyState });
-        return (_jsx("div", { className: "appkit-data-table__wrapper", children: _jsx("div", { className: "appkit-data-table__empty", children: _jsxs("div", { className: "text-center px-4", children: [emptyIcon ?? (_jsx("svg", { className: "mx-auto h-12 w-12 text-zinc-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" }) })), _jsx(Text, { size: "sm", weight: "semibold", className: "mt-4", children: emptyTitle ?? noDataTitle }), _jsx(Text, { size: "sm", variant: "secondary", className: "mt-1", children: emptyMessage ?? noDataDescription })] }) }) }));
+        return (_jsx("div", { className: "appkit-data-table__wrapper", "data-section": "datatable-div-632", children: _jsx("div", { className: "appkit-data-table__empty", "data-section": "datatable-div-633", children: _jsxs("div", { className: "text-center px-4", "data-section": "datatable-div-634", children: [emptyIcon ?? (_jsx("svg", { className: "mx-auto h-12 w-12 text-zinc-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" }) })), _jsx(Text, { size: "sm", weight: "semibold", className: "mt-4", children: emptyTitle ?? noDataTitle }), _jsx(Text, { size: "sm", variant: "secondary", className: "mt-1", children: emptyMessage ?? noDataDescription })] }) }) }));
     }
     const renderViewToggle = () => {
         if (!showViewToggle)
             return null;
-        return (_jsxs("div", { className: "appkit-data-table__view-toggle", role: "toolbar", "aria-label": "View mode", children: [showTableView && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => handleViewModeChange("table"), "aria-label": tableView, "aria-pressed": activeViewMode === "table", className: `appkit-data-table__view-btn ${activeViewMode === "table" ? "appkit-data-table__view-btn--active" : ""} hidden sm:flex`, children: _jsx("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 10h18M3 6h18M3 14h18M3 18h18" }) }) })), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => handleViewModeChange("grid"), "aria-label": gridView, "aria-pressed": activeViewMode === "grid", className: `appkit-data-table__view-btn ${activeViewMode === "grid" ? "appkit-data-table__view-btn--active" : ""}`, children: _jsx("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" }) }) }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => handleViewModeChange("list"), "aria-label": listView, "aria-pressed": activeViewMode === "list", className: `appkit-data-table__view-btn ${activeViewMode === "list" ? "appkit-data-table__view-btn--active" : ""}`, children: _jsx("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" }) }) })] }));
+        return (_jsxs("div", { className: "appkit-data-table__view-toggle", role: "toolbar", "aria-label": "View mode", "data-section": "datatable-div-635", children: [showTableView && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => handleViewModeChange("table"), "aria-label": tableView, "aria-pressed": activeViewMode === "table", className: `appkit-data-table__view-btn ${activeViewMode === "table" ? "appkit-data-table__view-btn--active" : ""} hidden sm:flex`, children: _jsx("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 10h18M3 6h18M3 14h18M3 18h18" }) }) })), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => handleViewModeChange("grid"), "aria-label": gridView, "aria-pressed": activeViewMode === "grid", className: `appkit-data-table__view-btn ${activeViewMode === "grid" ? "appkit-data-table__view-btn--active" : ""}`, children: _jsx("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" }) }) }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => handleViewModeChange("list"), "aria-label": listView, "aria-pressed": activeViewMode === "list", className: `appkit-data-table__view-btn ${activeViewMode === "list" ? "appkit-data-table__view-btn--active" : ""}`, children: _jsx("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" }) }) })] }));
     };
-    // ─── Card views (grid / list) ────────────────────────────────────────────────
+    // --- Card views (grid / list) ------------------------------------------------
     const renderCardGrid = (mode) => {
         if (!mobileCardRender)
             return null;
         return (_jsx("div", { className: mode === "grid"
                 ? `${GRID_MAP[gridCols]} gap-6`
-                : "flex flex-col gap-4", children: paginatedData.map((item) => (_jsx(SelectableCard, { id: keyExtractor(item), selectable: selectable, selected: selectedIds.includes(keyExtractor(item)), listMode: mode === "list", onToggle: (id, checked) => onSelectionChange?.(checked
+                : "flex flex-col gap-4", "data-section": "datatable-div-636", children: paginatedData.map((item) => (_jsx(SelectableCard, { id: keyExtractor(item), selectable: selectable, selected: selectedIds.includes(keyExtractor(item)), listMode: mode === "list", onToggle: (id, checked) => onSelectionChange?.(checked
                     ? [...selectedIds, id]
                     : selectedIds.filter((s) => s !== id)), children: mobileCardRender(item) }, keyExtractor(item)))) }));
     };
-    // ─── Main render ─────────────────────────────────────────────────────────────
-    return (_jsxs("div", { className: "appkit-data-table", children: [renderViewToggle(), activeViewMode !== "table" &&
+    // --- Main render -------------------------------------------------------------
+    return (_jsxs("div", { className: "appkit-data-table", "data-section": "datatable-div-637", children: [renderViewToggle(), activeViewMode !== "table" &&
                 mobileCardRender &&
-                renderCardGrid(activeViewMode), activeViewMode === "table" && mobileCardRender && (_jsx("div", { className: "appkit-data-table__mobile-cards", children: paginatedData.map((item) => (_jsx(SelectableCard, { id: keyExtractor(item), selectable: selectable, selected: selectedIds.includes(keyExtractor(item)), onToggle: (id, checked) => onSelectionChange?.(checked
+                renderCardGrid(activeViewMode), activeViewMode === "table" && mobileCardRender && (_jsx("div", { className: "appkit-data-table__mobile-cards", "data-section": "datatable-div-638", children: paginatedData.map((item) => (_jsx(SelectableCard, { id: keyExtractor(item), selectable: selectable, selected: selectedIds.includes(keyExtractor(item)), onToggle: (id, checked) => onSelectionChange?.(checked
                         ? [...selectedIds, id]
-                        : selectedIds.filter((s) => s !== id)), children: mobileCardRender(item) }, keyExtractor(item)))) })), activeViewMode === "table" && (_jsx("div", { className: "appkit-data-table__wrapper", children: _jsx("div", { className: `appkit-data-table__scroll ${stickyHeader ? "appkit-data-table__scroll--sticky" : ""}`, children: _jsxs("table", { className: "appkit-data-table__table", children: [_jsx("thead", { className: `appkit-data-table__thead ${stickyHeader ? "appkit-data-table__thead--sticky" : ""}`, children: _jsxs("tr", { children: [selectable && (_jsx("th", { scope: "col", className: "px-4 py-3 w-8", children: _jsx("input", { type: "checkbox", className: "rounded border-zinc-300", "aria-label": "Select all on page", checked: paginatedData.length > 0 &&
+                        : selectedIds.filter((s) => s !== id)), children: mobileCardRender(item) }, keyExtractor(item)))) })), activeViewMode === "table" && (_jsx("div", { className: "appkit-data-table__wrapper", "data-section": "datatable-div-639", children: _jsx("div", { className: `appkit-data-table__scroll ${stickyHeader ? "appkit-data-table__scroll--sticky" : ""}`, "data-section": "datatable-div-640", children: _jsxs("table", { className: "appkit-data-table__table", children: [_jsx("thead", { className: `appkit-data-table__thead ${stickyHeader ? "appkit-data-table__thead--sticky" : ""}`, children: _jsxs("tr", { children: [selectable && (_jsx("th", { scope: "col", className: "px-4 py-3 w-8", children: _jsx("input", { type: "checkbox", className: "rounded border-zinc-300", "aria-label": "Select all on page", checked: paginatedData.length > 0 &&
                                                     paginatedData.every((item) => selectedIds.includes(keyExtractor(item))), onChange: (e) => {
                                                     const pageIds = paginatedData.map(keyExtractor);
                                                     onSelectionChange?.(e.target.checked
@@ -140,15 +140,15 @@ pageSize: pageSizeProp, stickyHeader: stickyHeaderProp, striped: stripedProp, sh
                                                         : selectedIds.filter((s) => s !== id));
                                                 } }) })), columns.map((col) => (_jsx("td", { className: "appkit-data-table__td", children: col.render
                                                 ? col.render(item)
-                                                : (item[col.key] ?? "-") }, col.key))), actions && (_jsx("td", { className: "appkit-data-table__td appkit-data-table__td--actions", onClick: (e) => e.stopPropagation(), children: actions(item) }))] }, keyExtractor(item)))) })] }) }) })), !externalPagination && totalPages > 1 && (_jsx("div", { className: "appkit-data-table__pagination", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: setCurrentPage, maxVisible: resolvedPag.maxVisible, showFirstLast: resolvedPag.showFirstLast, showPrevNext: resolvedPag.showPrevNext, size: resolvedPag.size }) }))] }));
+                                                : (item[col.key] ?? "-") }, col.key))), actions && (_jsx("td", { className: "appkit-data-table__td appkit-data-table__td--actions", onClick: (e) => e.stopPropagation(), children: actions(item) }))] }, keyExtractor(item)))) })] }) }) })), !externalPagination && totalPages > 1 && (_jsx("div", { className: "appkit-data-table__pagination", "data-section": "datatable-div-641", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: setCurrentPage, maxVisible: resolvedPag.maxVisible, showFirstLast: resolvedPag.showFirstLast, showPrevNext: resolvedPag.showPrevNext, size: resolvedPag.size }) }))] }));
 }
 function SelectableCard({ id, selectable, selected, onToggle, children, listMode = false, }) {
     if (!selectable)
-        return _jsx("div", { className: "h-full", children: children });
-    return (_jsxs("div", { className: "relative group h-full", children: [_jsx("div", { className: [
+        return _jsx("div", { className: "h-full", "data-section": "datatable-div-642", children: children });
+    return (_jsxs("div", { className: "relative group h-full", "data-section": "datatable-div-643", children: [_jsx("div", { className: [
                     "absolute z-10",
                     listMode ? "left-2 top-1/2 -translate-y-1/2" : "top-2 left-2",
-                ].join(" "), onClick: (e) => e.stopPropagation(), children: _jsx("div", { className: "w-6 h-6 rounded-md bg-white/95 dark:bg-slate-800/95 shadow-md flex items-center justify-center", children: _jsxs("div", { className: "relative flex items-center justify-center", children: [_jsx("input", { type: "checkbox", className: [
+                ].join(" "), onClick: (e) => e.stopPropagation(), children: _jsx("div", { className: "w-6 h-6 rounded-md bg-white/95 dark:bg-slate-800/95 shadow-md flex items-center justify-center", "data-section": "datatable-div-645", children: _jsxs("div", { className: "relative flex items-center justify-center", "data-section": "datatable-div-646", children: [_jsx("input", { type: "checkbox", className: [
                                     "w-4 h-4 rounded cursor-pointer transition-all appearance-none",
                                     selected
                                         ? "border-2 border-primary bg-primary"

package/dist/ui/columns/column-renderers.js

@@ -14,7 +14,7 @@ export function renderBoolean(value, opts) {
     const falseLabel = opts?.falseLabel ?? "No";
     return value ? trueLabel : falseLabel;
 }
-// ─── Currency ─────────────────────────────────────────────────────────────────
+// --- Currency -----------------------------------------------------------------
 /** Render a monetary amount through the shared `formatCurrency` pipeline. */
 export function renderCurrency(amount, currency, locale, fallback = "—") {
     if (amount == null)
@@ -31,14 +31,14 @@ export function renderCurrencyCompact(amount, currency, fallback = "—") {
     const resolvedCurrency = currency ?? getDefaultCurrency();
     return `${resolvedCurrency} ${amount.toLocaleString()}`;
 }
-// ─── Count ────────────────────────────────────────────────────────────────────
+// --- Count --------------------------------------------------------------------
 /** Render a numeric value with locale separators, with an optional fallback. */
 export function renderCount(value, fallback = "0") {
     if (value == null)
         return fallback;
     return value.toLocaleString();
 }
-// ─── Nullable ─────────────────────────────────────────────────────────────────
+// --- Nullable -----------------------------------------------------------------
 /** Render a nullable value through an optional formatter, with em-dash fallback. */
 export function renderNullable(value, format, fallback = "—") {
     if (value == null)

package/dist/ui/components/Accordion.js

@@ -11,7 +11,7 @@ function toArray(value) {
     return Array.isArray(value) ? value : [value];
 }
 function renderLegacyAccordion({ title, children, open, className = "", titleClassName = "", contentClassName = "", }) {
-    return (_jsxs("details", { open: open, className: `appkit-accordion appkit-accordion--legacy ${className}`, children: [_jsxs("summary", { className: `appkit-accordion__summary ${titleClassName}`, children: [title, _jsx("span", { className: "appkit-accordion__chevron", "aria-hidden": "true", children: "\u25BE" })] }), _jsx("div", { className: `appkit-accordion__content ${contentClassName}`, children: children })] }));
+    return (_jsxs("details", { open: open, className: `appkit-accordion appkit-accordion--legacy ${className}`, children: [_jsxs("summary", { className: `appkit-accordion__summary ${titleClassName}`, children: [title, _jsx("span", { className: "appkit-accordion__chevron", "aria-hidden": "true", children: "\u25BE" })] }), _jsx("div", { className: `appkit-accordion__content ${contentClassName}`, "data-section": "accordion-div-447", children: children })] }));
 }
 export function Accordion({ title, children, open = false, className = "", titleClassName = "", contentClassName = "", type = "single", defaultValue, value, onChange, }) {
     // Backward-compatible simple details mode.

package/dist/ui/components/ActiveFilterChips.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Row } from "./Layout";
 import { Span } from "./Typography";

package/dist/ui/components/Alert.js

@@ -43,5 +43,5 @@ const ICONS = {
 };
 export function Alert({ children, variant = "info", title, compact = false, onClose, className = "", }) {
     const styles = ALERT_STYLES[variant];
-    return (_jsx("div", { className: `appkit-alert ${styles.container} ${className}`, role: "alert", children: _jsxs("div", { className: "appkit-alert__content", children: [!compact && (_jsx("div", { className: `appkit-alert__icon ${styles.icon}`, children: ICONS[variant] })), _jsxs("div", { className: "appkit-alert__body", children: [title && (_jsx(Heading, { level: 3, className: `appkit-alert__title ${styles.title}`, children: title })), _jsx("div", { className: `appkit-alert__text ${styles.text}`, children: children })] }), onClose && (_jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, className: `appkit-alert__close ${styles.icon} ${ALERT_CLOSE_HOVER}`, "aria-label": "Close", children: _jsx("svg", { className: "appkit-alert__close-icon", fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }) }) }))] }) }));
+    return (_jsx("div", { className: `appkit-alert ${styles.container} ${className}`, role: "alert", "data-section": "alert-div-448", children: _jsxs("div", { className: "appkit-alert__content", "data-section": "alert-div-449", children: [!compact && (_jsx("div", { className: `appkit-alert__icon ${styles.icon}`, "data-section": "alert-div-450", children: ICONS[variant] })), _jsxs("div", { className: "appkit-alert__body", "data-section": "alert-div-451", children: [title && (_jsx(Heading, { level: 3, className: `appkit-alert__title ${styles.title}`, children: title })), _jsx("div", { className: `appkit-alert__text ${styles.text}`, "data-section": "alert-div-452", children: children })] }), onClose && (_jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, className: `appkit-alert__close ${styles.icon} ${ALERT_CLOSE_HOVER}`, "aria-label": "Close", children: _jsx("svg", { className: "appkit-alert__close-icon", fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }) }) }))] }) }));
 }

package/dist/ui/components/Avatar.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const UI_AVATAR = {
     base: "appkit-avatar",
@@ -37,6 +36,6 @@ export function Avatar({ src, alt, fallback, name, size = "md", className = "",
 export function AvatarGroup({ avatars, max = 4, size = "sm", className = "", }) {
     const visible = avatars.slice(0, max);
     const extra = avatars.length - visible.length;
-    return (_jsxs("div", { className: [UI_AVATAR.group, className].filter(Boolean).join(" "), children: [visible.map((avatar, index) => (_jsx(Avatar, { ...avatar, size: size, className: "ring-2 ring-white dark:ring-slate-900" }, `${avatar.src ?? avatar.name ?? "avatar"}-${index}`))), extra > 0 ? (_jsxs("span", { className: [UI_AVATAR.overflow, UI_AVATAR.sizes[size]].join(" "), children: ["+", extra] })) : null] }));
+    return (_jsxs("div", { className: [UI_AVATAR.group, className].filter(Boolean).join(" "), "data-section": "avatar-div-453", children: [visible.map((avatar, index) => (_jsx(Avatar, { ...avatar, size: size, className: "ring-2 ring-white dark:ring-slate-900" }, `${avatar.src ?? avatar.name ?? "avatar"}-${index}`))), extra > 0 ? (_jsxs("span", { className: [UI_AVATAR.overflow, UI_AVATAR.sizes[size]].join(" "), children: ["+", extra] })) : null] }));
 }
 export default Avatar;