ab-nextjs-components 0.1.2 → 0.1.3

package/ab-searchbar/index.tsx

@@ -0,0 +1,150 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbSearchbar - Client (port of lyd-searchbar)
+* @file: ab-searchbar/index.tsx
+*/
+
+'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';
+
+export interface AbSearchbarProps {
+  className?: string;
+  style?: CSSProperties;
+  hidden?: boolean;
+  name?: string;
+  value?: string;
+  defaultValue?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  isLoading?: boolean;
+  isBusy?: boolean;
+  dividerHidden?: boolean;
+  dropdownButtonHidden?: boolean;
+  dropdownButtonLabel?: string;
+  clearLabel?: string;
+  onChange?: (searchValue: string) => void;
+  onEnter?: (searchValue: string, event?: KeyboardEvent<HTMLInputElement>) => void;
+  onKeyDown?: (searchValue: string, event?: KeyboardEvent<HTMLInputElement>) => void;
+  onKeyUp?: (searchValue: string, event?: KeyboardEvent<HTMLInputElement>) => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  onClear?: () => void;
+  onDropdownButtonClick?: () => void;
+  onLoad?: (searchInputElement?: HTMLInputElement | null) => void;
+}
+
+const AbSearchbar = ({
+  className,
+  style,
+  hidden = false,
+  name = 'q',
+  value,
+  defaultValue = '',
+  placeholder = 'Search…',
+  disabled = false,
+  isLoading = false,
+  isBusy = false,
+  dividerHidden = false,
+  dropdownButtonHidden = true,
+  dropdownButtonLabel = 'Filters',
+  clearLabel = 'Clear',
+  onChange,
+  onEnter,
+  onKeyDown,
+  onKeyUp,
+  onFocus,
+  onBlur,
+  onClear,
+  onDropdownButtonClick,
+  onLoad,
+}: AbSearchbarProps): ReactElement => {
+  const id = useId();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const loadNotified = useRef(false);
+  const setInputRef = (node: HTMLInputElement | null) => {
+    inputRef.current = node;
+    if (node && !loadNotified.current) {
+      loadNotified.current = true;
+      onLoad?.(node);
+    }
+  };
+  const [internal, setInternal] = useState(defaultValue);
+  const controlled = value !== undefined;
+  const current = controlled ? value! : internal;
+  const busy = isLoading || isBusy;
+
+
+  const setValue = (next: string) => {
+    if (!controlled) setInternal(next);
+    onChange?.(next);
+  };
+
+  const clear = () => {
+    setValue('');
+    onClear?.();
+    inputRef.current?.focus();
+  };
+
+  return (
+    <div
+      hidden={hidden}
+      style={style}
+      className={clsx('AbSearchbar', styles.abSearchbar, disabled && styles.isDisabled, className)}
+      data-busy={busy ? 'true' : 'false'}
+    >
+      <span className={clsx('material-symbols-rounded', styles.abSearchbarIcon)} aria-hidden>
+        search
+      </span>
+      <input
+        ref={setInputRef}
+        id={id}
+        name={name}
+        type="search"
+        className={styles.abSearchbarInput}
+        placeholder={placeholder}
+        value={current}
+        disabled={disabled}
+        aria-busy={busy}
+        onChange={(e) => setValue(e.target.value)}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        onKeyDown={(e) => {
+          onKeyDown?.(e.currentTarget.value, e);
+          if (e.key === 'Enter') onEnter?.(e.currentTarget.value, e);
+        }}
+        onKeyUp={(e) => onKeyUp?.(e.currentTarget.value, e)}
+      />
+      {busy ? <span className={styles.abSearchbarSpinner} 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>
+        </button>
+      ) : null}
+      {!dividerHidden && !dropdownButtonHidden ? <span className={styles.abSearchbarDivider} aria-hidden /> : null}
+      {!dropdownButtonHidden ? (
+        <button
+          type="button"
+          className={styles.abSearchbarDropdown}
+          disabled={disabled}
+          onClick={onDropdownButtonClick}
+        >
+          {dropdownButtonLabel}
+        </button>
+      ) : null}
+    </div>
+  );
+};
+
+export default AbSearchbar;
+export { AbSearchbar };
+

package/ab-searchbar/styles.module.css

@@ -0,0 +1,77 @@
+.abSearchbar {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 2.5rem;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0 0.625rem;
+  box-sizing: border-box;
+  border-radius: 9999px;
+  overflow: hidden;
+  background: color-mix(in srgb, var(--ab-surface-container-high, #e6e0e9) 90%, transparent);
+  transition: background 0.3s ease;
+}
+.abSearchbar:focus-within {
+  background: var(--ab-surface-container-high, #e6e0e9);
+}
+.abSearchbarIcon {
+  font-size: 1.25rem;
+  opacity: 0.7;
+  pointer-events: none;
+  user-select: none;
+}
+.abSearchbarInput {
+  flex: 1;
+  height: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  font: inherit;
+  min-width: 0;
+}
+.abSearchbarInput::-webkit-search-decoration,
+.abSearchbarInput::-webkit-search-cancel-button {
+  appearance: none;
+  display: none;
+}
+.abSearchbarDivider {
+  width: 1px;
+  height: 1.25rem;
+  background: color-mix(in srgb, currentColor 20%, transparent);
+  flex-shrink: 0;
+}
+.abSearchbarDropdown,
+.abSearchbarClear {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem 0.5rem;
+  border-radius: 9999px;
+  font: inherit;
+  color: inherit;
+}
+.abSearchbarDropdown:disabled,
+.abSearchbarClear:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.abSearchbarSpinner {
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
+  border-top-color: currentColor;
+  border-radius: 50%;
+  animation: abSearchbarSpin 0.7s linear infinite;
+}
+@keyframes abSearchbarSpin {
+  to { transform: rotate(360deg); }
+}
+.isDisabled {
+  opacity: 0.55;
+  pointer-events: none;
+}
+

package/ab-sidebar/index.tsx

@@ -0,0 +1,72 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbSidebar - Client (port of lyd-sidebar; providers stripped)
+* @file: ab-sidebar/index.tsx
+*/
+
+'use client';
+
+import type { ReactElement } from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export type AbSidebarLink = {
+  href: string;
+  icon: string;
+  value: string;
+  label: string;
+};
+
+export interface AbSidebarProps {
+  className?: string;
+  type?: 'customer' | 'admin';
+  page?: string;
+  links?: AbSidebarLink[];
+  brandHref?: string;
+  brandLabel?: string;
+}
+
+const AbSidebar = ({
+  className,
+  type = 'customer',
+  page,
+  links = [],
+  brandHref = '/',
+  brandLabel = 'abElements',
+}: AbSidebarProps): ReactElement => {
+  const pathname = usePathname() ?? '';
+  return (
+    <aside data-type={type} className={clsx('AbSidebar', styles.abSidebar, className)} aria-label="Sidebar">
+      <Link href={brandHref} className={styles.abSidebarBrand}>
+        <span className="material-symbols-rounded" aria-hidden>apps</span>
+        <span>{brandLabel}</span>
+      </Link>
+      <ul className={styles.abSidebarList}>
+        {links.map((link) => {
+          const active = page ? page === link.value : pathname === link.href || pathname.startsWith(`${link.href}/`);
+          return (
+            <li key={link.value}>
+              <Link href={link.href} data-active={active ? 'true' : 'false'} className={styles.abSidebarLink}>
+                <span className={clsx('material-symbols-rounded', styles.abSidebarIcon)} aria-hidden>
+                  {link.icon}
+                </span>
+                <span>{link.label}</span>
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </aside>
+  );
+};
+
+export default AbSidebar;
+export { AbSidebar };

package/ab-sidebar/styles.module.css

@@ -0,0 +1,41 @@
+.abSidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+  max-width: 16rem;
+  padding: 1rem 0.75rem;
+  box-sizing: border-box;
+}
+.abSidebarBrand {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 700;
+  text-decoration: none;
+  color: inherit;
+}
+.abSidebarList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.abSidebarLink {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.55rem 0.75rem;
+  border-radius: 0.75rem;
+  text-decoration: none;
+  color: inherit;
+  opacity: 0.75;
+  font-weight: 600;
+}
+.abSidebarLink[data-active='true'] {
+  opacity: 1;
+  background: color-mix(in srgb, var(--ab-primary, #6750a4) 14%, transparent);
+}
+.abSidebarIcon { font-size: 1.25rem; }

package/ab-switch-back/index.tsx

@@ -0,0 +1,72 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbSwitchBack - Client (port of lyd-switch-back)
+* @file: ab-switch-back/index.tsx
+*/
+
+'use client';
+
+import type { ReactElement, ReactNode } from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export interface AbSwitchBackProps {
+  className?: string;
+  hidden?: boolean;
+  switched?: boolean;
+  image: string;
+  imageAlt: string;
+  title?: ReactNode;
+  description?: ReactNode;
+  cta1Label: string;
+  cta1Link: string;
+  cta2Label: string;
+  cta2Link: string;
+}
+
+const AbSwitchBack = ({
+  className,
+  hidden = false,
+  switched = false,
+  image,
+  imageAlt,
+  title,
+  description,
+  cta1Label,
+  cta1Link,
+  cta2Label,
+  cta2Link,
+}: AbSwitchBackProps): ReactElement => {
+  return (
+    <section
+      hidden={hidden}
+      data-switched={switched ? 'true' : 'false'}
+      className={clsx('AbSwitchBack', styles.abSwitchBack, className)}
+    >
+      <div className={styles.abSwitchBackMedia}>
+        <Image className={styles.abSwitchBackImage} src={image} alt={imageAlt} width={800} height={600} unoptimized />
+      </div>
+      <div className={styles.abSwitchBackCopy}>
+        {title ? <h2 className={styles.abSwitchBackTitle}>{title}</h2> : null}
+        {description ? <div className={styles.abSwitchBackDesc}>{description}</div> : null}
+        <div className={styles.abSwitchBackActions}>
+          <Link href={cta1Link} className={styles.abSwitchBackCta}>{cta1Label}</Link>
+          <Link href={cta2Link} className={clsx(styles.abSwitchBackCta, styles.abSwitchBackCtaSecondary)}>
+            {cta2Label}
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default AbSwitchBack;
+export { AbSwitchBack };

package/ab-switch-back/styles.module.css

@@ -0,0 +1,45 @@
+.abSwitchBack {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1.25rem;
+  align-items: center;
+}
+@media (min-width: 768px) {
+  .abSwitchBack {
+    grid-template-columns: 1fr 1fr;
+  }
+  .abSwitchBack[data-switched='true'] .abSwitchBackMedia { order: 2; }
+  .abSwitchBack[data-switched='true'] .abSwitchBackCopy { order: 1; }
+}
+.abSwitchBackMedia {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  border-radius: 1rem;
+  overflow: hidden;
+  background: #ddd;
+}
+.abSwitchBackImage {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+.abSwitchBackCopy { display: flex; flex-direction: column; gap: 0.75rem; }
+.abSwitchBackTitle { margin: 0; font-size: 1.5rem; font-weight: 700; }
+.abSwitchBackDesc { margin: 0; opacity: 0.8; }
+.abSwitchBackActions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+.abSwitchBackCta {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  border-radius: 9999px;
+  text-decoration: none;
+  font-weight: 600;
+  background: var(--ab-primary, #6750a4);
+  color: #fff;
+}
+.abSwitchBackCtaSecondary {
+  background: transparent;
+  color: var(--ab-primary, #6750a4);
+  border: 1px solid color-mix(in srgb, var(--ab-primary, #6750a4) 40%, transparent);
+}

package/ab-tab/index.tsx

@@ -0,0 +1,101 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbTab - Client (port of lyd-tab)
+* @file: ab-tab/index.tsx
+*/
+
+'use client';
+
+import type { MouseEvent, ReactElement, ReactNode } from 'react';
+import { forwardRef } from 'react';
+import Link from 'next/link';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export interface AbTabProps {
+  className?: string;
+  hidden?: boolean;
+  id: string;
+  title: string;
+  children?: ReactNode;
+  noIndicator?: boolean;
+  disabled?: boolean;
+  isNaked?: boolean;
+  isSelected?: boolean;
+  href?: string | null;
+  onClick?: (id?: string, element?: HTMLLIElement, event?: MouseEvent<HTMLLIElement>) => void;
+}
+
+const AbTab = forwardRef<HTMLLIElement, AbTabProps>(function AbTab(
+  {
+    className,
+    hidden = false,
+    id,
+    title,
+    children,
+    noIndicator = false,
+    disabled = false,
+    isNaked = false,
+    isSelected = false,
+    href = null,
+    onClick,
+  },
+  ref,
+): ReactElement {
+  const handleClick = (event: MouseEvent<HTMLLIElement>) => {
+    if (disabled) return;
+    onClick?.(id, event.currentTarget, event);
+  };
+
+  const content = (
+    <>
+      <span className={styles.abTabText}>{children ?? title}</span>
+      {!noIndicator ? (
+        <span
+          className={clsx(styles.abTabIndicator, isSelected && styles.abTabIndicatorVisible)}
+          aria-hidden
+        />
+      ) : null}
+    </>
+  );
+
+  return (
+    <li
+      role="tab"
+      ref={ref}
+      id={id}
+      hidden={hidden}
+      aria-selected={isSelected}
+      aria-disabled={disabled || undefined}
+      data-selected={isSelected ? 'true' : 'false'}
+      data-naked={isNaked ? 'true' : 'false'}
+      data-disabled={disabled ? 'true' : 'false'}
+      className={clsx(
+        'AbTab',
+        styles.abTab,
+        isSelected && styles.isSelected,
+        disabled && styles.isDisabled,
+        isNaked && styles.isNaked,
+        className,
+      )}
+      onClick={handleClick}
+    >
+      {href && !disabled ? (
+        <Link href={href} className={styles.abTabLink} tabIndex={disabled ? -1 : 0}>
+          {content}
+        </Link>
+      ) : (
+        content
+      )}
+    </li>
+  );
+});
+
+export default AbTab;
+export { AbTab };

package/ab-tab/styles.module.css

@@ -0,0 +1,65 @@
+.abTab {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  min-width: fit-content;
+  height: auto;
+  overflow: hidden;
+  font-size: 1rem;
+  color: var(--ab-outline, #79747e);
+  cursor: pointer;
+  list-style: none;
+}
+
+.abTab:hover:not(.isDisabled) {
+  color: var(--ab-on-surface, #1c1b1f);
+  background: color-mix(in srgb, var(--ab-inverse-surface, #313033) 10%, transparent);
+}
+
+.abTabText {
+  padding: 0.75rem 1rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.abTabLink {
+  display: flex;
+  align-items: center;
+  color: inherit;
+  text-decoration: none;
+}
+
+.abTabIndicator {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 50%;
+  height: 0.25rem;
+  border-radius: 0.5rem 0.5rem 0 0;
+  background: var(--ab-outline, #79747e);
+  transform: translateX(-50%);
+  visibility: hidden;
+}
+
+.abTabIndicatorVisible,
+.isSelected .abTabIndicator {
+  visibility: visible;
+}
+
+.isSelected {
+  color: var(--ab-on-surface, #1c1b1f);
+}
+
+.isDisabled {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.isNaked:hover {
+  background: transparent;
+}

package/ab-tabs/index.tsx

@@ -0,0 +1,45 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbTabs - Client (port of lyd-tabs)
+* @file: ab-tabs/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 AbTabsProps {
+  className?: string;
+  hidden?: boolean;
+  children?: ReactNode;
+  dividerHidden?: boolean;
+}
+
+const AbTabs = forwardRef<HTMLUListElement, AbTabsProps>(function AbTabs(
+  { className, hidden = false, children, dividerHidden = false },
+  ref,
+): ReactElement {
+  return (
+    <ul
+      ref={ref}
+      hidden={hidden}
+      role="tablist"
+      data-divider-hidden={dividerHidden ? 'true' : 'false'}
+      className={clsx('AbTabs', styles.abTabs, dividerHidden && styles.noDivider, className)}
+    >
+      {children}
+    </ul>
+  );
+});
+
+export default AbTabs;
+export { AbTabs };

package/ab-tabs/styles.module.css

@@ -0,0 +1,17 @@
+.abTabs {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  height: auto;
+  margin: 0;
+  padding: 0;
+  overflow: auto;
+  list-style: none;
+  border-bottom: 2px solid color-mix(in srgb, var(--ab-outline, #79747e) 30%, transparent);
+}
+
+.noDivider {
+  border-bottom: none;
+}