ab-nextjs-components 0.1.2 → 0.1.4

package/ab-logo/index.tsx

@@ -0,0 +1,94 @@
+/* 
+* @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: AbLogo - Client
+* @file: ab-logo/index.tsx
+*/
+
+'use client';
+
+import type { ReactElement } from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export type AbLogoType = 'contained' | 'outlined' | 'hollow' | 'naked';
+
+export interface AbLogoProps {
+  type?: AbLogoType;
+  className?: string;
+  /** Optional image src (contained). Defaults to ab-nextjs-icons Ab logo. */
+  src?: string;
+  /** Optional CSS mask value for outlined/hollow/naked. */
+  mask?: string;
+  alt?: string;
+  size?: number | string;
+}
+
+const DEFAULT_SRC = '/ab-nextjs-icons/logos/ab-logo.svg';
+
+const AbLogo = ({
+  type = 'naked',
+  className,
+  src,
+  mask,
+  alt = 'Ab',
+  size,
+}: AbLogoProps): ReactElement => {
+  const dim = size != null ? (typeof size === 'number' ? `${size}px` : size) : undefined;
+
+  if (type === 'contained') {
+    return (
+      <img
+        className={clsx('AbLogo', 'app-logo', styles.abLogoContained, className)}
+        src={src ?? DEFAULT_SRC}
+        alt={alt}
+        data-type="contained"
+        style={dim ? { width: dim, height: dim } : undefined}
+      />
+    );
+  }
+
+  const maskValue = mask ?? `url('${DEFAULT_SRC}') no-repeat 50% 50%`;
+  return (
+    <span
+      className={clsx('AbLogo', 'app-logo', styles.abLogo, className)}
+      data-type={type}
+      role="img"
+      aria-label={alt}
+      style={{
+        ...(dim ? { width: dim, height: dim } : {}),
+        WebkitMask: maskValue,
+        mask: maskValue,
+        WebkitMaskSize: 'cover',
+        maskSize: 'cover',
+      }}
+    />
+  );
+};
+
+export default AbLogo;
+export { AbLogo };

package/ab-logo/styles.module.css

@@ -0,0 +1,30 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+* Plain CSS modules — no Tailwind Tailwind apply (Turbopack-safe).
+*/
+
+/*
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+* MOTTO: We'll always do more 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+*/
+
+.abLogo {
+  display: block;
+  position: relative;
+  width: 1.5rem;
+  height: 1.5rem;
+  background-color: var(--app-logo-color, #a67c52);
+}
+
+.abLogoContained {
+  display: block;
+  position: relative;
+  width: 1.5rem;
+  height: 1.5rem;
+  object-fit: contain;
+}

package/ab-main-headline/index.tsx

@@ -0,0 +1,57 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbMainHeadline - Client (port of lyd-main-headline; providers stripped)
+* @file: ab-main-headline/index.tsx
+*/
+
+'use client';
+
+import type { ReactElement } from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export interface AbMainHeadlineProps {
+  className?: string;
+  timePeriod?: 'morning' | 'afternoon' | 'evening' | 'night';
+  title: string;
+  commaHidden?: boolean;
+  subtitle: string;
+  isFirstNameBold?: boolean;
+  hasExclamationMark?: boolean;
+}
+
+const AbMainHeadline = ({
+  className,
+  timePeriod,
+  title,
+  commaHidden = false,
+  subtitle,
+  isFirstNameBold = false,
+  hasExclamationMark = false,
+}: AbMainHeadlineProps): ReactElement => {
+  const parts = title.trim().split(/\s+/);
+  const first = parts[0] ?? '';
+  const rest = parts.slice(1).join(' ');
+
+  return (
+    <header className={clsx('AbMainHeadline', styles.abMainHeadline, className)}>
+      {timePeriod ? <span className={styles.abMainHeadlinePeriod}>{timePeriod}</span> : null}
+      <h1 className={styles.abMainHeadlineTitle}>
+        {isFirstNameBold ? <strong>{first}</strong> : first}
+        {rest ? ` ${rest}` : ''}
+        {!commaHidden ? ',' : ''}
+        {hasExclamationMark ? '!' : ''}
+      </h1>
+      <p className={styles.abMainHeadlineSubtitle}>{subtitle}</p>
+    </header>
+  );
+};
+
+export default AbMainHeadline;
+export { AbMainHeadline };

package/ab-main-headline/styles.module.css

@@ -0,0 +1,24 @@
+.abMainHeadline {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+.abMainHeadlineTitle {
+  margin: 0;
+  font-size: clamp(1.75rem, 4vw, 2.75rem);
+  font-weight: 700;
+  line-height: 1.15;
+}
+.abMainHeadlineTitle strong { font-weight: 900; }
+.abMainHeadlineSubtitle {
+  margin: 0;
+  font-size: 1.05rem;
+  opacity: 0.75;
+}
+.abMainHeadlinePeriod {
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  opacity: 0.55;
+}

package/ab-menu/index.tsx

@@ -0,0 +1,119 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbMenu - Client (port of lyd-menu)
+* @file: ab-menu/index.tsx
+*/
+
+'use client';
+
+import type { ReactElement } from 'react';
+import { forwardRef } from 'react';
+import Link from 'next/link';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export interface AbMenuItemData {
+  id: string;
+  label: string;
+  icon?: string;
+  selected?: boolean;
+  disabled?: boolean;
+  inactive?: boolean;
+  href?: string;
+  action?: string;
+  onClick?: () => void;
+}
+
+export interface AbMenuProps {
+  className?: string;
+  id: string;
+  title?: string;
+  items: AbMenuItemData[];
+  isCancelable?: boolean;
+  hidden?: boolean;
+  isActive?: boolean;
+  onCancel?: () => void;
+  cancelLabel?: string;
+}
+
+const AbMenu = forwardRef<HTMLMenuElement, AbMenuProps>(function AbMenu(
+  {
+    className,
+    id,
+    title,
+    items,
+    isCancelable = false,
+    hidden = false,
+    isActive = false,
+    onCancel,
+    cancelLabel = 'Cancel',
+  },
+  ref,
+): ReactElement {
+  return (
+    <menu
+      ref={ref}
+      id={id}
+      hidden={hidden}
+      data-active={isActive ? 'true' : 'false'}
+      className={clsx('AbMenu', styles.abMenu, isActive && styles.isActive, className)}
+    >
+      {title ? <p className={styles.abMenuTitle}>{title}</p> : null}
+      <ul className={styles.abMenuList}>
+        {items.map((item) => {
+          const body = (
+            <>
+              {item.icon ? (
+                <span className={clsx('material-symbols-rounded', styles.abMenuIcon)} aria-hidden>
+                  {item.icon}
+                </span>
+              ) : null}
+              <span className={styles.abMenuLabel}>{item.label}</span>
+            </>
+          );
+          const itemClass = clsx(
+            styles.abMenuItem,
+            item.selected && styles.isSelected,
+            item.disabled && styles.isDisabled,
+            item.inactive && styles.isInactive,
+          );
+          if (item.href && !item.disabled) {
+            return (
+              <li key={item.id} className={itemClass} data-action={item.action}>
+                <Link href={item.href} className={styles.abMenuLink} onClick={item.onClick}>
+                  {body}
+                </Link>
+              </li>
+            );
+          }
+          return (
+            <li key={item.id} className={itemClass} data-action={item.action}>
+              <button
+                type="button"
+                className={styles.abMenuButton}
+                disabled={item.disabled}
+                onClick={item.onClick}
+              >
+                {body}
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+      {isCancelable ? (
+        <button type="button" className={styles.abMenuCancel} onClick={onCancel}>
+          {cancelLabel}
+        </button>
+      ) : null}
+    </menu>
+  );
+});
+
+export default AbMenu;
+export { AbMenu };

package/ab-menu/styles.module.css

@@ -0,0 +1,99 @@
+.abMenu {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-width: 12rem;
+  margin: 0;
+  padding: 0.75rem;
+  list-style: none;
+  border-radius: 0.75rem;
+  background: var(--ab-surface-container, #f3edf7);
+  color: var(--ab-on-surface, #1c1b1f);
+  box-shadow: 0 4px 16px color-mix(in srgb, #000 12%, transparent);
+}
+
+.isActive {
+  outline: 2px solid var(--ab-primary, #a67c52);
+}
+
+.abMenuTitle {
+  margin: 0;
+  padding: 0 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  opacity: 0.7;
+}
+
+.abMenuList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.abMenuItem {
+  margin: 0;
+  border-radius: 0.5rem;
+}
+
+.abMenuLink,
+.abMenuButton {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  padding: 0.625rem 0.75rem;
+  border: none;
+  border-radius: 0.5rem;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.abMenuLink:hover,
+.abMenuButton:hover {
+  background: color-mix(in srgb, var(--ab-on-surface, #1c1b1f) 8%, transparent);
+}
+
+.abMenuIcon {
+  font-size: 1.25rem;
+  line-height: 1;
+}
+
+.abMenuLabel {
+  flex: 1;
+}
+
+.isSelected .abMenuLink,
+.isSelected .abMenuButton {
+  background: color-mix(in srgb, var(--ab-primary, #a67c52) 16%, transparent);
+  font-weight: 600;
+}
+
+.isDisabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.isInactive {
+  opacity: 0.65;
+}
+
+.abMenuCancel {
+  margin-top: 0.25rem;
+  padding: 0.625rem;
+  border: none;
+  border-radius: 0.5rem;
+  background: transparent;
+  color: var(--ab-primary, #a67c52);
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}

package/ab-name/index.tsx

@@ -0,0 +1,49 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbName - Client (port of lyd-name)
+* @file: ab-name/index.tsx
+*/
+
+'use client';
+
+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/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/ab-navbar/index.tsx

@@ -0,0 +1,68 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbNavbar - Client (port of lyd-navbar; providers stripped)
+* @file: ab-navbar/index.tsx
+*/
+
+'use client';
+
+import type { ReactElement } from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+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 => {
+  const pathname = usePathname() ?? '';
+  return (
+    <nav data-type={type} className={clsx('AbNavbar', styles.abNavbar, className)} aria-label="Primary">
+      <ul className={styles.abNavbarList}>
+        {links.map((link) => {
+          const active = page ? page === link.value : pathname === link.href || pathname.startsWith(`${link.href}/`);
+          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/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; }