ab-nextjs-components 0.1.2 → 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/README.md

@@ -35,6 +35,15 @@
 🚀 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
@@ -69,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
 
@@ -84,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;
+}

package/ab-button/index.tsx

@@ -0,0 +1,164 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 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
+* in the Software without restriction, including without limitation the rights
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+* copies of the Software, and to permit persons to whom the Software is
+* furnished to do so, subject to the following conditions: 
+*  
+* The above copyright notice and this permission notice shall be included in all 
+* copies or substantial portions of the Software. 
+*
+* THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
+* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
+* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+* SOFTWARE.
+
+*
+* @project: ab-nextjs-components
+* @name: AbButton - Client (port of lyd-button)
+* @file: ab-button/index.tsx
+*/
+
+'use client';
+
+import type { CSSProperties, MouseEvent, ReactNode } from 'react';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export type AbButtonType = 'contained' | 'outlined' | 'text';
+export type AbButtonColor = 'primary' | 'secondary' | 'tertiary' | 'white' | 'black';
+
+export interface AbButtonProps {
+  id?: string;
+  type?: AbButtonType;
+  htmlType?: 'button' | 'submit' | 'reset';
+  className?: string;
+  spinnerClassName?: string;
+  hidden?: boolean;
+  style?: CSSProperties;
+  iconStyle?: CSSProperties;
+  rounded?: boolean;
+  raised?: boolean;
+  shrinks?: boolean;
+  expands?: boolean;
+  withIcon?: boolean;
+  disabled?: boolean;
+  isLoading?: boolean;
+  iconPosition?: 'left' | 'right';
+  label: string;
+  icon?: string;
+  color?: AbButtonColor;
+  href?: string;
+  children?: ReactNode;
+  onClick?: (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+}
+
+const AbButton = forwardRef<HTMLButtonElement | HTMLAnchorElement, AbButtonProps>(function AbButton(props, ref) {
+  const {
+    id,
+    type = 'contained',
+    htmlType = 'button',
+    className,
+    spinnerClassName,
+    hidden = false,
+    style,
+    iconStyle,
+    rounded = true,
+    raised = false,
+    shrinks = false,
+    expands = false,
+    withIcon = false,
+    disabled = false,
+    isLoading = false,
+    iconPosition = 'left',
+    label,
+    icon,
+    color = 'primary',
+    href,
+    children,
+    onClick,
+  } = props;
+
+  const classNames = clsx(
+    'AbButton',
+    styles.abButton,
+    className,
+    rounded && styles.abButtonRounded,
+    type === 'contained' && styles.isContained,
+    (disabled || isLoading) && styles.isDisabled,
+  );
+
+  const dataAttrs = {
+    'data-type': type,
+    'data-raised': raised ? 'true' : 'false',
+    'data-shrinks': shrinks ? 'true' : 'false',
+    'data-expands': expands ? 'true' : 'false',
+    'data-rounded': rounded ? 'true' : 'false',
+    'data-iconpos': iconPosition,
+    'data-color': color,
+  } as const;
+
+  const content = (
+    <>
+      {withIcon && iconPosition === 'left' && icon ? (
+        <span className={clsx('material-symbols-rounded', 'icon', styles.abButtonIcon)} style={iconStyle}>{icon}</span>
+      ) : null}
+      <span className={clsx(styles.abButtonSpinnerSlot, !isLoading && styles.hidden)}>
+        <span className={clsx('spinner', 'dot-3', styles.abButtonSpinner, spinnerClassName)} />
+      </span>
+      <span className={clsx(isLoading && styles.invisible)}>{children ?? label}</span>
+      {withIcon && iconPosition === 'right' && icon ? (
+        <span className={clsx('material-symbols-rounded', 'icon', styles.abButtonIcon)} style={iconStyle}>{icon}</span>
+      ) : null}
+    </>
+  );
+
+  if (href) {
+    return (
+      <a
+        ref={ref as React.Ref<HTMLAnchorElement>}
+        id={id}
+        href={disabled ? undefined : href}
+        role="button"
+        className={classNames}
+        style={style}
+        hidden={hidden}
+        aria-disabled={disabled || isLoading}
+        onClick={onClick}
+        {...dataAttrs}
+      >
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      ref={ref as React.Ref<HTMLButtonElement>}
+      id={id}
+      type={htmlType}
+      className={classNames}
+      style={style}
+      hidden={hidden}
+      disabled={disabled || isLoading}
+      onClick={onClick}
+      {...dataAttrs}
+    >
+      {content}
+    </button>
+  );
+});
+
+export default AbButton;
+export { AbButton };