ab-nextjs-components 0.1.1 → 0.1.3

package/server/ab-brand/index.tsx

@@ -0,0 +1,87 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbBrand - Server (port of lyd-brand)
+* @file: server/ab-brand/index.tsx
+*/
+
+
+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/server/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/server/ab-button/index.tsx

@@ -0,0 +1,144 @@
+/* 
+* @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 - Server (no onClick; href→<a> or submit)
+* @file: server/ab-button/index.tsx
+*/
+
+import type { CSSProperties, ReactElement, ReactNode } 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;
+  hidden?: boolean;
+  style?: CSSProperties;
+  rounded?: boolean;
+  raised?: boolean;
+  shrinks?: boolean;
+  expands?: boolean;
+  withIcon?: boolean;
+  disabled?: boolean;
+  iconPosition?: 'left' | 'right';
+  label: string;
+  icon?: string;
+  color?: AbButtonColor;
+  href?: string;
+  children?: ReactNode;
+}
+
+/** Server AbButton — no onClick. Use href for links or htmlType for form submit. */
+const AbButton = ({
+  id,
+  type = 'contained',
+  htmlType = 'button',
+  className,
+  hidden = false,
+  style,
+  rounded = true,
+  raised = false,
+  shrinks = false,
+  expands = false,
+  withIcon = false,
+  disabled = false,
+  iconPosition = 'left',
+  label,
+  icon,
+  color = 'primary',
+  href,
+  children,
+}: AbButtonProps): ReactElement => {
+  const classNames = clsx(
+    'AbButton',
+    styles.abButton,
+    className,
+    rounded && styles.abButtonRounded,
+    disabled && 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')}>{icon}</span>
+      ) : null}
+      <span>{children ?? label}</span>
+      {withIcon && iconPosition === 'right' && icon ? (
+        <span className={clsx('material-symbols-rounded', 'icon')}>{icon}</span>
+      ) : null}
+    </>
+  );
+
+  if (href) {
+    return (
+      <a
+        id={id}
+        href={disabled ? undefined : href}
+        role="button"
+        className={classNames}
+        style={style}
+        hidden={hidden}
+        aria-disabled={disabled}
+        {...dataAttrs}
+      >
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      id={id}
+      type={htmlType}
+      className={classNames}
+      style={style}
+      hidden={hidden}
+      disabled={disabled}
+      {...dataAttrs}
+    >
+      {content}
+    </button>
+  );
+};
+
+export default AbButton;
+export { AbButton };

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

@@ -0,0 +1,63 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* Plain CSS modules — no Tailwind Tailwind apply (Turbopack-safe).
+*/
+
+/*
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+* MOTTO: We'll always do more 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+*/
+
+.abButton {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  width: fit-content;
+  height: fit-content;
+  margin: 0;
+  overflow: hidden;
+  font-size: 1rem;
+  line-height: 1.25;
+  text-decoration: none;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  color: inherit;
+}
+
+.abButtonRounded {
+  border-radius: 9999px;
+}
+
+.isContained {}
+
+.isDisabled {
+  pointer-events: none;
+  opacity: 0.6;
+}
+
+.abButtonIcon {
+  font-size: 1.25rem;
+  line-height: 1;
+}
+
+.abButtonSpinnerSlot {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.abButtonSpinner {
+  /* themed via --ab-button-spinner-color when present */
+}
+
+.hidden { display: none !important; }
+.invisible { visibility: hidden; }

package/server/ab-icon/index.tsx

@@ -0,0 +1,61 @@
+/* 
+* @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: AbIcon - Server
+* @file: server/ab-icon/index.tsx
+*/
+
+import type { ReactElement } from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export interface AbIconProps {
+  name: string;
+  className?: string;
+  filled?: boolean;
+  size?: number | string;
+  title?: string;
+}
+
+/** Material Symbols ligature icon (server / RSC). */
+const AbIcon = ({ name, className, filled = false, size, title }: AbIconProps): ReactElement => {
+  return (
+    <span
+      className={clsx('material-symbols-rounded', 'icon', styles.abIcon, className)}
+      style={size != null ? { fontSize: typeof size === 'number' ? `${size}px` : size } : undefined}
+      title={title}
+      aria-hidden={title ? undefined : true}
+      role={title ? 'img' : undefined}
+      data-filled={filled ? 'true' : 'false'}
+    >
+      {name}
+    </span>
+  );
+};
+
+export default AbIcon;
+export { AbIcon };

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

@@ -0,0 +1,27 @@
+/* 
+* @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 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+*/
+
+.abIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+  line-height: 1;
+  user-select: none;
+}
+
+.abIcon[data-filled='true'] {
+  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+}

package/server/ab-key-feature/index.tsx

@@ -0,0 +1,59 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbKeyFeature - Server (port of lyd-key-feature)
+* @file: server/ab-key-feature/index.tsx
+*/
+
+
+import type { ReactElement } from 'react';
+import Link from 'next/link';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export interface AbKeyFeatureProps {
+  className?: string;
+  hidden?: boolean;
+  icon: string;
+  name: string;
+  title: string;
+  description?: string;
+  linkHidden?: boolean;
+  linkLabel?: string;
+  link?: string;
+  watermark?: string;
+}
+
+const AbKeyFeature = ({
+  className,
+  hidden = false,
+  icon,
+  name,
+  title,
+  description,
+  linkHidden = false,
+  linkLabel = 'Learn more',
+  link,
+  watermark,
+}: AbKeyFeatureProps): ReactElement => {
+  return (
+    <article hidden={hidden} className={clsx('AbKeyFeature', styles.abKeyFeature, className)}>
+      <span className={clsx('material-symbols-rounded', styles.abKeyFeatureIcon)} aria-hidden>{icon}</span>
+      <span className={styles.abKeyFeatureName}>{name}</span>
+      <h3 className={styles.abKeyFeatureTitle}>{title}</h3>
+      {description ? <p className={styles.abKeyFeatureDesc}>{description}</p> : null}
+      {!linkHidden && link ? (
+        <Link href={link} className={styles.abKeyFeatureLink}>{linkLabel}</Link>
+      ) : null}
+      {watermark ? <span className={styles.abKeyFeatureWatermark} aria-hidden>{watermark}</span> : null}
+    </article>
+  );
+};
+
+export default AbKeyFeature;
+export { AbKeyFeature };

package/server/ab-key-feature/styles.module.css

@@ -0,0 +1,47 @@
+.abKeyFeature {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem;
+  border-radius: 1rem;
+  position: relative;
+  overflow: hidden;
+  background: color-mix(in srgb, var(--ab-surface-container, #f3edf7) 85%, transparent);
+}
+.abKeyFeatureIcon {
+  font-size: 2rem;
+  color: var(--ab-primary, #6750a4);
+}
+.abKeyFeatureName {
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  opacity: 0.7;
+}
+.abKeyFeatureTitle {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 700;
+}
+.abKeyFeatureDesc {
+  margin: 0;
+  font-size: 0.9375rem;
+  opacity: 0.8;
+}
+.abKeyFeatureLink {
+  margin-top: 0.5rem;
+  align-self: flex-start;
+  color: var(--ab-primary, #6750a4);
+  font-weight: 600;
+  text-decoration: none;
+}
+.abKeyFeatureWatermark {
+  position: absolute;
+  right: -0.5rem;
+  bottom: -0.5rem;
+  font-size: 5rem;
+  opacity: 0.06;
+  pointer-events: none;
+  user-select: none;
+}

package/server/ab-logo/index.tsx

@@ -0,0 +1,93 @@
+/* 
+* @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 - Server
+* @file: server/ab-logo/index.tsx
+*/
+
+
+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/server/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;
+}