ab-nextjs-components 0.1.2 → 0.1.4

package/ab-button/styles.module.css

@@ -0,0 +1,63 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* Plain CSS modules — no Tailwind Tailwind apply (Turbopack-safe).
+*/
+
+/*
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+* MOTTO: We'll always do more 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+*/
+
+.abButton {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  width: fit-content;
+  height: fit-content;
+  margin: 0;
+  overflow: hidden;
+  font-size: 1rem;
+  line-height: 1.25;
+  text-decoration: none;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  color: inherit;
+}
+
+.abButtonRounded {
+  border-radius: 9999px;
+}
+
+.isContained {}
+
+.isDisabled {
+  pointer-events: none;
+  opacity: 0.6;
+}
+
+.abButtonIcon {
+  font-size: 1.25rem;
+  line-height: 1;
+}
+
+.abButtonSpinnerSlot {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.abButtonSpinner {
+  /* themed via --ab-button-spinner-color when present */
+}
+
+.hidden { display: none !important; }
+.invisible { visibility: hidden; }

package/ab-collapsible/index.tsx

@@ -0,0 +1,188 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbCollapsible - Client (port of lyd-collapsible)
+* @file: ab-collapsible/index.tsx
+*/
+
+'use client';
+
+import type { CSSProperties, ReactElement, ReactNode } from 'react';
+import { useState } from 'react';
+import Link from 'next/link';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export interface AbCollapsibleProps {
+  href?: string | null;
+  className?: string;
+  style?: CSSProperties;
+  hidden?: boolean;
+  type?: 'contained' | 'outlined';
+  effect?: 'normal' | 'morph' | 'translucent';
+  title: string;
+  subtitle?: string;
+  icon?: string;
+  resetIcon?: string;
+  expandIcon?: string;
+  isOpen?: boolean;
+  defaultOpen?: boolean;
+  isActive?: boolean;
+  autoActiveIcon?: boolean;
+  autoHideSubtitle?: boolean;
+  hideResetIcon?: boolean;
+  hideSubtitle?: boolean;
+  subtitleAsCaption?: boolean;
+  titleBold?: boolean;
+  titleCapitalize?: boolean;
+  expands?: boolean;
+  titleExpands?: boolean;
+  shrinks?: boolean;
+  children?: ReactNode;
+  onToggle?: (open: boolean) => void;
+  onReset?: () => void;
+}
+
+const AbCollapsible = ({
+  href = null,
+  className,
+  style,
+  hidden = false,
+  type = 'contained',
+  effect = 'normal',
+  title,
+  subtitle,
+  icon,
+  resetIcon = 'close',
+  expandIcon = 'expand_more',
+  isOpen,
+  defaultOpen = false,
+  isActive = false,
+  autoActiveIcon = true,
+  autoHideSubtitle = true,
+  hideResetIcon = true,
+  hideSubtitle = false,
+  subtitleAsCaption = false,
+  titleBold = true,
+  titleCapitalize = false,
+  expands = false,
+  titleExpands = false,
+  shrinks = false,
+  children,
+  onToggle,
+  onReset,
+}: AbCollapsibleProps): ReactElement => {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const open = isOpen ?? internalOpen;
+
+  const setOpen = (next: boolean) => {
+    if (isOpen === undefined) setInternalOpen(next);
+    onToggle?.(next);
+  };
+
+  const headerInner = (
+    <>
+      {icon ? (
+        <span
+          className={clsx(
+            'material-symbols-rounded',
+            styles.abCollapsibleIcon,
+            autoActiveIcon && open && styles.iconActive,
+          )}
+          aria-hidden
+        >
+          {icon}
+        </span>
+      ) : null}
+      <span className={styles.abCollapsibleTitles}>
+        <span
+          className={clsx(
+            styles.abCollapsibleTitle,
+            titleBold && styles.titleBold,
+            titleCapitalize && styles.titleCapitalize,
+            titleExpands && styles.titleExpands,
+          )}
+        >
+          {title}
+        </span>
+        {subtitle && !hideSubtitle && !(autoHideSubtitle && !open) ? (
+          <span
+            className={clsx(
+              styles.abCollapsibleSubtitle,
+              subtitleAsCaption && styles.subtitleCaption,
+            )}
+          >
+            {subtitle}
+          </span>
+        ) : null}
+      </span>
+      {!hideResetIcon ? (
+        <button
+          type="button"
+          className={styles.abCollapsibleReset}
+          aria-label="Reset"
+          onClick={(e) => {
+            e.stopPropagation();
+            onReset?.();
+          }}
+        >
+          <span className="material-symbols-rounded" aria-hidden>
+            {resetIcon}
+          </span>
+        </button>
+      ) : null}
+      <span
+        className={clsx('material-symbols-rounded', styles.abCollapsibleExpand, open && styles.expanded)}
+        aria-hidden
+      >
+        {expandIcon}
+      </span>
+    </>
+  );
+
+  return (
+    <div
+      hidden={hidden}
+      style={style}
+      data-type={type}
+      data-effect={effect}
+      data-open={open ? 'true' : 'false'}
+      data-active={isActive ? 'true' : 'false'}
+      data-expands={expands ? 'true' : 'false'}
+      data-shrinks={shrinks ? 'true' : 'false'}
+      className={clsx(
+        'AbCollapsible',
+        styles.abCollapsible,
+        open && styles.isOpen,
+        isActive && styles.isActive,
+        expands && styles.expands,
+        shrinks && styles.shrinks,
+        className,
+      )}
+    >
+      {href ? (
+        <Link href={href} className={styles.abCollapsibleHeader}>
+          {headerInner}
+        </Link>
+      ) : (
+        <button
+          type="button"
+          className={styles.abCollapsibleHeader}
+          aria-expanded={open}
+          onClick={() => setOpen(!open)}
+        >
+          {headerInner}
+        </button>
+      )}
+      {open ? <div className={styles.abCollapsibleBody}>{children}</div> : null}
+    </div>
+  );
+};
+
+export default AbCollapsible;
+export { AbCollapsible };

package/ab-collapsible/styles.module.css

@@ -0,0 +1,98 @@
+.abCollapsible {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border-radius: 0.75rem;
+  background: var(--ab-surface-container, #f3edf7);
+  color: var(--ab-on-surface, #1c1b1f);
+  overflow: hidden;
+}
+
+.abCollapsible[data-type='outlined'] {
+  background: transparent;
+  border: 1px solid color-mix(in srgb, var(--ab-outline, #79747e) 40%, transparent);
+}
+
+.abCollapsibleHeader {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  padding: 0.875rem 1rem;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.abCollapsibleIcon {
+  font-size: 1.5rem;
+  line-height: 1;
+  opacity: 0.85;
+}
+
+.iconActive {
+  color: var(--ab-primary, #a67c52);
+  opacity: 1;
+}
+
+.abCollapsibleTitles {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 0;
+}
+
+.abCollapsibleTitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.titleBold { font-weight: 700; }
+.titleCapitalize { text-transform: capitalize; }
+.titleExpands { white-space: normal; }
+
+.abCollapsibleSubtitle {
+  font-size: 0.875rem;
+  opacity: 0.75;
+}
+
+.subtitleCaption {
+  font-size: 0.75rem;
+  opacity: 0.65;
+}
+
+.abCollapsibleReset,
+.abCollapsibleExpand {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+
+.abCollapsibleExpand {
+  transition: transform 0.2s ease;
+}
+
+.abCollapsibleExpand.expanded {
+  transform: rotate(180deg);
+}
+
+.abCollapsibleBody {
+  padding: 0 1rem 1rem;
+}
+
+.isActive {
+  box-shadow: inset 0 0 0 2px var(--ab-primary, #a67c52);
+}
+
+.expands { width: 100%; }
+.shrinks { width: fit-content; }

package/ab-color/index.tsx

@@ -0,0 +1,84 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbColor - Client (port of lyd-color)
+* @file: ab-color/index.tsx
+*/
+
+'use client';
+
+import type { MouseEvent, ReactElement } from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export interface AbColorProps {
+  className?: string;
+  hidden?: boolean;
+  disabled?: boolean;
+  shape?: 'circle' | 'square';
+  name: string;
+  colors: string[];
+  isActive?: boolean;
+  expands?: boolean;
+  shrinks?: boolean;
+  onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;
+}
+
+const AbColor = ({
+  className,
+  hidden = false,
+  disabled = false,
+  shape = 'circle',
+  name,
+  colors,
+  isActive = false,
+  expands = false,
+  shrinks = false,
+  onClick,
+}: AbColorProps): ReactElement => {
+  const swatches = colors.slice(0, 4);
+
+  return (
+    <button
+      type="button"
+      hidden={hidden}
+      disabled={disabled}
+      aria-label={name}
+      aria-pressed={isActive}
+      data-shape={shape}
+      data-active={isActive ? 'true' : 'false'}
+      data-expands={expands ? 'true' : 'false'}
+      data-shrinks={shrinks ? 'true' : 'false'}
+      className={clsx(
+        'AbColor',
+        styles.abColor,
+        shape === 'square' && styles.square,
+        isActive && styles.isActive,
+        expands && styles.expands,
+        shrinks && styles.shrinks,
+        disabled && styles.isDisabled,
+        className,
+      )}
+      onClick={onClick}
+    >
+      <span className={styles.abColorSwatches} aria-hidden>
+        {swatches.map((c, i) => (
+          <span
+            key={`${name}-${i}`}
+            className={styles.abColorSwatch}
+            style={{ background: c }}
+          />
+        ))}
+      </span>
+      <span className={styles.abColorName}>{name}</span>
+    </button>
+  );
+};
+
+export default AbColor;
+export { AbColor };

package/ab-color/styles.module.css

@@ -0,0 +1,51 @@
+.abColor {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.5rem;
+  border: 2px solid transparent;
+  border-radius: 0.75rem;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.abColorSwatches {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  width: 2.5rem;
+  height: 2.5rem;
+  overflow: hidden;
+  border-radius: 9999px;
+}
+
+.square .abColorSwatches {
+  border-radius: 0.375rem;
+}
+
+.abColorSwatch {
+  width: 100%;
+  height: 100%;
+}
+
+.abColorName {
+  max-width: 4.5rem;
+  overflow: hidden;
+  font-size: 0.75rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.isActive {
+  border-color: var(--ab-primary, #a67c52);
+}
+
+.isDisabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.expands { width: 100%; }
+.shrinks { width: fit-content; }

package/ab-demo-box/index.tsx

@@ -0,0 +1,38 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbDemoBox - Client (port of lyd-demo-box)
+* @file: ab-demo-box/index.tsx
+*/
+
+'use client';
+
+import type { ReactElement, ReactNode } from 'react';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export interface AbDemoBoxProps {
+  className?: string;
+  hidden?: boolean;
+  children?: ReactNode;
+}
+
+const AbDemoBox = forwardRef<HTMLDivElement, AbDemoBoxProps>(function AbDemoBox(
+  { className, hidden = false, children },
+  ref,
+): ReactElement {
+  return (
+    <div ref={ref} hidden={hidden} className={clsx('AbDemoBox', styles.abDemoBox, className)}>
+      {children}
+    </div>
+  );
+});
+
+export default AbDemoBox;
+export { AbDemoBox };

package/ab-demo-box/styles.module.css

@@ -0,0 +1,13 @@
+.abDemoBox {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.25rem;
+  border-radius: 1rem;
+  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
+  background:
+    radial-gradient(circle at top right, color-mix(in srgb, var(--ab-primary, #6750a4) 10%, transparent), transparent 45%),
+    var(--ab-surface, #fff);
+  overflow: hidden;
+}

package/ab-demo-code/index.tsx

@@ -0,0 +1,62 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbDemoCode - Client (port of lyd-demo-code; prism soft-optional)
+* @file: ab-demo-code/index.tsx
+*/
+
+'use client';
+
+import type { ReactElement } from 'react';
+import { forwardRef, useState } from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export interface AbDemoCodeProps {
+  className?: string;
+  hidden?: boolean;
+  language?: 'tsx' | 'css' | 'ts' | 'js' | string;
+  code: string;
+}
+
+const AbDemoCode = forwardRef<HTMLDivElement, AbDemoCodeProps>(function AbDemoCode(
+  { className, hidden = false, language = 'tsx', code },
+  ref,
+): ReactElement {
+  const [copied, setCopied] = useState(false);
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1500);
+    } catch {
+      setCopied(false);
+    }
+  };
+
+  return (
+    <div ref={ref} hidden={hidden} className={clsx('AbDemoCode', styles.abDemoCode, className)}>
+      <div className={styles.abDemoCodeHeader}>
+        <span>{language}</span>
+        <button type="button" className={styles.abDemoCodeCopy} onClick={copy} aria-label="Copy code">
+          <span className="material-symbols-rounded" aria-hidden style={{ fontSize: 16 }}>
+            {copied ? 'check' : 'content_copy'}
+          </span>
+          {copied ? 'Copied' : 'Copy'}
+        </button>
+      </div>
+      <pre className={styles.abDemoCodePre}>
+        <code className={styles.abDemoCodeCode}>{code}</code>
+      </pre>
+    </div>
+  );
+});
+
+export default AbDemoCode;
+export { AbDemoCode };

package/ab-demo-code/styles.module.css

@@ -0,0 +1,41 @@
+.abDemoCode {
+  position: relative;
+  border-radius: 0.75rem;
+  overflow: hidden;
+  background: #1e1e2e;
+  color: #cdd6f4;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+}
+.abDemoCodeHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.4rem 0.75rem;
+  background: color-mix(in srgb, #000 25%, transparent);
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  opacity: 0.85;
+}
+.abDemoCodeCopy {
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font: inherit;
+  opacity: 0.8;
+}
+.abDemoCodeCopy:hover { opacity: 1; }
+.abDemoCodePre {
+  margin: 0;
+  padding: 0.85rem 1rem 1rem;
+  overflow: auto;
+  max-height: 24rem;
+}
+.abDemoCodeCode { white-space: pre; }

package/ab-icon/index.tsx

@@ -0,0 +1,63 @@
+/* 
+* @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: AbIcon - Client
+* @file: ab-icon/index.tsx
+*/
+
+'use client';
+
+import type { ReactElement } from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export interface AbIconProps {
+  name: string;
+  className?: string;
+  filled?: boolean;
+  size?: number | string;
+  title?: string;
+}
+
+/** Material Symbols ligature icon (client). */
+const AbIcon = ({ name, className, filled = false, size, title }: AbIconProps): ReactElement => {
+  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'}
+    >
+      {name}
+    </span>
+  );
+};
+
+export default AbIcon;
+export { AbIcon };