Input Component

Relevant source files

The following files were used as context for generating this wiki page:

• src/components/forms/Input.tsx
• src/provider/index.tsx
• src/theme/colors.ts
• src/theme/tokens.ts
• src/index.ts

The Input component is a core form element within the @pcstyle/ui design system. It is designed to provide a themed text entry interface that supports both "cyber" (aggressive, neon) and "minimal" (clean, modern) visual styles. The component integrates with the library's global provider to dynamically adjust its styling based on the active theme.

The component serves as a wrapper around the standard HTML input element, extending it with support for labels, error messaging, and automated styling transitions. It utilizes utility classes for layout and custom theme tokens for its visual identity.

Sources: src/components/forms/Input.tsx:1-55, package.json:1-10

Architecture and Integration

The Input component relies on the UIProvider to determine its current visual state. It uses the useUI hook to access the theme context variable.

Theme-Based Styling Logic

The component defines two primary style sets: cyberStyles and minimalStyles. The active style is selected at runtime based on the isCyber boolean derived from the context.

The component architecture ensures that common attributes like w-full and font-mono are shared via baseStyles regardless of the theme.

Sources: src/components/forms/Input.tsx:13-25, src/provider/index.tsx:39-46

Component Properties

The Input component extends React.InputHTMLAttributes<HTMLInputElement>, meaning it supports all standard HTML input props (e.g., placeholder, type, onChange, value).

Property	Type	Description
label	string	Optional text displayed above the input field in uppercase.
error	string	Optional error message displayed below the input with an "ERROR_CODE:" prefix.
className	string	Additional CSS classes to be merged with the component's base styles.

Sources: src/components/forms/Input.tsx:7-11

Visual Styles and Tokens

The component's appearance is governed by theme-specific tokens defined in the system.

Cyber Theme

In "cyber" mode, the input adopts a high-contrast neon aesthetic:

• Background: bg-black/80
• Border: #ff00ff/20 (Neon Pink)
• Focus: Transitions to #ff00ff with a [0_0_15px_#ff00ff33] glow effect.
• Label/Error: Labels use 60% opacity pink, while errors use a solid red (#ff0000).

Minimal Theme

In "minimal" mode, the input follows a standard modern design:

• Background: bg-white
• Border: border-zinc-200
• Focus: Transitions to border-black with rounded corners (rounded-lg).

Sources: src/components/forms/Input.tsx:17-23, src/theme/colors.ts:8-35

Data Flow and Rendering

The component renders a container div using a vertical flex layout with a gap of 1.5 units.

The rendering order is:

1. Label: Rendered only if label prop is present. It uses tracking-widest and font-bold from the design tokens.
2. Input: The core input element receiving the spread ...props.
3. Error: Rendered only if error prop is present. It includes a specific prefix ERROR_CODE:.

Sources: src/components/forms/Input.tsx:27-54, src/theme/tokens.ts:25-30

Implementation Example

import { Input } from "@pcstyle/ui";

export function LoginForm() {
  return (
    <Input 
      label="Access Code"
      placeholder="Enter credentials..."
      error="AUTH_REQUIRED"
    />
  );
}

Sources: src/components/forms/Input.tsx:27-54, src/index.ts:7

Summary

The Input component is a theme-aware form element that leverages React Context and Tailwind CSS to provide a consistent user experience across different visual modes. By encapsulating complex styling logic and supporting standard HTML input behavior, it serves as a flexible building block for forms within the PCSTYLE ecosystem.