@als-tp/als-react-ts-ui/README.md

A comprehensive React TypeScript UI component library built with Base UI by ALSInnovation

# @als-tp/als-react-ts-ui

A comprehensive React TypeScript UI component library built on top of [Base UI](https://base-ui.com/), providing 35+ accessible, customizable components with full TypeScript support.

## Features

- 🎨 **35+ Components**: Comprehensive set of UI components
- 💪 **TypeScript First**: Full type safety and IntelliSense support
- ♿ **Accessible**: Built on Base UI with ARIA compliance
- 🎭 **Customizable**: CSS Modules with CSS variables for theming
- 📦 **Tree-shakeable**: Import only what you need
- 🔧 **Modern Stack**: React 19, TypeScript 5.9, Vite 7

## Installation

```bash
# npm
npm install @als-tp/als-react-ts-ui

# pnpm
pnpm add @als-tp/als-react-ts-ui

# yarn
yarn add @als-tp/als-react-ts-ui
```

### Peer Dependencies

This library requires the following peer dependencies:

```bash
npm install react@^19.0.0 react-dom@^19.0.0 @base-ui-components/react@^1.0.0-beta.7
```

## Usage

### Import Styles

First, import the CSS in your application entry point:

```typescript
import '@als-tp/als-react-ts-ui/styles';
```

### Import Components

```typescript
import { ALSButton, ALSDialog, ALSInput } from '@als-tp/als-react-ts-ui';

function App() {
  return (
    <div>
      <ALSButton variant="primary" size="md">
        Click me
      </ALSButton>
      
      <ALSInput placeholder="Enter text..." />
    </div>
  );
}
```

### TypeScript Support

All components are fully typed. TypeScript will provide autocomplete and type checking:

```typescript
import type { ALSButtonProps } from '@als-tp/als-react-ts-ui';

const buttonProps: ALSButtonProps = {
  variant: 'primary',
  size: 'lg',
  onClick: () => console.log('clicked')
};
```

## Available Components

### Form Components
- `ALSButton` - Versatile button with variants and sizes
- `ALSInput` - Text input field
- `ALSCheckbox` - Checkbox with label
- `ALSCheckboxGroup` - Group of checkboxes
- `ALSRadio` - Radio button
- `ALSSwitch` - Toggle switch
- `ALSSelect` - Dropdown select
- `ALSCombobox` - Autocomplete combobox
- `ALSAutocomplete` - Autocomplete input
- `ALSNumberField` - Numeric input
- `ALSSlider` - Range slider
- `ALSField` - Form field wrapper
- `ALSFieldset` - Form fieldset
- `ALSForm` - Form container

### Layout Components
- `MainLayout` - Main application layout
- `ALSSeparator` - Visual separator
- `ALSScrollArea` - Scrollable container
- `ALSTabs` - Tab navigation
- `ALSToolbar` - Toolbar container

### Overlay Components
- `ALSDialog` - Modal dialog
- `ALSAlertDialog` - Alert/confirmation dialog
- `ALSPopover` - Popover overlay
- `ALSTooltip` - Tooltip
- `ALSMenu` - Dropdown menu
- `ALSContextMenu` - Context menu
- `ALSMenubar` - Menu bar
- `ALSNavigationMenu` - Navigation menu

### Feedback Components
- `ALSToast` - Toast notifications
- `ALSProgress` - Progress indicator
- `ALSMeter` - Meter/gauge

### Content Components
- `ALSAccordion` - Expandable accordion
- `ALSCollapsible` - Collapsible content
- `ALSAvatar` - User avatar
- `ALSPreviewCard` - Preview card

### Interactive Components
- `ALSToggle` - Toggle button
- `ALSToggleGroup` - Toggle button group

## Customization

The library uses CSS variables for theming. You can override these in your global CSS:

```css
:root {
  --primary-color: #your-color;
  --secondary-color: #your-color;
  /* ... other variables */
}
```

## Development

### Building the Library

```bash
pnpm run build:lib
```

### Running Storybook

```bash
pnpm run storybook
```

### Running Tests

```bash
pnpm test
```

## Contributing

Contributions are welcome! Please read our contributing guidelines before submitting PRs.

## License

MIT © ALS TP

## Links

- [GitHub Repository](https://github.com/als-tp/als-react-ts-ui)
- [Issue Tracker](https://github.com/als-tp/als-react-ts-ui/issues)
- [Base UI Documentation](https://base-ui.com/)