AC UI Library

A modern, lightweight, and customizable React UI library built with TypeScript, UnoCSS, and Storybook. Features updated components with enhanced functionality, icon support, and a comprehensive design system.

✨ Features

• 🎨 Centralized Theme System - Consistent design tokens across all components
• 🔧 TypeScript First - Full type safety with advanced polymorphic components
• ♿ Accessibility Built-in - WCAG compliant components with proper ARIA support
• 🎯 Tree Shakeable - Import only what you need
• 📱 Responsive Design - Mobile-first approach with responsive utilities
• 🧪 Testing Ready - Built-in testing utilities and comprehensive test coverage
• 📚 Storybook Integration - Interactive component documentation

📦 Installation

npm install @kishor-aracreate/ac-ui-library-test
# or
yarn add @kishor-aracreate/ac-ui-library-test
# or
pnpm add @kishor-aracreate/ac-ui-library-test

Peer Dependencies

Make sure you have the required peer dependencies installed:

npm install react react-dom @tabler/icons-react

🚀 Quick Start

import { Button, Input, OTPInput, SideBar } from "@kishor-aracreate/ac-ui-library-test";
import { IconMail, IconLock } from "@tabler/icons-react";
import "@kishor-aracreate/ac-ui-library-test/style.css";

function App() {
  return (
    <div className="flex">
      <SideBar />
      <div className="flex-1 p-6">
        <h1 className="text-2xl font-bold mb-4">Welcome to AC UI</h1>
        
        <Input 
          type="email" 
          placeholder="Enter your email"
          icon={<IconMail />}
          className="mb-4"
        />
        
        <Input 
          type="password" 
          placeholder="Enter your password"
          icon={<IconLock />}
          className="mb-4"
        />
        
        <OTPInput 
          length={6}
          onChange={(otp) => console.log("OTP:", otp)}
          className="mb-4"
        />
        
        <Button variant="primary" icon={<IconMail />}>
          Get Started
        </Button>
      </div>
    </div>
  );
}

📋 Available Components

| Component | Description | Key Features | Status | |-----------|-------------|--------------|--------| | Button | Enhanced button with icon support | Primary/Outline/Ghost variants, Icon positioning, Icon-only mode | ✅ | | Input | Modern input with icon and password toggle | Email/Password/Text/Checkbox types, Tabler icons, Password visibility | ✅ | | OTPInput | One-time password input component | Auto-focus, Numeric validation, Backspace navigation | ✅ | | SideBar | Collapsible navigation sidebar | Menu items, Logo support, Active states, Smooth animations | ✅ | | Card | Container component with elevation | Multiple variants and sizes | ✅ | | Checkbox | Accessible checkbox with custom styling | Label support, Custom styling | ✅ | | Radio | Radio button with group support | Group management, Custom styling | ✅ | | Select | Dropdown select component | Multiple options, Custom styling | ✅ | | TextArea | Multi-line text input | Resizable, Validation support | ✅ | | Table | Data table with sorting and pagination | Sortable columns, Pagination | ✅ | | Skeleton | Loading placeholder component | Multiple shapes and sizes | ✅ | | Toast | Notification component | Success/Error/Warning types | ✅ | | Container | Layout container with responsive breakpoints | Responsive design | ✅ | | List | Ordered and unordered list component | Custom styling options | ✅ |

🆕 New & Updated Components

Button Component

Enhanced with icon support and multiple variants:

import { Button } from "@kishor-aracreate/ac-ui-library-test";
import { IconPlus, IconArrowRight } from "@tabler/icons-react";

// Icon-only button
<Button variant="primary" icon={<IconPlus />} />

// Button with left icon
<Button variant="outline" icon={<IconPlus />} iconPosition="left">
  Add Item
</Button>

// Button with right icon
<Button variant="ghost" icon={<IconArrowRight />} iconPosition="right">
  Next Step
</Button>

Input Component

Modern inputs with icon support and password toggle:

import { Input } from "@kishor-aracreate/ac-ui-library-test";
import { IconUser, IconMail, IconLock } from "@tabler/icons-react";

// Text input with icon
<Input 
  type="text" 
  placeholder="Username"
  icon={<IconUser />}
/>

// Password input with toggle
<Input 
  type="password" 
  placeholder="Password"
  icon={<IconLock />}
/>

// Checkbox input
<Input 
  type="checkbox"
  checkboxLabel="I agree to the terms"
/>

OTP Input Component

One-time password input with auto-focus:

import { OTPInput } from "@kishor-aracreate/ac-ui-library-test";

// 6-digit OTP (default)
<OTPInput onChange={(otp) => console.log(otp)} />

// 4-digit OTP
<OTPInput length={4} onChange={(otp) => handleOTP(otp)} />

Sidebar Component

Collapsible navigation with menu items:

import { SideBar } from "@kishor-aracreate/ac-ui-library-test";
import { IconHome, IconSettings } from "@tabler/icons-react";

const menuItems = [
  { name: "Dashboard", icon: IconHome },
  { name: "Settings", icon: IconSettings },
];

<SideBar 
  menuItems={menuItems}
  onMenuItemClick={(item) => navigate(item)}
  expandedLogo="/logo-expanded.png"
  collapsedLogo="/logo-collapsed.png"
/>

🎨 Theming

The library uses custom CSS classes and Tailwind-compatible styling:

// Button variants
<Button variant="primary">Primary Button</Button>
<Button variant="outline">Outline Button</Button>
<Button variant="ghost">Ghost Button</Button>
<Button variant="custom" className="bg-purple-500 text-white">
  Custom Button
</Button>

🔧 Advanced Usage

Component Composition

Build complex UIs by combining components:

import { SideBar, Input, Button, OTPInput } from "@kishor-aracreate/ac-ui-library-test";
import { IconUser, IconMail } from "@tabler/icons-react";

function LoginForm() {
  const [otp, setOtp] = useState("");
  
  return (
    <div className="flex h-screen">
      <SideBar />
      
      <div className="flex-1 flex items-center justify-center">
        <div className="w-full max-w-md space-y-4">
          <Input 
            type="email"
            placeholder="Email"
            icon={<IconMail />}
          />
          
          <Input 
            type="password"
            placeholder="Password"
          />
          
          <OTPInput 
            length={6}
            onChange={setOtp}
          />
          
          <Button 
            variant="primary"
            className="w-full"
            disabled={otp.length !== 6}
          >
            Sign In
          </Button>
        </div>
      </div>
    </div>
  );
}

Customization

Extend components with custom styling:

// Custom button with additional classes
<Button 
  variant="custom"
  className="bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-lg"
>
  Gradient Button
</Button>

// Custom input styling
<Input 
  type="text"
  placeholder="Custom input"
  className="border-2 border-blue-500 rounded-xl"
/>

Constants and Types

The library exports useful constants and TypeScript types:

import { 
  BUTTON_VARIANTS, 
  INPUT_TYPES, 
  OTP_LENGTHS,
  type ButtonProps,
  type InputProps,
  type OTPInputProps,
  type SidebarProps 
} from "@kishor-aracreate/ac-ui-library-test";

// Use constants for consistency
<Button variant={BUTTON_VARIANTS.PRIMARY} />
<Input type={INPUT_TYPES.EMAIL} />
<OTPInput length={OTP_LENGTHS.SIX} />

Testing

Components include comprehensive test coverage:

import { render, screen, fireEvent } from "@testing-library/react";
import { Button, Input, OTPInput } from "@kishor-aracreate/ac-ui-library-test";

test("button handles click events", () => {
  const handleClick = jest.fn();
  render(<Button onClick={handleClick}>Click me</Button>);
  
  fireEvent.click(screen.getByText("Click me"));
  expect(handleClick).toHaveBeenCalled();
});

📄 License

This project is licensed under the GPL-3.0 License - see the LICENSE file for details.

🙏 Acknowledgments

• Built with React and TypeScript
• Styled with UnoCSS and Tailwind CSS
• Icons from Tabler Icons
• Documentation with Storybook
• Testing with Vitest and Testing Library

Made with ❤️ by Kishor araCreate