open-index/open-npm huggingface dataset:
npm package: @goliafrs/control
Description: Vue 3 control library with typed exports, standalone styles, and reusable menu primitives.
Author: goliafrs
Latest version: 1.1.1

# @goliafrs/control

Vue 3 control library with typed exports, standalone styles, and reusable menu
primitives.

## Install

```bash
pnpm add @goliafrs/control vue
```

## Usage

Import styles once in the host application:

```ts
import '@goliafrs/control/styles.css'
```

Import from the root entry:

```tsx
import { Button, Input, type ButtonVariant } from '@goliafrs/control'
```

Import from subpaths:

```tsx
import { Select, type SelectOption } from '@goliafrs/control/select'
import { Menu, type MenuItem } from '@goliafrs/control/menu'
```

Use Vue-native `modelValue` contracts:

```tsx
<Input
  ariaLabel="Search"
  label="Search"
  modelValue={searchQuery.value}
  type="text"
  onUpdate:modelValue={nextValue => {
    searchQuery.value = nextValue
  }}
/>
```

```tsx
<Select
  ariaLabel="Sort order"
  label="Sort order"
  modelValue={sortOrder.value}
  options={sortOptions.value}
  onUpdate:modelValue={nextValue => {
    sortOrder.value = nextValue
  }}
/>
```

Use the standalone menu directly:

```tsx
<Menu
  anchorElement={triggerReference.value}
  ariaLabel="Sort menu"
  items={menuItems.value}
  menuPosition={menuPosition.value}
  onClose={() => {
    menuPosition.value = null
  }}
  onSelect={itemId => {
    selectedItemId.value = itemId
  }}
/>
```

## Styles and themes

The package ships:

- `@goliafrs/control/styles.css`
- `@goliafrs/control/styles/tokens.scss`
- `@goliafrs/control/styles/mixins.scss`

Override CSS variables in the host application:

```scss
:root {
  --control-font-family: 'Rubik', sans-serif;
  --control-button-primary-background: rgb(59 130 246 / 100%);
}
```

Reuse raw Sass mixins and tokens:

```scss
@use '@goliafrs/control/styles/tokens.scss' as controlTokens;
@use '@goliafrs/control/styles/mixins.scss' as controlMixins;

:root[data-theme='light'] {
  @include controlTokens.light-theme-tokens;
}

.custom-toolbar {
  @include controlMixins.section-inline-padding;
}
```
npm package: @goliafrs/stylelint-config
Description: Stylelint configuration (SCSS + order).
Latest version: 1.1.0

# @goliafrs/stylelint-config

![NPM Version](https://img.shields.io/npm/v/@goliafrs/stylelint-config.svg) ![Downloads Total](https://img.shields.io/npm/dt/@goliafrs/stylelint-config.svg) ![Downloads Week](https://img.shields.io/npm/dw/@goliafrs/stylelint-config.svg)

## Installation

```bash
npm install --save-dev stylelint @goliafrs/stylelint-config
```

```bash
pnpm add --save-dev stylelint @goliafrs/stylelint-config
```

> To work with this package, you need to install stylelint at least as a dev dependency.

## Available Configs

| Name      | Purpose                                                   |
| --------- | --------------------------------------------------------- |
| `default` | SCSS standard config + property order via stylelint-order |

## Usage

Create a `stylelint.config.js` file in the root of your project and add the following:

### SCSS projects

```js
// stylelint.config.js
export default {
  extends: [ '@goliafrs/stylelint-config' ],
}
```

### With overrides

```js
// stylelint.config.js
export default {
  extends: [ '@goliafrs/stylelint-config' ],
  rules: {
    'color-hex-length': 'short'
  }
}
```

### Force SCSS syntax (optional)

```js
// stylelint.config.js
export default {
  extends: [ '@goliafrs/stylelint-config' ],
  customSyntax: 'postcss-scss'
}
```

## sideEffects

`"sideEffects": false` in `package.json` enables better tree-shaking.

## Engines

Supported: Node >= 18.18.0, Stylelint >= 16.

## Usable commands

You can use the following commands to lint your styles:

```json
{
  "scripts": {
    "lint:css": "stylelint \"src/**/*.{css,scss}\"",
    "lint:css:fix": "stylelint \"src/**/*.{css,scss}\" --fix"
  }
}
```

```bash
npm run lint:css
npm run lint:css:fix
```

- `lint:css`: Lint your CSS/SCSS
- `lint:css:fix`: Lint and fix your CSS/SCSS