open-index/open-npm huggingface dataset:
npm package: @stellacareaps/mapbox-gl-draw-circle
Description: A module to draw a circle using mapbox-gl-draw
Author: Stella Care ApS
Latest version: 0.0.9

# mapbox-gl-draw-circle

Adds support for drawing and editing a circle feature using [mapbox-gl-draw](https://github.com/mapbox/mapbox-gl-draw)
library.

## Demo

##### Circle mode

![Circle Mode Demo](demo/CircleModeDemo.gif)

##### Drag Circle mode

![Drag Circle Mode Demo](demo/DragCircleDemo.gif)

## Usage

### Installation

```
npm install mapbox-gl-draw-circle
```

```
import {
    CircleMode,
    DragCircleMode,
    DirectMode,
    SimpleSelectMode
} from 'mapbox-gl-draw-circle';


// userProperties has to be enabled
const draw = new MapboxDraw({
  defaultMode: "draw_circle",
  userProperties: true,
  modes: {
    ...MapboxDraw.modes,
    draw_circle  : CircleMode,
    drag_circle  : DragCircleMode,
    direct_select: DirectMode,
    simple_select: SimpleSelectMode
  }
});

// Add this draw object to the map when map loads
map.addControl(draw);
```

The default radius units are in **kilometers** and initial radius is **2km**.

```
// Provide the default radius as an option to CircleMode
draw.changeMode('draw_circle', { initialRadiusInKm: 0.5 });
```

It fires the same events as the mapbox-gl-draw library. For more information follow
this [link](https://github.com/mapbox/mapbox-gl-draw/blob/master/docs/API.md#events).

Sample feature object returned in `draw.create` event

```
{
  "id": "e184898e58feaa5c2c56f20a178ffe2c",
  "type": "Feature",
  "properties": {
    "isCircle": true,
    "center": [
      -0.2472604947478203,
      51.53200220026099
    ],
    "radiusInKm": 2
  },
  "geometry": {
    "coordinates": [], // populated with 64 vertices used to render the circle
    "type": "Polygon"
  }
}
```
npm package: @stellaestudio/design-tokens
Description: Design tokens for the Stellae Design System
Author: Stellae Studio
Latest version: 1.1.0

# Stellae Design Tokens

Welcome to the official design token package for the **Stellae Design System**.
This repository provides all the core tokens used across our components and publishes them via the `@FW/fw-design-tokens` npm package.

---

## 📦 Installation

To add the package to your project, run:

```bash
npm install --save-dev @fw/fw-design-tokens
```

---

## 🚀 How to Use

Once installed, the tokens can be found in various formats under:

```
node_modules/@FW/fw-design-tokens/
├── dist/
│   ├── css/
│   │    ├── stellae-variables--host.css                # CSS custom properties with `:host` selector (uses `rem`)
│   │    └── stellae-variables--root.css                # CSS custom properties with `:root` selector (uses `rem`)
│   └── js/
│   │    ├── stellae-tokens-raw.json                    # Nested JSON format, `stellae-` prefixed
│   │    ├── stellae-tokens.mjs                         # Flat ESM export, `Stellae` prefixed
│   │    ├── stellae-tokens.cjs                         # Flat CommonJS export, `Stellae` prefixed
│   │    ├── stellae-tokens.d.ts                        # TypeScript declaration file
│   │    └── stellae-tokens.json                        # Flat JSON format, `stellae-` prefixed
├── stellae-variables.css                          # :root-level CSS variables, `stellae-` prefixed
├── stellae-variables_css--placeholder.scss    # Sass placeholder selectors (%) with `stellae-` variables
└── stellae-variables.scss                     # Standard Sass variables with `stellae-` prefix
```

---

## 🔍 Explore Locally

To take a closer look at what's included, navigate to:

```bash
./node_modules/@FW/fw-design-tokens/dist/
```

---

## 🛠 Development

To get started with local development:

```bash
npm ci
```

To generate the latest token outputs:

```bash
npm run build
```

---

## 📚 Related Projects

For component implementations that rely on these tokens, check out
👉 [StellaeComponents](https://github.com/stellae-design-systems/stellae-components)