@zzafergok/tactile

Modern, accessible, and high-performance input components for React & Next.js.
Built with a focus on "no-library" philosophy — lightweight, dependency-free (mostly), and enterprise-ready.

Components

This package includes a suite of premium form inputs:

• Phone Input: International phone number formatting, validation, and country selection.
• OTP Input: Secure, mobile-optimized one-time password input.
• Date & Time Suite: Comprehensive date picking with ranges and presets.
• Password Input: Secure password entry with strength metering.
• Select: (Smart Select) Virtualized, searchable, multi-select dropdown.

Installation

pnpm add @zzafergok/tactile
# or
npm install @zzafergok/tactile

Setup

Since this package is headless-first but styled with Tailwind, you must include the package files in your tailwind.config.js content array so that the styles are generated:

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{ts,tsx}",
    // Add this line to scan the package components:
    "./node_modules/@zzafergok/tactile/dist/**/*.{js,mjs}",
  ],
  // ...
};

Quick Start

import { PhoneInput, PasswordInput, Select } from "@zzafergok/tactile";

function MyForm() {
  return (
    <div className="space-y-4">
      <PhoneInput defaultCountry="TR" onChange={console.log} />
      <PasswordInput showStrengthIndicator onChange={console.log} />
      <Select options={[{ label: "Option 1", value: "1" }]} />
    </div>
  );
}

Features

• Framework Agnostic: Works with any React framework (Next.js, Vite, Remix).
• Form Library Compatible: First-class support for React Hook Form via forwardRef.
• Validation Ready: Built-in Zod schemas available via @zzafergok/tactile/validators/zod.
• Theme Aware: Native support for light and dark modes.
• Accessible: WAI-ARIA compliant for screen readers and keyboard navigation.

License

MIT © Zafer Gök