npm package: @horizon-ui-brijesh/horizon
Description: A responsive and accessible component library built with React and `styled-components`.
Latest version: 1.0.12

# Horizon UI

A responsive and accessible component library built with React and `styled-components`.

## 🚀 Installation

```bash
npm install @horizon-ui-brijesh/horizon
```

## 🧱 Getting Started

All components must be wrapped with the `HorizonUI` component to ensure proper theming and styling:

```jsx
import { HorizonUI, Button } from '@horizon-ui-brijesh/horizon';

function App() {
  return (
    <HorizonUI>
      <Button primary>Click Me</Button>
    </HorizonUI>
  );
}
```

## 🧱 Components

### HorizonUI
The root wrapper component that provides theme context and global styles. All other components must be wrapped with this component.

```jsx
import { HorizonUI } from '@horizon-ui-brijesh/horizon';

<HorizonUI>
  {/* Your components here */}
</HorizonUI>
```

### Button

A responsive button component with primary and default styles.

```jsx
import { HorizonUI, Button } from '@horizon-ui-brijesh/horizon';

<HorizonUI>
  <Button primary onClick={() => alert('Clicked!')}>Click Me</Button>
</HorizonUI>
```

**Props:**
- `primary` (boolean) - Applies primary color styles when true
- `disabled` (boolean) - Disables the button and changes styling
- `onClick` (function) - Triggered when clicked
- `children` (node) - Button label/content

### Dropdown

A customizable dropdown component with support for custom rendering and responsive design.

```jsx
import { HorizonUI, Dropdown } from '@horizon-ui-brijesh/horizon';

<HorizonUI>
  <Dropdown
    options={[
      { label: 'Option 1', value: '1' },
      { label: 'Option 2', value: '2' }
    ]}
    onChange={(value) => console.log(value)}
  />
</HorizonUI>
```

**Props:**
- `options` (array) - Array of options to display
- `value` (any) - Currently selected value
- `onChange` (function) - Called when an option is selected
- `placeholder` (string) - Placeholder text when no option is selected
- `disabled` (boolean) - Disables the dropdown
- `variant` (string) - Style variant ('filled' or 'outlined')
- `fullWidth` (boolean) - Makes the dropdown take full width
- `renderOption` (function) - Custom render function for options
- `renderValue` (function) - Custom render function for selected value

### SearchBar

A responsive search input component with a search button.

```jsx
import { HorizonUI, SearchBar } from '@horizon-ui-brijesh/horizon';

<HorizonUI>
  <SearchBar placeholder="Search items..." />
</HorizonUI>
```

**Props:**
- `placeholder` (string) - Placeholder text for the search input
- `onSearch` (function) - Called when search is triggered

### Sidebar

A collapsible sidebar component with navigation links.

```jsx
import { HorizonUI, Sidebar } from '@horizon-ui-brijesh/horizon';

<HorizonUI>
  <Sidebar collapsed={false} />
</HorizonUI>
```

**Props:**
- `collapsed` (boolean) - Controls the collapsed state
- `onCollapse` (function) - Called when collapse state changes

## 🎨 Theme

The library uses CSS variables for theming. You can customize the following variables:

```css
:root {
  --primary: #6725F4;
  --hover-primary: rgba(103, 37, 244, 0.8);
  --text-active: #fff;
  --text-primary: #1E1730;
  --text-secondary: #565656;
  --body-bg: #FAFAFE;
  --primary-bg: #fff;
  --border-color: rgba(103, 37, 244, 0.1);
  --disabled: #ebe6e6;
}
```

## 📱 Responsive Design

All components are built with responsive design in mind and will adapt to different screen sizes. The library uses CSS variables for responsive typography:

```css
:root {
  --responsive-font-base: 16px;
  --responsive-font-sm: 14px;
  --responsive-font-lg: 18px;
  --responsive-font-xl: 24px;
  --responsive-font-xxl: 32px;
}
```

## 🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.