open-index/open-npm huggingface dataset:
npm package: @msb_example_shared_ui/shared_ui
Description: Shared UI components for React and React Native
Author: Sascha
Latest version: 1.0.0

# msb-shared

A modern UI component library for React and React Native.

## Installation

```bash
npm install msb-shared
```

## Structure

Components are organized by topic:
- `ui/<topic>/web`: React (web) components
- `ui/<topic>/native`: React Native components
- `ui/<topic>/utils`: Shared utilities and types

## Usage

### Usage (Web & Native)

The library uses conditional exports. You use the same import path for both platforms, and your bundler (Vite, Metro, etc.) will automatically pick the correct version:

```tsx
import { PriceIndicator } from 'msb-shared/ui/price-indicator';

function App() {
  return (
    <PriceIndicator 
      price={1342}
      minPrice={475}
      maxPrice={2181}
    />
  );
}
```

> **Note:** React Native projects still require `react-native-svg` as a peer dependency.

## Components

### PriceIndicator

A horizontal chip showing a red-to-green gradient with a position indicator.

**Props:**
- `value` (required): Position percentage (0-100). 0 = red/expensive, 100 = green/cheap
- `width`: Width in pixels (default: 200)
- `height`: Height in pixels (default: 32)
- `label`: Optional label below the indicator
- `gradientColors`: Custom gradient colors `[left, middle, right]`
- `indicatorColor`: Color of the position marker
- `showValue`: Show percentage on the indicator

## Development

```bash
# Install dependencies
npm install

# Build the library
npm run build

# Run example
cd example && npm install && npm run dev
```

## License

MIT