ab-nextjs-components 0.1.1 → 0.1.3

package/ab-price-tag/styles.module.css

@@ -0,0 +1,81 @@
+.abPriceTag {
+  display: flex;
+  flex-direction: row;
+  width: 16rem;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.25rem 0.5rem 1rem;
+  border-radius: 0.5rem;
+  box-sizing: border-box;
+  overflow: hidden;
+  user-select: none;
+  background: color-mix(in srgb, var(--ab-primary-container, #eaddff) 35%, transparent);
+  backdrop-filter: blur(8px);
+  box-shadow: 0 4px 12px color-mix(in srgb, #000 12%, transparent);
+}
+.abPriceTagDetails {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+.abPriceTagBrandCategory {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  align-items: center;
+}
+.abPriceTagBrand {
+  border-radius: 0.375rem;
+  padding: 0.125rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  width: fit-content;
+  background: color-mix(in srgb, var(--ab-tertiary-container, #ffd8e4) 80%, transparent);
+}
+.abPriceTagCategory {
+  font-size: 0.875rem;
+  text-transform: lowercase;
+  opacity: 0.85;
+  truncate: true;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.abPriceTagName {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 700;
+  opacity: 0.9;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.abPriceTagPrice {
+  font-size: 2rem;
+  font-weight: 700;
+  line-height: 1.1;
+}
+.abPriceTagIconWrap {
+  display: flex;
+  width: 4rem;
+  height: 4rem;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  opacity: 0.9;
+}
+.abPriceTagIconDivider {
+  position: absolute;
+  left: 0;
+  top: 0.5rem;
+  bottom: 0.5rem;
+  width: 1px;
+  background: color-mix(in srgb, currentColor 25%, transparent);
+}
+.abPriceTagIcon {
+  font-size: 1.75rem;
+}
+

package/ab-product/index.tsx

@@ -0,0 +1,128 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbProduct - Client (Adapt of lyd-product; db/hooks stripped)
+* @file: ab-product/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 AbProductImage = {
+  id: number | string;
+  path: string;
+  colorId?: number;
+};
+
+export interface AbProductProps {
+  className?: string;
+  hidden?: boolean;
+  size?: 'small' | 'normal' | 'medium' | 'large';
+  type?: 'contained' | 'outlined' | 'text';
+  isLiked?: boolean;
+  isCarted?: boolean;
+  disabled?: boolean;
+  id: number | string;
+  code?: string;
+  brand?: string;
+  name?: string;
+  description?: string;
+  images?: AbProductImage[];
+  posterPath?: string;
+  price?: number;
+  currency?: string;
+  currencySymbol?: string;
+  useCurrencySymbol?: boolean;
+  onLikeClick?: () => void;
+  onCartClick?: () => void;
+}
+
+const AbProduct = ({
+  className,
+  hidden = false,
+  size = 'normal',
+  type = 'contained',
+  isLiked = false,
+  isCarted = false,
+  disabled = false,
+  id,
+  brand,
+  name,
+  description,
+  images = [],
+  posterPath,
+  price,
+  currency = 'EUR',
+  currencySymbol = '€',
+  useCurrencySymbol = true,
+  onLikeClick,
+  onCartClick,
+}: AbProductProps): ReactElement => {
+  const src = posterPath ?? images[0]?.path ?? '';
+  const money = useCurrencySymbol ? currencySymbol : currency;
+
+  return (
+    <article
+      hidden={hidden}
+      data-size={size}
+      data-type={type}
+      data-id={id}
+      className={clsx('AbProduct', styles.abProduct, className)}
+      data-disabled={disabled ? "true" : "false"}
+    >
+      <div className={styles.abProductMedia}>
+        {src ? (
+          <Image className={styles.abProductImg} src={src} alt={name ?? ''} width={320} height={320} unoptimized />
+        ) : null}
+      </div>
+      <div className={styles.abProductBody}>
+        {brand ? <span className={styles.abProductBrand}>{brand}</span> : null}
+        {name ? <h3 className={styles.abProductName}>{name}</h3> : null}
+        {description ? <p className={styles.abProductDesc}>{description}</p> : null}
+        {price != null ? (
+          <span className={styles.abProductPrice}>
+            {money} {price.toFixed(2)}
+          </span>
+        ) : null}
+        <div className={styles.abProductActions}>
+          <button
+            type="button"
+            className={styles.abProductBtn}
+            data-active={isLiked ? 'true' : 'false'}
+            aria-label="Like"
+            disabled={disabled}
+            onClick={onLikeClick}
+          >
+            <span className="material-symbols-rounded" aria-hidden>
+              {isLiked ? 'favorite' : 'favorite_border'}
+            </span>
+          </button>
+          <button
+            type="button"
+            className={styles.abProductBtn}
+            data-active={isCarted ? 'true' : 'false'}
+            aria-label="Add to cart"
+            disabled={disabled}
+            onClick={onCartClick}
+          >
+            <span className="material-symbols-rounded" aria-hidden>
+              {isCarted ? 'shopping_cart' : 'add_shopping_cart'}
+            </span>
+          </button>
+        </div>
+      </div>
+    </article>
+  );
+};
+
+export default AbProduct;
+export { AbProduct };

package/ab-product/styles.module.css

@@ -0,0 +1,44 @@
+.abProduct {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  border-radius: 1rem;
+  background: var(--ab-surface-container, #f3edf7);
+  max-width: 20rem;
+}
+.abProduct[data-size='small'] { max-width: 12rem; }
+.abProduct[data-size='large'] { max-width: 28rem; }
+.abProduct[data-type='outlined'] {
+  background: transparent;
+  border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
+}
+.abProductMedia {
+  position: relative;
+  aspect-ratio: 1;
+  border-radius: 0.75rem;
+  overflow: hidden;
+  background: #ddd;
+}
+.abProductImg { object-fit: cover; width: 100%; height: 100%; }
+.abProductBody { display: flex; flex-direction: column; gap: 0.25rem; }
+.abProductBrand { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; opacity: 0.65; }
+.abProductName { margin: 0; font-size: 1rem; font-weight: 700; }
+.abProductDesc { margin: 0; font-size: 0.8125rem; opacity: 0.75; }
+.abProductPrice { font-size: 1.125rem; font-weight: 700; }
+.abProductActions { display: flex; gap: 0.35rem; margin-top: 0.35rem; }
+.abProductBtn {
+  border: none;
+  border-radius: 9999px;
+  width: 2.25rem;
+  height: 2.25rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background: color-mix(in srgb, var(--ab-primary, #6750a4) 14%, transparent);
+  color: inherit;
+}
+.abProductBtn[data-active='true'] { color: var(--ab-primary, #6750a4); }
+
+.abProduct[data-disabled="true"] { opacity: 0.55; pointer-events: none; }

package/ab-product-item/index.tsx

@@ -0,0 +1,78 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbProductItem - Client (Adapt of lyd-product-item; providers stripped)
+* @file: ab-product-item/index.tsx
+*/
+
+'use client';
+
+import type { CSSProperties, ReactElement } from 'react';
+import Image from 'next/image';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export interface AbProductItemProps {
+  className?: string;
+  style?: CSSProperties;
+  hidden?: boolean;
+  width?: number;
+  height?: number;
+  id: number | string;
+  code: string;
+  name?: string;
+  image: { id: number | string; path: string };
+  price?: number;
+  currencySymbol?: string;
+}
+
+const AbProductItem = ({
+  className,
+  style,
+  hidden = false,
+  width = 72,
+  height = 72,
+  id,
+  code,
+  name,
+  image,
+  price,
+  currencySymbol = '€',
+}: AbProductItemProps): ReactElement => {
+  return (
+    <div
+      hidden={hidden}
+      data-id={id}
+      style={style}
+      className={clsx('AbProductItem', styles.abProductItem, className)}
+    >
+      <div className={styles.abProductItemMedia} style={{ width, height }}>
+        <Image
+          className={styles.abProductItemImg}
+          src={image.path}
+          alt={name ?? code}
+          width={width}
+          height={height}
+          unoptimized
+        />
+      </div>
+      <div className={styles.abProductItemBody}>
+        <span className={styles.abProductItemCode}>{code}</span>
+        {name ? <h4 className={styles.abProductItemName}>{name}</h4> : null}
+        {price != null ? (
+          <span className={styles.abProductItemPrice}>
+            {currencySymbol} {price.toFixed(2)}
+          </span>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+export default AbProductItem;
+export { AbProductItem };

package/ab-product-item/styles.module.css

@@ -0,0 +1,21 @@
+.abProductItem {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  padding: 0.5rem;
+  border-radius: 0.75rem;
+  background: var(--ab-surface-container-low, #f7f2fa);
+}
+.abProductItemMedia {
+  width: 4.5rem;
+  height: 4.5rem;
+  border-radius: 0.6rem;
+  overflow: hidden;
+  flex-shrink: 0;
+  background: #ddd;
+}
+.abProductItemImg { object-fit: cover; width: 100%; height: 100%; }
+.abProductItemBody { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }
+.abProductItemCode { font-size: 0.7rem; font-family: ui-monospace, monospace; opacity: 0.6; }
+.abProductItemName { margin: 0; font-size: 0.9375rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.abProductItemPrice { font-weight: 700; }

package/ab-progress-chips/index.tsx

@@ -0,0 +1,105 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbProgressChips - Client (port of lyd-progress-chips)
+* @file: ab-progress-chips/index.tsx
+*/
+
+'use client';
+
+import type { CSSProperties, ReactElement } from 'react';
+import { useState } from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export interface AbProgressChip {
+  id: number;
+  code: string;
+  name: string;
+  duration: number;
+}
+
+export interface AbProgressChipsProps {
+  className?: string;
+  hidden?: boolean;
+  chips?: AbProgressChip[];
+  selectedChipId?: number;
+  selectedChipCode?: string;
+  selectedChipName?: string;
+  onChipClick?: (chipId: number, chipCode?: string, chipName?: string, chipDuration?: number) => void;
+  isChipNameHidden?: boolean;
+  /** When set, fills the selected chip bar to this ratio (0–1). No internal timer. */
+  progressRatio?: number;
+}
+
+const DEFAULT_CHIPS: AbProgressChip[] = [
+  { id: 1, code: 'A', name: 'Prep', duration: 20 },
+  { id: 2, code: 'B', name: 'Cook', duration: 40 },
+  { id: 3, code: 'C', name: 'Plate', duration: 15 },
+];
+
+const AbProgressChips = ({
+  className,
+  hidden = false,
+  chips = DEFAULT_CHIPS,
+  selectedChipId,
+  selectedChipCode,
+  selectedChipName,
+  onChipClick,
+  isChipNameHidden = false,
+  progressRatio = 0,
+}: AbProgressChipsProps): ReactElement => {
+  const [uncontrolledId, setUncontrolledId] = useState<number | undefined>(selectedChipId);
+
+  const fromCodeOrName = chips.find(
+    (c) =>
+      (selectedChipCode != null && c.code === selectedChipCode) ||
+      (selectedChipName != null && c.name === selectedChipName),
+  );
+
+  const selectedId =
+    selectedChipId ?? fromCodeOrName?.id ?? uncontrolledId ?? chips[0]?.id;
+
+  const total = chips.reduce((sum, c) => sum + (c.duration || 0), 0) || 1;
+  const ratio = Math.max(0, Math.min(1, progressRatio));
+
+  return (
+    <div hidden={hidden} className={clsx('AbProgressChips', styles.abProgressChips, className)} role="list">
+      {chips.map((chip) => {
+        const selected = chip.id === selectedId;
+        const fallback = Math.min(1, chip.duration / total);
+        const style = {
+          '--chip-progress': `${(selected ? ratio || fallback : 0) * 100}%`,
+        } as CSSProperties;
+        return (
+          <button
+            key={chip.id}
+            type="button"
+            role="listitem"
+            className={styles.abProgressChip}
+            data-selected={selected ? 'true' : 'false'}
+            style={style}
+            onClick={() => {
+              if (selectedChipId == null && selectedChipCode == null && selectedChipName == null) {
+                setUncontrolledId(chip.id);
+              }
+              onChipClick?.(chip.id, chip.code, chip.name, chip.duration);
+            }}
+          >
+            <span className={styles.abProgressChipBar} aria-hidden />
+            <span className={styles.abProgressChipCode}>{chip.code}</span>
+            {!isChipNameHidden ? <span className={styles.abProgressChipName}>{chip.name}</span> : null}
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+export default AbProgressChips;
+export { AbProgressChips };

package/ab-progress-chips/styles.module.css

@@ -0,0 +1,43 @@
+.abProgressChips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+}
+.abProgressChip {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
+  border-radius: 9999px;
+  padding: 0.35rem 0.75rem;
+  background: color-mix(in srgb, var(--ab-surface-container, #f3edf7) 80%, transparent);
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  overflow: hidden;
+}
+.abProgressChip[data-selected="true"] {
+  border-color: var(--ab-primary, #6750a4);
+  background: color-mix(in srgb, var(--ab-primary, #6750a4) 18%, transparent);
+}
+.abProgressChipBar {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 3px;
+  background: var(--ab-primary, #6750a4);
+  width: var(--chip-progress, 0%);
+  transition: width 0.2s linear;
+}
+.abProgressChipName {
+  font-size: 0.8125rem;
+  font-weight: 600;
+}
+.abProgressChipCode {
+  font-size: 0.75rem;
+  opacity: 0.7;
+  font-family: ui-monospace, monospace;
+}
+

package/ab-search-result/index.tsx

@@ -0,0 +1,79 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbSearchResult - Client (port of lyd-search-result)
+* @file: ab-search-result/index.tsx
+*/
+
+'use client';
+
+import type { ReactElement, ReactNode } from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export interface AbSearchResultProps {
+  className?: string;
+  emptyImageClassName?: string;
+  hidden?: boolean;
+  isEmpty?: boolean;
+  isActionButtonHidden?: boolean;
+  emptyImage?: string | null;
+  emptyTitle?: string;
+  emptyMessage?: string;
+  emptyActionLabel?: string;
+  onEmptyActionButtonClick?: () => void;
+  children?: ReactNode;
+}
+
+const AbSearchResult = ({
+  className,
+  emptyImageClassName,
+  hidden = false,
+  isEmpty = false,
+  isActionButtonHidden = false,
+  emptyImage = null,
+  emptyTitle = 'No results',
+  emptyMessage = 'Try another search.',
+  emptyActionLabel = 'Clear search',
+  onEmptyActionButtonClick,
+  children,
+}: AbSearchResultProps): ReactElement => {
+  if (isEmpty) {
+    return (
+      <div hidden={hidden} className={clsx('AbSearchResult', styles.abSearchResult, className)} role="status">
+        <div className={styles.abSearchResultEmpty}>
+          {emptyImage ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img src={emptyImage} alt="" className={clsx(styles.abSearchResultEmptyImage, emptyImageClassName)} />
+          ) : (
+            <span className="material-symbols-rounded" style={{ fontSize: 64 }} aria-hidden>
+              search_off
+            </span>
+          )}
+          <h3 className={styles.abSearchResultEmptyTitle}>{emptyTitle}</h3>
+          <p className={styles.abSearchResultEmptyMessage}>{emptyMessage}</p>
+          {!isActionButtonHidden && onEmptyActionButtonClick ? (
+            <button type="button" className={styles.abSearchResultEmptyAction} onClick={onEmptyActionButtonClick}>
+              {emptyActionLabel}
+            </button>
+          ) : null}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div hidden={hidden} className={clsx('AbSearchResult', styles.abSearchResult, className)}>
+      <div className={styles.abSearchResultContent}>{children}</div>
+    </div>
+  );
+};
+
+export default AbSearchResult;
+export { AbSearchResult };
+

package/ab-search-result/styles.module.css

@@ -0,0 +1,48 @@
+.abSearchResult {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.abSearchResultEmpty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  margin: 3rem 0;
+  text-align: center;
+}
+.abSearchResultEmptyImage {
+  width: 8rem;
+  height: 8rem;
+  object-fit: contain;
+  opacity: 0.85;
+}
+.abSearchResultEmptyTitle {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 700;
+}
+.abSearchResultEmptyMessage {
+  margin: 0;
+  max-width: 24rem;
+  color: color-mix(in srgb, currentColor 65%, transparent);
+  font-size: 0.95rem;
+}
+.abSearchResultEmptyAction {
+  margin-top: 0.5rem;
+  border: none;
+  border-radius: 9999px;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  background: var(--ab-primary, #6750a4);
+  color: var(--ab-on-primary, #fff);
+  font: inherit;
+}
+.abSearchResultContent {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+