ab-nextjs-components 0.1.8 → 0.1.10

package/ab-splash/styles.module.css

@@ -0,0 +1,103 @@
+/* 
+* @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: AbSplash - Component Stylesheet (plain CSS, Tailwind-independent)
+* @file: ab-splash/styles.module.css
+* @type: CSS Module
+* @authors: Abraham Ukachi <abrahamukachi@gmail.com>
+*/
+
+/*
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+* MOTTO: We'll always do more 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+*/
+
+/* 💦 overlay: hidden by default (JS off = no Splash 🙈) */
+.abSplash {
+  display: none; /* 🙈 off unless the gate turned it on */
+  position: fixed; /* 📌 cover the viewport */
+  inset: 0; /* 📐 edge to edge */
+  z-index: 1000; /* 🔝 above everything */
+  flex-direction: column; /* ⬇️ brand above progress */
+  align-items: center; /* ↔️ centered */
+  justify-content: center; /* ↕️ centered */
+  gap: 2.25rem; /* ↕️ brand ↔ bar */
+  background-color: #FFF8F3; /* ☀️ light surface (matches the splash mocks) */
+  color: #A67C52; /* 🎨 bronze brand */
+  --ab-motion-duration: 200ms; /* 🌫️ fade-out = .ab-motion-colors (ab-nextjs-animations; off under reduced motion) */
+  animation: abSplashFailsafe 0s linear 1.2s forwards; /* ⏱️ never longer than 1.2 s, even without hydration */
+}
+
+/* 🌙 dark */
+:global(html.dark) .abSplash {
+  background-color: #1A1310; /* 🌙 dark surface (matches the splash mocks) */
+  color: #FFF8F5; /* 🤍 light brand */
+}
+
+/* 🚦 gate said "on" (or leaving) */
+:global(html[data-ab-splash]) .abSplash {
+  display: flex;
+}
+
+/* 🔒 no scrolling behind the overlay — with the same 1.2 s failsafe as the overlay itself */
+:global(html[data-ab-splash='on']) {
+  overflow: hidden; /* 🔒 lock */
+  animation: abSplashUnlock 0s linear 1.2s forwards; /* ⏱️ unlock even if hydration never happens */
+}
+
+/* ⏱️ failsafe unlock keyframes (overflow animates discretely) */
+@keyframes abSplashUnlock {
+  to { overflow: visible; }
+}
+
+/* 👋 leaving: fade out */
+:global(html[data-ab-splash='leaving']) .abSplash {
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* 🅰️ brand lockup size */
+.abSplash__brand {
+  font-size: clamp(2.5rem, 6vw, 3.25rem); /* 📏 as in the mock */
+  color: inherit; /* 🎨 follow light/dark */
+  --ab-logo-color: currentColor; /* 🎨 mark + wordmark follow the overlay color */
+}
+
+/* 📶 progress track */
+.abSplash__progress {
+  width: min(18rem, 28vw); /* ↔️ mobile + laptop, as in the mock */
+  --ab-linear-progress-height: 0.375rem; /* ↕️ 6 px */
+  --ab-linear-progress-color: #A67C52; /* 🎨 bronze bar in both themes */
+}
+
+/* ♿ reduced motion: no fade (handled by ab-nextjs-animations .ab-motion-colors) */
+
+/* ⏱️ failsafe keyframes */
+@keyframes abSplashFailsafe {
+  to { visibility: hidden; pointer-events: none; }
+}

package/ab-theme-toggle/index.tsx

@@ -0,0 +1,188 @@
+/* 
+* @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: AbThemeToggle - Client (G9/G34)
+* @file: ab-theme-toggle/index.tsx
+* @type: Component (client) — light / dark / system
+* @authors: Abraham Ukachi <abrahamukachi@gmail.com>
+*
+* Example usage:
+*   1+|> <AbThemeToggle labels={{ group: t('theme.label'), light: t('theme.light'), dark: t('theme.dark'), system: t('theme.system') }} />
+*/
+
+/*
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+* MOTTO: We'll always do more 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+*/
+
+'use client';
+
+// ⚛️ React
+import type { CSSProperties, KeyboardEvent, ReactNode } from 'react';
+import { useRef } from 'react';
+// 🧵 classes
+import clsx from 'clsx';
+// 🌗 theme engine (hooks ≥ 0.1.6, deep import = tree-shaken)
+import { useAbThemeMode, AB_THEME_MODES, type AbThemeMode } from 'ab-nextjs-hooks/useAbTheme';
+// 🔣 icons (SVG once G2 lands)
+import AbIcon from '../ab-icon';
+// 🎨 styles
+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-*
+
+// 📦 re-export the mode type for consumers
+export type { AbThemeMode } from 'ab-nextjs-hooks/useAbTheme';
+
+// 🏷️ i18n labels (required: no English defaults baked into a11y names)
+export interface AbThemeToggleLabels {
+  group: string; // 🗂️ "Theme"
+  light: string; // 🌞 "Light"
+  dark: string; // 🌙 "Dark"
+  system: string; // 🖥️ "System"
+}
+
+// ⚙️ props
+export interface AbThemeToggleProps {
+  labels: AbThemeToggleLabels; // 🏷️
+  variant?: 'segmented' | 'icon'; // 🎨 pill of radios, or one cycling icon button
+  modes?: readonly AbThemeMode[]; // 🎚️ default light, dark, system
+  value?: AbThemeMode; // 🎛️ controlled
+  onChange?: (mode: AbThemeMode) => void; // 📣
+  defaultMode?: AbThemeMode; // 🌱 before hydration (default 'light')
+  icons?: Partial<Record<AbThemeMode, ReactNode>>; // 🖼️ override glyphs
+  size?: 'sm' | 'md'; // 📏 sm = 32px, md = 40px segments (hit area ≥ 24px either way)
+  className?: string; // 🏷️
+  style?: CSSProperties; // 🎨
+}
+
+// 🔣 default glyphs (AbIcons names)
+const DEFAULT_ICON_NAMES: Record<AbThemeMode, string> = { light: 'light_mode', dark: 'dark_mode', system: 'computer' };
+
+/**
+ * @name getNextAbThemeMode
+ * @description 🔁 Radio-group arrow logic (pure): wraps, RTL flips Left/Right.
+ */
+export function getNextAbThemeMode(modes: readonly AbThemeMode[], current: AbThemeMode, key: string, dir: 'ltr' | 'rtl' = 'ltr'): AbThemeMode | null {
+  const i = Math.max(0, modes.indexOf(current)); // 📍
+  const forward = dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight'; // ➡️
+  const backward = dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft'; // ⬅️
+  if (key === forward || key === 'ArrowDown') return modes[(i + 1) % modes.length]; // ⏭️
+  if (key === backward || key === 'ArrowUp') return modes[(i - 1 + modes.length) % modes.length]; // ⏮️
+  if (key === 'Home') return modes[0]; // ⏮️⏮️
+  if (key === 'End') return modes[modes.length - 1]; // ⏭️⏭️
+  return null; // 🙅
+}
+
+export function AbThemeToggle(props: AbThemeToggleProps) {
+  // 🧩 props
+  const { labels, variant = 'segmented', modes = AB_THEME_MODES, value, onChange, defaultMode = 'light', icons, size = 'md', className, style } = props;
+  // 🌗 engine: persists + applies to <html>
+  const engine = useAbThemeMode(defaultMode);
+  // 🎛️ controlled or engine-driven
+  const current = (value ?? engine.mode) as AbThemeMode;
+  // 📍 refs to move focus with the selection
+  const refs = useRef<Array<HTMLButtonElement | null>>([]);
+
+  // ✍️ select a mode
+  const select = (mode: AbThemeMode) => {
+    if (value === undefined) engine.setMode(mode); // 🎚️ uncontrolled: apply + persist
+    onChange?.(mode); // 📣
+  };
+
+  // 🖼️ glyph for a mode (decorative: the label names it)
+  const glyph = (mode: AbThemeMode) => icons?.[mode] ?? <AbIcon name={DEFAULT_ICON_NAMES[mode]} size={20} />;
+
+  // 🔘 single cycling button variant
+  if (variant === 'icon') {
+    const next = modes[(Math.max(0, modes.indexOf(current)) + 1) % modes.length]; // ⏭️
+    return (
+      <button
+        type="button" // 🧾
+        className={clsx('AbThemeToggle', styles.icon, AB_MOTION.colors, className)} // 🏷️
+        style={style} // 🎨
+        data-ab-part="theme-toggle" // 🗂️
+        data-mode={current} // 🎚️
+        data-size={size} // 📏
+        aria-label={`${labels.group}: ${labels[current]}`} // ♿ "Theme: Dark"
+        title={`${labels.group}: ${labels[current]}`} // 💬
+        onClick={() => select(next)} // 🔁
+      >
+        <span aria-hidden="true">{glyph(current)}</span>
+      </button>
+    );
+  }
+
+  // ⌨️ roving radio keys
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    const dir = (event.currentTarget.closest('[dir]')?.getAttribute('dir') === 'rtl' ? 'rtl' : 'ltr') as 'ltr' | 'rtl'; // 🌍
+    const target = getNextAbThemeMode(modes, current, event.key, dir); // 🎯
+    if (!target) return; // 🙅 other keys untouched
+    event.preventDefault(); // 🛑 no scroll
+    select(target); // ✅ selection follows focus (radio pattern)
+    refs.current[modes.indexOf(target)]?.focus(); // 🎯
+  };
+
+  // 🎛️ segmented radiogroup
+  return (
+    <div
+      role="radiogroup" // ♿
+      aria-label={labels.group} // 🏷️
+      className={clsx('AbThemeToggle', styles.group, className)} // 🏷️
+      style={style} // 🎨
+      data-ab-part="theme-toggle" // 🗂️
+      data-mode={current} // 🎚️
+      data-size={size} // 📏
+      onKeyDown={onKeyDown} // ⌨️
+    >
+      {modes.map((mode, i) => {
+        const checked = mode === current; // ✅
+        return (
+          <button
+            key={mode} // 🔑
+            ref={(el) => { refs.current[i] = el; }} // 📍
+            type="button" // 🧾
+            role="radio" // ♿
+            aria-checked={checked} // ✅
+            aria-label={labels[mode]} // 🏷️
+            title={labels[mode]} // 💬
+            tabIndex={checked ? 0 : -1} // ⌨️ roving: one tab stop
+            className={clsx(styles.segment, AB_MOTION.colors)} // 🎨 + colour fade (ab-nextjs-animations)
+            data-ab-part="theme-option" // 🗂️
+            data-mode={mode} // 🎚️
+            onClick={() => select(mode)} // 🖱️
+          >
+            <span aria-hidden="true">{glyph(mode)}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+// 📦 default export
+export default AbThemeToggle;

package/ab-theme-toggle/styles.module.css

@@ -0,0 +1,89 @@
+/* 
+* @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: AbThemeToggle - Styles
+* @file: ab-theme-toggle/styles.module.css
+* @type: CSS module
+* @authors: Abraham Ukachi <abrahamukachi@gmail.com>
+*/
+
+/*
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+* MOTTO: We'll always do more 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+*/
+
+/* 💊 segmented pill */
+.group {
+  display: inline-flex; /* 📐 row */
+  gap: 2px; /* 🧱 */
+  padding: 3px; /* 🧱 */
+  border-radius: 9999px; /* 💊 */
+  border: 1px solid var(--ab-color-outline-variant, rgb(0 0 0 / 0.12)); /* 🖊️ */
+  background: var(--ab-color-surface-container, transparent); /* 🎨 */
+}
+
+/* 🔘 each option; md = 40px, sm = 32px (both ≥ 24px target, WCAG 2.5.8) */
+.segment,
+.icon {
+  display: inline-grid; /* 📐 */
+  place-items: center; /* 🎯 */
+  width: 40px; /* 📏 */
+  height: 40px; /* 📏 */
+  padding: 0; /* 🧹 */
+  border: 0; /* 🧹 */
+  border-radius: 9999px; /* 💊 */
+  color: var(--ab-color-on-surface-variant, currentColor); /* 🎨 */
+  background: transparent; /* 🫥 */
+  cursor: pointer; /* 👆 */
+  --ab-motion-duration: var(--ab-motion-duration-short, 160ms); /* 🎞️ colour fade = .ab-motion-colors (ab-nextjs-animations) */
+}
+[data-size='sm'] .segment,
+.icon[data-size='sm'] {
+  width: 32px; /* 📏 */
+  height: 32px; /* 📏 */
+}
+
+/* ✅ selected */
+.segment[aria-checked='true'] {
+  color: var(--ab-color-on-primary, #fff); /* 🎨 */
+  background: var(--ab-color-primary, #A67C52); /* 🥉 bronze */
+}
+
+/* 🖱️ hover (unselected only) */
+.segment[aria-checked='false']:hover,
+.icon:hover {
+  background: color-mix(in srgb, currentColor 10%, transparent); /* 🌫️ */
+}
+
+/* ♿ visible focus ring (theme token, G18) */
+.segment:focus-visible,
+.icon:focus-visible {
+  outline: 2px solid var(--ab-focus-ring, var(--ab-color-primary, #A67C52)); /* 💍 */
+  outline-offset: 2px; /* ↔️ */
+}
+
+/* 🧘 reduced motion: handled by ab-nextjs-animations (.ab-motion-colors) */

package/css/dialog.css

@@ -1,7 +1,41 @@
+/* 
+* @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: Dialog chrome styles (moved out of ab-nextjs-theme)
+* @file: css/dialog.css
+* @type: CSS
+* @authors: Abraham Ukachi <abrahamukachi@gmail.com>
+*/
+
 /*
- * ab-nextjs-components — chrome styles moved out of ab-nextjs-theme
- * Copyright (c) 2026 Abraham Ukachi. MIT.
- */
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+* MOTTO: We'll always do more 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+*/
+
 
 /* Dialogs */
 #dialogs, .Dialogs {
@@ -104,6 +138,7 @@ li.dialog-list-item {
   transform-origin: left;
   opacity: var(--opacity-dialog-list-item, 0.68);
   user-select: none;
+  /* ⚠️ named motion exception (James review): consumer-rendered markup, no component can add an ab-motion-* class; pinned in __tests__/motion-from-animations.test.tsx */
   transition: all 0.2s ease-in-out;
 }
 

package/index.ts

@@ -5,11 +5,38 @@
 * ~~~~~~~~~~~~ 
 * 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: Components - Package Catalog
 * @file: index.ts
+* @type: Package catalog + barrel
+* @authors: Abraham Ukachi <abrahamukachi@gmail.com>
 */
 
+/*
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+* MOTTO: We'll always do more 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+*/
+
+
 import type { ComponentCatalogEntry } from './types'
 
 /**
@@ -20,6 +47,12 @@ const supportedComponents: Array<ComponentCatalogEntry> = [
   // CLIENT
   { name: 'AbIcon', file: 'ab-icon/index.tsx', kind: 'client', status: 'Done' },
   { name: 'AbLogo', file: 'ab-logo/index.tsx', kind: 'client', status: 'Done' },
+  // 📶 AbLinearProgress (ported from core; used by AbSplash)
+  { name: 'AbLinearProgress', file: 'ab-linear-progress/index.tsx', kind: 'client', status: 'Done' },
+  // 💦 AbSplash: subpath-only (`ab-nextjs-components/ab-splash`)
+  { name: 'AbSplash', file: 'ab-splash/index.tsx', kind: 'client', status: 'Done' },
+  // 🎠 G31 AbCarousel (Welcome v6): subpath-only (`ab-nextjs-components/ab-carousel`), needs ab-nextjs-hooks >= 0.1.6
+  { name: 'AbCarousel', file: 'ab-carousel/index.tsx', kind: 'client', status: 'Done' },
   { name: 'AbButton', file: 'ab-button/index.tsx', kind: 'client', status: 'Done' },
   { name: 'AbIconButton', file: 'ab-icon-button/index.tsx', kind: 'client', status: 'Done' },
   { name: 'AbInput', file: 'ab-input/index.tsx', kind: 'client', status: 'Done' },
@@ -71,6 +104,18 @@ const supportedComponents: Array<ComponentCatalogEntry> = [
   { name: 'AbTestHello', file: 'server/ab-test-hello/index.tsx', kind: 'server', status: 'Done' },
   { name: 'AbKeyFeature', file: 'server/ab-key-feature/index.tsx', kind: 'server', status: 'Done' },
   { name: 'AbSwitchBack', file: 'server/ab-switch-back/index.tsx', kind: 'server', status: 'Done' },
+  // 🆕 Welcome v6 (AbThemeToggle)
+  { name: 'AbThemeToggle', file: 'ab-theme-toggle/index.tsx', kind: 'client', status: 'Done' },
+  // 🆕 Welcome v6 (AbChip)
+  { name: 'AbChip', file: 'ab-chip/index.tsx', kind: 'server', status: 'Done' },
+  // 🆕 Welcome v6 (AbPill)
+  { name: 'AbPill', file: 'ab-pill/index.tsx', kind: 'server', status: 'Done' },
+  // 🆕 Welcome v6 (AbInstallSnippet)
+  { name: 'AbInstallSnippet', file: 'ab-install-snippet/index.tsx', kind: 'client', status: 'Done' },
+  // 🆕 Welcome v6 (AbLocaleSwitcher)
+  { name: 'AbLocaleSwitcher', file: 'ab-locale-switcher/index.tsx', kind: 'client', status: 'Done' },
+  // 🆕 Welcome v6 (AbFlowDiagram)
+  { name: 'AbFlowDiagram', file: 'ab-flow-diagram/index.tsx', kind: 'server', status: 'Done' },
 ]
 
 const abComponents = { supportedComponents }
@@ -80,6 +125,8 @@ export default abComponents
 
 export { default as AbIcon } from './ab-icon/index.tsx'
 export { default as AbLogo } from './ab-logo/index.tsx'
+// 📶 progress bar
+export { default as AbLinearProgress } from './ab-linear-progress/index.tsx'
 export { default as AbButton } from './ab-button/index.tsx'
 export { default as AbIconButton } from './ab-icon-button/index.tsx'
 export { default as AbInput } from './ab-input/index.tsx'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ab-nextjs-components",
-  "version": "0.1.8",
-  "description": "\ud83d\ude80 A lightweight collection of server & client React components created by Abraham Ukachi, and optimized for Next.js applications \ud83d\ude0e.",
+  "version": "0.1.10",
+  "description": "🚀 A lightweight collection of server & client React components created by Abraham Ukachi, and optimized for Next.js applications 😎.",
   "type": "module",
   "main": "index.ts",
   "types": "types/index.d.ts",
@@ -16,8 +16,10 @@
   "scripts": {
     "lint": "eslint . --fix",
     "test": "vitest run",
-    "check:publish": "node scripts/check-publish-deps.mjs && node scripts/check-css-assets.mjs",
-    "prepublishOnly": "node scripts/check-publish-deps.mjs && node scripts/check-css-assets.mjs",
+    "typecheck": "tsc --noEmit -p .",
+    "build:csp": "node scripts/build-csp.mjs",
+    "check:publish": "node scripts/check-publish-deps.mjs && node scripts/check-css-assets.mjs && node scripts/build-csp.mjs --check",
+    "prepublishOnly": "node scripts/check-publish-deps.mjs && node scripts/check-css-assets.mjs && node scripts/build-csp.mjs --check",
     "check:css-assets": "node scripts/check-css-assets.mjs"
   },
   "keywords": [
@@ -38,27 +40,33 @@
   },
   "license": "MIT",
   "peerDependencies": {
+    "ab-nextjs-animations": "^0.2.4",
+    "ab-nextjs-hooks": "^0.1.6",
+    "ab-nextjs-icons": "^0.2.3",
+    "ab-nextjs-theme": "^0.3.1",
     "clsx": "^2",
     "next": "^16.3.4",
     "react": "^19",
-    "react-dom": "^19",
-    "ab-nextjs-theme": "*",
-    "ab-nextjs-icons": "*",
-    "ab-nextjs-hooks": "*",
-    "ab-nextjs-animations": "*"
+    "react-dom": "^19"
   },
   "devDependencies": {
+    "@testing-library/react": "^16.3.3",
     "@types/node": "^20",
     "@types/react": "^19",
+    "ab-nextjs-animations": "^0.2.4",
+    "ab-nextjs-hooks": "^0.1.6",
+    "ab-nextjs-icons": "^0.2.3",
+    "ab-nextjs-theme": "^0.3.1",
+    "clsx": "^2.1.1",
+    "esbuild": "^0.28.2",
     "eslint": "^9.39.0",
     "eslint-config-next": "16.3.4",
+    "happy-dom": "^20.14.6",
     "next": "16.3.4",
     "react": "^19",
     "react-dom": "^19",
     "typescript": "^5",
-    "vitest": "^3",
-    "clsx": "^2.1.1",
-    "ab-nextjs-hooks": "^0.1.2"
+    "vitest": "^3"
   },
   "files": [
     "index.ts",
@@ -103,6 +111,15 @@
     "ab-switch-back",
     "ab-demo-box",
     "ab-demo-code",
+    "ab-splash",
+    "ab-linear-progress",
+    "ab-carousel",
+    "ab-flow-diagram",
+    "ab-locale-switcher",
+    "ab-install-snippet",
+    "ab-pill",
+    "ab-chip",
+    "ab-theme-toggle",
     "ab-logo/ab-logo.svg",
     "styles.css",
     "css",
@@ -116,6 +133,23 @@
     "./package.json": "./package.json",
     "./ab-icon": "./ab-icon/index.tsx",
     "./ab-logo": "./ab-logo/index.tsx",
+    "./ab-linear-progress": "./ab-linear-progress/index.tsx",
+    "./ab-splash": "./ab-splash/index.tsx",
+    "./ab-carousel": "./ab-carousel/index.tsx",
+    "./ab-carousel/helpers": "./ab-carousel/helpers.ts",
+    "./ab-theme-toggle": "./ab-theme-toggle/index.tsx",
+    "./ab-chip": "./ab-chip/index.tsx",
+    "./ab-pill": "./ab-pill/index.tsx",
+    "./ab-install-snippet": "./ab-install-snippet/index.tsx",
+    "./ab-install-snippet/helpers": "./ab-install-snippet/helpers.ts",
+    "./ab-locale-switcher": "./ab-locale-switcher/index.tsx",
+    "./ab-flow-diagram": "./ab-flow-diagram/index.tsx",
+    "./ab-flow-diagram/helpers": "./ab-flow-diagram/helpers.ts",
+    "./ab-splash/gate": "./ab-splash/gate.ts",
+    "./ab-splash/csp": {
+      "types": "./ab-splash/csp.d.ts",
+      "default": "./ab-splash/csp.mjs"
+    },
     "./ab-button": "./ab-button/index.tsx",
     "./ab-icon-button": "./ab-icon-button/index.tsx",
     "./ab-input": "./ab-input/index.tsx",
@@ -176,14 +210,8 @@
     "ab-nextjs-theme": {
       "optional": true
     },
-    "ab-nextjs-icons": {
-      "optional": true
-    },
     "ab-nextjs-hooks": {
       "optional": true
-    },
-    "ab-nextjs-animations": {
-      "optional": true
     }
   }
 }