@nukleas/cyberdesign 0.1.0

package/src/react/AugPanel.tsx

@@ -0,0 +1,36 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+const cx = (...parts: Array<string | false | null | undefined>) =>
+  parts.filter(Boolean).join(' ');
+
+export interface AugPanelProps extends HTMLAttributes<HTMLDivElement> {
+  /** Clip/padding size: `sm` (6px clip), `md` (default, 20px clip) or `lg` (32px clip). */
+  size?: 'sm' | 'md' | 'lg';
+  /** Clip all four corners instead of the default diagonal TL+BR pair. */
+  corners4?: boolean;
+  children?: ReactNode;
+}
+
+/** Augmented clip-path panel — neon drop-shadow border with clipped corners (cd-aug-panel). */
+export function AugPanel({
+  size = 'md',
+  corners4 = false,
+  className = '',
+  children,
+  ...rest
+}: AugPanelProps) {
+  return (
+    <div
+      className={cx(
+        'cd-aug-panel',
+        size === 'sm' && 'cd-aug-panel--sm',
+        size === 'lg' && 'cd-aug-panel--lg',
+        corners4 && 'cd-aug-panel--4',
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}

package/src/react/Avatar.tsx

@@ -0,0 +1,69 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+const cx = (...parts: Array<string | false | null | undefined>) =>
+  parts.filter(Boolean).join(' ');
+
+export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
+  /** Image source. When set, renders `<img>`; otherwise shows `fallback` initials. */
+  src?: string;
+  /** Alt text for the image. */
+  alt?: string;
+  /** Initials shown when no `src` (e.g. "NH"). */
+  fallback?: ReactNode;
+  /** Diameter preset. `md` is the default (no modifier). */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** Neon ring around the avatar. */
+  glow?: boolean;
+  /** Presence dot rendered via `data-status`. */
+  status?: 'online' | 'away' | 'busy' | 'offline';
+}
+
+/** Circular avatar — image or fallback initials, sized presets, neon glow ring and presence dot. */
+export function Avatar({
+  src,
+  alt = '',
+  fallback,
+  size = 'md',
+  glow = false,
+  status,
+  className = '',
+  ...rest
+}: AvatarProps) {
+  return (
+    <div
+      className={cx(
+        'cd-avatar',
+        size !== 'md' && `cd-avatar--${size}`,
+        glow && 'cd-avatar--glow',
+        className,
+      )}
+      data-status={status}
+      {...rest}
+    >
+      {src != null ? (
+        <img className="cd-avatar__image" src={src} alt={alt} />
+      ) : (
+        <span className="cd-avatar__fallback">{fallback}</span>
+      )}
+    </div>
+  );
+}
+
+export interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
+  /** Overflow count rendered as a trailing `+N` badge. */
+  more?: number;
+  /** Avatars to stack, in order. */
+  children?: ReactNode;
+}
+
+/** Overlapping stack of avatars with an optional `+N` overflow badge. */
+export function AvatarGroup({ more, className = '', children, ...rest }: AvatarGroupProps) {
+  return (
+    <div className={cx('cd-avatar-group', className)} {...rest}>
+      {children}
+      {more != null && more > 0 && <span className="cd-avatar-group__more">+{more}</span>}
+    </div>
+  );
+}
+
+Avatar.Group = AvatarGroup;

package/src/react/Badge.tsx

@@ -0,0 +1,28 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+const cx = (...parts: Array<string | false | null | undefined>) =>
+  parts.filter(Boolean).join(' ');
+
+type CdColor =
+  | 'orange' | 'amber' | 'gold' | 'cyan' | 'magenta'
+  | 'green' | 'red' | 'blue' | 'purple' | 'yellow';
+
+export interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
+  /** Color variant. Defaults to `orange`. */
+  color?: CdColor;
+  children?: ReactNode;
+}
+
+/** Inline status badge — uppercase, pixel-corner, with a neon color variant. */
+export function Badge({
+  color = 'orange',
+  className = '',
+  children,
+  ...rest
+}: BadgeProps) {
+  return (
+    <span className={cx('cd-badge', `cd-badge--${color}`, className)} {...rest}>
+      {children}
+    </span>
+  );
+}

package/src/react/Breadcrumb.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 BreadcrumbItem {
+  /** Crumb text. */
+  label: ReactNode;
+  /** Link target. Omitted (or on the active crumb) renders plain text. */
+  href?: string;
+  /** Marks this crumb as the current page (plain, non-interactive). */
+  active?: boolean;
+}
+
+export interface BreadcrumbProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+  /** Crumbs in order. The last item is treated as active if none is flagged. */
+  items: BreadcrumbItem[];
+  /** Separator style: `/` (default), `›` arrow, or `·` dot. */
+  variant?: 'default' | 'arrow' | 'dot';
+  /** Accessible label for the `<nav>`. */
+  'aria-label'?: string;
+}
+
+/** Breadcrumb trail — data-driven crumbs with slash / arrow / dot separators; renders `<nav><ol>`. */
+export function Breadcrumb({
+  items,
+  variant = 'default',
+  className = '',
+  'aria-label': ariaLabel = 'breadcrumb',
+  ...rest
+}: BreadcrumbProps) {
+  const lastIndex = items.length - 1;
+  return (
+    <nav aria-label={ariaLabel} {...rest}>
+      <ol
+        className={cx(
+          'cd-breadcrumb',
+          variant === 'arrow' && 'cd-breadcrumb--arrow',
+          variant === 'dot' && 'cd-breadcrumb--dot',
+          className,
+        )}
+      >
+        {items.map((item, i) => {
+          const isActive = item.active ?? i === lastIndex;
+          return (
+            <li
+              key={i}
+              className={cx('cd-breadcrumb__item', isActive && 'cd-breadcrumb__item--active')}
+            >
+              {isActive || item.href == null ? (
+                <span>{item.label}</span>
+              ) : (
+                <a className="cd-breadcrumb__link" href={item.href}>
+                  {item.label}
+                </a>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}

package/src/react/Button.tsx

@@ -0,0 +1,39 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+
+const cx = (...parts: Array<string | false | null | undefined>) =>
+  parts.filter(Boolean).join(' ');
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Visual emphasis. `primary` uses the theme accent; `danger` is destructive. */
+  variant?: 'default' | 'primary' | 'danger';
+  /** `sm` is the compact height; `md` is the default. */
+  size?: 'sm' | 'md';
+  /** Square icon-only button (no horizontal padding). */
+  icon?: boolean;
+  children?: ReactNode;
+}
+
+/** Cyber terminal button — uppercase, pixel-corner accent, neon hover glow. */
+export function Button({
+  variant = 'default',
+  size = 'md',
+  icon = false,
+  className = '',
+  children,
+  ...rest
+}: ButtonProps) {
+  return (
+    <button
+      className={cx(
+        'cd-btn',
+        variant !== 'default' && `cd-btn--${variant}`,
+        size === 'sm' && 'cd-btn--sm',
+        icon && 'cd-btn--icon',
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+}

package/src/react/Checkbox.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 CheckboxProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  /** Text shown beside the box. When set, wraps the input in a `cd-control` label. */
+  label?: ReactNode;
+  /** Smaller helper line below the label. */
+  description?: ReactNode;
+}
+
+/** Cyber checkbox — neon fill + checkmark; renders inside a `cd-control` label when labelled. */
+export function Checkbox({ label, description, className = '', ...rest }: CheckboxProps) {
+  const input = (
+    <input type="checkbox" className={cx('cd-checkbox', !label && className)} {...rest} />
+  );
+
+  if (label == null && description == null) return input;
+
+  return (
+    <label className={cx('cd-control', className)}>
+      <input type="checkbox" className="cd-checkbox" {...rest} />
+      <span className="cd-control__label">
+        {label}
+        {description != null && <span className="cd-control__desc">{description}</span>}
+      </span>
+    </label>
+  );
+}

package/src/react/Dropdown.tsx

@@ -0,0 +1,104 @@
+import { useState } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
+
+const cx = (...parts: Array<string | false | null | undefined>) =>
+  parts.filter(Boolean).join(' ');
+
+export interface DropdownItem {
+  /** Item label text. */
+  label: ReactNode;
+  /** Leading icon glyph rendered in the `__item-icon` slot. */
+  icon?: ReactNode;
+  /** Right-aligned keyboard shortcut hint (`__item-kbd`). */
+  kbd?: ReactNode;
+  /** Destructive styling (red on hover). */
+  danger?: boolean;
+  /** Disable selection. */
+  disabled?: boolean;
+  /** Fired when the item is clicked (closes the menu). */
+  onSelect?: () => void;
+}
+
+export type DropdownEntry =
+  | DropdownItem
+  | { sep: true }
+  | { label: ReactNode; heading: true };
+
+export interface DropdownProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+  /** Trigger node — rendered as the `cd-dropdown__trigger` button content. */
+  trigger: ReactNode;
+  /** Menu entries: items, `{ sep: true }` separators, or `{ heading: true }` labels. */
+  items: DropdownEntry[];
+  /** Right-align the menu panel under the trigger. */
+  align?: 'left' | 'right';
+  /** Extra classes for the trigger button (e.g. `cd-btn cd-btn--primary`). */
+  triggerClassName?: string;
+  /** Initial open state (uncontrolled). */
+  defaultOpen?: boolean;
+}
+
+/** Dropdown menu — a trigger button toggling a `cd-dropdown__menu` of data-driven items. */
+export function Dropdown({
+  trigger,
+  items,
+  align = 'left',
+  triggerClassName = 'cd-btn',
+  defaultOpen = false,
+  className = '',
+  ...rest
+}: DropdownProps) {
+  const [open, setOpen] = useState(defaultOpen);
+
+  return (
+    <div className={cx('cd-dropdown', open && 'is-open', className)} {...rest}>
+      <button
+        type="button"
+        className={cx(triggerClassName, 'cd-dropdown__trigger')}
+        aria-expanded={open}
+        onClick={() => setOpen((o) => !o)}
+      >
+        {trigger}
+      </button>
+      <div
+        className={cx('cd-dropdown__menu', align === 'right' && 'cd-dropdown__menu--right')}
+        role="menu"
+      >
+        {items.map((entry, i) => {
+          if ('sep' in entry && entry.sep) {
+            return <div key={i} className="cd-dropdown__sep" />;
+          }
+          if ('heading' in entry && entry.heading) {
+            return (
+              <div key={i} className="cd-dropdown__label">
+                {entry.label}
+              </div>
+            );
+          }
+          const item = entry as DropdownItem;
+          return (
+            <button
+              key={i}
+              type="button"
+              role="menuitem"
+              className={cx('cd-dropdown__item', item.danger && 'cd-dropdown__item--danger')}
+              disabled={item.disabled}
+              aria-disabled={item.disabled || undefined}
+              onClick={() => {
+                item.onSelect?.();
+                setOpen(false);
+              }}
+            >
+              {item.icon != null && (
+                <span className="cd-dropdown__item-icon">{item.icon}</span>
+              )}
+              {item.label}
+              {item.kbd != null && (
+                <span className="cd-dropdown__item-kbd">{item.kbd}</span>
+              )}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/react/Field.tsx

@@ -0,0 +1,36 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+const cx = (...parts: Array<string | false | null | undefined>) =>
+  parts.filter(Boolean).join(' ');
+
+export interface FieldProps extends HTMLAttributes<HTMLDivElement> {
+  /** Inline layout: label left, control right. */
+  inline?: boolean;
+  /** Helper / description text below the control. */
+  description?: ReactNode;
+  /** Error message below the control (rendered with a ⚠ marker). */
+  error?: ReactNode;
+  /** Label + control (e.g. a `Label` followed by an input). */
+  children?: ReactNode;
+}
+
+/** Form field wrapper — stacks a label, control, and optional helper/error text. */
+export function Field({
+  inline = false,
+  description,
+  error,
+  className = '',
+  children,
+  ...rest
+}: FieldProps) {
+  return (
+    <div
+      className={cx('cd-field', inline && 'cd-field--inline', className)}
+      {...rest}
+    >
+      {children}
+      {description != null && <p className="cd-field-desc">{description}</p>}
+      {error != null && <p className="cd-field-error">{error}</p>}
+    </div>
+  );
+}

package/src/react/Gauge.tsx

@@ -0,0 +1,57 @@
+import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+
+const cx = (...parts: Array<string | false | null | undefined>) =>
+  parts.filter(Boolean).join(' ');
+
+export interface GaugeProps extends HTMLAttributes<HTMLDivElement> {
+  /** Fill amount, 0–100. Drives the conic `--value` CSS variable. */
+  value: number;
+  /** Text shown in the center; defaults to `value`. */
+  display?: ReactNode;
+  /** Uppercase caption under the value. */
+  label?: ReactNode;
+  /** `small` is the compact radial. */
+  size?: 'small';
+  /** Color theme: accent (default), or a semantic override. */
+  variant?: 'danger' | 'success' | 'warn';
+  /** Concentric-ring radar style with sweep fill. */
+  radar?: boolean;
+  /** Extra center content (rendered after value/label). */
+  children?: ReactNode;
+}
+
+/** Radial neon gauge — conic fill driven by a 0–100 `value`, with center readout. */
+export function Gauge({
+  value,
+  display,
+  label,
+  size,
+  variant,
+  radar = false,
+  className = '',
+  style,
+  children,
+  ...rest
+}: GaugeProps) {
+  return (
+    <div
+      className={cx(
+        'cd-gauge',
+        size === 'small' && 'cd-gauge--small',
+        variant && `cd-gauge--${variant}`,
+        radar && 'cd-gauge--radar',
+        className,
+      )}
+      style={{ ['--value']: value, ...style } as CSSProperties}
+      {...rest}
+    >
+      <div className="cd-gauge__track" />
+      <div className="cd-gauge__fill" />
+      <div className="cd-gauge__center">
+        <div className="cd-gauge__value">{display ?? value}</div>
+        {label != null && <div className="cd-gauge__label">{label}</div>}
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/react/GlowCard.tsx

@@ -0,0 +1,25 @@
+import { ReactNode, MouseEvent } from 'react';
+
+type GlowCardColor = 'orange' | 'amber' | 'gold' | 'cyan' | 'magenta' | 'green' | 'red' | 'blue' | 'purple';
+
+interface GlowCardProps {
+  children: ReactNode;
+  color?: GlowCardColor;
+  active?: boolean;
+  className?: string;
+  onClick?: (e: MouseEvent<HTMLDivElement>) => void;
+  style?: React.CSSProperties;
+}
+
+export function GlowCard({ color = 'orange', active, className = '', onClick, style, children }: GlowCardProps) {
+  return (
+    <div
+      className={`cd-glow-card cd-glow-card--${color}${className ? ` ${className}` : ''}`}
+      data-active={active ? 'true' : undefined}
+      onClick={onClick}
+      style={style}
+    >
+      {children}
+    </div>
+  );
+}

package/src/react/HudBar.tsx

@@ -0,0 +1,86 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+const cx = (...parts: Array<string | false | null | undefined>) =>
+  parts.filter(Boolean).join(' ');
+
+/** Status color for a segment value — maps to `cd-hud-segment__value--*`. */
+export type HudSegmentStatus = 'ok' | 'warn' | 'err';
+
+export interface HudSegmentProps extends HTMLAttributes<HTMLDivElement> {
+  /** Small uppercase caption. */
+  label?: ReactNode;
+  /** Accent-colored value. */
+  value?: ReactNode;
+  /** Color the value by status. */
+  status?: HudSegmentStatus;
+  children?: ReactNode;
+}
+
+/** One label/value cell inside a `HudBar`. */
+export function HudSegment({
+  label,
+  value,
+  status,
+  className = '',
+  children,
+  ...rest
+}: HudSegmentProps) {
+  return (
+    <div className={cx('cd-hud-segment', className)} {...rest}>
+      {label != null && <span className="cd-hud-segment__label">{label}</span>}
+      {value != null && (
+        <span className={cx('cd-hud-segment__value', status && `cd-hud-segment__value--${status}`)}>
+          {value}
+        </span>
+      )}
+      {children}
+    </div>
+  );
+}
+
+export interface HudBarSegment {
+  /** Small uppercase caption. */
+  label?: ReactNode;
+  /** Accent-colored value. */
+  value?: ReactNode;
+  /** Color the value by status. */
+  status?: HudSegmentStatus;
+}
+
+export interface HudBarProps extends HTMLAttributes<HTMLDivElement> {
+  /** Data-driven segments rendered left-to-right. */
+  segments?: HudBarSegment[];
+  /** Glowing accent edge: `top` or `bottom` bar, or `side` for vertical. */
+  position?: 'top' | 'bottom' | 'side';
+  /** Tighter segment padding/type. */
+  compact?: boolean;
+  /** Custom segment markup (e.g. `HudSegment` children) instead of `segments`. */
+  children?: ReactNode;
+}
+
+/** Persistent HUD status bar — a row of label/value segments with a glowing accent edge. */
+export function HudBar({
+  segments,
+  position,
+  compact = false,
+  className = '',
+  children,
+  ...rest
+}: HudBarProps) {
+  return (
+    <div
+      className={cx(
+        'cd-hud-bar',
+        position && `cd-hud-bar--${position}`,
+        compact && 'cd-hud-bar--compact',
+        className,
+      )}
+      {...rest}
+    >
+      {segments?.map((seg, i) => (
+        <HudSegment key={i} label={seg.label} value={seg.value} status={seg.status} />
+      ))}
+      {children}
+    </div>
+  );
+}

package/src/react/HudFrame.tsx

@@ -0,0 +1,52 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+const cx = (...parts: Array<string | false | null | undefined>) =>
+  parts.filter(Boolean).join(' ');
+
+/** Status color for a HUD value readout — maps to `cd-hud__value--*`. */
+export type HudValueStatus = 'ok' | 'warn' | 'err' | 'dim';
+
+export interface HudFrameProps extends HTMLAttributes<HTMLDivElement> {
+  /** Uppercase label line above the value. */
+  label?: ReactNode;
+  /** Primary readout value. */
+  value?: ReactNode;
+  /** Color the value by status. */
+  status?: HudValueStatus;
+  /** Tighter padding for dense UIs. */
+  compact?: boolean;
+  /** Frosted / AR-style translucent backdrop. */
+  floating?: boolean;
+  /** Extra content rendered after the label/value (e.g. nested gauges). */
+  children?: ReactNode;
+}
+
+/** Framed HUD stat panel — uppercase label over a glowing accent value readout. */
+export function HudFrame({
+  label,
+  value,
+  status,
+  compact = false,
+  floating = false,
+  className = '',
+  children,
+  ...rest
+}: HudFrameProps) {
+  return (
+    <div
+      className={cx(
+        'cd-hud-frame',
+        compact && 'cd-hud--compact',
+        floating && 'cd-hud--floating',
+        className,
+      )}
+      {...rest}
+    >
+      {label != null && <div className="cd-hud__label">{label}</div>}
+      {value != null && (
+        <div className={cx('cd-hud__value', status && `cd-hud__value--${status}`)}>{value}</div>
+      )}
+      {children}
+    </div>
+  );
+}

package/src/react/Input.tsx

@@ -0,0 +1,38 @@
+import type { InputHTMLAttributes } from 'react';
+
+const cx = (...parts: Array<string | false | null | undefined>) =>
+  parts.filter(Boolean).join(' ');
+
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  /** `sm` is compact, `lg` is taller; default is the standard height. */
+  size?: 'sm' | 'md' | 'lg';
+  /** Adds a left accent border (corpus-search pattern). */
+  accent?: boolean;
+  /** Error state — red border and glow. */
+  error?: boolean;
+}
+
+/** Cyber text input — neon focus ring, optional left-accent border and error state. */
+export function Input({
+  size = 'md',
+  accent = false,
+  error = false,
+  className = '',
+  type = 'text',
+  ...rest
+}: InputProps) {
+  return (
+    <input
+      type={type}
+      className={cx(
+        'cd-input',
+        size === 'sm' && 'cd-input--sm',
+        size === 'lg' && 'cd-input--lg',
+        accent && 'cd-input--accent',
+        error && 'cd-input--error',
+        className,
+      )}
+      {...rest}
+    />
+  );
+}