@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 (
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';
``