ab-nextjs-components 0.1.2 → 0.1.3

package/server/ab-name/index.tsx

@@ -0,0 +1,48 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbName - Server (port of lyd-name)
+* @file: server/ab-name/index.tsx
+*/
+
+
+import type { ReactElement } from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export interface AbNameProps {
+  type?: 'light' | 'regular' | 'bold' | 'black';
+  className?: string;
+  label?: string;
+  onClick?: () => void;
+}
+
+const AbName = ({
+  type = 'regular',
+  className,
+  label = 'abElements',
+  onClick,
+}: AbNameProps): ReactElement => {
+  const first = label.slice(0, 2);
+  const rest = label.slice(2);
+  return (
+    <span
+      data-type={type}
+      className={clsx('AbName', styles.abName, className)}
+      onClick={onClick}
+      role={onClick ? 'button' : undefined}
+      tabIndex={onClick ? 0 : undefined}
+    >
+      <span className={styles.abNameAb}>{first}</span>
+      <span className={styles.abNameRest}>{rest}</span>
+    </span>
+  );
+};
+
+export default AbName;
+export { AbName };

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

@@ -0,0 +1,14 @@
+.abName {
+  display: inline-flex;
+  align-items: baseline;
+  font-family: ui-serif, Georgia, serif;
+  letter-spacing: -0.02em;
+  cursor: default;
+  user-select: none;
+}
+.abName[data-type='light'] { font-weight: 300; }
+.abName[data-type='regular'] { font-weight: 400; }
+.abName[data-type='bold'] { font-weight: 700; }
+.abName[data-type='black'] { font-weight: 900; }
+.abNameAb { color: var(--ab-primary, #6750a4); }
+.abNameRest { opacity: 0.85; }

package/server/ab-nav-link/index.tsx

@@ -0,0 +1,60 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbNavLink - Server (port of lyd-nav-link)
+* @file: server/ab-nav-link/index.tsx
+*/
+
+import type { ReactElement } from 'react';
+import Link from 'next/link';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export interface AbNavLinkProps {
+  className?: string;
+  title?: string;
+  href: string;
+  icon: string;
+  label: string;
+  active?: boolean;
+  noBadge?: boolean;
+  badgeCount?: number;
+}
+
+const AbNavLink = ({
+  className,
+  title,
+  href,
+  icon,
+  label,
+  active = false,
+  noBadge = true,
+  badgeCount = 0,
+}: AbNavLinkProps): ReactElement => {
+  return (
+    <Link
+      href={href}
+      title={title ?? label}
+      data-active={active ? 'true' : 'false'}
+      className={clsx('AbNavLink', styles.abNavLink, className)}
+    >
+      <span className={clsx('material-symbols-rounded', styles.abNavLinkIcon)} aria-hidden>
+        {icon}
+      </span>
+      <span className={styles.abNavLinkLabel}>{label}</span>
+      {!noBadge && badgeCount > 0 ? (
+        <span className={styles.abNavLinkBadge} aria-label={`${badgeCount} notifications`}>
+          {badgeCount}
+        </span>
+      ) : null}
+    </Link>
+  );
+};
+
+export default AbNavLink;
+export { AbNavLink };

package/server/ab-nav-link/styles.module.css

@@ -0,0 +1,32 @@
+.abNavLink {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  text-decoration: none;
+  color: inherit;
+  opacity: 0.7;
+  padding: 0.5rem 0.75rem;
+  border-radius: 9999px;
+  position: relative;
+}
+.abNavLink[data-active='true'] {
+  opacity: 1;
+  background: color-mix(in srgb, var(--ab-primary, #6750a4) 12%, transparent);
+}
+.abNavLinkIcon { font-size: 1.25rem; }
+.abNavLinkLabel { font-size: 0.875rem; font-weight: 600; }
+.abNavLinkBadge {
+  position: absolute;
+  top: 0.15rem;
+  right: 0.15rem;
+  min-width: 1.1rem;
+  height: 1.1rem;
+  padding: 0 0.25rem;
+  border-radius: 9999px;
+  background: var(--ab-error, #b3261e);
+  color: #fff;
+  font-size: 0.65rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}

package/server/ab-navbar/index.tsx

@@ -0,0 +1,64 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbNavbar - Server (port of lyd-navbar)
+* @file: server/ab-navbar/index.tsx
+*/
+
+import type { ReactElement } from 'react';
+import Link from 'next/link';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export type AbNavbarLink = {
+  href: string;
+  icon: string;
+  value: string;
+  label: string;
+};
+
+export interface AbNavbarProps {
+  className?: string;
+  type?: 'customer' | 'admin';
+  page?: string;
+  links?: AbNavbarLink[];
+}
+
+const AbNavbar = ({
+  className,
+  type = 'customer',
+  page,
+  links = [],
+}: AbNavbarProps): ReactElement => {
+  return (
+    <nav data-type={type} className={clsx('AbNavbar', styles.abNavbar, className)} aria-label="Primary">
+      <ul className={styles.abNavbarList}>
+        {links.map((link) => {
+          const active = page === link.value;
+          return (
+            <li key={link.value}>
+              <Link
+                href={link.href}
+                data-active={active ? 'true' : 'false'}
+                className={styles.abNavbarLink}
+              >
+                <span className={clsx('material-symbols-rounded', styles.abNavbarIcon)} aria-hidden>
+                  {link.icon}
+                </span>
+                <span>{link.label}</span>
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+};
+
+export default AbNavbar;
+export { AbNavbar };

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

@@ -0,0 +1,35 @@
+.abNavbar {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  box-sizing: border-box;
+}
+.abNavbarList {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  overflow-x: auto;
+}
+.abNavbarLink {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.45rem 0.75rem;
+  border-radius: 9999px;
+  text-decoration: none;
+  color: inherit;
+  opacity: 0.7;
+  white-space: nowrap;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+.abNavbarLink[data-active='true'] {
+  opacity: 1;
+  background: color-mix(in srgb, var(--ab-primary, #6750a4) 14%, transparent);
+}
+.abNavbarIcon { font-size: 1.15rem; }

package/server/ab-polygon/index.tsx

@@ -0,0 +1,45 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbPolygon - Server (port of lyd-polygon)
+* @file: server/ab-polygon/index.tsx
+*/
+
+import type { ReactElement } from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export interface AbPolygonProps {
+  className?: string;
+  hidden?: boolean;
+  fill?: string;
+  opacity?: number;
+}
+
+const AbPolygon = ({
+  className,
+  hidden = false,
+  fill = '#778D79',
+  opacity = 0.36,
+}: AbPolygonProps): ReactElement => {
+  return (
+    <div hidden={hidden} className={clsx('AbPolygon', styles.abPolygon, className)} aria-hidden>
+      <svg width="761" height="603" viewBox="0 0 761 603" fill="none" role="presentation">
+        <path
+          opacity={opacity}
+          d="M647.5 -242.933C708.264 -265.049 770.182 -213.093 758.954 -149.412L638.552 533.421C627.323 597.102 551.369 624.747 501.834 583.183L-29.316 137.495C-78.8509 95.9301 -64.8151 16.3291 -4.05151 -5.78704L647.5 -242.933Z"
+          fill={fill}
+        />
+      </svg>
+    </div>
+  );
+};
+
+export default AbPolygon;
+export { AbPolygon };
+

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

@@ -0,0 +1,11 @@
+.abPolygon {
+  display: block;
+  line-height: 0;
+  pointer-events: none;
+}
+.abPolygon svg {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+

package/server/ab-sidebar/index.tsx

@@ -0,0 +1,68 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbSidebar - Server (port of lyd-sidebar)
+* @file: server/ab-sidebar/index.tsx
+*/
+
+import type { ReactElement } from 'react';
+import Link from 'next/link';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export type AbSidebarLink = {
+  href: string;
+  icon: string;
+  value: string;
+  label: string;
+};
+
+export interface AbSidebarProps {
+  className?: string;
+  type?: 'customer' | 'admin';
+  page?: string;
+  links?: AbSidebarLink[];
+  brandHref?: string;
+  brandLabel?: string;
+}
+
+const AbSidebar = ({
+  className,
+  type = 'customer',
+  page,
+  links = [],
+  brandHref = '/',
+  brandLabel = 'abElements',
+}: AbSidebarProps): ReactElement => {
+  return (
+    <aside data-type={type} className={clsx('AbSidebar', styles.abSidebar, className)} aria-label="Sidebar">
+      <Link href={brandHref} className={styles.abSidebarBrand}>
+        <span className="material-symbols-rounded" aria-hidden>apps</span>
+        <span>{brandLabel}</span>
+      </Link>
+      <ul className={styles.abSidebarList}>
+        {links.map((link) => {
+          const active = page === link.value;
+          return (
+            <li key={link.value}>
+              <Link href={link.href} data-active={active ? 'true' : 'false'} className={styles.abSidebarLink}>
+                <span className={clsx('material-symbols-rounded', styles.abSidebarIcon)} aria-hidden>
+                  {link.icon}
+                </span>
+                <span>{link.label}</span>
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </aside>
+  );
+};
+
+export default AbSidebar;
+export { AbSidebar };

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

@@ -0,0 +1,41 @@
+.abSidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+  max-width: 16rem;
+  padding: 1rem 0.75rem;
+  box-sizing: border-box;
+}
+.abSidebarBrand {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 700;
+  text-decoration: none;
+  color: inherit;
+}
+.abSidebarList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.abSidebarLink {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.55rem 0.75rem;
+  border-radius: 0.75rem;
+  text-decoration: none;
+  color: inherit;
+  opacity: 0.75;
+  font-weight: 600;
+}
+.abSidebarLink[data-active='true'] {
+  opacity: 1;
+  background: color-mix(in srgb, var(--ab-primary, #6750a4) 14%, transparent);
+}
+.abSidebarIcon { font-size: 1.25rem; }

package/server/ab-switch-back/index.tsx

@@ -0,0 +1,71 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbSwitchBack - Server (port of lyd-switch-back)
+* @file: server/ab-switch-back/index.tsx
+*/
+
+
+import type { ReactElement, ReactNode } from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export interface AbSwitchBackProps {
+  className?: string;
+  hidden?: boolean;
+  switched?: boolean;
+  image: string;
+  imageAlt: string;
+  title?: ReactNode;
+  description?: ReactNode;
+  cta1Label: string;
+  cta1Link: string;
+  cta2Label: string;
+  cta2Link: string;
+}
+
+const AbSwitchBack = ({
+  className,
+  hidden = false,
+  switched = false,
+  image,
+  imageAlt,
+  title,
+  description,
+  cta1Label,
+  cta1Link,
+  cta2Label,
+  cta2Link,
+}: AbSwitchBackProps): ReactElement => {
+  return (
+    <section
+      hidden={hidden}
+      data-switched={switched ? 'true' : 'false'}
+      className={clsx('AbSwitchBack', styles.abSwitchBack, className)}
+    >
+      <div className={styles.abSwitchBackMedia}>
+        <Image className={styles.abSwitchBackImage} src={image} alt={imageAlt} width={800} height={600} unoptimized />
+      </div>
+      <div className={styles.abSwitchBackCopy}>
+        {title ? <h2 className={styles.abSwitchBackTitle}>{title}</h2> : null}
+        {description ? <div className={styles.abSwitchBackDesc}>{description}</div> : null}
+        <div className={styles.abSwitchBackActions}>
+          <Link href={cta1Link} className={styles.abSwitchBackCta}>{cta1Label}</Link>
+          <Link href={cta2Link} className={clsx(styles.abSwitchBackCta, styles.abSwitchBackCtaSecondary)}>
+            {cta2Label}
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default AbSwitchBack;
+export { AbSwitchBack };

package/server/ab-switch-back/styles.module.css

@@ -0,0 +1,45 @@
+.abSwitchBack {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1.25rem;
+  align-items: center;
+}
+@media (min-width: 768px) {
+  .abSwitchBack {
+    grid-template-columns: 1fr 1fr;
+  }
+  .abSwitchBack[data-switched='true'] .abSwitchBackMedia { order: 2; }
+  .abSwitchBack[data-switched='true'] .abSwitchBackCopy { order: 1; }
+}
+.abSwitchBackMedia {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  border-radius: 1rem;
+  overflow: hidden;
+  background: #ddd;
+}
+.abSwitchBackImage {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+.abSwitchBackCopy { display: flex; flex-direction: column; gap: 0.75rem; }
+.abSwitchBackTitle { margin: 0; font-size: 1.5rem; font-weight: 700; }
+.abSwitchBackDesc { margin: 0; opacity: 0.8; }
+.abSwitchBackActions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+.abSwitchBackCta {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  border-radius: 9999px;
+  text-decoration: none;
+  font-weight: 600;
+  background: var(--ab-primary, #6750a4);
+  color: #fff;
+}
+.abSwitchBackCtaSecondary {
+  background: transparent;
+  color: var(--ab-primary, #6750a4);
+  border: 1px solid color-mix(in srgb, var(--ab-primary, #6750a4) 40%, transparent);
+}

package/server/ab-test-hello/index.tsx

@@ -0,0 +1,35 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbTestHello - Server (port of lyd-test-hello)
+* @file: server/ab-test-hello/index.tsx
+*/
+
+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/server/ab-test-hello/styles.module.css

@@ -0,0 +1,22 @@
+.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;
+}

package/server/ab-text/index.tsx

@@ -0,0 +1,33 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbText - Server (port of lyd-text; i18n stripped)
+* @file: server/ab-text/index.tsx
+*/
+
+import type { ReactElement } from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export interface AbTextProps {
+  className?: string;
+  id?: string;
+  value?: string;
+  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/server/ab-text/styles.module.css

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

package/server/index.ts

@@ -0,0 +1,27 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: Server Components - Barrel
+* @file: server/index.ts
+*/
+
+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 AbAvatar } from './ab-avatar/index.tsx'
+export { default as AbBadge } from './ab-badge/index.tsx'
+export { default as AbPolygon } from './ab-polygon/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 AbNavLink } from './ab-nav-link/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 AbSwitchBack } from './ab-switch-back/index.tsx'