open-index/open-npm huggingface dataset:
npm package: @koo-labs/media-picker
Description: A headless, composable React component library for media selection with Pexels integration
Author: Larry Koo
Latest version: 0.0.1-rc

<div align="center">

# @koo-labs/media-picker

**Drop-in media picker for AIGC apps. Pexels-powered. Zero config.**

[![npm](https://img.shields.io/npm/v/@koo-labs/media-picker.svg?style=flat-square)](https://www.npmjs.com/package/@koo-labs/media-picker)
[![bundle](https://img.shields.io/bundlephobia/minzip/@koo-labs/media-picker?style=flat-square)](https://bundlephobia.com/package/@koo-labs/media-picker)
[![license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](LICENSE)

[Docs](https://media-picker-nine.vercel.app) · [Demo](https://media-picker-nine.vercel.app) · [Issues](https://github.com/larrykoo711/media-picker/issues)

</div>

---

![Screenshot](./media-picker-screenshot.png)

## Install

```bash
pnpm add @koo-labs/media-picker
```

## Usage

```tsx
import { MediaPickerButton } from '@koo-labs/media-picker';
import '@koo-labs/media-picker/styles.css';

<MediaPickerButton onSelect={(media) => console.log(media)}>
  Pick Media
</MediaPickerButton>
```

Done.

## API

### `<MediaPickerButton />`

```tsx
<MediaPickerButton
  onSelect={(media) => {}}   // Required
  multiple={false}           // Multi-select
  maxSelection={10}          // Max items
  defaultMediaType="photos"  // 'photos' | 'videos'
>
  Button Text
</MediaPickerButton>
```

### `<MediaPicker />` (Controlled)

```tsx
const [open, setOpen] = useState(false);

<MediaPicker
  open={open}
  onOpenChange={setOpen}
  onSelect={(media) => setOpen(false)}
/>
```

## Production Setup

> ⚠️ **Never expose API keys in client code.**

```tsx
// Use proxy mode in production
import { configurePexelsClient } from '@koo-labs/media-picker';

configurePexelsClient({
  proxyUrl: '/api/pexels',  // Your backend proxy
});
```

<details>
<summary>Next.js proxy example</summary>

```ts
// app/api/pexels/[...path]/route.ts
import { NextRequest, NextResponse } from 'next/server';

const PEXELS_API_KEY = process.env.PEXELS_API_KEY!;

export async function GET(
  request: NextRequest,
  { params }: { params: { path: string[] } }
) {
  const path = params.path.join('/');
  const url = `https://api.pexels.com/${path}?${request.nextUrl.searchParams}`;

  const res = await fetch(url, {
    headers: { Authorization: PEXELS_API_KEY },
  });

  return NextResponse.json(await res.json());
}
```

</details>

## Theming

```css
:root {
  --mp-primary: #3b82f6;
  --mp-base-100: #ffffff;
  --mp-base-content: #1e293b;
}
```

Dark mode: add `class="dark"` to root.

## License

MIT

</div>
npm package: @koobawuah/ts_streak-counter
Description: A streak counter for the browser, inspired by Duolingo - written in TypeScript and meant for the browser (uses 'localStorage').
Latest version: 0.0.2

# `@koobawuah/ts_streak-counter` - a basic streak counter 

A streak counter for the browser, inspired by Duolingo - written in TypeScript and meant for the browser (uses 'localStorage').

## Install 

```shell
npm install @koobawuah/ts_streak-counter
```

## Usage 

```
import {streakCounter} from '@koobawuah/ts_streak-counter'

const today = new Date() 
const streak - streakCounter(localStorage, today)
// streak returns an object:
// {
//      currentCount: 1,
//      lastLoginDate: "11/11/2022",
//      startDate: "11/11/2022",
// }
```

[![Edit streak-counter (ts-course) (forked)](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/streak-counter-ts-course-forked-78j2m3?fontsize=14&hidenavigation=1&theme=dark)
npm package: @koober/commitlint-config
Description: Commitlint configuration presets
Author: Julien Polo
Latest version: 1.0.11

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=# Koober Commitlint configuration _(${name})_) -->
# Koober Commitlint configuration _(@koober/commitlint-config)_
<!-- AUTO-GENERATED-CONTENT:END -->

[![NPM Version][package-version-svg]][package-url]
[![License][license-image]][license-url]

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=> ${description}&unknownTxt= ) -->
> Commitlint configuration presets
<!-- AUTO-GENERATED-CONTENT:END -->

## Installation

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=```console\nnpm install --save-dev ${name} @commitlint/cli\n```) -->
```console
npm install --save-dev @koober/commitlint-config @commitlint/cli
```
<!-- AUTO-GENERATED-CONTENT:END -->

## Usage

In the `package.json` of your project

```json
{
    "commitlint": {
        "extends": ["@koober/commitlint-config"],
        "rules": {}
    },
    "husky": {
        "hooks": {
            "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
        }  
    }
}
```

## License
<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[${license}][license-url] © ${author}) -->
[MIT][license-url] © Julien Polo <julien.polo@koober.com>
<!-- AUTO-GENERATED-CONTENT:END -->

<!-- VARIABLES -->

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[package-version-svg]: https://img.shields.io/npm/v/${name}.svg?style=flat-square) -->
[package-version-svg]: https://img.shields.io/npm/v/@koober/commitlint-config.svg?style=flat-square
<!-- AUTO-GENERATED-CONTENT:END -->
<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[package-url]: https://www.npmjs.com/package/${name}) -->
[package-url]: https://www.npmjs.com/package/@koober/commitlint-config
<!-- AUTO-GENERATED-CONTENT:END -->
<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[license-image]: https://img.shields.io/badge/license-${license}-green.svg?style=flat-square) -->
[license-image]: https://img.shields.io/badge/license-MIT-green.svg?style=flat-square
<!-- AUTO-GENERATED-CONTENT:END -->
[license-url]: ../../LICENSE
npm package: @koober/database-client
Description: Database client library
Author: Julien Polo
Latest version: 1.0.0-rc.54

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=# Generic Database client _(${name})_) -->
# Generic Database client _(@koober/database-client)_
<!-- AUTO-GENERATED-CONTENT:END -->

[![NPM Version][package-version-svg]][package-url]
[![License][license-image]][license-url]

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=> ${description}&unknownTxt= ) -->
> Database client library
<!-- AUTO-GENERATED-CONTENT:END -->

## Installation

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=```sh\nnpm install ${name}\n```) -->
```sh
npm install @koober/database-client
```
<!-- AUTO-GENERATED-CONTENT:END -->

## Usage

<!-- AUTO-GENERATED-CONTENT:START (CODE:src=./example/usage.ts) -->
<!-- The below code snippet is automatically added from ./example/usage.ts -->
```ts
import { SQL, executeQuery, DatabaseClient } from '@koober/database-client';
import { runTask, Task } from '@koober/std';

interface User {
  id: number;
  name: string;
}

export function getUserById(client: DatabaseClient, id: User['id']) {
  const sqlStatement = SQL`SELECT id, name FROM user WHERE id=${id}`;
  const task = executeQuery(client, sqlStatement);

  return Task.map(task, (rows) => {
    return Array.isArray(rows) ? (rows[0] as User) : undefined;
  });
}

export async function main(): Promise<void> {
  const client: DatabaseClient = {
    databaseType: 'mysql',
    database: '',
    user: '',
  };

  const response = getUserById(client, 123);
  console.log(await runTask(response));
}
```
<!-- AUTO-GENERATED-CONTENT:END -->

## License
<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[${license}][license-url] © ${author}) -->
[MIT][license-url] © Julien Polo <julien.polo@koober.com>
<!-- AUTO-GENERATED-CONTENT:END -->

<!-- VARIABLES -->

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[package-version-svg]: https://img.shields.io/npm/v/${name}.svg?style=flat-square) -->
[package-version-svg]: https://img.shields.io/npm/v/@koober/database-client.svg?style=flat-square
<!-- AUTO-GENERATED-CONTENT:END -->
<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[package-url]: https://www.npmjs.com/package/${name}) -->
[package-url]: https://www.npmjs.com/package/@koober/database-client
<!-- AUTO-GENERATED-CONTENT:END -->
<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[license-image]: https://img.shields.io/badge/license-${license}-green.svg?style=flat-square) -->
[license-image]: https://img.shields.io/badge/license-MIT-green.svg?style=flat-square
<!-- AUTO-GENERATED-CONTENT:END -->
[license-url]: ../../LICENSE
npm package: @koober/eslint-config
Description: ESLint configuration presets
Author: Julien Polo
Latest version: 5.12.0

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=# Koober ESLint configuration _(${name})_) -->
# Koober ESLint configuration _(@koober/eslint-config)_
<!-- AUTO-GENERATED-CONTENT:END -->

[![NPM Version][package-version-svg]][package-url]
[![License][license-image]][license-url]

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=> ${description}&unknownTxt= ) -->
> ESLint configuration presets
<!-- AUTO-GENERATED-CONTENT:END -->

## Installation

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=```console\nnpm install --save-dev ${name}\n```) -->
```console
npm install --save-dev @koober/eslint-config
```
<!-- AUTO-GENERATED-CONTENT:END -->

## Usage

### Default JS/TS project

For most kind of project, just edit `eslintrc.json` and add default configuration

```js
{
  "extends": [
    "@koober/eslint-config"
  ]
}
```

**Features :**

- `ES` and `TS` validation
- `Prettier` formatting
- `JSX` and `React` syntax validation
- `Jest` tests

### Custom project

For most kind of project, just edit `eslintrc.json` and cherry pick only configurations

```js
{
  "root": true,
  "extends": [
    "@koober/eslint-config/es",
    "@koober/eslint-config/functional",
    "@koober/eslint-config/jest",
    "@koober/eslint-config/json",
    "@koober/eslint-config/react",
    "@koober/eslint-config/ts",
    // include more configurations here
  ]
  //...
}
```

**Available configurations :**

- `@koober/eslint-config/es`: for ECMA Script (ES) files
- `@koober/eslint-config/jest`: for jest environment tests
- `@koober/eslint-config/functional`: for pure functional programming
- `@koober/eslint-config/react`: for react capability
- `@koober/eslint-config/ts`: for typescript files

## License
<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[${license}][license-url] © ${author}) -->
[MIT][license-url] © Julien Polo <julien.polo@koober.com>
<!-- AUTO-GENERATED-CONTENT:END -->

<!-- VARIABLES -->

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[package-version-svg]: https://img.shields.io/npm/v/${name}.svg?style=flat-square) -->
[package-version-svg]: https://img.shields.io/npm/v/@koober/eslint-config.svg?style=flat-square
<!-- AUTO-GENERATED-CONTENT:END -->
<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[package-url]: https://www.npmjs.com/package/${name}) -->
[package-url]: https://www.npmjs.com/package/@koober/eslint-config
<!-- AUTO-GENERATED-CONTENT:END -->
<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[license-image]: https://img.shields.io/badge/license-${license}-green.svg?style=flat-square) -->
[license-image]: https://img.shields.io/badge/license-MIT-green.svg?style=flat-square
<!-- AUTO-GENERATED-CONTENT:END -->
[license-url]: ../../LICENSE
npm package: @koober/log
Description: Logging library
Author: Julien Polo
Latest version: 1.0.0-rc.54

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=# Koober Logging Library _(${name})_) -->
# Koober Logging Library _(@koober/log)_
<!-- AUTO-GENERATED-CONTENT:END -->

[![NPM Version][package-version-svg]][package-url]
[![License][license-image]][license-url]

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=> ${description}&unknownTxt= ) -->
> Logging library
<!-- AUTO-GENERATED-CONTENT:END -->

## Installation

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=```sh\nnpm install ${name}\n```) -->
```sh
npm install @koober/log
```
<!-- AUTO-GENERATED-CONTENT:END -->

## Usage

<!-- AUTO-GENERATED-CONTENT:START (CODE:src=./example/usage.ts) -->
<!-- The below code snippet is automatically added from ./example/usage.ts -->
```ts
import { log, debug, critical } from '@koober/log';

// Example of data to log
const foo = { bar: 'baz' };

log(critical`This is really bad ${{ foo }}`); // > This is really bad { bar: 'baz' }
log(debug`Some Debug ${{ hey: 'debug info' }}`); // > This is really bad "debug info"
```
<!-- AUTO-GENERATED-CONTENT:END -->

## License
<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[${license}][license-url] © ${author}) -->
[MIT][license-url] © Julien Polo <julien.polo@koober.com>
<!-- AUTO-GENERATED-CONTENT:END -->

<!-- VARIABLES -->

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[package-version-svg]: https://img.shields.io/npm/v/${name}.svg?style=flat-square) -->
[package-version-svg]: https://img.shields.io/npm/v/@koober/log.svg?style=flat-square
<!-- AUTO-GENERATED-CONTENT:END -->
<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[package-url]: https://www.npmjs.com/package/${name}) -->
[package-url]: https://www.npmjs.com/package/@koober/log
<!-- AUTO-GENERATED-CONTENT:END -->
<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[license-image]: https://img.shields.io/badge/license-${license}-green.svg?style=flat-square) -->
[license-image]: https://img.shields.io/badge/license-MIT-green.svg?style=flat-square
<!-- AUTO-GENERATED-CONTENT:END -->
[license-url]: ../../LICENSE
npm package: @koober/mrm-preset
Description: Mrm configuration presets
Author: Lucien Boudy
Latest version: 1.30.0

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=# Koober Mrm Preset _(${name})_) -->
# Koober Mrm Preset _(@koober/mrm-preset)_
<!-- AUTO-GENERATED-CONTENT:END -->

[![NPM Version][package-version-svg]][package-url]
[![License][license-image]][license-url]

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=> ${description}&unknownTxt= ) -->
> Mrm configuration presets
<!-- AUTO-GENERATED-CONTENT:END -->

## Getting Started - App Installation

## Usage

### 1. Install Preset

Initialize your project using this command :

```bash
# from the root of your project
npx -p mrm -p @koober/mrm-preset mrm bootstrap --preset @koober/mrm-preset
```

This will install in `package.json` the npm scripts

- `mrm` : alias to mrm using `@koober/mrm-preset` by default

- `configure` : runs `npm run mrm -- configure`

### 2. Configure project

After initialization and after any upgrade of `@koober/mrm-preset`

```bash
# from the root of your project
npm run configure
```

## License
<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[${license}][license-url] © ${author}) -->
[MIT][license-url] © Lucien Boudy <lucien.boudy@koober.com>
<!-- AUTO-GENERATED-CONTENT:END -->

<!-- VARIABLES -->

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[package-version-svg]: https://img.shields.io/npm/v/${name}.svg?style=flat-square) -->
[package-version-svg]: https://img.shields.io/npm/v/@koober/mrm-preset.svg?style=flat-square
<!-- AUTO-GENERATED-CONTENT:END -->
<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[package-url]: https://www.npmjs.com/package/${name}) -->
[package-url]: https://www.npmjs.com/package/@koober/mrm-preset
<!-- AUTO-GENERATED-CONTENT:END -->
<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[license-image]: https://img.shields.io/badge/license-${license}-green.svg?style=flat-square) -->
[license-image]: https://img.shields.io/badge/license-MIT-green.svg?style=flat-square
<!-- AUTO-GENERATED-CONTENT:END -->
[license-url]: ../../LICENSE
npm package: @koober/plop-doc
Description: PlopJS plugin for documentation
Author: Julien Polo
Latest version: 1.0.4

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=# Plop Documentation plugin _(${name})_) -->
# Plop Documentation plugin _(@koober/plop-doc)_
<!-- AUTO-GENERATED-CONTENT:END -->

[![NPM Version][package-version-svg]][package-url]
[![License][license-image]][license-url]

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=> ${description}&unknownTxt= ) -->
> PlopJS plugin for documentation
<!-- AUTO-GENERATED-CONTENT:END -->

## Installation

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=```console\nnpm install --save-dev ${name}\n```) -->
```console
npm install --save-dev @koober/plop-doc
```
<!-- AUTO-GENERATED-CONTENT:END -->

## Usage

In the `plopfile.js` of your project

<!-- AUTO-GENERATED-CONTENT:START (CODE:src=./doc/usage.js) -->
<!-- The below code snippet is automatically added from ./doc/usage.js -->
```js
// @ts-check
const { PlopPlugin } = require('@koober/plop-plugin');
const { default: PlopDocument, defaultTemplates } = require('@koober/plop-doc');

module.exports = (
  /** @type {import('@koober/plop-plugin').PlopModule} */
  plop
) => {
  // apply
  PlopPlugin.apply(
    plop,
    // Combine all plugins
    PlopPlugin.compose(
      // ...other plugins
      PlopDocument(plop, {
        templates: defaultTemplates,
      })
      // ...other plugins
    )
  );
};
```
<!-- AUTO-GENERATED-CONTENT:END -->

## License
<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[${license}][license-url] © ${author}) -->
[MIT][license-url] © Julien Polo <julien.polo@koober.com>
<!-- AUTO-GENERATED-CONTENT:END -->

<!-- VARIABLES -->

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[package-version-svg]: https://img.shields.io/npm/v/${name}.svg?style=flat-square) -->
[package-version-svg]: https://img.shields.io/npm/v/@koober/plop-doc.svg?style=flat-square
<!-- AUTO-GENERATED-CONTENT:END -->
<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[package-url]: https://www.npmjs.com/package/${name}) -->
[package-url]: https://www.npmjs.com/package/@koober/plop-doc
<!-- AUTO-GENERATED-CONTENT:END -->
<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[license-image]: https://img.shields.io/badge/license-${license}-green.svg?style=flat-square) -->
[license-image]: https://img.shields.io/badge/license-MIT-green.svg?style=flat-square
<!-- AUTO-GENERATED-CONTENT:END -->
[license-url]: ../../LICENSE
npm package: @koober/plop-plugin
Description: PlopJS generic plugin interface
Author: Julien Polo
Latest version: 1.0.4

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=# Plop Documentation plugin _(${name})_) -->
# Plop Documentation plugin _(@koober/plop-plugin)_
<!-- AUTO-GENERATED-CONTENT:END -->

[![NPM Version][package-version-svg]][package-url]
[![License][license-image]][license-url]

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=> ${description}&unknownTxt= ) -->
> PlopJS generic plugin interface
<!-- AUTO-GENERATED-CONTENT:END -->

## Installation

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=```console\nnpm install --save-dev ${name}\n```) -->
```console
npm install --save-dev @koober/plop-plugin
```
<!-- AUTO-GENERATED-CONTENT:END -->

## Usage

In the `plopfile.js` of your project

<!-- AUTO-GENERATED-CONTENT:START (CODE:src=./doc/usage.js) -->
<!-- The below code snippet is automatically added from ./doc/usage.js -->
```js
// @ts-check
// eslint-disable-next-line import/no-extraneous-dependencies
const { PlopPlugin } = require('@koober/plop-plugin');
const PlopDoc = require('@koober/plop-doc');

module.exports = (
  /** @type {import('@koober/plop-plugin').PlopModule} */
  plop
) => {
  // apply
  PlopPlugin.apply(
    plop,
    // Combine all plugins
    PlopPlugin.compose(
      PlopDoc.default(plop, {
        templates: {},
      }),
      // Custom plugin
      PlopPlugin.merge({
        generators: {
          // Put plugin here
        },
        helpers: {},
      })
    )
  );
};
```
<!-- AUTO-GENERATED-CONTENT:END -->

## License
<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[${license}][license-url] © ${author}) -->
[MIT][license-url] © Julien Polo <julien.polo@koober.com>
<!-- AUTO-GENERATED-CONTENT:END -->

<!-- VARIABLES -->

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[package-version-svg]: https://img.shields.io/npm/v/${name}.svg?style=flat-square) -->
[package-version-svg]: https://img.shields.io/npm/v/@koober/plop-plugin.svg?style=flat-square
<!-- AUTO-GENERATED-CONTENT:END -->
<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[package-url]: https://www.npmjs.com/package/${name}) -->
[package-url]: https://www.npmjs.com/package/@koober/plop-plugin
<!-- AUTO-GENERATED-CONTENT:END -->
<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[license-image]: https://img.shields.io/badge/license-${license}-green.svg?style=flat-square) -->
[license-image]: https://img.shields.io/badge/license-MIT-green.svg?style=flat-square
<!-- AUTO-GENERATED-CONTENT:END -->
[license-url]: ../../LICENSE
npm package: @koober/plop-react-native-appicon
Description: PlopJS plugin for generating app icon
Author: Julien Polo
Latest version: 1.0.4

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=# Plop Documentation plugin _(${name})_) -->
# Plop Documentation plugin _(@koober/plop-react-native-appicon)_
<!-- AUTO-GENERATED-CONTENT:END -->

[![NPM Version][package-version-svg]][package-url]
[![License][license-image]][license-url]

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=> ${description}&unknownTxt= ) -->
> PlopJS plugin for generating app icon
<!-- AUTO-GENERATED-CONTENT:END -->

## Installation

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=```console\nnpm install --save-dev ${name}\n```) -->
```console
npm install --save-dev @koober/plop-react-native-appicon
```
<!-- AUTO-GENERATED-CONTENT:END -->

## Usage

In the `plopfile.js` of your project

<!-- AUTO-GENERATED-CONTENT:START (CODE:src=./doc/usage.js) -->
<!-- The below code snippet is automatically added from ./doc/usage.js -->
```js
// @ts-check
const { PlopPlugin } = require('@koober/plop-plugin');
const PlopRNIcon = require('@koober/plop-react-native-appicon');

module.exports = (
  /** @type {import('@koober/plop-plugin').PlopModule} */
  plop
) => {
  // apply
  PlopPlugin.apply(
    plop,
    // Combine all plugins
    PlopPlugin.compose(
      // ...other plugins
      PlopRNIcon.default(plop, {
        projectName: 'RNAppExample',
      })
      // ...other plugins
    )
  );
};
```
<!-- AUTO-GENERATED-CONTENT:END -->

## License
<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[${license}][license-url] © ${author}) -->
[MIT][license-url] © Julien Polo <julien.polo@koober.com>
<!-- AUTO-GENERATED-CONTENT:END -->

<!-- VARIABLES -->

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[package-version-svg]: https://img.shields.io/npm/v/${name}.svg?style=flat-square) -->
[package-version-svg]: https://img.shields.io/npm/v/@koober/plop-react-native-appicon.svg?style=flat-square
<!-- AUTO-GENERATED-CONTENT:END -->
<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[package-url]: https://www.npmjs.com/package/${name}) -->
[package-url]: https://www.npmjs.com/package/@koober/plop-react-native-appicon
<!-- AUTO-GENERATED-CONTENT:END -->
<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[license-image]: https://img.shields.io/badge/license-${license}-green.svg?style=flat-square) -->
[license-image]: https://img.shields.io/badge/license-MIT-green.svg?style=flat-square
<!-- AUTO-GENERATED-CONTENT:END -->
[license-url]: ../../LICENSE
npm package: @koober/react-native-markup-view
Description: [DRAFT] A react-native view that can display selectable text from a markup language like HTML.
Author: Lucien Boudy
Latest version: 1.3.5

# react-native-markup-view

**\[DRAFT\]** A react-native view that can display selectable text from a markup language like HTML.

## Installation

```sh
npm install @koober/react-native-markup-view react-native-webview
cd ios && pod install
```

## Usage

```js
import MarkupView from '@koober/react-native-markup-view';

// ...

export default function App() {
  return (
    <MarkupView
      source={{
          encoding: 'text/html',
          content: `<h1>Hello World!</h1>`
        }}
    />
  );
}
```

## License

MIT
npm package: @koober/renovate-config
Description: Renovate configuration presets
Author: Lucien Boudy
Latest version: 2.17.1

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=# Koober Renovate configuration _(${name})_) -->
# Koober Renovate configuration _(@koober/renovate-config)_
<!-- AUTO-GENERATED-CONTENT:END -->

[![NPM Version][package-version-svg]][package-url]
[![License][license-image]][license-url]

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=> ${description}&unknownTxt= ) -->
> Renovate configuration presets
<!-- AUTO-GENERATED-CONTENT:END -->

## Getting Started - App Installation

* [for GitHub](https://docs.renovatebot.com/install-github-app/)
* [for GitLab](https://docs.renovatebot.com/install-gitlab-app/)
  * go to [Renovate Dashboard](https://app.renovatebot.com/dashboard) to add your project,
  * accept Renovate Bot PR

## Usage

### Renovate Configuration

`renovate.json`

**JavaScript application** (dashboard, static website generator):

```json
{
  "extends": [
    "@koober/renovate-config:application"
  ]
}
```

**JavaScript library** :

```json
{
  "extends": [
    "@koober/renovate-config:library"
  ]
}
```

**Random core team assignees** :

```json
{
  "extends": [
    ..., "@koober/renovate-config:teamAssignees"
  ]
}
```

  > [Read the documentation](https://docs.renovatebot.com/configuration-options/) to improve your configuration.

## License
<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[${license}][license-url] © ${author}) -->
[MIT][license-url] © Lucien Boudy <lucien.boudy@koober.com>
<!-- AUTO-GENERATED-CONTENT:END -->

<!-- VARIABLES -->

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[package-version-svg]: https://img.shields.io/npm/v/${name}.svg?style=flat-square) -->
[package-version-svg]: https://img.shields.io/npm/v/@koober/renovate-config.svg?style=flat-square
<!-- AUTO-GENERATED-CONTENT:END -->
<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[package-url]: https://www.npmjs.com/package/${name}) -->
[package-url]: https://www.npmjs.com/package/@koober/renovate-config
<!-- AUTO-GENERATED-CONTENT:END -->
<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[license-image]: https://img.shields.io/badge/license-${license}-green.svg?style=flat-square) -->
[license-image]: https://img.shields.io/badge/license-MIT-green.svg?style=flat-square
<!-- AUTO-GENERATED-CONTENT:END -->
[license-url]: ../../LICENSE
npm package: @koober/ts-config
Description: Typescript compiler configuration presets
Author: Julien Polo
Latest version: 1.4.1

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=# Koober Typescript configuration _(${name})_) -->
# Koober Typescript configuration _(@koober/ts-config)_
<!-- AUTO-GENERATED-CONTENT:END -->

[![NPM Version][package-version-svg]][package-url]
[![License][license-image]][license-url]

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=> ${description}&unknownTxt= ) -->
> Typescript compiler configuration presets
<!-- AUTO-GENERATED-CONTENT:END -->

## Installation

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=```console\nnpm install --save-dev ${name}\n```) -->
```console
npm install --save-dev @koober/ts-config
```
<!-- AUTO-GENERATED-CONTENT:END -->

## Usage

In the `tsconfig.json` for your project

```json
{
    "extends": "@koober/ts-config"
}
```

## License
<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[${license}][license-url] © ${author}) -->
[MIT][license-url] © Julien Polo <julien.polo@koober.com>
<!-- AUTO-GENERATED-CONTENT:END -->

<!-- VARIABLES -->

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[package-version-svg]: https://img.shields.io/npm/v/${name}.svg?style=flat-square) -->
[package-version-svg]: https://img.shields.io/npm/v/@koober/ts-config.svg?style=flat-square
<!-- AUTO-GENERATED-CONTENT:END -->
<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[package-url]: https://www.npmjs.com/package/${name}) -->
[package-url]: https://www.npmjs.com/package/@koober/ts-config
<!-- AUTO-GENERATED-CONTENT:END -->
<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[license-image]: https://img.shields.io/badge/license-${license}-green.svg?style=flat-square) -->
[license-image]: https://img.shields.io/badge/license-MIT-green.svg?style=flat-square
<!-- AUTO-GENERATED-CONTENT:END -->
[license-url]: ../../LICENSE
npm package: @koober/uuid
Description: UUID generator
Author: Julien Polo
Latest version: 1.0.0-rc.54

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=# UUID Generator library _(${name})_) -->
# UUID Generator library _(@koober/uuid)_
<!-- AUTO-GENERATED-CONTENT:END -->

[![NPM Version][package-version-svg]][package-url]
[![License][license-image]][license-url]

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=> ${description}&unknownTxt= ) -->
> UUID generator
<!-- AUTO-GENERATED-CONTENT:END -->

## Installation

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=```sh\nnpm install ${name}\n```) -->
```sh
npm install @koober/uuid
```
<!-- AUTO-GENERATED-CONTENT:END -->

## Usage

<!-- AUTO-GENERATED-CONTENT:START (CODE:src=./example/usage.ts) -->
<!-- The below code snippet is automatically added from ./example/usage.ts -->
```ts
import { randomUUID } from '@koober/uuid';
import { runTask, Task } from '@koober/std';

function createUser(name: string) {
  return Task.map(randomUUID, (uuid) => ({
    id: uuid,
    name,
  }));
}

export function main(): void {
  const userTask = createUser('John Doe');
  console.log(runTask(userTask)); // > Result.Ok({ id: 'XXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXX', name: 'John Doe' })
}
```
<!-- AUTO-GENERATED-CONTENT:END -->

## License
<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[${license}][license-url] © ${author}) -->
[MIT][license-url] © Julien Polo <julien.polo@koober.com>
<!-- AUTO-GENERATED-CONTENT:END -->

<!-- VARIABLES -->

<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[package-version-svg]: https://img.shields.io/npm/v/${name}.svg?style=flat-square) -->
[package-version-svg]: https://img.shields.io/npm/v/@koober/uuid.svg?style=flat-square
<!-- AUTO-GENERATED-CONTENT:END -->
<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[package-url]: https://www.npmjs.com/package/${name}) -->
[package-url]: https://www.npmjs.com/package/@koober/uuid
<!-- AUTO-GENERATED-CONTENT:END -->
<!-- AUTO-GENERATED-CONTENT:START (PKGJSON:template=[license-image]: https://img.shields.io/badge/license-${license}-green.svg?style=flat-square) -->
[license-image]: https://img.shields.io/badge/license-MIT-green.svg?style=flat-square
<!-- AUTO-GENERATED-CONTENT:END -->
[license-url]: ../../LICENSE
npm package: @koobiq-react/checkbox
Description: Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.
Latest version: 1.0.0

# @koobiq-react/checkbox

Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.

## Installation

```sh
yarn add @koobiq-react/checkbox
# or
npm i @koobiq-react/checkbox
```
npm package: @koobiq/cli
Description: Koobiq Terminal Interface
Latest version: 19.5.0

# Koobiq Terminal Interface

🚧 WIP. This feature is not stable yet. 🚧

# Usage

```bash
npm i --save-dev @koobiq/cli
```

## `Release` command

### stage-commit

```bash
npx koobiq-cli stage-commit
```

### Publish Gitlab CI

```bash
npx koobiq-cli publish-ci-gitlab
```

## Use npm pack to test packages locally

Build Package

```bash
npm run build:cli
```

Pack your artifacts

```bash
cd dist/cli
npm pack --pack-destination ~
```

Point package.json to file

```bash
"dependencies": {
  "@koobiq/cli": "file:~/koobiq-cli-16.0.0.tgz"
}

npm install
```
npm package: @koobiq/design-tokens
Description: Design tokens
Latest version: 3.17.2

# Koobiq Design Tokens

## Overview

Design tokens are special variables used to maintain a scalable
visual system for UI development and brand consistency.
Koobiq design tokens store the visual design attributes that define the
visual language, including color, typography, and spacing we use.

Design tokens are key-value pairs. For example:

```
Key: value;
$card-dark-success-background: #276211;
```

- The key name defines the usage or how to apply the value to a specific context, such as using text on a light background
- The key stores visual design attributes
- The key replaces hard-coded values, such as hex values for color or pixel values for spacing
npm package: @koobiq/icons
Description: Koobiq icons
Author: Koobiq Team
Latest version: 11.5.0

# Koobiq Icons

# How to use package

```
npm i @koobiq/icons
```

# Publish new version

## Step 1. Prepare and environment

Install dependencies by running:

```
yarn install
```

## Step 2. Draw an icon

1. Draw your icon in [Koobiq Icons](https://www.figma.com/design/72HEcN92QnW9IQSXzmIYZX/Koobiq-Icons?m=auto&node-id=1320-21123&t=MZ7yMcUekVdv0doO-1) figma file.
2. Make icons contains the only single outlined and flattened path with name `shape` (second-color path with name `shape-2`).
3. Using a Fill Rule Editor plugin, set shapes' fill rule to Non-zero fill. Make sure icon is rendered correctly.
4. Run flatten for shapes one more time (there is a bug in Figma).

## Step 3. Export icons from figma

Create a file with name `.env` and add there your Figma access token.

To export your icons (SVG) from Figma run the command:

```
yarn run figma:sync
```

## Step 4.

Change `mapping.json`:

- Add an entry into `mapping.json` with a new codepoint keys.
- Edit the name of an icon in the `mapping.json` in case of icon rename

Commit SVG files `mapping.json` and push all changes to git.

## Step 5.

Run stage commit script to create a new release tag.

```
yarn run stage:commit
```

Use semver for version naming. So increment major (first) version number if any of these changes were made:

- Any icon name was changed (breaking changes for front-end developers)
- Any icon codepoint was changed (breaking changes for tech writers)
- Significant changes in icon metaphor (breaking changes for all)

# SVG Color Zones Guide

## Overview

This guide explains how to structure SVGs for dynamic styling via CSS, allowing different parts to be colored separately using `fill` and `color`.

## How It Works

- **Primary Zone**: No `fill` attribute.
- **Secondary Zone(s)**: `fill="currentColor"`.

CSS styling:

```css
svg {
    fill: #8f99aa; /* Primary zone */
    color: #00ff00; /* Secondary zone(s) */
}
```

For details, see [CSS-Tricks](https://css-tricks.com/lodge/svg/21-get-two-colors-use/).

## Figma Conventions

To facilitate automated processing during the build phase, we follow these conventions in Figma:

- **Primary Zone**: `#21222C` (black).
- **Secondary Zone(s)**: `#E21D03` (red).

These colors serve as a contract between the Figma design file and the build system.
The build process recognizes these colors and applies the appropriate transformations to ensure the correct fill behavior in the final SVG output.

## Implementation

- Remove `fill` from the primary zone.
- Set secondary zones to `fill="currentColor"`.
- Use CSS for styling.
npm package: @koobiq/icons-lts
Description: # How to use package
Latest version: 7.3.0

# Icons

# How to use package

```
npm i @koobiq/icons
```

# Package structure

```bash
.
├── CHANGELOG.md
├── LICENSE
├── README.md
├── dist
│   ├── fonts
│   │   ├── mc-icons.css
│   │   ├── mc-icons.html
│   │   ├── mc-icons.scss
│   │   ├── mc-icons.ttf
│   │   └── mc-icons.woff
│   ├── info
│   │   └── mc-icons-info.json
│   ├── svg
│   │   ├── angle-down-L_16.svg
│   │   ├── angle-down-L_24.svg
│   │   ├── angle-down-M_16.svg
│   │   └── angle-down-M_24.svg
│   └── symbol
│       ├── sprite.scss
│       ├── sprite.symbol.html
│       └── svg
│           └── sprite.symbol.svg
└── package.json
```

# How to rebuild package locally

## Install dependencies
Install dependencies by running:

```
npm install
```

## Sync with Figma

Create a file with name `.env` and add there your Figma access token.

```
npm run figma:sync
```

## Build all packages

```
npm run build:all
```

Output will be exported to a `dist/icons` folder.

# Publish new version

## Step 1. Prepare and environment
Install dependencies by running:

```
npm install
```

## Step 2. Draw an icon

1. Draw your icon in [Koobiq Icons](https://www.figma.com/file/oQC47kSeukdqLMNh4IUhke/Mosaic-icons?type=design&node-id=0-4&mode=design&t=KCsYZb777ReIZMPY-11) figma file.
1. Make icons contains the only single outlined and flattened path with name `shape` (second-color path with name `shape-2`). 
1. Using a Fill Rule Editor plugin, set shapes' fill rule to Non-zero fill. Make sure icon is rendered correctly.
1. Run flatten for shapes one more time (there is a bug in Figma).

## Step 3. Export icons from figma

Create a file with name `.env` and add there your Figma access token.

To export your icons (SVG) from Figma run the command:
```
npm run figma:sync
```

## Step 4.

Change `mapping.json`:
* Add an entry into `mapping.json` with a new codepoint keys.
* Edit the name of an icon in the `mapping.json` in case of icon rename

Commit SVG files `mapping.json` and and push all changes to git.

## Step 5.

Run stage commit script to create a new release tag.
```
npm run stage:commit
```

Use semver for version naming. So increment major (first) version number if any of these changes were made:

* Any icon name was changed (breaking changes for front-end developers)
* Any icon codepoint was changed (breaking changes for tech writers)
* Significant changes in icon metaphor (breaking changes for all)

# Using CSS Classes
Create a DOM element/container that contains ```mc-icon``` and the icon name like:

```html
<div class='mc-icon mc-angle-down-L_16'></div>

```
# Using SVG sprites

When needing to use the `sprite.symbol.svg` sprite file, you can reference icons using the following method:

```html
<svg>
    <use xlink:href="sprite.symbol.svg#add" />
</svg>
```
npm package: @koobiq/kbq-icons
Description: Koobiq icons
Author: Koobiq Team
Latest version: 8.0.0-beta.4

# Icons

# How to use package

```
npm i @koobiq/icons
```

# Package structure

```bash
.
├── CHANGELOG.md
├── LICENSE
├── README.md
├── dist
│   ├── fonts
│   │   ├── kqb-icons.css
│   │   ├── kqb-icons.html
│   │   ├── kqb-icons.scss
│   │   ├── kqb-icons.ttf
│   │   └── kqb-icons.woff
│   ├── info
│   │   └── kqb-icons-info.json
│   ├── svg
│   │   ├── angle-down-L_16.svg
│   │   ├── angle-down-L_24.svg
│   │   ├── angle-down-M_16.svg
│   │   └── angle-down-M_24.svg
│   └── symbol
│       ├── sprite.scss
│       ├── sprite.symbol.html
│       └── svg
│           └── sprite.symbol.svg
└── package.json
```

# How to rebuild package locally

## Install dependencies
Install dependencies by running:

```
npm install
```

## Sync with Figma

Create a file with name `.env` and add there your Figma access token.

```
npm run figma:sync
```

## Build all packages

```
npm run build:all
```

Output will be exported to a `dist/icons` folder.

# Publish new version

## Step 1. Prepare and environment
Install dependencies by running:

```
npm install
```

## Step 2. Draw an icon

1. Draw your icon in [Koobiq Icons](https://www.figma.com/design/72HEcN92QnW9IQSXzmIYZX/Koobiq-Icons?m=auto&node-id=1320-21123&t=MZ7yMcUekVdv0doO-1) figma file.
1. Make icons contains the only single outlined and flattened path with name `shape` (second-color path with name `shape-2`). 
1. Using a Fill Rule Editor plugin, set shapes' fill rule to Non-zero fill. Make sure icon is rendered correctly.
1. Run flatten for shapes one more time (there is a bug in Figma).

## Step 3. Export icons from figma

Create a file with name `.env` and add there your Figma access token.

To export your icons (SVG) from Figma run the command:
```
npm run figma:sync
```

## Step 4.

Change `mapping.json`:
* Add an entry into `mapping.json` with a new codepoint keys.
* Edit the name of an icon in the `mapping.json` in case of icon rename

Commit SVG files `mapping.json` and and push all changes to git.

## Step 5.

Run stage commit script to create a new release tag.
```
npm run stage:commit
```

Use semver for version naming. So increment major (first) version number if any of these changes were made:

* Any icon name was changed (breaking changes for front-end developers)
* Any icon codepoint was changed (breaking changes for tech writers)
* Significant changes in icon metaphor (breaking changes for all)

# Using CSS Classes
Create a DOM element/container that contains ```kqb-icon``` and the icon name like:

```html
<div class='kqb-icon kqb-angle-down-L_16'></div>

```
# Using SVG sprites

When needing to use the `sprite.symbol.svg` sprite file, you can reference icons using the following method:

```html
<svg>
    <use xlink:href="sprite.symbol.svg#add" />
</svg>
```
npm package: @koobiq/logger
Description: A client logger
Latest version: 0.29.0

# @koobiq/logger

It's the package with a utility for displaying the log on the client side.

## Examples

Message:

```js
import { logger } from '@koobiq/logger';

logger.info('Info message');
logger.warn('Warning message');
logger.error('Error message');
```

Message once:

```js
import { once } from '@koobiq/logger';

once.info('Info message');
once.warn('Warning message');
once.error('Error message');
```

Deprecated:

```js
import { deprecate } from '@koobiq/logger';

deprecate('Deprecated annotation');
```
npm package: @koobiq/react-components
Description: Koobiq React is an open-source design system for designers and developers, focused on designing products related to information security.
Latest version: 0.29.0

# @koobiq/react-components

Koobiq React is an open-source design system for designers and developers, focused on designing products related to information security.

## Installation

Depending on your preference, run one of the following in your terminal:

```sh
# With npm
npm install @koobiq/react-components

# With yarn
yarn add @koobiq/react-components

# With pnpm
yarn add @koobiq/react-components
```

## Usage

To get started with the library, read [the documentation](https://react.koobiq.io/).

## Browser Support

[Check compatible browsers](https://browsersl.ist/#q=defaults+and+supports+es6-module%2C%0A++++chrome+%3E+105%2C%0A++++safari+%3E+15.4%2C%0A++++firefox+%3E+121%2C%0A++++opera+%3E+91%2C%0A++++edge+%3E+105)
npm package: @koobiq/react-icons
Description: A collection of icons
Latest version: 0.29.0

# @koobiq/react-icons

**A collection of React-icons for the web, part of Koobiq React.**

We use icons as React components. This approach works out of the box (no special loaders needed),
supports tree-shaking, and includes full TypeScript typings.

If you need SVG files or icon font (Koobiq Icons), use the [@koobiq/icons](https://github.com/koobiq/icons) package.

## Showcase

Use the [icon showcase](https://react.koobiq.io/?path=/docs/icons--docs) to visually present the package contents.

## Installation

Depending on your preference, run one of the following in your terminal:

```sh
# With npm
npm install @koobiq/react-icons

# With yarn
yarn add @koobiq/react-icons

# With pnpm
yarn add @koobiq/react-icons
```

## Usage

Import the required icon from the package:

```tsx
import { IconCheck16 } from '@koobiq/react-icons';

const Icon = () => <IconCheck16 color="#4CAF50" />;
```

Some icons include an accent layer and support a two-tone (duotone) style.
Override the `--icon-accent-color` [CSS-variable](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascading_variables/Using_custom_properties) to change only the accent color without affecting the base color.

```css
/* Icon.module.css */
.icon {
  --icon-accent-color: red;
}
```

```tsx
// Icons.tsx
import { IconFilterDot16 } from '@koobiq/react-icons';
import styles from './Icon.module.css';

const Icon = () => <IconFilterDot16 style={styles.icon} />;
```
npm package: @koobiq/tokens-builder
Description: Design tokens
Latest version: 3.17.2

# Tokens Builder

## Overview

Tokens builder is a configuration script that utilizes Style Dictionary,
a design-token platform for creating and maintaining consistent design tokens across various platforms.

Overall, this script orchestrates the generation of design tokens by applying custom transformations,
filters, and formats to the specified theme configuration for multiple platforms,
facilitating a streamlined design token workflow compatible with
various output formats like SCSS, CSS, and TypeScript.

## Typography composite tokens

Tokens builder supports usage of [composite tokens](https://design-tokens.github.io/community-group/format/#composite-design-token) for CSS platform.
For now, typography token sets are supported.

### Example of usage

```json
{
    "<component-name>": {
        "font": {
            "type": "font",
            "<token-with-composite-token-reference>": "{typography.<typography-set>}"
        }
    }
}
```

where `<typography-set>` is a set from `@koobiq/design-tokens/web/properties/typography.json5`

"type": "font" property is **required.**

output:

```
  --kbq-<component-name>-font-<token-with-composite-token-reference>-font-size: <value>;
  --kbq-<component-name>-font-<token-with-composite-token-reference>-font-weight: <value>;
  --kbq-<component-name>-font-<token-with-composite-token-reference>-line-height: <value>;
  --kbq-<component-name>-font-<token-with-composite-token-reference>-font-family: <value>;
  // ...etc
```