Quick Start

import { Button, Input } from '@abdalkader/component-library';
import '@abdalkader/component-library/dist/styles.css';

function App() {
  return (
    <div>
      <Button variant="primary">Click me</Button>
      <Input label="Email" type="email" placeholder="Enter email" />
    </div>
  );
}

import React, { useState } from 'react';
import { Button, Input } from '@abdalkader/component-library';

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [errors, setErrors] = useState({ email: false, password: false });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    
    const newErrors = {
      email: !email.includes('@'),
      password: password.length < 8,
    };
    
    setErrors(newErrors);
    
    if (!newErrors.email && !newErrors.password) {
      console.log('Form submitted:', { email, password });
    }
  };

  return (
    <form onSubmit={handleSubmit} style={{ maxWidth: '400px' }}>
      <Input
        label="Email"
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        error={errors.email}
        errorMessage={errors.email ? 'Please enter a valid email' : undefined}
        required
      />
      
      <Input
        label="Password"
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        error={errors.password}
        errorMessage={errors.password ? 'Password must be at least 8 characters' : undefined}
        helperText="Use a strong password"
        required
      />
      
      <Button type="submit" variant="primary">
        Sign In
      </Button>
    </form>
  );
}

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="danger">Danger</Button>

<Button size="small">Small</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>

<Input type="text" label="Text" />
<Input type="email" label="Email" />
<Input type="password" label="Password" />
<Input type="number" label="Number" />

<Button aria-label="Close dialog">×</Button>

<Input
  label="Username"
  required
  aria-describedby="username-helper"
  helperText="Choose a unique username"
/>

import { ButtonProps, InputProps } from '@abdalkader/component-library';

const buttonProps: ButtonProps = {
  variant: 'primary',
  size: 'medium',
  disabled: false,
  children: 'Click me',
};

const inputProps: InputProps = {
  label: 'Email',
  type: 'email',
  required: true,
};