open-index/open-npm huggingface dataset:
npm package: @sofya-ds/react
Description: Sofya React design system with official brand tokens, provider and UI components.
Latest version: 1.5.1

# @sofya-ds/react

React design system package for Sofya.

## Install

```bash
pnpm add @sofya-ds/react
```

Se voce tambem quiser consumir os tokens diretamente no app, instale o pacote complementar:

```bash
pnpm add @sofya-ds/tokens
```

## Usage

```tsx
import "@sofya-ds/react/styles.css";
import { Button, Logo, SofyaProvider, Text } from "@sofya-ds/react";

export function App() {
  return (
    <SofyaProvider>
      <Logo variant="mono" size={52} monoColor="#08194D" />
      <Button>Entrar</Button>
      <Text size="h2" variant="gradient">
        Titulo com gradiente oficial da marca
      </Text>
    </SofyaProvider>
  );
}
```

## Includes

- Components like `Button`, `Badge`, `Card`, `Checkbox`, `Icon`, `Input`, `InputOTP`, `Link`, `Logo`, `Surface` and `Text`
- `SofyaProvider` for theme application
- Distributed stylesheet at `@sofya-ds/react/styles.css`
npm package: @sofya-ds/tokens
Description: Official Sofya design tokens, theme presets and semantic color helpers.
Latest version: 1.5.1

# @sofya-ds/tokens

Official theme tokens and presets for Sofya.

## Install

```bash
pnpm add @sofya-ds/tokens
```

## Usage

```ts
import {
  gradientToCss,
  sofyaColorPalette,
  sofyaSemanticColorHex,
  themePresets
} from "@sofya-ds/tokens";

const primary = sofyaSemanticColorHex.primary;
const gradient = gradientToCss(sofyaColorPalette.gradients.primary);
const preset = themePresets.sofya;
```

## Includes

- Official palette groups
- Semantic color map
- Theme presets
- Gradient helpers