ab-nextjs-components 0.1.1 → 0.1.3

package/ab-demo-code/index.tsx

@@ -0,0 +1,62 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbDemoCode - Client (port of lyd-demo-code; prism soft-optional)
+* @file: ab-demo-code/index.tsx
+*/
+
+'use client';
+
+import type { ReactElement } from 'react';
+import { forwardRef, useState } from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export interface AbDemoCodeProps {
+  className?: string;
+  hidden?: boolean;
+  language?: 'tsx' | 'css' | 'ts' | 'js' | string;
+  code: string;
+}
+
+const AbDemoCode = forwardRef<HTMLDivElement, AbDemoCodeProps>(function AbDemoCode(
+  { className, hidden = false, language = 'tsx', code },
+  ref,
+): ReactElement {
+  const [copied, setCopied] = useState(false);
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1500);
+    } catch {
+      setCopied(false);
+    }
+  };
+
+  return (
+    <div ref={ref} hidden={hidden} className={clsx('AbDemoCode', styles.abDemoCode, className)}>
+      <div className={styles.abDemoCodeHeader}>
+        <span>{language}</span>
+        <button type="button" className={styles.abDemoCodeCopy} onClick={copy} aria-label="Copy code">
+          <span className="material-symbols-rounded" aria-hidden style={{ fontSize: 16 }}>
+            {copied ? 'check' : 'content_copy'}
+          </span>
+          {copied ? 'Copied' : 'Copy'}
+        </button>
+      </div>
+      <pre className={styles.abDemoCodePre}>
+        <code className={styles.abDemoCodeCode}>{code}</code>
+      </pre>
+    </div>
+  );
+});
+
+export default AbDemoCode;
+export { AbDemoCode };

package/ab-demo-code/styles.module.css

@@ -0,0 +1,41 @@
+.abDemoCode {
+  position: relative;
+  border-radius: 0.75rem;
+  overflow: hidden;
+  background: #1e1e2e;
+  color: #cdd6f4;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+}
+.abDemoCodeHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.4rem 0.75rem;
+  background: color-mix(in srgb, #000 25%, transparent);
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  opacity: 0.85;
+}
+.abDemoCodeCopy {
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font: inherit;
+  opacity: 0.8;
+}
+.abDemoCodeCopy:hover { opacity: 1; }
+.abDemoCodePre {
+  margin: 0;
+  padding: 0.85rem 1rem 1rem;
+  overflow: auto;
+  max-height: 24rem;
+}
+.abDemoCodeCode { white-space: pre; }

package/ab-icon/index.tsx

@@ -0,0 +1,63 @@
+/* 
+* @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 - Client
+* @file: ab-icon/index.tsx
+*/
+
+'use client';
+
+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 (client). */
+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/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/ab-icon-button/index.tsx

@@ -0,0 +1,107 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbIconButton - Client
+* @file: ab-icon-button/index.tsx
+*/
+
+'use client';
+
+import type { CSSProperties, MouseEvent } from 'react';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export interface AbIconButtonProps {
+  className?: string;
+  style?: CSSProperties;
+  hidden?: boolean;
+  icon: string;
+  disabled?: boolean;
+  expands?: boolean;
+  shrinks?: boolean;
+  tabIndex?: number;
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+  href?: string;
+  active?: boolean;
+  naked?: boolean;
+  isLoading?: boolean;
+  title?: string;
+  type?: 'button' | 'submit' | 'reset';
+}
+
+const AbIconButton = forwardRef<HTMLButtonElement, AbIconButtonProps>(function AbIconButton(props, ref) {
+  const {
+    className,
+    style,
+    hidden = false,
+    icon,
+    disabled = false,
+    expands = false,
+    shrinks = false,
+    tabIndex,
+    onClick,
+    href,
+    active = false,
+    naked = false,
+    isLoading = false,
+    title,
+    type = 'button',
+  } = props;
+
+  const classNames = clsx('AbIconButton', 'icon-button', styles.abIconButton, className);
+
+  if (href && !isLoading) {
+    return (
+      <span hidden={hidden} className={styles.wrap} title={title}>
+        <a
+          href={disabled ? undefined : href}
+          role="button"
+          className={classNames}
+          style={style}
+          data-active={String(active)}
+          data-naked={String(naked)}
+          data-expands={String(expands)}
+          data-shrinks={String(shrinks)}
+          tabIndex={tabIndex ?? 0}
+          aria-disabled={disabled}
+        >
+          <span className={clsx('material-symbols-rounded', 'icon')}>{icon}</span>
+        </a>
+      </span>
+    );
+  }
+
+  return (
+    <span hidden={hidden} className={styles.wrap} title={title}>
+      <button
+        ref={ref}
+        type={type}
+        className={classNames}
+        style={style}
+        disabled={disabled || isLoading}
+        data-active={String(active)}
+        data-naked={String(naked)}
+        data-expands={String(expands)}
+        data-shrinks={String(shrinks)}
+        onClick={onClick}
+        tabIndex={tabIndex ?? 0}
+        aria-label={title}
+      >
+        {isLoading ? (
+          <span className={clsx('spinner', 'dots-12', styles.spinner)} />
+        ) : (
+          <span className={clsx('material-symbols-rounded', 'icon')}>{icon}</span>
+        )}
+      </button>
+    </span>
+  );
+});
+
+export default AbIconButton;
+export { AbIconButton };

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

@@ -0,0 +1,64 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* Plain CSS modules — no Tailwind Tailwind apply (Turbopack-safe).
+*/
+
+/*
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+* MOTTO: We'll always do more 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+*/
+
+.wrap {
+  display: inline-block;
+  width: fit-content;
+  height: fit-content;
+}
+
+.abIconButton {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  height: fit-content;
+  padding: 0.5rem;
+  margin: 0;
+  border: none;
+  border-radius: 9999px;
+  overflow: hidden;
+  text-decoration: none;
+  cursor: pointer;
+  background: transparent;
+  color: inherit;
+  transition: background-color 0.2s ease, transform 0.2s ease;
+}
+
+.abIconButton:hover {
+  background-color: color-mix(in srgb, currentColor 10%, transparent);
+}
+
+.abIconButton[data-naked='true']:hover {
+  background-color: transparent;
+}
+
+.abIconButton[data-expands='true']:hover {
+  transform: scale(1.06);
+}
+
+.abIconButton[data-shrinks='true']:active {
+  transform: scale(0.94);
+}
+
+.abIconButton:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.spinner {
+  display: inline-block;
+  width: 1.25rem;
+  height: 1.25rem;
+}

package/ab-image/index.tsx

@@ -0,0 +1,83 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbImage - Client (Adapt of lyd-image — Dexie/offline stripped)
+* @file: ab-image/index.tsx
+*/
+
+'use client';
+
+import type { CSSProperties, ReactElement } from 'react';
+import { useState } from 'react';
+import Image from 'next/image';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export interface AbImageProps {
+  className?: string;
+  style?: CSSProperties;
+  hidden?: boolean;
+  src: string;
+  alt?: string;
+  width?: number;
+  height?: number;
+  fill?: boolean;
+  priority?: boolean;
+  sizes?: string;
+  fallbackSrc?: string | null;
+  unoptimized?: boolean;
+}
+
+const AbImage = ({
+  className,
+  style,
+  hidden = false,
+  src,
+  alt = '',
+  width = 320,
+  height = 320,
+  fill = false,
+  priority = false,
+  sizes,
+  fallbackSrc = null,
+  unoptimized = false,
+}: AbImageProps): ReactElement => {
+  const [failed, setFailed] = useState(false);
+  const activeSrc = failed && fallbackSrc ? fallbackSrc : src;
+
+  if (failed && !fallbackSrc) {
+    return (
+      <div hidden={hidden} style={style} className={clsx('AbImage', styles.abImage, className)}>
+        <div className={styles.abImageFallback} role="img" aria-label={alt || 'Image unavailable'}>
+          <span className="material-symbols-rounded" aria-hidden>broken_image</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div hidden={hidden} style={style} className={clsx('AbImage', styles.abImage, className)}>
+      <Image
+        className={styles.abImageImg}
+        src={activeSrc}
+        alt={alt}
+        width={fill ? undefined : width}
+        height={fill ? undefined : height}
+        fill={fill}
+        priority={priority}
+        sizes={sizes}
+        unoptimized={unoptimized}
+        onError={() => setFailed(true)}
+      />
+    </div>
+  );
+};
+
+export default AbImage;
+export { AbImage };
+

package/ab-image/styles.module.css

@@ -0,0 +1,27 @@
+.abImage {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+  overflow: hidden;
+}
+.abImageImg {
+  object-fit: contain;
+  max-width: 100%;
+  max-height: 100%;
+}
+.abImageFallback {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.45;
+  font-size: 0.875rem;
+}
+

package/ab-info/index.tsx

@@ -0,0 +1,89 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbInfo - Client (port of lyd-info)
+* @file: ab-info/index.tsx
+*/
+
+'use client';
+
+import type { ReactElement } from 'react';
+import Link from 'next/link';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export interface AbInfoProps {
+  className?: string;
+  hidden?: boolean;
+  color?: 'primary' | 'secondary' | 'tertiary' | 'white' | 'black';
+  icon: string;
+  title: string;
+  message: string;
+  closeLabel?: string;
+  actionLabel?: string;
+  actionHref?: string | null;
+  onActionClick?: () => void;
+  onCloseClick?: () => void;
+}
+
+const AbInfo = ({
+  className,
+  hidden = false,
+  color = 'primary',
+  icon,
+  title,
+  message,
+  closeLabel = 'Close',
+  actionLabel,
+  actionHref = null,
+  onActionClick,
+  onCloseClick,
+}: AbInfoProps): ReactElement => {
+  return (
+    <div
+      hidden={hidden}
+      data-color={color}
+      className={clsx('AbInfo', styles.abInfo, styles[`color_${color}`], className)}
+      role="status"
+    >
+      <span className={styles.abInfoIconWrap} aria-hidden>
+        <span className={clsx('material-symbols-rounded', styles.abInfoIcon)}>{icon}</span>
+      </span>
+      <div className={styles.abInfoContent}>
+        <p className={styles.abInfoTitle}>{title}</p>
+        <p className={styles.abInfoMessage}>{message}</p>
+        {actionLabel ? (
+          actionHref ? (
+            <Link href={actionHref} className={styles.abInfoAction} onClick={onActionClick}>
+              {actionLabel}
+            </Link>
+          ) : (
+            <button type="button" className={styles.abInfoAction} onClick={onActionClick}>
+              {actionLabel}
+            </button>
+          )
+        ) : null}
+      </div>
+      {onCloseClick ? (
+        <button
+          type="button"
+          className={styles.abInfoClose}
+          aria-label={closeLabel}
+          onClick={onCloseClick}
+        >
+          <span className="material-symbols-rounded" aria-hidden>
+            close
+          </span>
+        </button>
+      ) : null}
+    </div>
+  );
+};
+
+export default AbInfo;
+export { AbInfo };

package/ab-info/styles.module.css

@@ -0,0 +1,87 @@
+.abInfo {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 0.75rem;
+  width: 100%;
+  padding: 1rem;
+  border-radius: 0.75rem;
+  background: var(--ab-surface-container-high, #ece6f0);
+  color: var(--ab-on-surface, #1c1b1f);
+}
+
+.abInfoIconWrap {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 9999px;
+}
+
+.abInfoIcon {
+  font-size: 1.5rem;
+  line-height: 1;
+}
+
+.color_primary .abInfoIconWrap {
+  background: color-mix(in srgb, var(--ab-primary, #a67c52) 24%, transparent);
+  color: var(--ab-primary, #a67c52);
+}
+.color_secondary .abInfoIconWrap {
+  background: color-mix(in srgb, #625b71 24%, transparent);
+  color: #625b71;
+}
+.color_tertiary .abInfoIconWrap {
+  background: color-mix(in srgb, #7d5260 24%, transparent);
+  color: #7d5260;
+}
+.color_white .abInfoIconWrap { background: #fff; color: #1c1b1f; }
+.color_black .abInfoIconWrap { background: #1c1b1f; color: #fff; }
+
+.abInfoContent {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+.abInfoTitle {
+  margin: 0;
+  font-weight: 700;
+}
+
+.abInfoMessage {
+  margin: 0;
+  font-size: 0.875rem;
+  opacity: 0.85;
+}
+
+.abInfoAction {
+  align-self: flex-start;
+  margin-top: 0.5rem;
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--ab-primary, #a67c52);
+  font: inherit;
+  font-weight: 600;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.abInfoClose {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  border: none;
+  border-radius: 9999px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}