ab-nextjs-components 0.1.1 → 0.1.3

package/ab-input/index.tsx

@@ -0,0 +1,277 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbInput - Client (port of lyd-input)
+* @file: ab-input/index.tsx
+*/
+
+'use client';
+
+import type {
+  ChangeEvent,
+  CSSProperties,
+  FocusEvent,
+  KeyboardEvent,
+  MouseEvent,
+} from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import clsx from 'clsx';
+import { useAbToggle } from 'ab-nextjs-hooks/helpers/useAbToggle';
+import AbIconButton from '../ab-icon-button';
+import AbBalloon from '../ab-balloon';
+import styles from './styles.module.css';
+
+
+export interface AbInputProps {
+  id: string;
+  type?: string;
+  inputMode?: 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search' | 'none';
+  wrapperClassName?: string;
+  className?: string;
+  style?: CSSProperties;
+  hidden?: boolean;
+  label: string;
+  isLabelRaised?: boolean;
+  required?: boolean;
+  capitalized?: boolean;
+  autoresize?: boolean;
+  autoresizeMultiplier?: number;
+  name: string;
+  minLength?: number;
+  maxLength?: number;
+  min?: number;
+  max?: number;
+  pattern?: RegExp;
+  placeholder?: string;
+  hasError?: boolean;
+  message?: string;
+  value?: string;
+  spellCheck?: boolean;
+  autoComplete?: string;
+  isReadOnly?: boolean;
+  isDisabled?: boolean;
+  hasIcon?: boolean;
+  icon?: string;
+  hasActionButton?: boolean;
+  actionIcon?: string;
+  actionLink?: string;
+  isLoading?: boolean;
+  indicatorHidden?: boolean;
+  togglePasswordEnabled?: boolean;
+  isClearable?: boolean;
+  onChange?: (value?: string, event?: ChangeEvent<HTMLInputElement>) => void;
+  onEnter?: (value?: string, event?: KeyboardEvent<HTMLInputElement>) => void;
+  onKeyDown?: (value?: string, event?: KeyboardEvent<HTMLInputElement>) => void;
+  onKeyUp?: (value?: string, event?: KeyboardEvent<HTMLInputElement>) => void;
+  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+  onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+  onAction?: (event: MouseEvent<HTMLButtonElement>) => void;
+  onClear?: (event: MouseEvent<HTMLButtonElement>) => void;
+  onPasswordToggle?: (isPasswordVisible: boolean, event: MouseEvent<HTMLButtonElement>) => void;
+  showPasswordLabel?: string;
+  hidePasswordLabel?: string;
+  clearLabel?: string;
+}
+
+function computeType(type: string | undefined, isPasswordVisible: boolean): string {
+  if (type === 'password') return isPasswordVisible ? 'text' : 'password';
+  return type ?? 'text';
+}
+
+function computeAutoresizeWidth(value: string | undefined, multiplier: number): string {
+  const len = Math.max((value ?? '').length, 1);
+  return `${len * multiplier}px`;
+}
+
+const AbInput = forwardRef<HTMLInputElement, AbInputProps>(function AbInput(props, ref) {
+  const [isPasswordVisible, toggleIsPasswordVisible] = useAbToggle(false);
+  const [hasValue, toggleHasValue] = useAbToggle(false);
+
+  const showPasswordLabel = props.showPasswordLabel ?? 'Show password';
+  const hidePasswordLabel = props.hidePasswordLabel ?? 'Hide password';
+  const clearLabel = props.clearLabel ?? 'Clear';
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);
+
+  useEffect(() => {
+    toggleHasValue(Boolean(props.value && props.value.length > 0));
+  }, [props.value, toggleHasValue]);
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const next = event.target.value;
+    toggleHasValue(next.length > 0);
+    props.onChange?.(next, event);
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    const current = (event.target as HTMLInputElement).value;
+    props.onKeyDown?.(current, event);
+    if (event.key === 'Enter') props.onEnter?.(current, event);
+  };
+
+  const handleKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {
+    props.onKeyUp?.((event.target as HTMLInputElement).value, event);
+  };
+
+  const handleClear = (event: MouseEvent<HTMLButtonElement>) => {
+    if (inputRef.current) {
+      inputRef.current.value = '';
+      toggleHasValue(false);
+      props.onChange?.('', undefined);
+    }
+    props.onClear?.(event);
+  };
+
+  const handlePasswordToggle = (event: MouseEvent<HTMLButtonElement>) => {
+    const next = !isPasswordVisible;
+    toggleIsPasswordVisible(next);
+    props.onPasswordToggle?.(Boolean(next), event);
+  };
+
+  return (
+    <div
+      className={clsx('AbInput', 'input-wrapper', styles.abInput, props.wrapperClassName)}
+      hidden={props.hidden}
+      data-has-error={props.hasError ? 'true' : 'false'}
+      data-has-msg={Boolean(props.message).toString()}
+      style={props.style ?? {}}
+    >
+      <label
+        className={clsx('Label', styles.abInputLabel)}
+        htmlFor={props.id}
+        data-raised={(props.isLabelRaised || hasValue) ? 'true' : 'false'}
+      >
+        {props.label}
+      </label>
+
+      <div className={styles.row}>
+        {props.hasIcon && props.icon ? (
+          <AbIconButton
+            icon={props.icon}
+            className={clsx('Icon', styles.abInputIcon)}
+            disabled={true}
+            expands={false}
+            shrinks={false}
+          />
+        ) : null}
+
+        <input
+          ref={inputRef}
+          data-has-value={hasValue ? 'true' : 'false'}
+          id={props.id}
+          className={clsx(
+            'Input',
+            styles.abInputField,
+            props.className,
+            props.capitalized && styles.capitalize,
+            props.indicatorHidden && styles.noMargin,
+          )}
+          style={{
+            width: props.autoresize
+              ? computeAutoresizeWidth(props.value, props.autoresizeMultiplier ?? 8)
+              : undefined,
+          }}
+          type={computeType(props.type, Boolean(isPasswordVisible))}
+          inputMode={props.inputMode}
+          name={props.name}
+          minLength={props.minLength}
+          maxLength={props.maxLength}
+          min={props.min}
+          max={props.max}
+          pattern={props.pattern?.source}
+          placeholder={props.placeholder}
+          value={props.value}
+          spellCheck={props.spellCheck}
+          autoComplete={props.autoComplete ?? 'off'}
+          required={props.required}
+          readOnly={props.isLoading || props.isReadOnly}
+          disabled={props.isDisabled}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          onKeyUp={handleKeyUp}
+          onBlur={props.onBlur}
+          onFocus={props.onFocus}
+        />
+
+        {props.isClearable && hasValue ? (
+          <AbBalloon title={clearLabel}>
+            <AbIconButton
+              icon="cancel"
+              className={clsx('ClearButton', styles.abInputClear)}
+              disabled={false}
+              expands={false}
+              shrinks={false}
+              naked={true}
+              tabIndex={-1}
+              hidden={props.isLoading}
+              onClick={handleClear}
+              title={clearLabel}
+            />
+          </AbBalloon>
+        ) : null}
+
+        {props.hasActionButton && props.actionIcon ? (
+          <AbIconButton
+            icon={props.actionIcon}
+            className={clsx('ActionButton', styles.abInputAction)}
+            disabled={false}
+            expands={true}
+            shrinks={true}
+            naked={true}
+            href={props.actionLink}
+            onClick={props.onAction}
+          />
+        ) : null}
+
+        {props.type === 'password' && props.togglePasswordEnabled ? (
+          <AbBalloon title={isPasswordVisible ? hidePasswordLabel : showPasswordLabel}>
+            <AbIconButton
+              className={clsx('TogglePassword', 'icon-button', styles.abInputTogglePassword)}
+              icon={isPasswordVisible ? 'visibility_off' : 'visibility'}
+              active={Boolean(isPasswordVisible)}
+              disabled={false}
+              expands={true}
+              shrinks={false}
+              tabIndex={-1}
+              onClick={handlePasswordToggle}
+              title={isPasswordVisible ? hidePasswordLabel : showPasswordLabel}
+            />
+          </AbBalloon>
+        ) : null}
+
+        {props.isLoading ? (
+          <span className={clsx('Spinner', 'spinner', 'dots-12', styles.abInputSpinner)} />
+        ) : null}
+
+        <span
+          className={clsx(
+            'Indicator',
+            'input-indicator',
+            props.hasError && 'error',
+            styles.abInputIndicator,
+            props.indicatorHidden && styles.hidden,
+          )}
+          data-no-effect={props.hasError?.toString()}
+        >
+          <span data-bar="" />
+          <span data-val="" />
+        </span>
+      </div>
+
+      {props.message ? (
+        <p className={clsx(styles.abInputMessage, props.hasError && styles.abInputMessageError)}>
+          {props.message}
+        </p>
+      ) : null}
+    </div>
+  );
+});
+
+export default AbInput;
+export { AbInput };

package/ab-input/styles.module.css

@@ -0,0 +1,101 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+* Plain CSS modules — no Tailwind Tailwind apply (Turbopack-safe).
+*/
+
+
+.abInput {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: auto;
+}
+
+.abInputLabel {
+  display: block;
+  margin-bottom: 0.25rem;
+  font-size: 0.875rem;
+}
+
+.abInputLabel[data-raised='true'] {
+  transform: translateY(-0.125rem);
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  position: relative;
+}
+
+.abInputField {
+  flex: 1;
+  min-width: 0;
+  margin-bottom: 0.75rem;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: inherit;
+  font: inherit;
+}
+
+.abInputField::-webkit-search-decoration,
+.abInputField::-webkit-search-cancel-button,
+.abInputField::-webkit-search-results-button,
+.abInputField::-webkit-search-results-decoration {
+  display: none;
+  appearance: none;
+}
+
+.abInputField[type='number'] {
+  -moz-appearance: textfield;
+}
+
+.capitalize {
+  text-transform: capitalize;
+}
+
+.noMargin {
+  margin-bottom: 0 !important;
+}
+
+.abInputIcon,
+.abInputClear,
+.abInputAction,
+.abInputTogglePassword {
+  flex-shrink: 0;
+}
+
+.abInputSpinner {
+  display: inline-block;
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+}
+
+.abInputIndicator {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 2px;
+  pointer-events: none;
+}
+
+.hidden {
+  display: none !important;
+}
+
+.abInputMessage {
+  margin: 0.25rem 0 0;
+  font-size: 0.75rem;
+  opacity: 0.8;
+}
+
+.abInputMessageError {
+  color: var(--error-color, #b3261e);
+}

package/ab-key-feature/index.tsx

@@ -0,0 +1,60 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbKeyFeature - Client (port of lyd-key-feature)
+* @file: ab-key-feature/index.tsx
+*/
+
+'use client';
+
+import type { ReactElement } from 'react';
+import Link from 'next/link';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export interface AbKeyFeatureProps {
+  className?: string;
+  hidden?: boolean;
+  icon: string;
+  name: string;
+  title: string;
+  description?: string;
+  linkHidden?: boolean;
+  linkLabel?: string;
+  link?: string;
+  watermark?: string;
+}
+
+const AbKeyFeature = ({
+  className,
+  hidden = false,
+  icon,
+  name,
+  title,
+  description,
+  linkHidden = false,
+  linkLabel = 'Learn more',
+  link,
+  watermark,
+}: AbKeyFeatureProps): ReactElement => {
+  return (
+    <article hidden={hidden} className={clsx('AbKeyFeature', styles.abKeyFeature, className)}>
+      <span className={clsx('material-symbols-rounded', styles.abKeyFeatureIcon)} aria-hidden>{icon}</span>
+      <span className={styles.abKeyFeatureName}>{name}</span>
+      <h3 className={styles.abKeyFeatureTitle}>{title}</h3>
+      {description ? <p className={styles.abKeyFeatureDesc}>{description}</p> : null}
+      {!linkHidden && link ? (
+        <Link href={link} className={styles.abKeyFeatureLink}>{linkLabel}</Link>
+      ) : null}
+      {watermark ? <span className={styles.abKeyFeatureWatermark} aria-hidden>{watermark}</span> : null}
+    </article>
+  );
+};
+
+export default AbKeyFeature;
+export { AbKeyFeature };

package/ab-key-feature/styles.module.css

@@ -0,0 +1,47 @@
+.abKeyFeature {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem;
+  border-radius: 1rem;
+  position: relative;
+  overflow: hidden;
+  background: color-mix(in srgb, var(--ab-surface-container, #f3edf7) 85%, transparent);
+}
+.abKeyFeatureIcon {
+  font-size: 2rem;
+  color: var(--ab-primary, #6750a4);
+}
+.abKeyFeatureName {
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  opacity: 0.7;
+}
+.abKeyFeatureTitle {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 700;
+}
+.abKeyFeatureDesc {
+  margin: 0;
+  font-size: 0.9375rem;
+  opacity: 0.8;
+}
+.abKeyFeatureLink {
+  margin-top: 0.5rem;
+  align-self: flex-start;
+  color: var(--ab-primary, #6750a4);
+  font-weight: 600;
+  text-decoration: none;
+}
+.abKeyFeatureWatermark {
+  position: absolute;
+  right: -0.5rem;
+  bottom: -0.5rem;
+  font-size: 5rem;
+  opacity: 0.06;
+  pointer-events: none;
+  user-select: none;
+}

package/ab-like-button/index.tsx

@@ -0,0 +1,116 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* @project: ab-nextjs-components
+* @name: AbLikeButton - Client (port of lyd-like-button)
+* @file: ab-like-button/index.tsx
+*/
+
+'use client';
+
+import type { CSSProperties, MouseEvent, ReactElement } from 'react';
+import Link from 'next/link';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export interface AbLikeButtonProps {
+  className?: string;
+  style?: CSSProperties;
+  hidden?: boolean;
+  liked?: boolean;
+  disabled?: boolean;
+  expands?: boolean;
+  shrinks?: boolean;
+  tabIndex?: number;
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+  href?: string | null;
+  isActive?: boolean;
+  isNaked?: boolean;
+  isLoading?: boolean;
+  likeIcon?: string;
+  likedIcon?: string;
+  ariaLabel?: string;
+}
+
+const AbLikeButton = ({
+  className,
+  style,
+  hidden = false,
+  liked = false,
+  disabled = false,
+  expands = false,
+  shrinks = false,
+  tabIndex,
+  onClick,
+  href = null,
+  isActive = false,
+  isNaked = false,
+  isLoading = false,
+  likeIcon = 'favorite_border',
+  likedIcon = 'favorite',
+  ariaLabel = 'Like',
+}: AbLikeButtonProps): ReactElement => {
+  const icon = liked ? likedIcon : likeIcon;
+  const classNames = clsx(
+    'AbLikeButton',
+    styles.abLikeButton,
+    liked && styles.isLiked,
+    isActive && styles.isActive,
+    isNaked && styles.isNaked,
+    expands && styles.expands,
+    shrinks && styles.shrinks,
+    disabled && styles.isDisabled,
+    isLoading && styles.isLoading,
+    className,
+  );
+
+  const inner = isLoading ? (
+    <span className={styles.abLikeButtonSpinner} aria-hidden />
+  ) : (
+    <span className={clsx('material-symbols-rounded', styles.abLikeButtonIcon)} aria-hidden>
+      {icon}
+    </span>
+  );
+
+  if (href && !disabled) {
+    return (
+      <Link
+        href={href}
+        hidden={hidden}
+        style={style}
+        className={classNames}
+        aria-label={ariaLabel}
+        data-liked={liked ? 'true' : 'false'}
+        data-naked={isNaked ? 'true' : 'false'}
+        tabIndex={tabIndex}
+      >
+        {inner}
+      </Link>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      hidden={hidden}
+      style={style}
+      className={classNames}
+      disabled={disabled || isLoading}
+      aria-label={ariaLabel}
+      aria-pressed={liked}
+      data-liked={liked ? 'true' : 'false'}
+      data-naked={isNaked ? 'true' : 'false'}
+      tabIndex={tabIndex}
+      onClick={onClick}
+    >
+      {inner}
+    </button>
+  );
+};
+
+export default AbLikeButton;
+export { AbLikeButton };

package/ab-like-button/styles.module.css

@@ -0,0 +1,60 @@
+.abLikeButton {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  height: fit-content;
+  padding: 0.5rem;
+  overflow: hidden;
+  border: none;
+  border-radius: 9999px;
+  background: transparent;
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  transition: transform 0.2s ease, background 0.2s ease;
+}
+
+.abLikeButton:hover:not(.isDisabled):not(.isNaked) {
+  background: color-mix(in srgb, var(--ab-outline, #79747e) 12%, transparent);
+}
+
+.abLikeButtonIcon {
+  font-size: 1.5rem;
+  line-height: 1;
+}
+
+.isLiked .abLikeButtonIcon {
+  color: #e11d48;
+  font-variation-settings: 'FILL' 1;
+}
+
+.isActive {
+  outline: 2px solid var(--ab-primary, #a67c52);
+}
+
+.isNaked:hover {
+  background: transparent;
+}
+
+.isDisabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.expands { width: 100%; }
+.shrinks { width: fit-content; }
+
+.abLikeButtonSpinner {
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
+  border-top-color: currentColor;
+  border-radius: 9999px;
+  animation: abLikeSpin 0.7s linear infinite;
+}
+
+@keyframes abLikeSpin {
+  to { transform: rotate(360deg); }
+}