ab-nextjs-components 0.1.1 → 0.1.3

package/ab-button/index.tsx

@@ -0,0 +1,164 @@
+/* 
+* @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: AbButton - Client (port of lyd-button)
+* @file: ab-button/index.tsx
+*/
+
+'use client';
+
+import type { CSSProperties, MouseEvent, ReactNode } from 'react';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export type AbButtonType = 'contained' | 'outlined' | 'text';
+export type AbButtonColor = 'primary' | 'secondary' | 'tertiary' | 'white' | 'black';
+
+export interface AbButtonProps {
+  id?: string;
+  type?: AbButtonType;
+  htmlType?: 'button' | 'submit' | 'reset';
+  className?: string;
+  spinnerClassName?: string;
+  hidden?: boolean;
+  style?: CSSProperties;
+  iconStyle?: CSSProperties;
+  rounded?: boolean;
+  raised?: boolean;
+  shrinks?: boolean;
+  expands?: boolean;
+  withIcon?: boolean;
+  disabled?: boolean;
+  isLoading?: boolean;
+  iconPosition?: 'left' | 'right';
+  label: string;
+  icon?: string;
+  color?: AbButtonColor;
+  href?: string;
+  children?: ReactNode;
+  onClick?: (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+}
+
+const AbButton = forwardRef<HTMLButtonElement | HTMLAnchorElement, AbButtonProps>(function AbButton(props, ref) {
+  const {
+    id,
+    type = 'contained',
+    htmlType = 'button',
+    className,
+    spinnerClassName,
+    hidden = false,
+    style,
+    iconStyle,
+    rounded = true,
+    raised = false,
+    shrinks = false,
+    expands = false,
+    withIcon = false,
+    disabled = false,
+    isLoading = false,
+    iconPosition = 'left',
+    label,
+    icon,
+    color = 'primary',
+    href,
+    children,
+    onClick,
+  } = props;
+
+  const classNames = clsx(
+    'AbButton',
+    styles.abButton,
+    className,
+    rounded && styles.abButtonRounded,
+    type === 'contained' && styles.isContained,
+    (disabled || isLoading) && styles.isDisabled,
+  );
+
+  const dataAttrs = {
+    'data-type': type,
+    'data-raised': raised ? 'true' : 'false',
+    'data-shrinks': shrinks ? 'true' : 'false',
+    'data-expands': expands ? 'true' : 'false',
+    'data-rounded': rounded ? 'true' : 'false',
+    'data-iconpos': iconPosition,
+    'data-color': color,
+  } as const;
+
+  const content = (
+    <>
+      {withIcon && iconPosition === 'left' && icon ? (
+        <span className={clsx('material-symbols-rounded', 'icon', styles.abButtonIcon)} style={iconStyle}>{icon}</span>
+      ) : null}
+      <span className={clsx(styles.abButtonSpinnerSlot, !isLoading && styles.hidden)}>
+        <span className={clsx('spinner', 'dot-3', styles.abButtonSpinner, spinnerClassName)} />
+      </span>
+      <span className={clsx(isLoading && styles.invisible)}>{children ?? label}</span>
+      {withIcon && iconPosition === 'right' && icon ? (
+        <span className={clsx('material-symbols-rounded', 'icon', styles.abButtonIcon)} style={iconStyle}>{icon}</span>
+      ) : null}
+    </>
+  );
+
+  if (href) {
+    return (
+      <a
+        ref={ref as React.Ref<HTMLAnchorElement>}
+        id={id}
+        href={disabled ? undefined : href}
+        role="button"
+        className={classNames}
+        style={style}
+        hidden={hidden}
+        aria-disabled={disabled || isLoading}
+        onClick={onClick}
+        {...dataAttrs}
+      >
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      ref={ref as React.Ref<HTMLButtonElement>}
+      id={id}
+      type={htmlType}
+      className={classNames}
+      style={style}
+      hidden={hidden}
+      disabled={disabled || isLoading}
+      onClick={onClick}
+      {...dataAttrs}
+    >
+      {content}
+    </button>
+  );
+});
+
+export default AbButton;
+export { AbButton };

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;
+}