@nukleas/cyberdesign 0.1.0

package/src/react/Interference.tsx

@@ -0,0 +1,53 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+const cx = (...parts: Array<string | false | null | undefined>) =>
+  parts.filter(Boolean).join(' ');
+
+export interface InterferenceProps extends HTMLAttributes<HTMLDivElement> {
+  /** Static intensity: `light`, default, or `heavy`. */
+  intensity?: 'light' | 'heavy';
+  /** Extra-aggressive noise (combine with `heavy`). */
+  intense?: boolean;
+  /** Enable the text/data corruption effect (uses `corruptText` as the clipped layer text). */
+  glitch?: boolean;
+  /**
+   * Text driving the glitch corruption layers (sets `data-text` on the content wrapper).
+   * Required for the corruption effect to render; should match the visible heading text.
+   */
+  corruptText?: string;
+  /** Content shown beneath the noise overlay. */
+  children?: ReactNode;
+}
+
+/** Animated static / data-corruption overlay — adds a `__noise` layer over wrapped content. */
+export function Interference({
+  intensity,
+  intense = false,
+  glitch = false,
+  corruptText,
+  className = '',
+  children,
+  ...rest
+}: InterferenceProps) {
+  return (
+    <div
+      className={cx(
+        'cd-interference',
+        intensity && `cd-interference--${intensity}`,
+        intense && 'cd-interference--intense',
+        glitch && 'cd-interference--glitch',
+        className,
+      )}
+      {...rest}
+    >
+      <div className="cd-interference__noise" />
+      {glitch ? (
+        <div className="cd-interference__content" data-text={corruptText}>
+          {children}
+        </div>
+      ) : (
+        children
+      )}
+    </div>
+  );
+}

package/src/react/Kbd.tsx

@@ -0,0 +1,62 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+const cx = (...parts: Array<string | false | null | undefined>) =>
+  parts.filter(Boolean).join(' ');
+
+export interface KbdProps extends HTMLAttributes<HTMLElement> {
+  /** `lg` renders the larger standalone key. */
+  size?: 'md' | 'lg';
+  /** Accent-highlighted key with a neon glow. */
+  accent?: boolean;
+  children?: ReactNode;
+}
+
+/** Keyboard key — boxed glyph with size and accent variants. */
+export function Kbd({
+  size = 'md',
+  accent = false,
+  className = '',
+  children,
+  ...rest
+}: KbdProps) {
+  return (
+    <kbd
+      className={cx(
+        'cd-kbd',
+        size === 'lg' && 'cd-kbd--lg',
+        accent && 'cd-kbd--accent',
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </kbd>
+  );
+}
+
+export interface KbdGroupProps extends HTMLAttributes<HTMLSpanElement> {
+  /** Separator rendered between keys (default `+`). */
+  separator?: ReactNode;
+  /** `Kbd` keys to combine. */
+  children?: ReactNode;
+}
+
+/** Key combination group — joins multiple `Kbd` keys with a separator (e.g. ⌘ + K). */
+export function KbdGroup({
+  separator = '+',
+  className = '',
+  children,
+  ...rest
+}: KbdGroupProps) {
+  const keys = Array.isArray(children) ? children : [children];
+  return (
+    <span className={cx('cd-kbd-group', className)} {...rest}>
+      {keys.map((key, i) => (
+        <span key={i} style={{ display: 'contents' }}>
+          {i > 0 && <span className="cd-kbd-group__sep">{separator}</span>}
+          {key}
+        </span>
+      ))}
+    </span>
+  );
+}

package/src/react/Label.tsx

@@ -0,0 +1,31 @@
+import type { LabelHTMLAttributes, ReactNode } from 'react';
+
+const cx = (...parts: Array<string | false | null | undefined>) =>
+  parts.filter(Boolean).join(' ');
+
+export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+  /** Append a red required asterisk. */
+  required?: boolean;
+  children?: ReactNode;
+}
+
+/** Uppercase form label — optional required asterisk. */
+export function Label({
+  required = false,
+  className = '',
+  children,
+  ...rest
+}: LabelProps) {
+  return (
+    <label
+      className={cx(
+        'cd-form-label',
+        required && 'cd-form-label--required',
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </label>
+  );
+}

package/src/react/Modal.tsx

@@ -0,0 +1,63 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+const cx = (...parts: Array<string | false | null | undefined>) =>
+  parts.filter(Boolean).join(' ');
+
+export interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /** Controls visibility — adds `is-open` to animate the overlay/panel in. */
+  open: boolean;
+  /** Fired by the backdrop click, the ✕ close button, and Escape handlers you wire up. */
+  onClose?: () => void;
+  /** Uppercase accent heading rendered in the header. Omit to hide the header. */
+  title?: ReactNode;
+  /** Footer content (typically action buttons). Omit to hide the footer. */
+  footer?: ReactNode;
+  /** Panel width. `default` is 480px; `sm` 340px, `lg` 680px, `xl` 900px. */
+  size?: 'default' | 'sm' | 'lg' | 'xl';
+  /** Hide the header ✕ close button. */
+  hideClose?: boolean;
+  /** Dialog body content. */
+  children?: ReactNode;
+}
+
+/** Centered modal dialog over a dimmed backdrop — controlled via `open` / `onClose`. */
+export function Modal({
+  open,
+  onClose,
+  title,
+  footer,
+  size = 'default',
+  hideClose = false,
+  className = '',
+  children,
+  ...rest
+}: ModalProps) {
+  return (
+    <div
+      className={cx('cd-modal-overlay', open && 'is-open')}
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose?.();
+      }}
+    >
+      <div
+        className={cx('cd-modal', size !== 'default' && `cd-modal--${size}`, className)}
+        role="dialog"
+        aria-modal="true"
+        {...rest}
+      >
+        {(title != null || !hideClose) && (
+          <div className="cd-modal__header">
+            {title != null && <span className="cd-modal__title">{title}</span>}
+            {!hideClose && (
+              <button className="cd-modal__close" onClick={onClose} aria-label="Close">
+                ✕
+              </button>
+            )}
+          </div>
+        )}
+        <div className="cd-modal__body">{children}</div>
+        {footer != null && <div className="cd-modal__footer">{footer}</div>}
+      </div>
+    </div>
+  );
+}

package/src/react/Pagination.tsx

@@ -0,0 +1,113 @@
+import type { HTMLAttributes } from 'react';
+
+const cx = (...parts: Array<string | false | null | undefined>) =>
+  parts.filter(Boolean).join(' ');
+
+export interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
+  /** Current page (1-based). */
+  page: number;
+  /** Total number of pages. */
+  pageCount: number;
+  /** Fired with the target page when a control is activated. */
+  onPageChange?: (page: number) => void;
+  /** How many sibling pages to show on each side of the current page. */
+  siblingCount?: number;
+  /** Size variant. */
+  size?: 'default' | 'sm' | 'lg';
+  /** Collapse gaps so items share borders. */
+  compact?: boolean;
+  /** Show "Page X of Y" info text after the controls. */
+  showInfo?: boolean;
+  /** Prev button label. */
+  prevLabel?: React.ReactNode;
+  /** Next button label. */
+  nextLabel?: React.ReactNode;
+}
+
+/** Build the windowed list of page numbers with `'…'` gaps. */
+function buildPages(page: number, pageCount: number, siblingCount: number): Array<number | '…'> {
+  const total = pageCount;
+  // pages always shown: first, last, current ± siblingCount
+  const left = Math.max(2, page - siblingCount);
+  const right = Math.min(total - 1, page + siblingCount);
+  const pages: Array<number | '…'> = [1];
+  if (left > 2) pages.push('…');
+  for (let p = left; p <= right; p++) pages.push(p);
+  if (right < total - 1) pages.push('…');
+  if (total > 1) pages.push(total);
+  return pages;
+}
+
+/** Page navigation — windowed page list with prev/next, ellipsis and optional info. */
+export function Pagination({
+  page,
+  pageCount,
+  onPageChange,
+  siblingCount = 1,
+  size = 'default',
+  compact = false,
+  showInfo = false,
+  prevLabel = '‹ Prev',
+  nextLabel = 'Next ›',
+  className = '',
+  ...rest
+}: PaginationProps) {
+  const go = (p: number) => {
+    if (p < 1 || p > pageCount || p === page) return;
+    onPageChange?.(p);
+  };
+
+  return (
+    <nav
+      className={cx(
+        'cd-pagination',
+        size !== 'default' && `cd-pagination--${size}`,
+        compact && 'cd-pagination--compact',
+        className,
+      )}
+      aria-label="Pagination"
+      {...rest}
+    >
+      <button
+        type="button"
+        className="cd-pagination__prev cd-pagination__item"
+        disabled={page <= 1}
+        aria-disabled={page <= 1 || undefined}
+        onClick={() => go(page - 1)}
+      >
+        {prevLabel}
+      </button>
+      {buildPages(page, pageCount, siblingCount).map((p, i) =>
+        p === '…' ? (
+          <span key={`e${i}`} className="cd-pagination__ellipsis">
+            ···
+          </span>
+        ) : (
+          <button
+            key={p}
+            type="button"
+            className={cx('cd-pagination__item', p === page && 'is-active')}
+            aria-current={p === page ? 'page' : undefined}
+            onClick={() => go(p)}
+          >
+            {p}
+          </button>
+        ),
+      )}
+      <button
+        type="button"
+        className="cd-pagination__next cd-pagination__item"
+        disabled={page >= pageCount}
+        aria-disabled={page >= pageCount || undefined}
+        onClick={() => go(page + 1)}
+      >
+        {nextLabel}
+      </button>
+      {showInfo && (
+        <span className="cd-pagination__info">
+          Page {page} of {pageCount}
+        </span>
+      )}
+    </nav>
+  );
+}

package/src/react/PanelHeader.tsx

@@ -0,0 +1,28 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+const cx = (...parts: Array<string | false | null | undefined>) =>
+  parts.filter(Boolean).join(' ');
+
+export interface PanelHeaderProps extends HTMLAttributes<HTMLDivElement> {
+  /** Trailing actions slot (right-aligned), e.g. a count or status indicator. */
+  actions?: ReactNode;
+  /** Header label / title content. */
+  children?: ReactNode;
+}
+
+/** Panel header bar — uppercase neon title with an animated sweep and a right-aligned actions slot. */
+export function PanelHeader({
+  actions,
+  className = '',
+  children,
+  ...rest
+}: PanelHeaderProps) {
+  return (
+    <div className={cx('cd-panel-header', className)} {...rest}>
+      {children}
+      {actions != null && (
+        <div className="cd-panel-header__actions">{actions}</div>
+      )}
+    </div>
+  );
+}

package/src/react/Progress.tsx

@@ -0,0 +1,47 @@
+import type { HTMLAttributes } from 'react';
+
+const cx = (...parts: Array<string | false | null | undefined>) =>
+  parts.filter(Boolean).join(' ');
+
+export interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
+  /** Fill percentage (0–100). Ignored when `indeterminate`. */
+  value?: number;
+  /** Color variant. Default uses the theme accent. */
+  variant?: 'default' | 'danger' | 'success' | 'warning';
+  /** Taller 8px bar. */
+  thick?: boolean;
+  /** Scanning/indeterminate animation (no fixed value). */
+  indeterminate?: boolean;
+}
+
+/** Progress bar — accent fill driven by `value`%, with color, thick, and indeterminate variants. */
+export function Progress({
+  value = 0,
+  variant = 'default',
+  thick = false,
+  indeterminate = false,
+  className = '',
+  ...rest
+}: ProgressProps) {
+  return (
+    <div
+      className={cx(
+        'cd-progress',
+        variant !== 'default' && `cd-progress--${variant}`,
+        thick && 'cd-progress--thick',
+        indeterminate && 'cd-progress--indeterminate',
+        className,
+      )}
+      role="progressbar"
+      aria-valuenow={indeterminate ? undefined : value}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      {...rest}
+    >
+      <div
+        className="cd-progress__bar"
+        style={indeterminate ? undefined : { width: `${value}%` }}
+      />
+    </div>
+  );
+}

package/src/react/Radio.tsx

@@ -0,0 +1,31 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+
+const cx = (...parts: Array<string | false | null | undefined>) =>
+  parts.filter(Boolean).join(' ');
+
+export interface RadioProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  /** Text shown beside the dot. When set, wraps the input in a `cd-control` label. */
+  label?: ReactNode;
+  /** Smaller helper line below the label. */
+  description?: ReactNode;
+}
+
+/** Cyber radio — neon filled dot; renders inside a `cd-control` label when labelled. */
+export function Radio({ label, description, className = '', ...rest }: RadioProps) {
+  const input = (
+    <input type="radio" className={cx('cd-radio', !label && className)} {...rest} />
+  );
+
+  if (label == null && description == null) return input;
+
+  return (
+    <label className={cx('cd-control', className)}>
+      <input type="radio" className="cd-radio" {...rest} />
+      <span className="cd-control__label">
+        {label}
+        {description != null && <span className="cd-control__desc">{description}</span>}
+      </span>
+    </label>
+  );
+}

package/src/react/Scanner.tsx

@@ -0,0 +1,37 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+const cx = (...parts: Array<string | false | null | undefined>) =>
+  parts.filter(Boolean).join(' ');
+
+export interface ScannerProps extends HTMLAttributes<HTMLDivElement> {
+  /** Sweep top-to-bottom instead of left-to-right. */
+  vertical?: boolean;
+  /** Fainter return-sweep look. */
+  ping?: boolean;
+  /** Content scanned by the sweep line. */
+  children?: ReactNode;
+}
+
+/** Animated scan/sweep-line overlay — wraps content with a glowing lidar/radar sweep. */
+export function Scanner({
+  vertical = false,
+  ping = false,
+  className = '',
+  children,
+  ...rest
+}: ScannerProps) {
+  return (
+    <div
+      className={cx(
+        'cd-scanner',
+        vertical && 'cd-scanner--vertical',
+        ping && 'cd-scanner--ping',
+        className,
+      )}
+      {...rest}
+    >
+      <div className="cd-scanner__line" />
+      {children}
+    </div>
+  );
+}

package/src/react/Select.tsx

@@ -0,0 +1,43 @@
+import type { ReactNode, SelectHTMLAttributes } from 'react';
+
+const cx = (...parts: Array<string | false | null | undefined>) =>
+  parts.filter(Boolean).join(' ');
+
+export interface SelectProps
+  extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+  /** `sm` is the compact height; default is the standard height. */
+  size?: 'sm' | 'md';
+  /** Uppercase tracked label styling (viz-controls pattern). */
+  label?: boolean;
+  /** Error state — red border. */
+  error?: boolean;
+  /** `<option>` elements. */
+  children?: ReactNode;
+}
+
+/** Native select with custom neon chevron — wraps the element for the arrow. */
+export function Select({
+  size = 'md',
+  label = false,
+  error = false,
+  className = '',
+  children,
+  ...rest
+}: SelectProps) {
+  return (
+    <div className="cd-select-wrap">
+      <select
+        className={cx(
+          'cd-select',
+          size === 'sm' && 'cd-select--sm',
+          label && 'cd-select--label',
+          error && 'cd-select--error',
+          className,
+        )}
+        {...rest}
+      >
+        {children}
+      </select>
+    </div>
+  );
+}

package/src/react/Separator.tsx

@@ -0,0 +1,40 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+const cx = (...parts: Array<string | false | null | undefined>) =>
+  parts.filter(Boolean).join(' ');
+
+export interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
+  /** Orientation. `vertical` draws a vertical divider. */
+  orientation?: 'horizontal' | 'vertical';
+  /** Neon gradient line instead of a plain rule. */
+  neon?: boolean;
+  /** Optional inline label (e.g. "OR"); centers it between the rules. */
+  children?: ReactNode;
+}
+
+/** Divider rule — horizontal/vertical, optional neon gradient and centered label. */
+export function Separator({
+  orientation = 'horizontal',
+  neon = false,
+  className = '',
+  children,
+  ...rest
+}: SeparatorProps) {
+  const hasLabel = children != null;
+  return (
+    <div
+      className={cx(
+        'cd-separator',
+        orientation === 'vertical' && 'cd-separator--vertical',
+        neon && 'cd-separator--neon',
+        hasLabel && 'cd-separator--label',
+        !hasLabel && orientation === 'horizontal' && 'cd-separator--plain',
+        className,
+      )}
+      role="separator"
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}

package/src/react/Skeleton.tsx

@@ -0,0 +1,50 @@
+import type { HTMLAttributes } from 'react';
+
+const cx = (...parts: Array<string | false | null | undefined>) =>
+  parts.filter(Boolean).join(' ');
+
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+  /** Pre-sized shape. `block`/`card` render the compound containers; the rest are line/avatar/button placeholders. */
+  shape?: 'plain' | 'text' | 'heading' | 'avatar' | 'btn' | 'block' | 'card';
+  /** Fractional width helper (full / 3/4 / 1/2 / 1/3). Ignored for `block`/`card`. */
+  width?: 'full' | '3/4' | '1/2' | '1/3';
+}
+
+/** Shimmering loading placeholder — text/heading/avatar/btn shapes plus block & card containers. */
+export function Skeleton({
+  shape = 'plain',
+  width,
+  className = '',
+  children,
+  ...rest
+}: SkeletonProps) {
+  if (shape === 'card' || shape === 'block') {
+    return (
+      <div className={cx(`cd-skeleton-${shape}`, className)} {...rest}>
+        {children}
+      </div>
+    );
+  }
+  return (
+    <div
+      className={cx(
+        'cd-skeleton',
+        shape !== 'plain' && `cd-skeleton--${shape}`,
+        width && `cd-skeleton--w-${width}`,
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}
+
+/** Inline row inside a `cd-skeleton-block` (e.g. avatar + text lines). */
+export function SkeletonRow({ className = '', children, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cx('cd-skeleton-block__row', className)} {...rest}>
+      {children}
+    </div>
+  );
+}

package/src/react/Slider.tsx

@@ -0,0 +1,28 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+
+const cx = (...parts: Array<string | false | null | undefined>) =>
+  parts.filter(Boolean).join(' ');
+
+export interface SliderProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  /** When provided, renders the value label beside the track inside a `cd-slider-wrap`. */
+  value?: InputHTMLAttributes<HTMLInputElement>['value'];
+  /** Node shown in the trailing `cd-slider-value` label. When set, wraps in `cd-slider-wrap`. */
+  valueLabel?: ReactNode;
+}
+
+/** Range slider — neon track with 3D thumb; optional trailing value label. */
+export function Slider({ valueLabel, className = '', ...rest }: SliderProps) {
+  const input = (
+    <input type="range" className={cx('cd-slider', !valueLabel && className)} {...rest} />
+  );
+
+  if (valueLabel == null) return input;
+
+  return (
+    <div className={cx('cd-slider-wrap', className)}>
+      <input type="range" className="cd-slider" {...rest} />
+      <span className="cd-slider-value">{valueLabel}</span>
+    </div>
+  );
+}

package/src/react/Spinner.tsx

@@ -0,0 +1,39 @@
+import type { HTMLAttributes } from 'react';
+
+const cx = (...parts: Array<string | false | null | undefined>) =>
+  parts.filter(Boolean).join(' ');
+
+export interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {
+  /** Diameter preset. `md` is the default (no modifier). */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** `ring` (default), `dual` counter-rotating rings, or `dots` pulse. */
+  variant?: 'ring' | 'dual' | 'dots';
+  /** Accessible label announced to screen readers. */
+  label?: string;
+}
+
+/** Loading spinner — ring / dual-ring / dot-pulse variants in five sizes. */
+export function Spinner({
+  size = 'md',
+  variant = 'ring',
+  label = 'Loading',
+  className = '',
+  ...rest
+}: SpinnerProps) {
+  return (
+    <div
+      role="status"
+      aria-label={label}
+      className={cx(
+        'cd-spinner',
+        size !== 'md' && `cd-spinner--${size}`,
+        variant === 'dual' && 'cd-spinner--dual',
+        variant === 'dots' && 'cd-spinner--dots',
+        className,
+      )}
+      {...rest}
+    >
+      {variant === 'dots' && <span />}
+    </div>
+  );
+}