npm package: @insertlogic/o8-lib
Description: React component library for building user interfaces for Insert:Logic Orchestr8 applications.
Author: InsertLogic
Latest version: 1.0.14

# o8-lib

Library for commonly used components in Orchestr8 UI frontends.

## How to use

1. Install the library:
   ```bash
   npm install o8-lib
   ```
2. Import the base css required for the components to work properly in you `main.ts` or similar start file.

   ```js
   import "tailwindcss";
   import "o8-lib/o8-lib.css";
   ```

3. Import and use the components in your React application:

   ```jsx
   import { Button, Input } from "@insertlogic/o8-lib/components";

   function App() {
     return (
       <div className="p-4">
         <Input placeholder="Enter text" />
         <Button onClick={() => alert("Button clicked!")}>Click Me</Button>
       </div>
     );
   }

   export default App;
   ```

## Storybook

To view the components in isolation and see their documentation, you can run Storybook:

```bash
npm run storybook
```

## Built on

- [React](https://reactjs.org/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Radix UI](https://www.radix-ui.com/)

## Push new version

1. Update the version in `package.json`.
2. Check for errors: 
   ```bash
   npm run build
   ```
3. Do a dry run:
   ```bash
   npm publish --dry-run
   ```
4. Commit changes to git
5. GitHub Actions will automatically build the package and publish it to npm.

## Manually publish to npm

1. Build the package:
   ```bash
   npm run build
   ```
2. Do a dry run:
   ```bash
   npm publish --dry-run
   ```
3. Publish to npm:
   ```bash
   npm publish
   ```

## Global CSS Utilities

The library ships with a set of **base utilities** and **browser-specific overrides**.  
These are included globally — no import required.

---

### Loader
```css
.loader { ... }
```
- Displays a spinning circular loader.
- Uses CSS mask and animation.


---

### No Scrollbar
```css
.no-scrollbar { ... }
```

- Removes scrollbars across browsers.
- Supports Chrome, Safari, Opera, Firefox, IE, and Edge.

---

### Hidden Scrollbar (WebKit-only)
```css
.scrollbar-hidden::-webkit-scrollbar { ... }
```

Hides scrollbars in Chrome/Safari/Opera but keeps scrollable behavior.

---

### Minimal Scrollbar
```css
.scrollbar-ms { ... }
```

- Thin, styled scrollbar.
- Firefox: scrollbar-width: thin.
- WebKit: custom width, thumb color, rounded edges.

---

### Clean Number Input
```css
.input-number-clean { ... }
```

- Removes up/down spin buttons from <input type="number">.
- Works in WebKit and Firefox.

---

### Toast Styles
```css
.toaster .toast { ... }

Example - overwrite info variant

.toaster .toast.toast-info {
  background-color: Your Color;
  border-color: Your Color;
  color: Your Color;
}
.toaster .toast.toast-info .toast-description {
  color: Your Color;
}
.toaster .toast.toast-info .toast-action-button {
  background-color: Your Color;
  color: Your Color;
}
```

Base toast styles:

- Background: var(--primary)
- Border: var(--border)
- Shadow: subtle

Variants:

- .toast-success → green success
- .toast-error → red destructive
- .toast-warning → yellow warning
- .toast-info → neutral/info

Each variant also styles:

- .toast-description → secondary text
- .toast-action-button → inverse button inside toast