open-index/open-npm huggingface dataset:
npm package: @shadowfax-tech/segmented-control
Description: Segmented control component (Radix-backed) for SFX UI
Latest version: 0.1.5

# @shadowfax-tech/segmented-control

A segmented control component built with Radix UI for SFX UI library.

## Installation

```bash
npm install @shadowfax-tech/segmented-control
```

## Peer Dependencies

Make sure you have the following peer dependencies installed:

```bash
npm install react @radix-ui/react-toolbar @shadowfax-tech/sfx-ui-theme
```

## Usage

```tsx
import { SegmentedControl } from '@shadowfax-tech/segmented-control';
import '@shadowfax-tech/segmented-control/styles'; // Import styles

const options = [
  { id: 'option1', label: 'Option 1' },
  { id: 'option2', label: 'Option 2' },
  { id: 'option3', label: 'Option 3' },
];

function App() {
  const [value, setValue] = React.useState('option1');

  return (
    <SegmentedControl
      options={options}
      value={value}
      onChange={setValue}
    />
  );
}
```

## Props

- `options`: Array of options with `id`, `label`, and optional `icon`
- `value`: Currently selected option id
- `onChange`: Callback when selection changes
- `className`: Additional CSS class (optional)
- `disabled`: Whether the control is disabled (optional)

## Styles

Import the SCSS file in your application (requires SCSS support):

```scss
@import '@shadowfax-tech/segmented-control/styles';
```

**Note:** This component requires `@shadowfax-tech/sfx-ui-theme` for theming variables. Make sure to import the theme styles first:

```scss
@import '@shadowfax-tech/sfx-ui-theme/src/lib/styles';
@import '@shadowfax-tech/segmented-control/styles';
```