ab-nextjs-components 0.1.1 → 0.1.3

package/ab-page-paginator/index.tsx

@@ -0,0 +1,130 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbPagePaginator - Client (port of lyd-page-paginator)
+* @file: ab-page-paginator/index.tsx
+*/
+
+'use client';
+
+import type { ReactElement } from 'react';
+import { useMemo } from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export interface AbPagePaginatorProps {
+  className?: string;
+  hidden?: boolean;
+  disabled?: boolean;
+  page: number;
+  total: number;
+  maxLength?: number;
+  onChange: (page: number) => void;
+  previousLabel?: string;
+  nextLabel?: string;
+}
+
+function buildPageList(current: number, total: number, maxLength: number): Array<number | 'ellipsis'> {
+  if (total <= 0) return [];
+  if (total <= maxLength) return Array.from({ length: total }, (_, i) => i + 1);
+
+  const half = Math.floor(maxLength / 2);
+  let start = Math.max(1, current - half);
+  const end = Math.min(total, start + maxLength - 1);
+  start = Math.max(1, end - maxLength + 1);
+
+  const pages: Array<number | 'ellipsis'> = [];
+  if (start > 1) {
+    pages.push(1);
+    if (start > 2) pages.push('ellipsis');
+  }
+  for (let i = start; i <= end; i += 1) pages.push(i);
+  if (end < total) {
+    if (end < total - 1) pages.push('ellipsis');
+    pages.push(total);
+  }
+  return pages;
+}
+
+const AbPagePaginator = ({
+  className,
+  hidden = false,
+  disabled = false,
+  page,
+  total,
+  maxLength = 5,
+  onChange,
+  previousLabel = 'Previous page',
+  nextLabel = 'Next page',
+}: AbPagePaginatorProps): ReactElement => {
+  const current = page;
+  const pages = useMemo(() => buildPageList(current, total, maxLength), [current, total, maxLength]);
+
+  const go = (next: number) => {
+    if (disabled || next < 1 || next > total || next === current) return;
+    onChange(next);
+  };
+
+  return (
+    <nav
+      hidden={hidden}
+      className={clsx('AbPagePaginator', styles.abPagePaginator, className)}
+      aria-label="Pagination"
+    >
+      <button
+        type="button"
+        className={styles.abPagePaginatorBtn}
+        aria-label={previousLabel}
+        disabled={disabled || current <= 1}
+        onClick={() => go(current - 1)}
+      >
+        <span className="material-symbols-rounded" aria-hidden>
+          chevron_left
+        </span>
+      </button>
+      <ul className={styles.abPagePaginatorList}>
+        {pages.map((item, idx) =>
+          item === 'ellipsis' ? (
+            <li key={`e-${idx}`} className={styles.abPagePaginatorItem}>
+              <span className={styles.abPagePaginatorEllipsis} aria-hidden>
+                …
+              </span>
+            </li>
+          ) : (
+            <li key={item} className={styles.abPagePaginatorItem}>
+              <button
+                type="button"
+                className={styles.abPagePaginatorBtn}
+                data-active={item === current ? 'true' : 'false'}
+                aria-current={item === current ? 'page' : undefined}
+                disabled={disabled}
+                onClick={() => go(item)}
+              >
+                {item}
+              </button>
+            </li>
+          ),
+        )}
+      </ul>
+      <button
+        type="button"
+        className={styles.abPagePaginatorBtn}
+        aria-label={nextLabel}
+        disabled={disabled || current >= total}
+        onClick={() => go(current + 1)}
+      >
+        <span className="material-symbols-rounded" aria-hidden>
+          chevron_right
+        </span>
+      </button>
+    </nav>
+  );
+};
+
+export default AbPagePaginator;
+export { AbPagePaginator };

package/ab-page-paginator/styles.module.css

@@ -0,0 +1,47 @@
+.abPagePaginator {
+  display: flex;
+  width: fit-content;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  margin: 0 auto;
+}
+.abPagePaginatorList {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0 0.5rem;
+  list-style: none;
+  margin: 0;
+  overflow-x: auto;
+}
+.abPagePaginatorItem {
+  display: inline-flex;
+}
+.abPagePaginatorBtn {
+  min-width: 2rem;
+  height: 2rem;
+  border-radius: 9999px;
+  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  padding: 0 0.5rem;
+  color: inherit;
+}
+.abPagePaginatorBtn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.abPagePaginatorBtn[data-active="true"] {
+  border-color: var(--ab-primary, #6750a4);
+  color: var(--ab-primary, #6750a4);
+  font-weight: 700;
+  transform: scale(1.08);
+  pointer-events: none;
+}
+.abPagePaginatorEllipsis {
+  opacity: 0.5;
+  padding: 0 0.25rem;
+}
+

package/ab-page-switcher/index.tsx

@@ -0,0 +1,121 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbPageSwitcher - Client (port of lyd-page-switcher)
+* @file: ab-page-switcher/index.tsx
+*/
+
+'use client';
+
+import type { ReactElement } from 'react';
+import { useState } from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export interface AbPageSwitcherProps {
+  className?: string;
+  hidden?: boolean;
+  disabled?: boolean;
+  page: number;
+  total: number;
+  min?: number;
+  max?: number;
+  onChange: (page: number) => void;
+  previousLabel?: string;
+  nextLabel?: string;
+}
+
+const AbPageSwitcher = ({
+  className,
+  hidden = false,
+  disabled = false,
+  page,
+  total,
+  min = 1,
+  max,
+  onChange,
+  previousLabel = 'Previous page',
+  nextLabel = 'Next page',
+}: AbPageSwitcherProps): ReactElement => {
+  const upper = max ?? total;
+  const current = page;
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(String(page));
+  const shown = editing ? draft : String(current);
+
+  const go = (next: number) => {
+    const clamped = Math.min(upper, Math.max(min, next));
+    if (disabled || clamped === current) return;
+    setDraft(String(clamped));
+    setEditing(false);
+    onChange(clamped);
+  };
+
+  const commitDraft = () => {
+    const parsed = Number.parseInt(draft, 10);
+    setEditing(false);
+    if (Number.isNaN(parsed)) {
+      setDraft(String(current));
+      return;
+    }
+    go(parsed);
+  };
+
+  return (
+    <div hidden={hidden} className={clsx('AbPageSwitcher', styles.abPageSwitcher, className)}>
+      <button
+        type="button"
+        className={styles.abPageSwitcherBtn}
+        aria-label={previousLabel}
+        disabled={disabled || current <= min}
+        onClick={() => go(current - 1)}
+      >
+        <span className="material-symbols-rounded" aria-hidden>
+          chevron_left
+        </span>
+      </button>
+      <input
+        className={styles.abPageSwitcherInput}
+        type="number"
+        inputMode="numeric"
+        min={min}
+        max={upper}
+        value={shown}
+        disabled={disabled}
+        aria-label="Page number"
+        onFocus={() => {
+          setDraft(String(current));
+          setEditing(true);
+        }}
+        onChange={(e) => setDraft(e.target.value)}
+        onBlur={commitDraft}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            commitDraft();
+          }
+        }}
+      />
+      <span className={styles.abPageSwitcherMeta}>/ {total}</span>
+      <button
+        type="button"
+        className={styles.abPageSwitcherBtn}
+        aria-label={nextLabel}
+        disabled={disabled || current >= upper}
+        onClick={() => go(current + 1)}
+      >
+        <span className="material-symbols-rounded" aria-hidden>
+          chevron_right
+        </span>
+      </button>
+    </div>
+  );
+};
+
+export default AbPageSwitcher;
+export { AbPageSwitcher };

package/ab-page-switcher/styles.module.css

@@ -0,0 +1,37 @@
+.abPageSwitcher {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.abPageSwitcherBtn {
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 9999px;
+  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
+  background: transparent;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+}
+.abPageSwitcherBtn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.abPageSwitcherInput {
+  width: 3.5rem;
+  height: 2.25rem;
+  text-align: center;
+  border-radius: 0.5rem;
+  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+}
+.abPageSwitcherMeta {
+  font-size: 0.875rem;
+  opacity: 0.75;
+  white-space: nowrap;
+}
+

package/ab-preview/index.tsx

@@ -0,0 +1,78 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbPreview - Client (Adapt of lyd-preview; db/providers stripped)
+* @file: ab-preview/index.tsx
+*/
+
+'use client';
+
+import type { ReactElement } from 'react';
+import Image from 'next/image';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export type AbPreviewItem = {
+  id: string | number;
+  src: string;
+  alt?: string;
+  href?: string;
+};
+
+export interface AbPreviewProps {
+  className?: string;
+  hidden?: boolean;
+  items?: AbPreviewItem[];
+  emptyLabel?: string;
+}
+
+const AbPreview = ({
+  className,
+  hidden = false,
+  items = [],
+  emptyLabel = 'No previews',
+}: AbPreviewProps): ReactElement => {
+  if (!items.length) {
+    return (
+      <div hidden={hidden} className={clsx('AbPreview', styles.abPreview, className)}>
+        <div className={styles.abPreviewEmpty}>{emptyLabel}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div hidden={hidden} className={clsx('AbPreview', styles.abPreview, className)}>
+      {items.map((item) => {
+        const inner = (
+          <Image
+            className={styles.abPreviewImg}
+            src={item.src}
+            alt={item.alt ?? ''}
+            width={160}
+            height={160}
+            unoptimized
+          />
+        );
+        return (
+          <div key={item.id} className={styles.abPreviewItem}>
+            {item.href ? (
+              <a href={item.href} style={{ display: 'contents' }}>
+                {inner}
+              </a>
+            ) : (
+              inner
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default AbPreview;
+export { AbPreview };

package/ab-preview/styles.module.css

@@ -0,0 +1,26 @@
+.abPreview {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
+  gap: 0.75rem;
+}
+.abPreviewItem {
+  position: relative;
+  aspect-ratio: 1;
+  border-radius: 0.85rem;
+  overflow: hidden;
+  background: color-mix(in srgb, var(--ab-surface-container, #f3edf7) 100%, transparent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.abPreviewImg {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+.abPreviewEmpty {
+  font-size: 0.75rem;
+  opacity: 0.6;
+  text-align: center;
+  padding: 0.5rem;
+}

package/ab-price/index.tsx

@@ -0,0 +1,109 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbPrice - Client (port of lyd-price)
+* @file: ab-price/index.tsx
+*/
+
+'use client';
+
+import type { ReactElement } from 'react';
+import { useMemo } from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export interface AbPriceProps {
+  className?: string;
+  hidden?: boolean;
+  weight?: 'bold' | 'normal' | 'light';
+  size?: string;
+  totalSize?: string;
+  noScale?: boolean;
+  price: number;
+  quantity?: number;
+  currency: string;
+  symbol: string;
+  useSymbol?: boolean;
+  isSymbolBefore?: boolean;
+  isTaxIncluded?: boolean;
+  taxIncludedLabel?: string;
+  isTaxIncludedHidden?: boolean;
+  locale?: string;
+  useLocale?: boolean;
+}
+
+const AbPrice = ({
+  className,
+  hidden = false,
+  weight = 'normal',
+  size = '12px',
+  totalSize = '30px',
+  noScale = false,
+  price,
+  quantity = 1,
+  currency,
+  symbol,
+  useSymbol = false,
+  isSymbolBefore = true,
+  isTaxIncluded = false,
+  taxIncludedLabel = 'Tax included',
+  isTaxIncludedHidden = false,
+  locale = 'en',
+  useLocale = false,
+}: AbPriceProps): ReactElement => {
+  const totalPrice = useMemo(() => Number((price * quantity).toFixed(2)), [price, quantity]);
+
+  const format = (amount: number) =>
+    useLocale ? amount.toLocaleString(locale) : amount.toFixed(2);
+
+  const mark = useSymbol ? symbol : currency;
+  const unitStyle = { fontSize: quantity > 1 ? size : totalSize, transform: noScale ? 'none' : undefined };
+  const totalStyle = { fontSize: totalSize, transform: noScale ? 'none' : undefined };
+
+  const amount = (n: number) => (
+    <>
+      {isSymbolBefore ? <>{mark}{' '}</> : null}
+      {format(n)}
+      {!isSymbolBefore ? <>{' '}{mark}</> : null}
+    </>
+  );
+
+  return (
+    <div
+      hidden={hidden}
+      className={clsx(
+        'AbPrice',
+        styles.abPrice,
+        weight === 'bold' && styles.isBold,
+        weight === 'normal' && styles.isNormal,
+        weight === 'light' && styles.isLight,
+        className,
+      )}
+    >
+      <span className={styles.abPriceUnit} style={unitStyle} title={format(totalPrice)}>
+        {quantity > 1 ? <span className={styles.abPriceMultiplier}>{quantity} × </span> : null}
+        <span>{amount(price)}</span>
+      </span>
+      {quantity > 1 ? (
+        <span className={styles.abPriceTotal} style={totalStyle} title={String(totalPrice)}>
+          {amount(totalPrice)}
+        </span>
+      ) : null}
+      {isTaxIncluded && !isTaxIncludedHidden ? (
+        <span className={styles.abPriceTax}>
+          <span className="material-symbols-rounded" aria-hidden>receipt_long</span>
+          <b>{taxIncludedLabel}</b>
+        </span>
+      ) : null}
+    </div>
+  );
+};
+
+export default AbPrice;
+export { AbPrice };
+

package/ab-price/styles.module.css

@@ -0,0 +1,36 @@
+.abPrice {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.15rem;
+  line-height: 1.1;
+}
+.abPrice.isBold { font-weight: 700; }
+.abPrice.isNormal { font-weight: 500; }
+.abPrice.isLight { font-weight: 300; }
+.abPriceUnit {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.25rem;
+}
+.abPriceMultiplier {
+  opacity: 0.7;
+  font-size: 0.85em;
+}
+.abPriceTotal {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.25rem;
+}
+.abPriceTax {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.75rem;
+  opacity: 0.8;
+  margin-top: 0.15rem;
+}
+
+.isBold { font-weight: 700; }
+.isNormal { font-weight: 500; }
+.isLight { font-weight: 300; }

package/ab-price-tag/index.tsx

@@ -0,0 +1,70 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbPriceTag - Client (port of lyd-price-tag)
+* @file: ab-price-tag/index.tsx
+*/
+
+'use client';
+
+import type { ReactElement } from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export interface AbPriceTagProps {
+  className?: string;
+  hidden?: boolean;
+  name: string;
+  brand: string;
+  category: string;
+  price: number;
+  currency: string;
+  currencySymbol: string;
+  useCurrencySymbol?: boolean;
+  isBrandHidden?: boolean;
+  isCategoryHidden?: boolean;
+}
+
+const AbPriceTag = ({
+  className,
+  hidden = false,
+  name,
+  brand,
+  category,
+  price,
+  currency,
+  currencySymbol,
+  useCurrencySymbol = false,
+  isBrandHidden = false,
+  isCategoryHidden = false,
+}: AbPriceTagProps): ReactElement => {
+  const money = useCurrencySymbol ? currencySymbol : currency;
+
+  return (
+    <div hidden={hidden} className={clsx('AbPriceTag', styles.abPriceTag, className)}>
+      <div className={styles.abPriceTagDetails}>
+        <div className={styles.abPriceTagBrandCategory}>
+          {!isBrandHidden ? <span className={styles.abPriceTagBrand}>{brand}</span> : null}
+          {!isCategoryHidden ? <span className={styles.abPriceTagCategory}>{category}</span> : null}
+        </div>
+        <span className={styles.abPriceTagName}>{name}</span>
+        <span className={styles.abPriceTagPrice}>
+          {price} {money}
+        </span>
+      </div>
+      <div className={styles.abPriceTagIconWrap} aria-hidden>
+        <span className={styles.abPriceTagIconDivider} />
+        <span className={clsx('material-symbols-rounded', styles.abPriceTagIcon)}>shopping_cart</span>
+      </div>
+    </div>
+  );
+};
+
+export default AbPriceTag;
+export { AbPriceTag };
+