infinity-ui-elements 1.5.1-beta.1 → 1.5.1-beta.3

package/README.md

@@ -1,82 +1,97 @@
-# infinity-ui-elements
+# Infinity UI Elements
 
-A React TypeScript component library with Tailwind CSS design system for Infinity products.
+A comprehensive React TypeScript component library with a modern design system built on Tailwind CSS. Perfect for building consistent, accessible, and beautiful user interfaces for Infinity products.
 
-## Features
+## 🎯 Features
 
-- 🎨 **Design System**: Consistent styling with custom Tailwind CSS tokens
-- 📦 **Tree-shakable**: ESM + CJS builds with Rollup
-- 📚 **Storybook**: Isolated development and documentation
-- 🔧 **TypeScript**: Full type safety and IntelliSense support
-- ⚡ **Hot Reload**: Fast development with Vite-powered Storybook
+- 🎨 **Comprehensive Design System**: 25+ production-ready components with consistent styling
+- 📦 **Tree-shakable**: ESM + CJS builds optimized with Rollup
+- 🔒 **TypeScript**: Full type safety and IntelliSense support
+- ♿ **Accessible**: ARIA compliant components following WAI-ARIA guidelines
+- 🎭 **Flexible**: Support for variants, sizes, colors, and custom styling
+- 📚 **Well Documented**: Interactive Storybook documentation
+- ⚡ **Performance**: Optimized bundle size with zero runtime overhead
+- 🌈 **Theme Support**: CSS custom properties for easy theming
 
-## Installation
+---
+
+## 📦 Installation
 
 ```bash
 yarn add infinity-ui-elements
+# or
+npm install infinity-ui-elements
 ```
 
-## Usage
+### Peer Dependencies
+
+Install the required peer dependencies:
 
-### Basic Usage
+```bash
+yarn add react react-dom clsx tailwind-merge class-variance-authority
+# or
+npm install react react-dom clsx tailwind-merge class-variance-authority
+```
+
+For Table component (optional):
+```bash
+yarn add @tanstack/react-table
+```
+
+---
+
+## 🚀 Quick Start
+
+### 1. Import CSS
+
+In your main application file (e.g., `App.tsx` or `index.tsx`):
 
 ```tsx
-import { Button, Checkbox } from 'infinity-ui-elements';
+import 'infinity-ui-elements/dist/index.css';
+```
+
+### 2. Use Components
+
+```tsx
+import { Button, TextField, Badge } from 'infinity-ui-elements';
 
 function App() {
   return (
     <div>
-      <Button variant="primary" onClick={() => console.log('Clicked!')}>
-        Click me
-      </Button>
-      <Button variant="secondary">
-        Secondary Button
+      <Button variant="primary" color="primary">
+        Get Started
       </Button>
       
-      <Checkbox 
-        label="Accept terms and conditions" 
-        onChange={(e) => console.log(e.target.checked)}
+      <TextField 
+        label="Email"
+        placeholder="Enter your email"
+        type="email"
       />
+      
+      <Badge color="positive" variant="light">
+        Active
+      </Badge>
     </div>
   );
 }
 ```
 
-### Required Setup
-
-**Step 1**: Install peer dependencies:
-
-```bash
-yarn add clsx tailwind-merge class-variance-authority
-# or
-npm install clsx tailwind-merge class-variance-authority
-```
-
-**Step 2**: Import the CSS file in your application:
-
-```tsx
-// In your main App.tsx or index.tsx
-import 'infinity-ui-elements/dist/index.css';
-```
-
-**Step 3**: Configure Tailwind CSS (CRITICAL - Required for styles to work):
+### 3. Configure Tailwind CSS
 
-The library uses custom utility classes that are pre-built in the CSS file. You need to prevent Tailwind from purging these classes in your consuming project.
+The library uses custom utility classes that are pre-built. Configure your Tailwind setup to avoid conflicts:
 
 #### For Tailwind CSS v4:
-
 ```js
-// tailwind.config.js or postcss.config.js
+// tailwind.config.js
 export default {
   content: [
     './src/**/*.{js,ts,jsx,tsx}',
+    // Don't include node_modules - CSS is already compiled
   ],
-  // Don't scan node_modules - the CSS is already compiled
 }
 ```
 
 #### For Tailwind CSS v3:
-
 ```js
 // tailwind.config.js
 module.exports = {
@@ -84,153 +99,730 @@ module.exports = {
     './src/**/*.{js,ts,jsx,tsx}',
   ],
   safelist: [
-    // Safelist the component library classes
     { pattern: /^(font-size|leading|font-functional|font-display|text-surface|text-action|bg-action|border-action)/ },
   ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};
+}
 ```
 
-**Important Notes:**
-- The library's CSS contains all pre-compiled styles
-- Do NOT add `node_modules/infinity-ui-elements` to your Tailwind content paths
-- The safelist (for v3) ensures Tailwind doesn't purge the library's custom classes
+---
 
-## Development
+## 🧩 Components
 
-### Prerequisites
+### Form Components
 
-- Node.js 18+
-- Yarn 4.5.2 (managed via Corepack)
+#### Button
+A versatile button component with multiple variants, colors, sizes, and loading states.
 
-### Setup
+**Key Features:**
+- 3 variants: `primary`, `secondary`, `tertiary`
+- 6 color options: `primary`, `positive`, `negative`, `notice`, `info`, `neutral`
+- 4 sizes: `xsmall`, `small`, `medium`, `large`
+- Leading/trailing icons support
+- Loading states with spinners
+- Icon-only mode
+- Full-width option
 
-```bash
-# Install dependencies
-yarn install
+```tsx
+import { Button } from 'infinity-ui-elements';
 
-# Start Storybook for development
-yarn storybook
+<Button variant="primary" color="positive" size="medium">
+  Save Changes
+</Button>
 
-# Build the library
-yarn build
+<Button variant="secondary" color="negative" isLoading>
+  Deleting...
+</Button>
 
-# Type checking
-yarn type-check
+<Button variant="tertiary" leadingIcon={<PlusIcon />}>
+  Add Item
+</Button>
 ```
 
-### Project Structure
+#### TextField
+A text input component with validation, icons, and helper text.
+
+**Key Features:**
+- Label with required/optional indicators
+- Prefix and suffix support
+- Validation states: `positive`, `negative`
+- Clear button option
+- Helper text and error messages
+- Info tooltip integration
+- Link support
+
+```tsx
+import { TextField } from 'infinity-ui-elements';
+
+<TextField
+  label="Email Address"
+  placeholder="Enter your email"
+  type="email"
+  isRequired
+  helperText="We'll never share your email"
+  showClearButton
+/>
 
+<TextField
+  label="Amount"
+  prefix="$"
+  suffix="USD"
+  validationState="positive"
+  successText="Valid amount"
+/>
 ```
-src/
-├── components/
-│   └── Button/
-│       ├── Button.tsx          # Component implementation
-│       ├── Button.stories.tsx  # Storybook stories
-│       └── index.ts           # Component exports
-├── index.css                  # Tailwind CSS + CSS variables
-└── index.ts                   # Main barrel export
+
+#### TextArea
+A multi-line text input with auto-resize capability.
+
+**Key Features:**
+- Auto-resize option
+- Character count display
+- Validation states
+- Helper text support
+- All TextField features
+
+```tsx
+import { TextArea } from 'infinity-ui-elements';
+
+<TextArea
+  label="Description"
+  placeholder="Enter description..."
+  rows={4}
+  maxLength={500}
+  showCharCount
+/>
 ```
 
-## Components
+#### Select
+A dropdown select component with keyboard navigation.
 
-### Button
+**Key Features:**
+- Searchable options
+- Custom option rendering
+- Prefix/suffix support
+- Loading state
+- Empty state customization
+- Keyboard navigation
+- Clear button
 
-A versatile button component with multiple variants.
+```tsx
+import { Select } from 'infinity-ui-elements';
+
+const options = [
+  { value: 'us', label: 'United States' },
+  { value: 'uk', label: 'United Kingdom' },
+  { value: 'ca', label: 'Canada' },
+];
+
+<Select
+  label="Country"
+  options={options}
+  placeholder="Select a country"
+  onChange={(value, option) => console.log(value)}
+  showClearButton
+/>
+```
 
-#### Props
+#### SearchableDropdown
+An advanced dropdown with built-in search functionality.
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `variant` | `'primary' \| 'secondary'` | `'primary'` | Button style variant |
-| `children` | `React.ReactNode` | - | Button content |
-| `onClick` | `() => void` | - | Click handler |
-| `disabled` | `boolean` | `false` | Disabled state |
-| `className` | `string` | `''` | Additional CSS classes |
+**Key Features:**
+- Real-time search filtering
+- Multiple selection support
+- Custom option rendering
+- Grouped options
+- Async data loading
 
-#### Examples
+```tsx
+import { SearchableDropdown } from 'infinity-ui-elements';
+
+<SearchableDropdown
+  label="Select Users"
+  options={users}
+  searchable
+  placeholder="Search users..."
+  onChange={(selected) => setSelectedUsers(selected)}
+/>
+```
+
+#### Checkbox
+A checkbox component with indeterminate state support.
+
+**Key Features:**
+- Indeterminate state for "select all"
+- 3 sizes: `small`, `medium`, `large`
+- Validation states
+- Helper text and error messages
+- Disabled state
 
 ```tsx
-// Primary button
-<Button variant="primary" onClick={handleClick}>
-  Save Changes
-</Button>
+import { Checkbox } from 'infinity-ui-elements';
 
-// Secondary button
-<Button variant="secondary">
-  Cancel
-</Button>
+<Checkbox 
+  label="Accept terms and conditions"
+  isRequired
+  validationState="error"
+  errorText="You must accept the terms"
+/>
 
-// Disabled button
-<Button disabled>
-  Processing...
-</Button>
+<Checkbox 
+  label="Select all"
+  isIndeterminate={someSelected && !allSelected}
+  checked={allSelected}
+/>
 ```
 
-### Checkbox
+#### Radio
+A radio button component for single selection.
 
-A checkbox component for selecting options in forms with support for indeterminate states.
+**Key Features:**
+- Custom styling
+- Validation states
+- Helper text support
+- Disabled state
+- Multiple sizes
 
-#### Props
+```tsx
+import { Radio } from 'infinity-ui-elements';
+
+<Radio
+  label="Option 1"
+  name="choice"
+  value="option1"
+  checked={selected === 'option1'}
+  onChange={(e) => setSelected(e.target.value)}
+/>
+```
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `label` | `string` | - | Label text for the checkbox |
-| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Checkbox size |
-| `checked` | `boolean` | - | Controlled checked state |
-| `isIndeterminate` | `boolean` | `false` | Indeterminate state (mixed selection) |
-| `isDisabled` | `boolean` | `false` | Disabled state |
-| `validationState` | `'none' \| 'error'` | `'none'` | Validation state |
-| `helperText` | `string` | - | Helper text displayed below checkbox |
-| `errorText` | `string` | - | Error text (overrides helperText) |
-| `showErrorText` | `boolean` | `true` | Show/hide error text |
-| `onChange` | `(e: React.ChangeEvent<HTMLInputElement>) => void` | - | Change handler |
+#### Switch
+A toggle switch component for boolean states.
 
-#### Examples
+**Key Features:**
+- Multiple sizes
+- Disabled state
+- Label support
+- Custom colors
+- Loading state
 
 ```tsx
-// Basic checkbox
-<Checkbox label="Accept terms" />
+import { Switch } from 'infinity-ui-elements';
 
-// Controlled checkbox
-<Checkbox 
-  label="Subscribe to newsletter" 
-  checked={isSubscribed}
-  onChange={(e) => setIsSubscribed(e.target.checked)}
+<Switch
+  label="Enable notifications"
+  checked={isEnabled}
+  onChange={(checked) => setIsEnabled(checked)}
 />
+```
 
-// With validation
-<Checkbox 
-  label="Required field" 
-  validationState="error"
-  errorText="This field is required"
+---
+
+### Data Display Components
+
+#### Table
+A powerful data table built on TanStack Table with advanced features.
+
+**Key Features:**
+- Sorting, filtering, pagination
+- Row selection
+- Expandable detail panels
+- Sticky headers
+- Loading and empty states
+- Custom cell rendering
+- Horizontal scrolling
+- Row hover effects
+
+```tsx
+import { Table } from 'infinity-ui-elements';
+import { useReactTable, getCoreRowModel, createColumnHelper } from '@tanstack/react-table';
+
+const columnHelper = createColumnHelper<User>();
+
+const columns = [
+  columnHelper.accessor('name', {
+    header: 'Name',
+    cell: info => info.getValue(),
+  }),
+  columnHelper.accessor('email', {
+    header: 'Email',
+  }),
+];
+
+const table = useReactTable({
+  data,
+  columns,
+  getCoreRowModel: getCoreRowModel(),
+});
+
+<Table 
+  table={table}
+  enableRowSelection
+  showRowHover
+  stickyHeader
+  detailPanel={(row) => <UserDetails user={row.original} />}
 />
+```
 
-// Indeterminate state (for "select all" scenarios)
-<Checkbox 
-  label="Select all" 
-  isIndeterminate={someSelected && !allSelected}
-  checked={allSelected}
-  onChange={handleSelectAll}
+#### Badge
+A small status indicator component.
+
+**Key Features:**
+- 2 variants: `light`, `filled`
+- 6 color options
+- 3 sizes: `small`, `medium`, `large`
+- Optional dot indicator
+- Custom content support
+
+```tsx
+import { Badge } from 'infinity-ui-elements';
+
+<Badge variant="filled" color="positive">
+  Active
+</Badge>
+
+<Badge variant="light" color="notice" showDot>
+  Pending
+</Badge>
+```
+
+#### Avatar
+A user avatar component with status indicators.
+
+**Key Features:**
+- Image or text initials
+- Status indicator with custom icons
+- 5 color variants
+- 2 sizes: `small`, `medium`
+- Label and trailing component support
+- Fallback for broken images
+
+```tsx
+import { Avatar } from 'infinity-ui-elements';
+
+<Avatar
+  src="/user-avatar.jpg"
+  alt="John Doe"
+  size="medium"
+  showStatus
+  statusColor="positive"
+/>
+
+<Avatar color="a1" size="small">
+  JD
+</Avatar>
+
+<Avatar
+  src="/user.jpg"
+  label="John Doe"
+  trailingComponent={<ChevronDown />}
+/>
+```
+
+#### Counter
+A numeric counter with increment/decrement controls.
+
+**Key Features:**
+- Min/max value constraints
+- Step control
+- Disabled state
+- Custom formatting
+- Size variants
+
+```tsx
+import { Counter } from 'infinity-ui-elements';
+
+<Counter
+  value={count}
+  onChange={setCount}
+  min={0}
+  max={100}
+  step={1}
+/>
+```
+
+#### Text
+A typography component with consistent styling.
+
+**Key Features:**
+- Multiple variants: `display`, `heading`, `body`, `label`, `caption`
+- Size options for each variant
+- Weight options: `regular`, `medium`, `semibold`, `bold`
+- Color options
+- Polymorphic `as` prop
+
+```tsx
+import { Text } from 'infinity-ui-elements';
+
+<Text variant="heading" size="xlarge" weight="bold">
+  Welcome Back
+</Text>
+
+<Text variant="body" size="medium" color="muted">
+  This is a description
+</Text>
+
+<Text variant="label" as="label" htmlFor="input-id">
+  Field Label
+</Text>
+```
+
+---
+
+### Navigation Components
+
+#### Link
+A styled link component with various visual states.
+
+**Key Features:**
+- Multiple variants
+- External link support
+- Disabled state
+- Icon support
+- Underline options
+
+```tsx
+import { Link } from 'infinity-ui-elements';
+
+<Link href="/dashboard" variant="primary">
+  Go to Dashboard
+</Link>
+
+<Link href="https://example.com" external>
+  Visit Website
+</Link>
+```
+
+#### Tabs / TabItem
+Tab navigation components for organizing content.
+
+**Key Features:**
+- Horizontal and vertical layouts
+- Active state management
+- Icon support
+- Disabled tabs
+- Keyboard navigation
+
+```tsx
+import { Tabs, TabItem } from 'infinity-ui-elements';
+
+<Tabs>
+  <TabItem active>Overview</TabItem>
+  <TabItem>Settings</TabItem>
+  <TabItem disabled>Analytics</TabItem>
+</Tabs>
+```
+
+#### Pagination
+A pagination component for navigating through pages.
+
+**Key Features:**
+- Page number display
+- Previous/Next buttons
+- First/Last page navigation
+- Custom page size
+- Controlled and uncontrolled modes
+
+```tsx
+import { Pagination } from 'infinity-ui-elements';
+
+<Pagination
+  currentPage={page}
+  totalPages={10}
+  onPageChange={setPage}
+  showFirstLast
+/>
+```
+
+---
+
+### Layout Components
+
+#### ButtonGroup
+A component for grouping related buttons.
+
+**Key Features:**
+- Horizontal and vertical layouts
+- Connected or separated styles
+- Size variants
+- Full-width option
+
+```tsx
+import { ButtonGroup, Button } from 'infinity-ui-elements';
+
+<ButtonGroup>
+  <Button variant="secondary">Cancel</Button>
+  <Button variant="primary">Save</Button>
+</ButtonGroup>
+```
+
+#### Divider
+A visual separator component.
+
+**Key Features:**
+- Horizontal and vertical orientations
+- With or without text
+- Custom styling
+- Spacing control
+
+```tsx
+import { Divider } from 'infinity-ui-elements';
+
+<Divider />
+
+<Divider orientation="vertical" />
+
+<Divider>OR</Divider>
+```
+
+#### Modal
+A modal dialog component for overlays.
+
+**Key Features:**
+- Multiple size options
+- Header with title and description
+- Footer support
+- Close on overlay click
+- Escape key support
+- Scroll locking
+- Animation transitions
+
+```tsx
+import { Modal } from 'infinity-ui-elements';
+
+<Modal
+  isOpen={isOpen}
+  onClose={() => setIsOpen(false)}
+  title="Confirm Action"
+  description="Are you sure you want to proceed?"
+  size="medium"
+  footer={
+    <>
+      <Button variant="secondary" onClick={() => setIsOpen(false)}>
+        Cancel
+      </Button>
+      <Button variant="primary" onClick={handleConfirm}>
+        Confirm
+      </Button>
+    </>
+  }
+>
+  <p>Modal content goes here...</p>
+</Modal>
+```
+
+#### Tooltip
+A tooltip component for displaying contextual information.
+
+**Key Features:**
+- Multiple placement options
+- Trigger on hover or click
+- Delay control
+- Arrow indicator
+- Custom styling
+
+```tsx
+import { Tooltip } from 'infinity-ui-elements';
+
+<Tooltip content="This is helpful information">
+  <Button>Hover me</Button>
+</Tooltip>
+```
+
+#### ListItem
+A list item component for building lists.
+
+**Key Features:**
+- Leading and trailing content
+- Multi-line support
+- Clickable/interactive
+- Custom styling
+- Icon support
+
+```tsx
+import { ListItem } from 'infinity-ui-elements';
+
+<ListItem
+  leadingIcon={<UserIcon />}
+  title="John Doe"
+  description="john@example.com"
+  trailingContent={<ChevronRight />}
+  onClick={() => console.log('Clicked')}
 />
+```
+
+---
+
+### Form Layout Components
+
+#### FormHeader
+A form header component with label and info tooltip.
 
-// Different sizes
-<Checkbox size="small" label="Small" />
-<Checkbox size="medium" label="Medium" />
-<Checkbox size="large" label="Large" />
+**Key Features:**
+- Required/optional indicators
+- Info tooltip
+- Link support
+- Size variants
+- Custom styling
 
-// Disabled
-<Checkbox label="Can't change this" isDisabled checked />
+```tsx
+import { FormHeader } from 'infinity-ui-elements';
+
+<FormHeader
+  label="Email Address"
+  isRequired
+  infoHeading="Why we need this"
+  infoDescription="We use your email for account recovery"
+  linkText="Privacy Policy"
+  linkHref="/privacy"
+/>
 ```
 
-## Publishing
+#### FormFooter
+A form footer component for helper text and validation messages.
+
+**Key Features:**
+- Validation state styling
+- Error/success messages
+- Helper text
+- Size variants
+
+```tsx
+import { FormFooter } from 'infinity-ui-elements';
+
+<FormFooter
+  helperText="Password must be at least 8 characters"
+  validationState="negative"
+/>
+```
 
-### Automated Publishing Commands
+---
 
-The package includes automated scripts for versioning and publishing:
+### Interactive Components
+
+#### Dropdown / DropdownMenu
+A flexible dropdown menu component.
+
+**Key Features:**
+- Custom trigger
+- Nested menus
+- Keyboard navigation
+- Dividers and sections
+- Icon support
+- Custom item rendering
+
+```tsx
+import { Dropdown } from 'infinity-ui-elements';
+
+<Dropdown
+  trigger={<Button>Options</Button>}
+  items={[
+    { title: 'Edit', onClick: handleEdit },
+    { title: 'Delete', onClick: handleDelete, color: 'negative' },
+  ]}
+/>
+```
+
+---
+
+## 🎨 Theming
+
+The library uses CSS custom properties for theming. Override these variables in your CSS:
+
+```css
+:root {
+  /* Action Colors */
+  --color-action-fill-primary-default: #0066ff;
+  --color-action-fill-positive-default: #00c48c;
+  --color-action-fill-negative-default: #ff5757;
+  --color-action-fill-notice-default: #ffa726;
+  --color-action-fill-info-default: #00b8d4;
+  --color-action-fill-neutral-default: #8e8e93;
+  
+  /* Surface Colors */
+  --color-surface-fill-neutral-intense: #ffffff;
+  --color-surface-ink-neutral-normal: #1a1a1a;
+  --color-surface-ink-neutral-muted: #8e8e93;
+  
+  /* Spacing */
+  --size-20: 1.25rem;
+  --size-24: 1.5rem;
+  --size-28: 1.75rem;
+  
+  /* Border Radius */
+  --radius-medium: 8px;
+  --radius-large: 12px;
+  --radius-xlarge: 16px;
+}
+```
+
+---
+
+## 🛠️ Development
+
+### Prerequisites
+- Node.js 18+
+- Yarn 4.5.2 (managed via Corepack)
+
+### Setup
+
+```bash
+# Install dependencies
+yarn install
+
+# Start Storybook for development
+yarn storybook
+
+# Build the library
+yarn build
+
+# Type checking
+yarn type-check
+```
+
+### Project Structure
+
+```
+src/
+├── components/           # All UI components
+│   ├── Button/
+│   │   ├── Button.tsx           # Component implementation
+│   │   ├── Button.stories.tsx   # Storybook stories
+│   │   └── index.ts             # Exports
+│   └── ...
+├── lib/                  # Utilities and helpers
+│   ├── utils.ts          # Utility functions
+│   └── icons.tsx         # Icon system
+├── styles/               # Global styles
+│   ├── theme/            # Theme variables
+│   ├── animations.css    # Animations
+│   └── utilities/        # Utility classes
+└── index.ts              # Main entry point
+```
+
+### Adding New Components
+
+1. Create component folder in `src/components/`
+2. Implement component with TypeScript
+3. Add Storybook stories for documentation
+4. Export from component's `index.ts`
+5. Add export to main `src/index.ts`
+
+---
+
+## 📚 Storybook
+
+View interactive documentation and examples:
+
+```bash
+yarn storybook
+```
+
+Or visit the deployed Storybook (if available).
+
+---
+
+## 📤 Publishing
+
+### Automated Publishing
 
 ```bash
 # For bug fixes (1.0.0 -> 1.0.1)
@@ -241,121 +833,132 @@ yarn publish:minor
 
 # For breaking changes (1.0.0 -> 2.0.0)
 yarn publish:major
-```
 
-### Manual Publishing Steps
+# For beta releases
+yarn publish:beta
+```
 
-If you prefer manual control:
+### Manual Publishing
 
 ```bash
-# 1. Login to npm (if not already logged in)
+# 1. Login to npm
 npm login
 
-# 2. Update version and build
-yarn version:patch    # or version:minor, version:major
+# 2. Update version
+yarn version:patch  # or version:minor, version:major
+
+# 3. Build
+yarn build
 
-# 3. Publish to npm
+# 4. Publish
 npm publish
 ```
 
-### What Happens During Publishing
+### Pre-publish Checklist
 
-1. **Version Update**: Updates `package.json` version
-2. **CSS Build**: Generates `dist/index.css` from Tailwind
-3. **JS Build**: Creates `dist/index.js` and `dist/index.esm.js`
-4. **Type Definitions**: Generates TypeScript declarations
-5. **Publish**: Uploads to npm registry
+- ✅ All tests pass
+- ✅ Type checking passes (`yarn type-check`)
+- ✅ Storybook builds successfully
+- ✅ CHANGELOG.md updated
+- ✅ Version bumped in package.json
 
-### Pre-publish Hook
+---
 
-The `prepublishOnly` script ensures the package is always built before publishing, so you never publish outdated code.
+## 🤝 Contributing
 
-### Internal Registry Setup
+Contributions are welcome! Please follow these guidelines:
 
-If using a private registry:
+1. **Fork the repository**
+2. **Create a feature branch**: `git checkout -b feature/amazing-feature`
+3. **Make your changes** following the coding standards
+4. **Add tests** if applicable
+5. **Update documentation** (README, Storybook)
+6. **Commit changes**: `git commit -m 'Add amazing feature'`
+7. **Push to branch**: `git push origin feature/amazing-feature`
+8. **Open a Pull Request**
 
-```bash
-# Configure npm registry
-npm config set registry https://your-internal-registry.com
+### Component Guidelines
 
-# Then use normal publish commands
-yarn publish:patch
-```
+- Use TypeScript with strict mode
+- Follow existing naming conventions
+- Use Tailwind CSS for styling via class-variance-authority
+- Include proper prop types and JSDoc comments
+- Create comprehensive Storybook stories
+- Ensure accessibility (ARIA attributes, keyboard navigation)
+- Export from barrel files (`index.ts`)
 
-### Consumer Setup
+---
 
-After publishing, consumers can install and use the library:
+## 🔍 Browser Support
 
-```bash
-# Install the package
-yarn add infinity-ui-elements
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
 
-# Import components
-import { Button } from 'infinity-ui-elements';
+---
 
-# Import CSS (required for styling)
-import 'infinity-ui-elements/dist/index.css';
-```
+## 📝 License
+
+MIT © Himanshu Barmola
+
+---
+
+## 🔗 Links
 
-### Tailwind CSS Setup for Consumers
+- [NPM Package](https://www.npmjs.com/package/infinity-ui-elements)
+- [GitHub Repository](https://github.com/yourusername/infinity-ui-elements)
+- [Storybook Documentation](https://your-storybook-url.com)
+- [Report Issues](https://github.com/yourusername/infinity-ui-elements/issues)
 
-See the "Required Setup" section above for the complete Tailwind configuration. The key points are:
+---
 
-1. **Import the CSS**: `import 'infinity-ui-elements/dist/index.css'`
-2. **Install peer dependencies**: `clsx`, `tailwind-merge`, `class-variance-authority`
-3. **Configure Tailwind properly**: Do NOT include the library in your content paths (for v4) or use safelist patterns (for v3)
+## 💡 Tips & Best Practices
 
-## Design Tokens
+### Performance
+- Import only the components you need (tree-shaking enabled)
+- Use the `cn()` utility for conditional classes
+- Avoid inline styles when possible
 
-The design system uses CSS custom properties (variables) defined in the CSS file:
+### Styling
+- Always import the main CSS file: `import 'infinity-ui-elements/dist/index.css'`
+- Use the provided design tokens for consistency
+- Extend with custom classes using `className` prop
 
-**Colors:**
-- `--color-primary`: #007bff (Blue)
-- `--color-secondary`: #6c757d (Gray)
-- `--color-success`: #28a745 (Green)
-- `--color-danger`: #dc3545 (Red)
-- `--color-warning`: #ffc107 (Yellow)
-- `--color-info`: #17a2b8 (Cyan)
-- `--color-light`: #f8f9fa (Light Gray)
-- `--color-dark`: #343a40 (Dark Gray)
+### Accessibility
+- Always provide labels for form components
+- Use semantic HTML elements
+- Include ARIA attributes where needed
+- Test with keyboard navigation
 
-**Spacing:**
-- `--spacing-18`: 4.5rem
-- `--spacing-88`: 22rem
+### TypeScript
+- All components are fully typed
+- Use IntelliSense for prop discovery
+- Extend interfaces if needed for custom types
 
-These variables are automatically mapped to Tailwind classes (e.g., `bg-primary`, `text-secondary`) and can be customized by overriding the CSS variables in your application.
+---
 
-## Contributing
+## 🆘 Support
 
-1. **Add new components**:
-   - Create component folder in `src/components/`
-   - Implement component with TypeScript
-   - Add Storybook stories
-   - Export from main index
+Need help? Have questions?
 
-2. **Component guidelines**:
-   - Use Tailwind CSS for styling
-   - Follow TypeScript strict mode
-   - Include proper prop types
-   - Add Storybook stories with controls
-   - Export from barrel files
+- 📧 Email: support@infinityapp.com
+- 💬 GitHub Discussions
+- 🐛 Report bugs via GitHub Issues
 
-3. **Example component structure**:
-   ```
-   src/components/Input/
-   ├── Input.tsx
-   ├── Input.stories.tsx
-   └── index.ts
-   ```
+---
 
-## Scripts
+## 🎉 Acknowledgments
 
-- `yarn build` - Build the library for production
-- `yarn storybook` - Start Storybook development server
-- `yarn build-storybook` - Build static Storybook
-- `yarn type-check` - Run TypeScript type checking
-- `yarn clean` - Remove build artifacts
+Built with:
+- [React](https://reactjs.org/)
+- [TypeScript](https://www.typescriptlang.org/)
+- [Tailwind CSS](https://tailwindcss.com/)
+- [Storybook](https://storybook.js.org/)
+- [TanStack Table](https://tanstack.com/table)
+- [Lucide Icons](https://lucide.dev/)
+- [Class Variance Authority](https://cva.style/)
 
-## License
+---
 
-MIT
+**Made with ❤️ by the Infinity Team**