ab-nextjs-components 0.1.1 → 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,40 @@
+### Unreleased (chore/upgrade-next-16 — Skip-override / Phase 5 components)
+
+* **Port (client):** AbBrand, AbName, AbNavbar, AbSidebar, AbText, AbTestHello, AbKeyFeature, AbMainHeadline, AbPreview, AbProduct, AbProductItem, AbSwitchBack, AbDemoBox, AbDemoCode
+* **Port (server):** AbBrand, AbName, AbNavbar, AbSidebar, AbNavLink, AbText, AbTestHello, AbKeyFeature, AbSwitchBack
+* Select/MenuItem skipped — empty on Projects (GitHub-only historically)
+* Product/Preview adapted (Dexie/providers/i18n stripped); usable props API kept
+* Catalog **51 Done** (36 client / 15 server). Local only — no push.
+
+# Changelog
+
+### Unreleased (chore/upgrade-next-16 — Phase 4 Port)
+
+* **Port:** AbSearchbar, AbSearchResult, AbPagePaginator, AbPageSwitcher, AbProgressChips, AbPrice, AbPriceTag
+* **Adapt:** AbImage (Dexie / offline / background-removal stripped; next/image + optional fallback)
+* **Port (server):** AbPolygon
+* Catalog 28 Done (22 client / 6 server). Plain CSS modules. Local only — no push.
+
+### Unreleased (chore/upgrade-next-16 — Phase 2 Adapt + Phase 3 Port)
+
+* **Adapt:** **AbBalloon** (`title=` locked) — Input now uses real AbBalloon
+* **Port:** AbAvatar (client + server), AbBadge (server), AbTab, AbTabs, AbMenu, AbCollapsible, AbColor, AbInfo, AbLikeButton
+* Plain CSS modules; LYD brand/nav/i18n stripped; Select/MenuItem skipped (not on Projects)
+
+### Unreleased (chore/upgrade-next-16 — Phase 2)
+
+* Ported **AbIcon** (client + server) — Material Symbols ligatures
+* Ported **AbLogo** (client + server) — contained | outlined | hollow | naked; defaults from `ab-nextjs-icons` logos (`#a67c52`), optional `src` / `mask`
+* Ported **AbButton** client from lyd-button; invented server (href → `<a>`, else submit/button; no onClick)
+* Added minimal **AbIconButton** (Input dependency)
+* Ported **AbInput** client — `useAbToggle` from `ab-nextjs-hooks/helpers/useAbToggle`; Balloon stub via `title=`; no console.logs
+* Hard peers: next 16.3.4, react^19, clsx; soft optional peers: theme / icons / hooks / animations
+* Plain CSS modules (no `@apply`); theme `data-*` attrs preserved on buttons
+
+### Unreleased (Phase 1)
+
+* Next.js **16.3.4** / React 19 tooling scaffold + Pending catalog
+
+### 0.1.2
+
+* Stub package version bump

package/LICENSE

@@ -2,7 +2,7 @@ MIT License
 ~~~~~~~~~~~
 ab-nextjs-components
 ~~~~~~~~~~~
-Copyright (c) 2024 Abraham Ukachi. Ab UI / NextJS Components.
+Copyright (c) 2024 Abraham Ukachi. The abElements Project.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,10 +1,49 @@
-`ab-nextjs-components`
+<p align="center">
+  <!-- Ab - Logo - Light Mode --> 
+  <a href="https://abraham-ukachi.vercel.app/#gh-light-mode-only" target="_blank">
+    <img src="./.github/ab-logo-light.svg" alt="Ab Logo on Light" width="64" height="64" />
+  </a>
+
+  <!-- Ab - Logo - Dark Mode --> 
+  <a href="https://abraham-ukachi.vercel.app/#gh-dark-mode-only" target="_blank">
+    <img src="./.github/ab-logo-dark.svg" alt="Ab Logo on Dark" width="64" height="64" />
+  </a>
+
+  <!-- Next.js - Logo Name - Light Mode -->
+  <a href="https://nextjs.org/#gh-light-mode-only" target="_blank">
+    <img src="./.github/nextjs-logoname-light.svg" alt="Next.js LogoName on Light" width="192" height="64" />
+  </a>
+
+  <!-- Next.js - Logo Name - Dark Mode -->
+  <a href="https://nextjs.org/#gh-dark-mode-only" target="_blank">
+    <img src="./.github/nextjs-logoname-dark.svg" alt="Next.js LogoName on Dark" width="192" height="64" />
+  </a>
+
+</p>
+
+
+<p align="center">
+    <a href="https://ab-elements.vercel.app" target="_blank"><b>Checkout abElements &rarr;</b></a>
+</p>
+
+
+# `ab-nextjs-components`
 
 > IMPORTANT: This is a work in progress and subject to major changes until version 1.0.
 
+
 🚀 This is a lightweight collection of server & client React components created by [Abraham Ukachi](https://github.com/abraham-ukachi), and optimized for [Next.js](https://nextjs.org/docs) applications 😎.
 
 
+
+
+## Tooling (Phase 1)
+
+- Next.js **16.3.4** / React **19** hard peers
+- ESLint 9 flat + Vitest
+- Package ships as TypeScript (`type: module`) with a `supportedComponents` catalog
+- Phase 2 Adapt complete; Phase 4 + Skip-override (Phase 5 components) complete (local)
+
 ## Getting Started
 
 ### Installation
@@ -39,14 +78,42 @@ A list of all the **client components** and their current status:
 
 | No. | Name | File | Status |
 |:----|:-----|:-----|:-------|
-| 1 | *`AbLogo`* | **ab-logo/index.tsx** | Pending |
-| 2 | *`AbIcon`* | **ab-icon/index.tsx** | Pending |
-| 3 | *`AbButton`* | **ab-button/index.tsx** | Pending |
-| 4 | *`AbInput`* | **ab-input/index.tsx** | Pending |
-
-> NOTE: 
-
-
+| 1 | *`AbIcon`* | **ab-icon/index.tsx** | Done |
+| 2 | *`AbLogo`* | **ab-logo/index.tsx** | Done |
+| 3 | *`AbButton`* | **ab-button/index.tsx** | Done |
+| 4 | *`AbIconButton`* | **ab-icon-button/index.tsx** | Done |
+| 5 | *`AbInput`* | **ab-input/index.tsx** | Done |
+| 6 | *`AbBalloon`* | **ab-balloon/index.tsx** | Done |
+| 7 | *`AbAvatar`* | **ab-avatar/index.tsx** | Done |
+| 8 | *`AbTab`* | **ab-tab/index.tsx** | Done |
+| 9 | *`AbTabs`* | **ab-tabs/index.tsx** | Done |
+| 10 | *`AbMenu`* | **ab-menu/index.tsx** | Done |
+| 11 | *`AbCollapsible`* | **ab-collapsible/index.tsx** | Done |
+| 12 | *`AbColor`* | **ab-color/index.tsx** | Done |
+| 13 | *`AbInfo`* | **ab-info/index.tsx** | Done |
+| 14 | *`AbLikeButton`* | **ab-like-button/index.tsx** | Done |
+| 15 | *`AbSearchbar`* | **ab-searchbar/index.tsx** | Done |
+| 16 | *`AbSearchResult`* | **ab-search-result/index.tsx** | Done |
+| 17 | *`AbPagePaginator`* | **ab-page-paginator/index.tsx** | Done |
+| 18 | *`AbPageSwitcher`* | **ab-page-switcher/index.tsx** | Done |
+| 19 | *`AbProgressChips`* | **ab-progress-chips/index.tsx** | Done |
+| 20 | *`AbPrice`* | **ab-price/index.tsx** | Done |
+| 21 | *`AbPriceTag`* | **ab-price-tag/index.tsx** | Done |
+| 22 | *`AbImage`* | **ab-image/index.tsx** | Done |
+| 23 | *`AbBrand`* | **ab-brand/index.tsx** | Done |
+| 24 | *`AbName`* | **ab-name/index.tsx** | Done |
+| 25 | *`AbNavbar`* | **ab-navbar/index.tsx** | Done |
+| 26 | *`AbSidebar`* | **ab-sidebar/index.tsx** | Done |
+| 27 | *`AbText`* | **ab-text/index.tsx** | Done |
+| 28 | *`AbTestHello`* | **ab-test-hello/index.tsx** | Done |
+| 29 | *`AbKeyFeature`* | **ab-key-feature/index.tsx** | Done |
+| 30 | *`AbMainHeadline`* | **ab-main-headline/index.tsx** | Done |
+| 31 | *`AbPreview`* | **ab-preview/index.tsx** | Done |
+| 32 | *`AbProduct`* | **ab-product/index.tsx** | Done |
+| 33 | *`AbProductItem`* | **ab-product-item/index.tsx** | Done |
+| 34 | *`AbSwitchBack`* | **ab-switch-back/index.tsx** | Done |
+| 35 | *`AbDemoBox`* | **ab-demo-box/index.tsx** | Done |
+| 36 | *`AbDemoCode`* | **ab-demo-code/index.tsx** | Done |
 
 ## Server Components
 
@@ -54,12 +121,21 @@ A list of all the **server components** and their current status:
 
 | No. | Name | File | Status |
 |:----|:-----|:-----|:-------|
-| 1 | *`AbLogo`* | **server/ab-logo/index.tsx** | Pending |
-| 2 | *`AbIcon`* | **server/ab-icon/index.tsx** | Pending |
-| 3 | *`AbButton`* | **server/ab-button/index.tsx** | Pending |
-
-> NOTE: 
-
+| 1 | *`AbIcon`* | **server/ab-icon/index.tsx** | Done |
+| 2 | *`AbLogo`* | **server/ab-logo/index.tsx** | Done |
+| 3 | *`AbButton`* | **server/ab-button/index.tsx** | Done |
+| 4 | *`AbAvatar`* | **server/ab-avatar/index.tsx** | Done |
+| 5 | *`AbBadge`* | **server/ab-badge/index.tsx** | Done |
+| 6 | *`AbPolygon`* | **server/ab-polygon/index.tsx** | Done |
+| 7 | *`AbBrand`* | **server/ab-brand/index.tsx** | Done |
+| 8 | *`AbName`* | **server/ab-name/index.tsx** | Done |
+| 9 | *`AbNavbar`* | **server/ab-navbar/index.tsx** | Done |
+| 10 | *`AbSidebar`* | **server/ab-sidebar/index.tsx** | Done |
+| 11 | *`AbNavLink`* | **server/ab-nav-link/index.tsx** | Done |
+| 12 | *`AbText`* | **server/ab-text/index.tsx** | Done |
+| 13 | *`AbTestHello`* | **server/ab-test-hello/index.tsx** | Done |
+| 14 | *`AbKeyFeature`* | **server/ab-key-feature/index.tsx** | Done |
+| 15 | *`AbSwitchBack`* | **server/ab-switch-back/index.tsx** | Done |
 
 
 ## Learn More abElements

package/ab-avatar/index.tsx

@@ -0,0 +1,90 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbAvatar - Client (port of lyd-avatar)
+* @file: ab-avatar/index.tsx
+*/
+
+'use client';
+
+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;
+  /** Connected href (default `/`). Offline href (default `/`). No app-brand routes. */
+  href?: string;
+  offlineHref?: string;
+  isActive?: boolean;
+  noIndicator?: boolean;
+  onClick?: () => void;
+}
+
+const AbAvatar = ({
+  isConnected,
+  isOnline,
+  icon = 'person',
+  version = 1,
+  image,
+  label = 'Avatar',
+  className,
+  width = 48,
+  height = 48,
+  href = '/',
+  offlineHref = '/',
+  isActive = false,
+  noIndicator = false,
+  onClick,
+}: AbAvatarProps): ReactElement => {
+  const src = image ?? `/assets/images/avatars/avatar_${version}.png`;
+
+  return (
+    <div className={clsx('AbAvatar', styles.abAvatar, className)} onClick={onClick}>
+      {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/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/ab-balloon/index.tsx

@@ -0,0 +1,55 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbBalloon - Client (Adapt — title= locked)
+* @file: ab-balloon/index.tsx
+*/
+
+'use client';
+
+import type { ReactElement, ReactNode } from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export interface AbBalloonProps {
+  /** Native tooltip text — locked API (`title=`). */
+  title?: string;
+  className?: string;
+  hidden?: boolean;
+  disabled?: boolean;
+  children: ReactNode;
+}
+
+/**
+ * AbBalloon — Phase 2 Adapt.
+ * Uses the native `title=` tooltip (locked). Not a port of the LYD hover balloon.
+ */
+const AbBalloon = ({
+  title,
+  className,
+  hidden = false,
+  disabled = false,
+  children,
+}: AbBalloonProps): ReactElement => {
+  if (hidden) {
+    return <>{children}</>;
+  }
+
+  return (
+    <span
+      className={clsx('AbBalloon', styles.abBalloon, className)}
+      title={disabled ? undefined : title}
+      data-disabled={disabled ? 'true' : 'false'}
+    >
+      {children}
+    </span>
+  );
+};
+
+export default AbBalloon;
+export { AbBalloon };

package/ab-balloon/styles.module.css

@@ -0,0 +1,12 @@
+/* AbBalloon — title= Adapt (no hover chrome; native tooltip only) */
+.abBalloon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  max-width: 100%;
+}
+
+.abBalloon[data-disabled='true'] {
+  pointer-events: none;
+}

package/ab-brand/index.tsx

@@ -0,0 +1,88 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbBrand - Client (port of lyd-brand)
+* @file: ab-brand/index.tsx
+*/
+
+'use client';
+
+import type { CSSProperties, ReactElement } from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export interface AbBrandProps {
+  className?: string;
+  type?: 'default' | 'blurred';
+  effect?: 'normal' | 'zoom';
+  hidden?: boolean;
+  image: string;
+  imageAlt?: string;
+  logo: string;
+  logoAlt?: string;
+  name: string;
+  shortName: string;
+  description: string;
+  autohideDescription?: boolean;
+  color?: string;
+  accentColor?: string;
+  link: string;
+  ctaLabel: string;
+}
+
+const AbBrand = ({
+  className,
+  type = 'default',
+  effect = 'normal',
+  hidden = false,
+  image,
+  imageAlt,
+  logo,
+  logoAlt,
+  name,
+  shortName,
+  description,
+  autohideDescription = false,
+  color,
+  accentColor,
+  link,
+  ctaLabel,
+}: AbBrandProps): ReactElement => {
+  const style = {
+    '--ab-brand-color': color,
+    '--ab-brand-accent': accentColor,
+  } as CSSProperties;
+
+  return (
+    <Link
+      href={link}
+      hidden={hidden}
+      data-type={type}
+      data-effect={effect}
+      data-autohide-desc={autohideDescription ? 'true' : 'false'}
+      className={clsx('AbBrand', styles.abBrand, className)}
+      style={style}
+    >
+      <div className={styles.abBrandImageWrap}>
+        <Image className={styles.abBrandImage} src={image} alt={imageAlt ?? name} width={640} height={360} unoptimized />
+      </div>
+      <div className={styles.abBrandMeta}>
+        <Image className={styles.abBrandLogo} src={logo} alt={logoAlt ?? shortName} width={40} height={40} unoptimized />
+        <span className={styles.abBrandShort}>{shortName}</span>
+        <h3 className={styles.abBrandName}>{name}</h3>
+        <p className={styles.abBrandDesc}>{description}</p>
+        <span className={styles.abBrandCta}>{ctaLabel}</span>
+      </div>
+    </Link>
+  );
+};
+
+export default AbBrand;
+export { AbBrand };

package/ab-brand/styles.module.css

@@ -0,0 +1,54 @@
+.abBrand {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1rem;
+  border-radius: 1rem;
+  overflow: hidden;
+  text-decoration: none;
+  color: inherit;
+  background: color-mix(in srgb, var(--ab-surface-container, #f3edf7) 90%, transparent);
+}
+.abBrand[data-type='blurred'] {
+  backdrop-filter: blur(12px);
+}
+.abBrand[data-effect='zoom']:hover .abBrandImage {
+  transform: scale(1.05);
+}
+.abBrandImageWrap {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  border-radius: 0.75rem;
+  overflow: hidden;
+  background: #ddd;
+}
+.abBrandImage {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.35s ease;
+}
+.abBrandLogo {
+  width: 2.5rem;
+  height: 2.5rem;
+  object-fit: contain;
+}
+.abBrandMeta { display: flex; flex-direction: column; gap: 0.25rem; }
+.abBrandName { margin: 0; font-size: 1.125rem; font-weight: 700; }
+.abBrandShort { font-size: 0.75rem; font-weight: 600; opacity: 0.7; text-transform: uppercase; }
+.abBrandDesc { margin: 0; font-size: 0.875rem; opacity: 0.8; }
+.abBrand[data-autohide-desc='true'] .abBrandDesc { display: none; }
+.abBrandCta {
+  align-self: flex-start;
+  border: none;
+  border-radius: 9999px;
+  padding: 0.4rem 0.9rem;
+  background: var(--ab-brand-accent, var(--ab-primary, #6750a4));
+  color: #fff;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  text-decoration: none;
+}