@abstraks-dev/ui-library 2.1.0 → 2.1.1

package/README.md

@@ -5,27 +5,282 @@ A comprehensive React UI component library with modern styling and robust testin
 ## Installation
 
 ```bash
-npm install ui-library
+npm install @abstraks-dev/ui-library
 ```
 
 ## Usage
 
 ```jsx
-import { Button, Card, TextInput } from 'ui-library';
-import 'ui-library/dist/styles/main.css';
+import {
+	Button,
+	Card,
+	TextInput,
+	Header,
+	Hero,
+	Alert,
+} from '@abstraks-dev/ui-library';
+import '@abstraks-dev/ui-library/dist/styles/main.css';
 
 function App() {
 	return (
 		<div>
+			<Header />
+			<Hero title='Welcome' subtitle='Get started with our UI library' />
+			<Alert type='success' message='Library loaded successfully!' />
 			<Card>
 				<TextInput label='Name' placeholder='Enter your name' />
 				<Button variant='primary'>Submit</Button>
+				<Button variant='transparent'>Cancel</Button>
 			</Card>
 		</div>
 	);
 }
 ```
 
+## Available Components
+
+### Core Components
+
+#### Button
+
+Multiple variants and sizes with accessibility support.
+
+```jsx
+<Button variant="primary" size="md">Primary Button</Button>
+<Button variant="secondary" size="lg">Secondary Button</Button>
+<Button variant="transparent" size="sm">Transparent Button</Button>
+<Button variant="error" isOutline={true}>Error Outline</Button>
+```
+
+Available variants: `primary`, `secondary`, `success`, `error`, `warning`, `transparent`
+Available sizes: `xs`, `sm`, `md`, `lg`, `xl`
+
+#### Card
+
+Container component for grouping related content.
+
+```jsx
+<Card>
+	<h3>Card Title</h3>
+	<p>Card content goes here</p>
+</Card>
+```
+
+#### Header
+
+Navigation header with authentication support.
+
+```jsx
+<Header />
+```
+
+#### Hero
+
+Hero section component for landing pages.
+
+```jsx
+<Hero
+	title='Welcome to Our App'
+	subtitle='Build amazing experiences with our UI library'
+/>
+```
+
+### Form Components
+
+#### TextInput
+
+Text input with label and validation support.
+
+```jsx
+<TextInput label='Email' placeholder='Enter your email' type='email' />
+```
+
+#### TextArea
+
+Multi-line text input.
+
+```jsx
+<TextArea label='Message' placeholder='Enter your message' rows={4} />
+```
+
+#### Checkbox
+
+Checkbox input with label.
+
+```jsx
+<Checkbox name='subscribe' label='Subscribe to newsletter' />
+```
+
+#### Radio
+
+Radio button input.
+
+```jsx
+<Radio name="gender" value="male" label="Male" />
+<Radio name="gender" value="female" label="Female" />
+```
+
+#### Select
+
+Dropdown select component.
+
+```jsx
+<Select
+	label='Country'
+	options={[
+		{ value: 'us', label: 'United States' },
+		{ value: 'ca', label: 'Canada' },
+	]}
+/>
+```
+
+#### FileInput
+
+File upload component.
+
+```jsx
+<FileInput label='Upload Document' accept='.pdf,.doc,.docx' />
+```
+
+### Layout Components
+
+#### Form
+
+Form wrapper with validation support.
+
+```jsx
+<Form onSubmit={handleSubmit}>
+	<TextInput label='Name' />
+	<Button type='submit'>Submit</Button>
+</Form>
+```
+
+#### Tabs
+
+Tabbed content component.
+
+```jsx
+<Tabs>
+	<Tab label='Tab 1'>Content 1</Tab>
+	<Tab label='Tab 2'>Content 2</Tab>
+</Tabs>
+```
+
+### Feedback Components
+
+#### Alert
+
+Alert messages with different types.
+
+```jsx
+<Alert type="success" message="Operation completed!" />
+<Alert type="error" message="Something went wrong!" />
+<Alert type="warning" message="Please check your input!" />
+<Alert type="info" message="New features available!" />
+```
+
+#### Error
+
+Error message component.
+
+```jsx
+<Error severity='error'>Please fill in all required fields</Error>
+```
+
+#### Loader
+
+Loading spinner component.
+
+```jsx
+<Loader size='large' />
+```
+
+### Navigation Components
+
+#### Search
+
+Search input with results.
+
+```jsx
+<Search placeholder='Search...' onSearch={handleSearch} />
+```
+
+#### SideMenu
+
+Collapsible side navigation menu.
+
+```jsx
+<SideMenu />
+```
+
+### Utility Components
+
+#### Avatar
+
+User avatar component.
+
+```jsx
+<Avatar src='user-photo.jpg' alt='John Doe' size='large' />
+```
+
+#### Anchor
+
+Accessible link component.
+
+```jsx
+<Anchor href='/about'>About Us</Anchor>
+```
+
+### Typography Components
+
+#### Heading
+
+Semantic heading component.
+
+```jsx
+<Heading level={1} variant="primary">Main Title</Heading>
+<Heading level={2} variant="secondary">Subtitle</Heading>
+```
+
+#### Paragraph
+
+Paragraph text component.
+
+```jsx
+<Paragraph size='large'>This is a paragraph with large text.</Paragraph>
+```
+
+#### Label
+
+Form label component.
+
+```jsx
+<Label htmlFor='email' required>
+	Email Address
+</Label>
+```
+
+### Icons
+
+The library includes a comprehensive set of icons:
+
+```jsx
+import {
+  Heart,
+  Home,
+  Search,
+  ArrowRight,
+  CheckCircle,
+  LoadingSpinner
+} from '@abstraks-dev/ui-library';
+
+<Heart size={24} color="red" />
+<Home size={20} />
+<ArrowRight dimensions={16} />
+```
+
+Available icons: `AccountBox`, `AccountCircle`, `ArrowIcon`, `ArrowRight`, `BookOpen`, `CameraIcon`, `CaretDown`, `CheckCircle`, `ChevronDown`, `Close`, `Comment`, `EditSquare`, `Ellipses`, `Explore`, `Filter`, `Group`, `GroupReview`, `Hamburger`, `Heart`, `Home`, `LoadingSpinner`, `LogOut`, `Magnify`, `News`, `PlusCircle`, `Review`, `SaveIcon`, `TrashX`
+
 ## Development
 
 ### Setup

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abstraks-dev/ui-library",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "User Interface library",
   "main": "dist/index.js",
   "files": [
@@ -78,8 +78,8 @@
     "animate.css": "^4.1.1",
     "libphonenumber-js": "^1.12.10",
     "react-transition-group": "^4.4.5",
-    "uuid": "^11.1.0",
-    "validator": "^13.15.15"
+    "uuid": "^13.0.0",
+    "validator": "^13.15.20"
   },
   "bugs": {
     "url": "https://github.com/Abstraks-co/ui-library/issues"