ab-nextjs-components 0.1.2 → 0.1.3

package/ab-test-hello/index.tsx

@@ -0,0 +1,37 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbTestHello - Client (port of lyd-test-hello)
+* @file: ab-test-hello/index.tsx
+*/
+
+'use client';
+
+import type { ReactElement } from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export interface AbTestHelloProps {
+  name: string;
+  src?: string;
+  className?: string;
+}
+
+const AbTestHello = ({ name, src, className }: AbTestHelloProps): ReactElement => {
+  return (
+    <div id="abTestHello" className={clsx('AbTestHello', styles.abTestHello, className)}>
+      <h2 className={styles.abTestHelloTitle}>
+        Hello from <span className={styles.abTestHelloName}>{name}</span>
+      </h2>
+      {src ? <span className={styles.abTestHelloSrc}>{src}</span> : null}
+    </div>
+  );
+};
+
+export default AbTestHello;
+export { AbTestHello };

package/ab-test-hello/styles.module.css

@@ -0,0 +1,25 @@
+.abTestHello {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  text-align: left;
+  padding: 1.5rem;
+}
+.abTestHelloTitle {
+  margin: 0;
+  padding: 0.75rem 0 0.25rem;
+  font-size: 1rem;
+}
+.abTestHelloName {
+  font-family: ui-serif, Georgia, serif;
+  font-weight: 700;
+  color: var(--ab-primary, #6750a4);
+}
+.abTestHelloSrc {
+  font-family: ui-monospace, monospace;
+  font-size: 0.875rem;
+  opacity: 0.5;
+}
+.abTestHelloSrc:hover {
+  opacity: 0.9;
+}

package/ab-text/index.tsx

@@ -0,0 +1,36 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbText - Client (port of lyd-text; i18n stripped — pass value)
+* @file: ab-text/index.tsx
+*/
+
+'use client';
+
+import type { ReactElement } from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export interface AbTextProps {
+  className?: string;
+  id?: string;
+  value?: string;
+  /** Kept for API compat; unused without i18n peer. Prefer `value`. */
+  origin?: string;
+}
+
+const AbText = ({ className, id, value }: AbTextProps): ReactElement => {
+  return (
+    <span id={id} className={clsx('AbText', styles.abText, className)}>
+      {value ?? id ?? ''}
+    </span>
+  );
+};
+
+export default AbText;
+export { AbText };

package/ab-text/styles.module.css

@@ -0,0 +1,3 @@
+.abText {
+  display: inline;
+}

package/index.ts

@@ -0,0 +1,117 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: Components - Package Catalog
+* @file: index.ts
+*/
+
+import type { ComponentCatalogEntry } from './types'
+
+/**
+ * Catalog — Phase 2–4 + Skip-override (Phase 5 components) marked Done.
+ * Barrel re-exports use explicit /index.tsx paths (avoid DIR_IMPORT).
+ */
+const supportedComponents: Array<ComponentCatalogEntry> = [
+  // CLIENT
+  { name: 'AbIcon', file: 'ab-icon/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbLogo', file: 'ab-logo/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbButton', file: 'ab-button/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbIconButton', file: 'ab-icon-button/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbInput', file: 'ab-input/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbBalloon', file: 'ab-balloon/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbAvatar', file: 'ab-avatar/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbTab', file: 'ab-tab/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbTabs', file: 'ab-tabs/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbMenu', file: 'ab-menu/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbCollapsible', file: 'ab-collapsible/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbColor', file: 'ab-color/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbInfo', file: 'ab-info/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbLikeButton', file: 'ab-like-button/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbSearchbar', file: 'ab-searchbar/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbSearchResult', file: 'ab-search-result/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbPagePaginator', file: 'ab-page-paginator/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbPageSwitcher', file: 'ab-page-switcher/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbProgressChips', file: 'ab-progress-chips/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbPrice', file: 'ab-price/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbPriceTag', file: 'ab-price-tag/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbImage', file: 'ab-image/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbBrand', file: 'ab-brand/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbName', file: 'ab-name/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbNavbar', file: 'ab-navbar/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbSidebar', file: 'ab-sidebar/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbText', file: 'ab-text/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbTestHello', file: 'ab-test-hello/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbKeyFeature', file: 'ab-key-feature/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbMainHeadline', file: 'ab-main-headline/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbPreview', file: 'ab-preview/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbProduct', file: 'ab-product/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbProductItem', file: 'ab-product-item/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbSwitchBack', file: 'ab-switch-back/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbDemoBox', file: 'ab-demo-box/index.tsx', kind: 'client', status: 'Done' },
+  { name: 'AbDemoCode', file: 'ab-demo-code/index.tsx', kind: 'client', status: 'Done' },
+
+  // SERVER
+  { name: 'AbIcon', file: 'server/ab-icon/index.tsx', kind: 'server', status: 'Done' },
+  { name: 'AbLogo', file: 'server/ab-logo/index.tsx', kind: 'server', status: 'Done' },
+  { name: 'AbButton', file: 'server/ab-button/index.tsx', kind: 'server', status: 'Done' },
+  { name: 'AbAvatar', file: 'server/ab-avatar/index.tsx', kind: 'server', status: 'Done' },
+  { name: 'AbBadge', file: 'server/ab-badge/index.tsx', kind: 'server', status: 'Done' },
+  { name: 'AbPolygon', file: 'server/ab-polygon/index.tsx', kind: 'server', status: 'Done' },
+  { name: 'AbBrand', file: 'server/ab-brand/index.tsx', kind: 'server', status: 'Done' },
+  { name: 'AbName', file: 'server/ab-name/index.tsx', kind: 'server', status: 'Done' },
+  { name: 'AbNavbar', file: 'server/ab-navbar/index.tsx', kind: 'server', status: 'Done' },
+  { name: 'AbSidebar', file: 'server/ab-sidebar/index.tsx', kind: 'server', status: 'Done' },
+  { name: 'AbNavLink', file: 'server/ab-nav-link/index.tsx', kind: 'server', status: 'Done' },
+  { name: 'AbText', file: 'server/ab-text/index.tsx', kind: 'server', status: 'Done' },
+  { name: 'AbTestHello', file: 'server/ab-test-hello/index.tsx', kind: 'server', status: 'Done' },
+  { name: 'AbKeyFeature', file: 'server/ab-key-feature/index.tsx', kind: 'server', status: 'Done' },
+  { name: 'AbSwitchBack', file: 'server/ab-switch-back/index.tsx', kind: 'server', status: 'Done' },
+]
+
+const abComponents = { supportedComponents }
+
+export { supportedComponents }
+export default abComponents
+
+export { default as AbIcon } from './ab-icon/index.tsx'
+export { default as AbLogo } from './ab-logo/index.tsx'
+export { default as AbButton } from './ab-button/index.tsx'
+export { default as AbIconButton } from './ab-icon-button/index.tsx'
+export { default as AbInput } from './ab-input/index.tsx'
+export { default as AbBalloon } from './ab-balloon/index.tsx'
+export { default as AbAvatar } from './ab-avatar/index.tsx'
+export { default as AbTab } from './ab-tab/index.tsx'
+export { default as AbTabs } from './ab-tabs/index.tsx'
+export { default as AbMenu } from './ab-menu/index.tsx'
+export { default as AbCollapsible } from './ab-collapsible/index.tsx'
+export { default as AbColor } from './ab-color/index.tsx'
+export { default as AbInfo } from './ab-info/index.tsx'
+export { default as AbLikeButton } from './ab-like-button/index.tsx'
+export { default as AbSearchbar } from './ab-searchbar/index.tsx'
+export { default as AbSearchResult } from './ab-search-result/index.tsx'
+export { default as AbPagePaginator } from './ab-page-paginator/index.tsx'
+export { default as AbPageSwitcher } from './ab-page-switcher/index.tsx'
+export { default as AbProgressChips } from './ab-progress-chips/index.tsx'
+export { default as AbPrice } from './ab-price/index.tsx'
+export { default as AbPriceTag } from './ab-price-tag/index.tsx'
+export { default as AbImage } from './ab-image/index.tsx'
+export { default as AbBrand } from './ab-brand/index.tsx'
+export { default as AbName } from './ab-name/index.tsx'
+export { default as AbNavbar } from './ab-navbar/index.tsx'
+export { default as AbSidebar } from './ab-sidebar/index.tsx'
+export { default as AbText } from './ab-text/index.tsx'
+export { default as AbTestHello } from './ab-test-hello/index.tsx'
+export { default as AbKeyFeature } from './ab-key-feature/index.tsx'
+export { default as AbMainHeadline } from './ab-main-headline/index.tsx'
+export { default as AbPreview } from './ab-preview/index.tsx'
+export { default as AbProduct } from './ab-product/index.tsx'
+export { default as AbProductItem } from './ab-product-item/index.tsx'
+export { default as AbSwitchBack } from './ab-switch-back/index.tsx'
+export { default as AbDemoBox } from './ab-demo-box/index.tsx'
+export { default as AbDemoCode } from './ab-demo-code/index.tsx'
+export { default as AbPolygon } from './server/ab-polygon/index.tsx'

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "ab-nextjs-components",
-  "version": "0.1.2",
-  "description": "🚀 A lightweight collection of server & client React components created by Abraham Ukachi, and optimized for Next.js applications 😎.",
-  "main": "index.js",
+  "version": "0.1.3",
+  "description": "\ud83d\ude80 A lightweight collection of server & client React components created by Abraham Ukachi, and optimized for Next.js applications \ud83d\ude0e.",
+  "type": "module",
+  "main": "index.ts",
   "types": "types/index.d.ts",
   "homepage": "https://github.com/abraham-ukachi/ab-nextjs-components#readme",
   "repository": {
@@ -12,6 +13,10 @@
   "bugs": {
     "url": "https://github.com/abraham-ukachi/ab-nextjs-components/issues"
   },
+  "scripts": {
+    "lint": "eslint . --fix",
+    "test": "vitest run"
+  },
   "keywords": [
     "react",
     "nextjs",
@@ -20,7 +25,8 @@
     "components",
     "abraham",
     "ukachi",
-    "ab-nextjs-components"
+    "ab-nextjs-components",
+    "ab-elements"
   ],
   "author": {
     "name": "Abraham Ukachi",
@@ -28,7 +34,146 @@
     "email": "abraham.ukachi@laplateforme.io"
   },
   "license": "MIT",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+  "peerDependencies": {
+    "clsx": "^2",
+    "next": "16.3.4",
+    "react": "^19",
+    "react-dom": "^19",
+    "ab-nextjs-theme": "*",
+    "ab-nextjs-icons": "*",
+    "ab-nextjs-hooks": "*",
+    "ab-nextjs-animations": "*"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "eslint": "^9.39.0",
+    "eslint-config-next": "16.3.4",
+    "next": "16.3.4",
+    "react": "^19",
+    "react-dom": "^19",
+    "typescript": "^5",
+    "vitest": "^3",
+    "clsx": "^2.1.1",
+    "ab-nextjs-hooks": "file:../ab-nextjs-hooks"
+  },
+  "files": [
+    "index.ts",
+    "types",
+    "server",
+    "ab-logo",
+    "ab-icon",
+    "ab-button",
+    "ab-icon-button",
+    "ab-input",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md",
+    "ab-balloon",
+    "ab-avatar",
+    "ab-tab",
+    "ab-tabs",
+    "ab-menu",
+    "ab-collapsible",
+    "ab-color",
+    "ab-info",
+    "ab-like-button",
+    "ab-searchbar",
+    "ab-search-result",
+    "ab-page-paginator",
+    "ab-page-switcher",
+    "ab-progress-chips",
+    "ab-price",
+    "ab-price-tag",
+    "ab-image",
+    "ab-brand",
+    "ab-name",
+    "ab-navbar",
+    "ab-sidebar",
+    "ab-text",
+    "ab-test-hello",
+    "ab-key-feature",
+    "ab-main-headline",
+    "ab-preview",
+    "ab-product",
+    "ab-product-item",
+    "ab-switch-back",
+    "ab-demo-box",
+    "ab-demo-code"
+  ],
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "default": "./index.ts"
+    },
+    "./package.json": "./package.json",
+    "./ab-icon": "./ab-icon/index.tsx",
+    "./ab-logo": "./ab-logo/index.tsx",
+    "./ab-button": "./ab-button/index.tsx",
+    "./ab-icon-button": "./ab-icon-button/index.tsx",
+    "./ab-input": "./ab-input/index.tsx",
+    "./server/ab-icon": "./server/ab-icon/index.tsx",
+    "./server/ab-logo": "./server/ab-logo/index.tsx",
+    "./server/ab-button": "./server/ab-button/index.tsx",
+    "./ab-balloon": "./ab-balloon/index.tsx",
+    "./ab-avatar": "./ab-avatar/index.tsx",
+    "./ab-tab": "./ab-tab/index.tsx",
+    "./ab-tabs": "./ab-tabs/index.tsx",
+    "./ab-menu": "./ab-menu/index.tsx",
+    "./ab-collapsible": "./ab-collapsible/index.tsx",
+    "./ab-color": "./ab-color/index.tsx",
+    "./ab-info": "./ab-info/index.tsx",
+    "./ab-like-button": "./ab-like-button/index.tsx",
+    "./server/ab-avatar": "./server/ab-avatar/index.tsx",
+    "./server/ab-badge": "./server/ab-badge/index.tsx",
+    "./ab-searchbar": "./ab-searchbar/index.tsx",
+    "./ab-search-result": "./ab-search-result/index.tsx",
+    "./ab-page-paginator": "./ab-page-paginator/index.tsx",
+    "./ab-page-switcher": "./ab-page-switcher/index.tsx",
+    "./ab-progress-chips": "./ab-progress-chips/index.tsx",
+    "./ab-price": "./ab-price/index.tsx",
+    "./ab-price-tag": "./ab-price-tag/index.tsx",
+    "./ab-image": "./ab-image/index.tsx",
+    "./server/ab-polygon": "./server/ab-polygon/index.tsx",
+    "./server": {
+      "default": "./server/index.ts"
+    },
+    "./ab-brand": "./ab-brand/index.tsx",
+    "./ab-name": "./ab-name/index.tsx",
+    "./ab-navbar": "./ab-navbar/index.tsx",
+    "./ab-sidebar": "./ab-sidebar/index.tsx",
+    "./ab-text": "./ab-text/index.tsx",
+    "./ab-test-hello": "./ab-test-hello/index.tsx",
+    "./ab-key-feature": "./ab-key-feature/index.tsx",
+    "./ab-main-headline": "./ab-main-headline/index.tsx",
+    "./ab-preview": "./ab-preview/index.tsx",
+    "./ab-product": "./ab-product/index.tsx",
+    "./ab-product-item": "./ab-product-item/index.tsx",
+    "./ab-switch-back": "./ab-switch-back/index.tsx",
+    "./ab-demo-box": "./ab-demo-box/index.tsx",
+    "./ab-demo-code": "./ab-demo-code/index.tsx",
+    "./server/ab-brand": "./server/ab-brand/index.tsx",
+    "./server/ab-name": "./server/ab-name/index.tsx",
+    "./server/ab-navbar": "./server/ab-navbar/index.tsx",
+    "./server/ab-sidebar": "./server/ab-sidebar/index.tsx",
+    "./server/ab-nav-link": "./server/ab-nav-link/index.tsx",
+    "./server/ab-text": "./server/ab-text/index.tsx",
+    "./server/ab-test-hello": "./server/ab-test-hello/index.tsx",
+    "./server/ab-key-feature": "./server/ab-key-feature/index.tsx",
+    "./server/ab-switch-back": "./server/ab-switch-back/index.tsx"
+  },
+  "peerDependenciesMeta": {
+    "ab-nextjs-theme": {
+      "optional": true
+    },
+    "ab-nextjs-icons": {
+      "optional": true
+    },
+    "ab-nextjs-hooks": {
+      "optional": true
+    },
+    "ab-nextjs-animations": {
+      "optional": true
+    }
   }
-}
+}

package/server/ab-avatar/index.tsx

@@ -0,0 +1,85 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbAvatar - Server (port of server/lyd-avatar)
+* @file: server/ab-avatar/index.tsx
+*/
+
+import type { ReactElement } from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export interface AbAvatarProps {
+  isConnected: boolean;
+  isOnline: boolean;
+  icon?: 'person' | 'group';
+  version?: number;
+  image?: string;
+  label?: string;
+  className?: string;
+  width?: number;
+  height?: number;
+  href?: string;
+  offlineHref?: string;
+  isActive?: boolean;
+  noIndicator?: boolean;
+}
+
+const AbAvatar = ({
+  isConnected,
+  isOnline,
+  icon = 'person',
+  version = 1,
+  image,
+  label = 'Avatar',
+  className,
+  width = 48,
+  height = 48,
+  href = '/',
+  offlineHref = '/',
+  isActive = false,
+  noIndicator = false,
+}: AbAvatarProps): ReactElement => {
+  const src = image ?? `/assets/images/avatars/avatar_${version}.png`;
+
+  return (
+    <div className={clsx('AbAvatar', styles.abAvatar, className)}>
+      {isConnected ? (
+        <Link href={href} className={clsx(styles.abAvatarLink, isActive && styles.isActive)}>
+          <span className={styles.abAvatarImageWrap}>
+            <Image
+              src={src}
+              className={styles.abAvatarImage}
+              width={width}
+              height={height}
+              alt={label}
+            />
+            {!noIndicator ? (
+              <span
+                className={clsx(styles.abAvatarIndicator, !isOnline && styles.isOffline)}
+                aria-hidden
+              />
+            ) : null}
+          </span>
+        </Link>
+      ) : (
+        <Link href={offlineHref} className={styles.abAvatarOffline}>
+          <span className={clsx('material-symbols-rounded', styles.abAvatarIcon)} aria-hidden>
+            {icon}
+          </span>
+          {label ? <span className={styles.abAvatarLabel}>{label}</span> : null}
+        </Link>
+      )}
+    </div>
+  );
+};
+
+export default AbAvatar;
+export { AbAvatar };

package/server/ab-avatar/styles.module.css

@@ -0,0 +1,62 @@
+/* AbAvatar — plain CSS (no Tailwind apply) */
+.abAvatar {
+  display: flex;
+  flex-direction: column;
+  width: auto;
+  height: auto;
+  pointer-events: auto;
+}
+
+.abAvatarLink {
+  position: relative;
+  display: inline-flex;
+  text-decoration: none;
+  opacity: 1;
+}
+
+.isActive {
+  opacity: 0.9;
+}
+
+.abAvatarImageWrap {
+  position: relative;
+  display: inline-flex;
+}
+
+.abAvatarImage {
+  border-radius: 9999px;
+  object-fit: cover;
+}
+
+.abAvatarIndicator {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 9999px;
+  border: 2px solid var(--ab-surface, #fff);
+  background: #22c55e;
+}
+
+.abAvatarIndicator.isOffline {
+  background: #ef4444;
+}
+
+.abAvatarOffline {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  text-decoration: none;
+  color: inherit;
+}
+
+.abAvatarIcon {
+  font-size: 1.75rem;
+  line-height: 1;
+}
+
+.abAvatarLabel {
+  font-size: 0.75rem;
+}

package/server/ab-badge/index.tsx

@@ -0,0 +1,66 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbBadge - Server (port of server/lyd-badge)
+* @file: server/ab-badge/index.tsx
+*/
+
+import type { CSSProperties, ReactElement } from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export interface AbBadgeProps {
+  className?: string;
+  hidden?: boolean;
+  style?: CSSProperties;
+  color?: 'default' | 'red';
+  count: number;
+  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+  size?: 'small' | 'medium' | 'large';
+  maxCount?: number;
+}
+
+function formatCount(count: number, maxCount: number): string {
+  return count > maxCount ? `${maxCount}+` : String(count);
+}
+
+/** Server AbBadge — count pill. No 'use client'. */
+const AbBadge = ({
+  className,
+  hidden = false,
+  style,
+  color = 'default',
+  count,
+  position = 'top-right',
+  size = 'small',
+  maxCount = 99,
+}: AbBadgeProps): ReactElement | null => {
+  if (hidden) return null;
+
+  return (
+    <span
+      className={clsx(
+        'AbBadge',
+        styles.abBadge,
+        styles[`color_${color}`],
+        styles[`pos_${position.replace('-', '_')}`],
+        styles[`size_${size}`],
+        className,
+      )}
+      style={style}
+      data-color={color}
+      data-position={position}
+      data-size={size}
+    >
+      <span className={styles.abBadgeValue}>{formatCount(count, maxCount)}</span>
+    </span>
+  );
+};
+
+export default AbBadge;
+export { AbBadge };

package/server/ab-badge/styles.module.css

@@ -0,0 +1,39 @@
+/* AbBadge — server, plain CSS */
+.abBadge {
+  position: absolute;
+  display: inline-flex;
+  width: fit-content;
+  height: fit-content;
+  overflow: hidden;
+  border-radius: 9999px;
+  padding: 0.125rem 0.375rem;
+  font-weight: 700;
+  line-height: 1.25;
+  pointer-events: none;
+}
+
+.abBadgeValue {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  letter-spacing: 0.04em;
+}
+
+.color_default {
+  background: var(--ab-badge-bg, #e8def8);
+  color: var(--ab-badge-fg, #4a4458);
+}
+
+.color_red {
+  background: #dc2626;
+  color: #fff;
+}
+
+.pos_top_left { top: 0.25rem; left: 0.375rem; }
+.pos_top_right { top: 0.25rem; right: 0.375rem; }
+.pos_bottom_left { bottom: 0.25rem; left: 0.375rem; }
+.pos_bottom_right { bottom: 0.25rem; right: 0.375rem; }
+
+.size_small { font-size: 0.75rem; }
+.size_medium { font-size: 0.875rem; }
+.size_large { font-size: 1rem; }