Cyberform-UI — Cyberpunk UI + Form Security

A compact React library combining cyberpunk-inspired UI components with built-in form hardening helpers.
Provides glowing buttons, inputs, modals, and cards — plus a form wrapper (CFForm) that adds honeypot fields, throttling, lightweight validation, and CSRF token passthrough.

📦 Exports

From src/index.ts the package exports:

• CFButton
• CFCard
• CFInput
• CFSwitch
• CFModal
• CFForm

⚡ Installation

npm i cyberform-ui
# peer deps
npm i react react-dom

• Auto-includes CSS for each component (no manual import needed)
• Supports Vite, Next.js, CRA, etc.
• Peer deps: react >= 17, react-dom >= 17

🎨 UI Components

1. CFButton

Cyberpunk button with neon glow, size variants, and customizable colors.

import { CFButton } from "cyberform-ui";

<CFButton variant="primary" size="md" onClick={() => alert("Clicked!")}>
  Click Me
</CFButton>

Props:

• variant: "primary" | "secondary" | "danger" | "success" | "warning"
• size: "xs" | "sm" | "md" | "lg" | "xl"
• Visual overrides: color, hoverColor, glowColor, textColor, fontSize, innerBg, innerBgHover, width, height
• Supports all native <button> props

2. CFCard

Neon-framed container for content blocks.

import { CFCard } from "cyberform-ui";

<CFCard variant="secondary" size="lg">
  <h2>Card Title</h2>
  <p>Card body text goes here.</p>
</CFCard>

Props:

• variant: "primary" | "secondary" | "danger" | "success" | "warning"
• size: "sm" | "md" | "lg" | "xl"
• Visual overrides: color, hoverColor, glowColor, textColor, innerBg, innerBgHover
• shape: "featurastic" | "default"
• className, style

3. CFInput

Styled text input with floating labels, validation hooks, and optional password strength.

import { CFInput } from "cyberform-ui";

<CFInput
  label="Email"
  type="email"
  placeholder="[email protected]"
/>

Props:

• variant: "primary" | "secondary" | "success" | "warning" | "danger"
• cfSize: "sm" | "md" | "lg" | "xl"
• Labeling: label, hideLabel, labelColor, labelShrinkScale, labelOffsetY
• Container: containerClassName
• Styling: accentColor, bgColor, borderColor, clipPath, glowBlur, glowOpacity, showCorners
• Form state: invalid, disabled
• Special: showPasswordStrength?: boolean
• All native input props (except size, replaced by cfSize)

4. CFSwitch

Cyberpunk toggle switch with glowing animation.

import { CFSwitch } from "cyberform-ui";

<CFSwitch checked={isOn} onChange={setOn} />

Props:

• checked: boolean
• onChange: (checked: boolean) => void

⚠ Accessibility caveat: Missing role="switch" and full keyboard navigation.

5. CFModal

Dialog component with neon backdrop and header.

import { CFModal } from "cyberform-ui";

<CFModal isOpen={open} onClose={() => setOpen(false)} title="My Modal">
  <p>Modal content here</p>
</CFModal>

Props:

• isOpen: boolean
• onClose: () => void
• title?: string
• variant, size, color, glowColor, textColor, innerBg, innerBgHover, maxWidth
• children, footer?, className?

⚠ Accessibility caveat: Missing focus trap and Escape key handler.

🛡 Form Security Features

6. CFForm

Form wrapper that adds basic security (honeypot, throttling, validators, password strength).

import { CFForm, CFInput, CFButton } from "cyberform-ui";

<CFForm
  onSecureSubmit={(data) => console.log("secure payload", data)}
  onSubmitFailed={(err) => console.warn("failed", err)}
>
  <CFInput name="email" type="email" label="Email" />
  <CFInput name="password" type="password" label="Password" />
  <CFButton type="submit" variant="primary">Register</CFButton>
</CFForm>

Props:

• onSecureSubmit?: (data: Record<string, any>) => void | Promise<void>
• onSubmitFailed?: (err: { reason: string; data?: any }) => void | Promise<void>
• realtimeValidation?: boolean (default true)
• honeypotName?: string (default "hp")
• csrfToken?: string
• throttleMs?: number (default 3000)
• showPasswordStrength?: boolean (default true)
• All native <form> props (noValidate set internally)

Built-in protections:

• Honeypot hidden field
• Throttle between submits
• Simple validators: email / password / text
• Password strength scoring (heuristic 0–4)
• CSRF token passthrough (backend must enforce)

⚠ Limitations:

• Client-side only, bypassable with devtools
• No XSS sanitization or SQL injection protection
• Must pair with backend validation + rate limiting

🎨 Theming

• Components accept color props (color, glowColor, textColor, etc.)
• Styles are plain CSS (auto-applied per component)
• Can override with style or className