ab-nextjs-components 0.1.8 → 0.1.10

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

@@ -0,0 +1,127 @@
+/* 
+* @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: AbLocaleSwitcher - Styles
+* @file: ab-locale-switcher/styles.module.css
+* @type: CSS module
+* @authors: Abraham Ukachi <abrahamukachi@gmail.com>
+*/
+
+/*
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+* MOTTO: We'll always do more 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+*/
+
+/* 📦 anchor for the menu */
+.root {
+  position: relative; /* 📌 */
+  display: inline-block; /* 📐 */
+}
+
+/* 🌐 trigger (40px round, 44px on coarse pointers) */
+.trigger {
+  display: inline-flex; /* 📐 */
+  align-items: center; /* ↕️ */
+  justify-content: center; /* ↔️ */
+  gap: 0.375rem; /* 🧱 */
+  min-width: 40px; /* 📏 */
+  height: 40px; /* 📏 */
+  padding: 0 0.5rem; /* 🧱 */
+  border: 0; /* 🧹 */
+  border-radius: 9999px; /* 💊 */
+  background: transparent; /* 🫥 */
+  color: inherit; /* 🎨 */
+  font: inherit; /* 🔤 */
+  cursor: pointer; /* 👆 */
+}
+.withText {
+  padding: 0 0.75rem; /* 🧱 room for the endonym */
+}
+.trigger:hover,
+.trigger[aria-expanded='true'] {
+  background: color-mix(in srgb, currentColor 10%, transparent); /* 🌫️ */
+}
+.trigger:focus-visible,
+.item:focus-visible {
+  outline: 2px solid var(--ab-focus-ring, var(--ab-color-primary, #A67C52)); /* 💍 */
+  outline-offset: 2px; /* ↔️ */
+}
+@media (pointer: coarse) {
+  .trigger { min-width: 44px; height: 44px; } /* 👆 mobile target */
+}
+
+/* 📜 menu */
+.menu {
+  position: absolute; /* 📌 */
+  top: calc(100% + 0.25rem); /* ⬇️ */
+  inset-inline-end: 0; /* ↔️ align end (RTL-aware) */
+  z-index: 50; /* 🧱 above content */
+  min-width: 11rem; /* 📏 */
+  margin: 0; /* 🧹 */
+  padding: 0.25rem; /* 🧱 */
+  list-style: none; /* 🧹 */
+  border-radius: 0.75rem; /* 🔲 */
+  border: 1px solid var(--ab-color-outline-variant, rgb(0 0 0 / 0.12)); /* 🖊️ */
+  background: var(--ab-color-surface, #fff); /* 🎨 */
+  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12); /* 🌫️ */
+}
+.root[data-align='start'] .menu {
+  inset-inline-start: 0; /* ↔️ */
+  inset-inline-end: auto; /* 🧹 */
+}
+.menu[hidden] {
+  display: none; /* 🙈 */
+}
+
+/* 🗣️ item */
+.item {
+  display: flex; /* 📐 */
+  align-items: center; /* ↕️ */
+  gap: 0.5rem; /* 🧱 */
+  width: 100%; /* ↔️ */
+  min-height: 40px; /* 📏 */
+  padding: 0 0.75rem; /* 🧱 */
+  border: 0; /* 🧹 */
+  border-radius: 0.5rem; /* 🔲 */
+  background: transparent; /* 🫥 */
+  color: inherit; /* 🎨 */
+  font: inherit; /* 🔤 */
+  text-align: start; /* ↔️ */
+  text-decoration: none; /* 🧹 links */
+  cursor: pointer; /* 👆 */
+}
+.item:hover,
+.item:focus-visible {
+  background: color-mix(in srgb, currentColor 8%, transparent); /* 🌫️ */
+}
+.item[aria-checked='true'] {
+  font-weight: 600; /* 💪 */
+}
+.check {
+  width: 1em; /* 📏 fixed column */
+  color: var(--ab-color-bronze-text, #8A6440); /* ♿ */
+}

package/ab-logo/index.tsx

@@ -27,70 +27,128 @@
 * @project: ab-nextjs-components
 * @name: AbLogo - Client
 * @file: ab-logo/index.tsx
+* @authors: Abraham Ukachi <abrahamukachi@gmail.com>
 */
 
-'use client';
+/*
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+* MOTTO: We'll always do more 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+*/
+
+'use client'; // 💧 client build (the server twin lives in `server/ab-logo`)
 
-import type { ReactElement } from 'react';
+// 🧩 React types only
+import type { CSSProperties, ReactElement } from 'react';
+// 🧵 class-name joiner
 import clsx from 'clsx';
+// 🎨 package-shipped CSS module (Tailwind-independent)
 import styles from './styles.module.css';
 
+// 🅰️ the four logo looks
 export type AbLogoType = 'contained' | 'outlined' | 'hollow' | 'naked';
 
+// 📐 public props
 export interface AbLogoProps {
+  // 🅰️ look of the mark (default: naked)
   type?: AbLogoType;
+  // 🏷️ consumer classes
   className?: string;
-  /** Optional image src (contained). Defaults to the Ab logo shipped in this package (data URI). */
+  /** 🖼️ Optional image src. Defaults to the Ab mark shipped in this package (data URI). */
   src?: string;
-  /** Optional CSS mask value for outlined/hollow/naked. */
+  /** 🎭 Optional CSS mask value for outlined/hollow/naked. */
   mask?: string;
+  // 🗣️ accessible name of the mark
   alt?: string;
+  // 📏 mark size (or wordmark font-size when `wordmark` is on)
   size?: number | string;
+  /** 🔤 Show the wordmark next to the mark: `true` → "Elements", or any string. */
+  wordmark?: boolean | string;
+  /** 🎨 Mark + wordmark color (CSS color). Defaults to bronze (light) / #FFF8F5 (dark). */
+  color?: string;
 }
 
-/** Inlined Ab logo shipped with this package (also at `ab-logo/ab-logo.svg`). */
-const DEFAULT_SRC = 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xml%3Aspace%3D%22preserve%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23A67C52%22%20d%3D%22m1.8%2020.5%209.3-17v17zM22.2%207.7l-9.3-4.2v17l9.3-4.2-4.7-4.3z%22/%3E%3Cpath%20d%3D%22m12.9%2020.5%209.3-4.2-9.3-8.6z%22%20opacity%3D%22.1%22/%3E%3C/svg%3E';
+/** 🅰️ Inlined Ab logo shipped with this package (also at `ab-logo/ab-logo.svg`). */
+export const AB_LOGO_DEFAULT_SRC = 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xml%3Aspace%3D%22preserve%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23A67C52%22%20d%3D%22m1.8%2020.5%209.3-17v17zM22.2%207.7l-9.3-4.2v17l9.3-4.2-4.7-4.3z%22/%3E%3Cpath%20d%3D%22m12.9%2020.5%209.3-4.2-9.3-8.6z%22%20opacity%3D%22.1%22/%3E%3C/svg%3E';
+
+// 🔤 the default wordmark text (a brand name, never translated)
+export const AB_LOGO_DEFAULT_WORDMARK = 'Elements';
+
+// 📏 number → px, string → as is
+const toCssSize = (size?: number | string): string | undefined =>
+  size != null ? (typeof size === 'number' ? `${size}px` : size) : undefined;
 
 const AbLogo = ({
-  type = 'naked',
-  className,
-  src,
-  mask,
-  alt = 'Ab',
-  size,
+  type = 'naked', // 🅰️ naked by default
+  className, // 🏷️ consumer classes
+  src, // 🖼️ optional image
+  mask, // 🎭 optional mask
+  alt = 'Ab', // 🗣️ default name
+  size, // 📏 optional size
+  wordmark, // 🔤 optional wordmark
+  color, // 🎨 optional color
 }: AbLogoProps): ReactElement => {
-  const dim = size != null ? (typeof size === 'number' ? `${size}px` : size) : undefined;
+  // 📏 normalized size
+  const dim = toCssSize(size);
+  // 🔤 wordmark text (null = no wordmark)
+  const text = wordmark === true ? AB_LOGO_DEFAULT_WORDMARK : typeof wordmark === 'string' && wordmark ? wordmark : null;
+  // 🎨 color as a custom property consumed by the CSS module
+  const colorVar = (color ? { '--ab-logo-color': color } : {}) as CSSProperties;
 
+  // 🖼️ build the mark
+  let mark: ReactElement;
   if (type === 'contained') {
-    return (
+    // 🖼️ contained = a real <img>
+    mark = (
+      // eslint-disable-next-line @next/next/no-img-element -- 🖼️ the default src is an inline data-URI SVG (nothing for next/image to optimize), and this package must not require next/image's loader config in consumer apps
       <img
-        className={clsx('AbLogo', 'app-logo', styles.abLogoContained, className)}
-        src={src ?? DEFAULT_SRC}
-        alt={alt}
+        className={clsx(!text && ['AbLogo', 'app-logo', className], styles.abLogoContained, text && styles.abLogo__mark)}
+        src={src ?? AB_LOGO_DEFAULT_SRC}
+        alt={text ? '' : alt}
+        aria-hidden={text ? true : undefined}
         data-type="contained"
-        style={dim ? { width: dim, height: dim } : undefined}
+        style={!text && dim ? { width: dim, height: dim } : undefined}
+      />
+    );
+  } else {
+    // 🎭 explicit mask/src wins; otherwise the CSS module masks with `--app-logo-url` or the shipped mark (no brown square ✅)
+    const maskValue = mask ?? (src ? `url('${src}') no-repeat 50% 50%` : undefined);
+    mark = (
+      <span
+        className={clsx(!text && ['AbLogo', 'app-logo', className], styles.abLogo, text && styles.abLogo__mark)}
+        data-type={type}
+        role={text ? undefined : 'img'}
+        aria-label={text ? undefined : alt}
+        aria-hidden={text ? true : undefined}
+        style={{
+          ...(!text ? colorVar : {}), // 🎨 color (standalone mark only; lockup sets it on the wrapper)
+          ...(!text && dim ? { width: dim, height: dim } : {}), // 📏 size
+          ...(maskValue ? { WebkitMask: maskValue, mask: maskValue, WebkitMaskSize: 'cover', maskSize: 'cover' } : {}), // 🎭 custom mask
+        }}
       />
     );
   }
 
-  // With no `mask`/`src`, leave the mask to `ab-nextjs-components` chrome (`--app-logo-url` / `.app-logo`).
-  // When `mask` or `src` is set, apply it inline (src becomes a CSS mask url).
-  const maskValue = mask ?? (src ? `url('${src}') no-repeat 50% 50%` : undefined);
+  // 🅰️ no wordmark → just the mark (unchanged API)
+  if (!text) return mark;
+
+  // 🔤 lockup: mark + wordmark, one accessible image
   return (
     <span
-      className={clsx('AbLogo', 'app-logo', styles.abLogo, className)}
+      className={clsx('AbLogo', 'AbLogo--wordmark', styles.abLogo__lockup, className)}
       data-type={type}
       role="img"
-      aria-label={alt}
-      style={{
-        ...(dim ? { width: dim, height: dim } : {}),
-        ...(maskValue
-          ? { WebkitMask: maskValue, mask: maskValue, WebkitMaskSize: 'cover', maskSize: 'cover' }
-          : {}),
-      }}
-    />
+      aria-label={`${alt} ${text}`.trim()}
+      style={{ ...colorVar, ...(dim ? { fontSize: dim } : {}) }}
+    >
+      {/* 🅰️ the mark */}
+      {mark}
+      {/* 🔤 the wordmark — Quicksand Bold from ab-nextjs-fonts */}
+      <span className={clsx('font-quicksand-bold', styles.abLogo__wordmark)} aria-hidden="true">{text}</span>
+    </span>
   );
 };
 
+// 📦 exports
 export default AbLogo;
 export { AbLogo };

package/ab-logo/styles.module.css

@@ -4,7 +4,31 @@
 * ab-nextjs-components
 * ~~~~~~~~~~~~ 
 * Copyright (c) 2026 Abraham Ukachi. The abElements Project.
-* Plain CSS modules — no Tailwind Tailwind apply (Turbopack-safe).
+*
+* 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 - Component Stylesheet (plain CSS, Tailwind-independent)
+* @file: ab-logo/styles.module.css
+* @type: CSS Module
+* @authors: Abraham Ukachi <abrahamukachi@gmail.com>
 */
 
 /*
@@ -13,18 +37,62 @@
 * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 */
 
+/* 🅰️ masked mark (naked / outlined / hollow) */
 .abLogo {
-  display: block;
-  position: relative;
-  width: 1.5rem;
-  height: 1.5rem;
-  background-color: var(--app-logo-color, #a67c52);
+  display: block; /* 🧱 block box */
+  position: relative; /* 📌 positioning context */
+  width: 1.5rem; /* ↔️ default size */
+  height: 1.5rem; /* ↕️ default size */
+  /* 🎨 bronze by default; `--app-logo-color` (chrome) or `--ab-logo-color` (prop) override */
+  background-color: var(--app-logo-color, var(--ab-logo-color, #A67C52));
+  /* 🎭 the shipped Ab mark as mask → no brown square without chrome CSS ✅ */
+  -webkit-mask: var(--app-logo-url, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xml%3Aspace%3D%22preserve%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23A67C52%22%20d%3D%22m1.8%2020.5%209.3-17v17zM22.2%207.7l-9.3-4.2v17l9.3-4.2-4.7-4.3z%22/%3E%3Cpath%20d%3D%22m12.9%2020.5%209.3-4.2-9.3-8.6z%22%20opacity%3D%22.1%22/%3E%3C/svg%3E")) no-repeat 50% 50%;
+  mask: var(--app-logo-url, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xml%3Aspace%3D%22preserve%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23A67C52%22%20d%3D%22m1.8%2020.5%209.3-17v17zM22.2%207.7l-9.3-4.2v17l9.3-4.2-4.7-4.3z%22/%3E%3Cpath%20d%3D%22m12.9%2020.5%209.3-4.2-9.3-8.6z%22%20opacity%3D%22.1%22/%3E%3C/svg%3E")) no-repeat 50% 50%;
+  -webkit-mask-size: contain; /* 📐 keep proportions */
+  mask-size: contain; /* 📐 keep proportions */
+}
+
+/* 🌙 dark: light mark on dark surfaces */
+:global(html.dark) .abLogo:not(.abLogo__mark) {
+  background-color: var(--app-logo-color, var(--ab-logo-color, #FFF8F5));
 }
 
+/* 🖼️ contained mark (a real <img>) */
 .abLogoContained {
-  display: block;
-  position: relative;
-  width: 1.5rem;
-  height: 1.5rem;
-  object-fit: contain;
+  display: block; /* 🧱 block box */
+  position: relative; /* 📌 positioning context */
+  width: 1.5rem; /* ↔️ default size */
+  height: 1.5rem; /* ↕️ default size */
+  object-fit: contain; /* 📐 keep proportions */
+}
+
+/* 🔤 lockup = mark + wordmark */
+.abLogo__lockup {
+  display: inline-flex; /* ➡️ one row */
+  align-items: center; /* ↕️ centered */
+  gap: 0.28em; /* ↔️ gap scales with the text */
+  font-size: 2rem; /* 📏 default lockup size (override with `size`) */
+  line-height: 1; /* 📐 tight */
+  color: var(--ab-logo-color, #A67C52); /* 🎨 bronze */
+}
+
+/* 🌙 dark lockup */
+:global(html.dark) .abLogo__lockup {
+  color: var(--ab-logo-color, #FFF8F5);
+}
+
+/* 🅰️ the mark inside a lockup follows the text size & color */
+.abLogo__mark {
+  width: 1.15em; /* ↔️ ≈ cap height + descender, as in the splash mock */
+  height: 1.15em; /* ↕️ square */
+  flex: none; /* 🚫 never shrink */
+  background-color: currentColor; /* 🎨 same as the wordmark */
+}
+
+/* 🔤 the wordmark — Quicksand Bold (font files ship with ab-nextjs-fonts/quicksand/styles.css) */
+.abLogo__wordmark {
+  font-family: 'Quicksand-Bold', 'Quicksand', ui-rounded, system-ui, sans-serif; /* 🔤 */
+  font-weight: 700; /* 💪 bold */
+  letter-spacing: 0.01em; /* ↔️ as in the mock */
+  white-space: nowrap; /* 🚫 no wrap */
 }

package/ab-pill/index.tsx

@@ -0,0 +1,74 @@
+/* 
+* @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: AbPill - Server (G36)
+* @file: ab-pill/index.tsx
+* @type: Server component (static, no JS)
+* @authors: Abraham Ukachi <abrahamukachi@gmail.com>
+*
+* Example usage:
+*   1+|> <AbPill dot="sage">Free forever · MIT</AbPill>
+*    -|> <AbPill mono>ab-nextjs-core</AbPill>
+*/
+
+/*
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+* MOTTO: We'll always do more 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+*/
+
+// ⚛️ types
+import type { CSSProperties, ReactElement, ReactNode } from 'react';
+// 🧵 classes
+import clsx from 'clsx';
+// 🎨 shares the chip stylesheet (pill composes chip)
+import styles from '../ab-chip/styles.module.css';
+// 🎨 dot colours
+import type { AbChipDot } from '../ab-chip';
+
+// ⚙️ props
+export interface AbPillProps {
+  children: ReactNode; // 🏷️ eyebrow text
+  dot?: AbChipDot; // 🟢 leading dot
+  icon?: ReactNode; // 🖼️ decorative icon
+  mono?: boolean; // ⌨️ monospace (package names)
+  className?: string; // 🏷️
+  style?: CSSProperties; // 🎨
+}
+
+/** 💊 Eyebrow pill above a title. Static text; dot + icon are decorative. */
+export function AbPill({ children, dot, icon, mono = false, className, style }: AbPillProps): ReactElement {
+  return (
+    <span className={clsx('AbPill', styles.pill, mono && styles.mono, className)} style={style} data-ab-part="pill">
+      {dot ? <span className={styles.dot} data-tone={dot} aria-hidden="true" /> : null /* 🟢 */}
+      {icon ? <span className={styles.icon} aria-hidden="true">{icon}</span> : null /* 🖼️ */}
+      <span>{children}</span>
+    </span>
+  );
+}
+
+// 📦 default export
+export default AbPill;

package/ab-progress-chips/index.tsx

@@ -5,17 +5,46 @@
 * ~~~~~~~~~~~~ 
 * 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: AbProgressChips - Client (port of lyd-progress-chips)
 * @file: ab-progress-chips/index.tsx
+* @type: TypeScript (React)
+* @authors: Abraham Ukachi <abrahamukachi@gmail.com>
 */
 
+/*
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+* MOTTO: We'll always do more 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+*/
+
+
 'use client';
 
 import type { CSSProperties, ReactElement } from 'react';
 import { useState } from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
+import { AB_MOTION } from 'ab-nextjs-animations/motion'; // 🎬 transition class names (ab-nextjs-animations >= 0.2.4)
+import 'ab-nextjs-animations/motion/styles.css'; // 🎨 .ab-motion-*
 
 export interface AbProgressChip {
   id: number;
@@ -91,7 +120,7 @@ const AbProgressChips = ({
               onChipClick?.(chip.id, chip.code, chip.name, chip.duration);
             }}
           >
-            <span className={styles.abProgressChipBar} aria-hidden />
+            <span className={clsx(styles.abProgressChipBar, AB_MOTION.size)} aria-hidden />{/* 📏 width fill = .ab-motion-size */}
             <span className={styles.abProgressChipCode}>{chip.code}</span>
             {!isChipNameHidden ? <span className={styles.abProgressChipName}>{chip.name}</span> : null}
           </button>

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

@@ -1,3 +1,42 @@
+/* 
+* @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: ab-progress-chips - styles
+* @file: ab-progress-chips/styles.module.css
+* @type: CSS Module
+* @authors: Abraham Ukachi <abrahamukachi@gmail.com>
+*/
+
+/*
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+* MOTTO: We'll always do more 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+*/
+
+
 .abProgressChips {
   display: flex;
   flex-wrap: wrap;
@@ -29,7 +68,7 @@
   height: 3px;
   background: var(--ab-primary, #6750a4);
   width: var(--chip-progress, 0%);
-  transition: width 0.2s linear;
+  --ab-motion-easing: linear; /* 📏 fill motion = .ab-motion-size (ab-nextjs-animations) */
 }
 .abProgressChipName {
   font-size: 0.8125rem;

package/ab-searchbar/index.tsx

@@ -5,17 +5,48 @@
 * ~~~~~~~~~~~~ 
 * 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: AbSearchbar - Client (port of lyd-searchbar)
 * @file: ab-searchbar/index.tsx
+* @type: TypeScript (React)
+* @authors: Abraham Ukachi <abrahamukachi@gmail.com>
 */
 
+/*
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+* MOTTO: We'll always do more 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+*/
+
+
 'use client';
 
 import type { CSSProperties, KeyboardEvent, ReactElement } from 'react';
 import { useId, useRef, useState } from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
+import { AB_MOTION } from 'ab-nextjs-animations/motion'; // 🎬 transition class names (ab-nextjs-animations >= 0.2.4)
+import 'ab-nextjs-animations/motion/styles.css'; // 🎨 .ab-motion-*
+import { AB_SPIN_CLASS } from 'ab-nextjs-animations/spin'; // 🌀 spinner (ab-nextjs-animations >= 0.2.4)
+import 'ab-nextjs-animations/spin/styles.css'; // 🌀 .ab-spin
 
 export interface AbSearchbarProps {
   className?: string;
@@ -99,7 +130,7 @@ const AbSearchbar = ({
     <div
       hidden={hidden}
       style={style}
-      className={clsx('AbSearchbar', styles.abSearchbar, disabled && styles.isDisabled, className)}
+      className={clsx('AbSearchbar', styles.abSearchbar, AB_MOTION.colors, disabled && styles.isDisabled, className)}
       data-busy={busy ? 'true' : 'false'}
     >
       <span className={clsx('material-symbols-rounded', styles.abSearchbarIcon)} aria-hidden>
@@ -124,7 +155,7 @@ const AbSearchbar = ({
         }}
         onKeyUp={(e) => onKeyUp?.(e.currentTarget.value, e)}
       />
-      {busy ? <span className={styles.abSearchbarSpinner} aria-hidden /> : null}
+      {busy ? <span className={clsx(styles.abSearchbarSpinner, AB_SPIN_CLASS)} aria-hidden /> : null}
       {current && !disabled ? (
         <button type="button" className={styles.abSearchbarClear} aria-label={clearLabel} onClick={clear}>
           <span className="material-symbols-rounded" aria-hidden>close</span>