ab-nextjs-components 0.1.9 → 0.1.11

package/server/ab-icon/index.tsx

@@ -22,40 +22,92 @@
 * 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 - Server
+* @name: AbIcon - Server (G2)
 * @file: server/ab-icon/index.tsx
+* @type: Server component — any AbIcons name, zero client JS
+* @authors: Abraham Ukachi <abrahamukachi@gmail.com>
+*/
+
+/*
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+* MOTTO: We'll always do more 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 */
 
-import type { ReactElement } from 'react';
+// ⚛️ types
+import type { CSSProperties, ReactElement } from 'react';
+// 🧵 classes
 import clsx from 'clsx';
+// 🗺️ full icon map: fine here, server components ship no JS to the browser
+import { getAbIconSvg } from 'ab-nextjs-icons/ab-icons';
+// 🧮 shared helpers (same rules as the client twin)
+import { getAbIconStroke, getRegisteredAbIcon, pickAbIconMarkup, toAbIconSize, type AbIconSvgData, type AbIconVariant, type AbIconWeight } from '../../ab-icon/helpers';
+// 🎨 styles (server copy)
 import styles from './styles.module.css';
 
+// ⚙️ props
 export interface AbIconProps {
-  name: string;
-  className?: string;
-  filled?: boolean;
-  size?: number | string;
-  title?: string;
+  name: string; // 🗂️ AbIcons name (snake_case); Material ligature fallback if unknown
+  variant?: AbIconVariant; // 🎚️ outlined (default) | filled
+  filled?: boolean; // 🕰️ legacy alias for variant="filled"
+  weight?: AbIconWeight | number; // 📏 100–700 (outlined), default 200
+  size?: number | string; // 📐 default 24px
+  label?: string; // ♿ NEW: accessible name; omitted = decorative (aria-hidden)
+  title?: string; // 💬 legacy tooltip + name
+  svg?: AbIconSvgData; // 🧾 NEW: explicit markup (tree-shaken per-icon import)
+  className?: string; // 🏷️
+  style?: CSSProperties; // 🎨
 }
 
-/** Material Symbols ligature icon (server / RSC). */
-const AbIcon = ({ name, className, filled = false, size, title }: AbIconProps): ReactElement => {
+/** 🔣 AbIcons SVG icon (server / RSC): `svg` prop → registry → full AbIcons map → Material ligature. */
+const AbIcon = ({ name, variant, filled = false, weight, size, label, title, svg, className, style }: AbIconProps): ReactElement => {
+  // 🎚️ variant for lookup
+  const want: AbIconVariant = variant ?? (filled ? 'filled' : 'outlined');
+  // 🔍 explicit → registered → whole map (weight is applied by CSS, so ask for the raw markup)
+  const markup = pickAbIconMarkup(svg ?? getRegisteredAbIcon(name), want) ?? getAbIconSvg(name, want);
+  // 🎚️ legacy `filled` → variant
+  const v: AbIconVariant = variant ?? (filled ? 'filled' : 'outlined');
+  // 🏷️ accessible name: `label` (new) or `title` (legacy)
+  const name_ = label ?? title;
+  // 🎨 size + weight as CSS variables (weight overrides SVG stroke-width via CSS)
+  const vars = { ...style, '--ab-icon-size': toAbIconSize(size), '--ab-icon-stroke': String(getAbIconStroke(weight)) } as CSSProperties;
+  // ♿ labelled = image, else decorative
+  const a11y = name_ ? { role: 'img' as const, 'aria-label': name_ } : { 'aria-hidden': true as const };
+
+  // ✅ AbIcons SVG
+  if (markup) {
+    return (
+      <span
+        className={clsx('AbIcon', styles.abIcon, className)} // 🏷️
+        style={vars} // 🎨
+        data-variant={v} // 🎚️
+        data-icon={name} // 🗂️
+        title={title} // 💬 legacy tooltip only
+        {...a11y} // ♿
+        // 🔒 trusted, package-generated static markup (never user input)
+        dangerouslySetInnerHTML={{ __html: markup }}
+      />
+    );
+  }
+
+  // 🕰️ fallback: Material Symbols ligature (pre-G2 behaviour) for names not in AbIcons
   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'}
+      className={clsx('material-symbols-rounded', 'icon', styles.abIconFont, className)} // 🏷️
+      style={{ ...style, fontSize: toAbIconSize(size) }} // 📏
+      data-filled={v === 'filled' ? 'true' : 'false'} // 🎚️
+      data-icon={name} // 🗂️
+      data-ab-icon-fallback="font" // 🔎 easy to audit
+      title={title} // 💬
+      {...a11y} // ♿
     >
       {name}
     </span>
   );
 };
 
+// 📦 exports
 export default AbIcon;
 export { AbIcon };

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

@@ -4,7 +4,30 @@
 * 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: AbIcon - Styles (G2)
+* @file: server/ab-icon/styles.module.css
+* @type: CSS module
+* @authors: Abraham Ukachi <abrahamukachi@gmail.com>
 */
 
 /*
@@ -13,15 +36,36 @@
 * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 */
 
+/* 🔣 SVG icon box */
 .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;
+  display: inline-flex; /* 📐 */
+  flex: none; /* 🚫 squash */
+  width: var(--ab-icon-size, 24px); /* 📏 */
+  height: var(--ab-icon-size, 24px); /* 📏 */
+  line-height: 0; /* 🧹 no baseline gap */
+  color: inherit; /* 🎨 currentColor flows into the SVG */
 }
 
-.abIcon[data-filled='true'] {
-  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+/* 📐 the inline SVG fills the box */
+.abIcon > svg {
+  width: 100%; /* ↔️ */
+  height: 100%; /* ↕️ */
+}
+
+/* 📏 weight: CSS beats SVG presentation attributes, outlined only (filled stay solid) */
+.abIcon[data-variant='outlined'] > svg [stroke] {
+  stroke-width: var(--ab-icon-stroke, 1.25); /* ✏️ */
+}
+
+/* 🕰️ Material Symbols fallback (unchanged from pre-G2) */
+.abIconFont {
+  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; /* 🚫 */
+}
+.abIconFont[data-filled='true'] {
+  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; /* ⬛ */
 }