open-index/open-npm huggingface dataset:
npm package: @flexem/ng-baidu-map
Description: 百度地图 for AngularJS
Author: GG
Latest version: 1.0.10

百度地图 for AngularJS
==========================

这个模块包含了使用百度地图的 directive。

这个模块自动管理百度地图 API 的加载，无需引入百度地图的 loader。

支持双向绑定。

安装方法
------------------------

使用 bower 安装

```bash
$ bower install ng-baidu-map --save
```

在自己的模块中加入依赖

```js
angular.module('app', ['ngBaiduMap']);
```

使用方法
-------------------------

在 `angular.module` 的 `config` 中配置 accessKey 和 version

version 默认是 2.0

例子：
```js
angular.module('app', ['ngBaiduMap']).config(config);

function config(baiduMapApiProvider) {
  baiduMapApiProvider.version('2.0').accessKey('您的 ak');
}
```

### baidu-map

使用 `<baidu-map></baidu-map>` 加入地图

参数：

* __center__: 地图的中心点坐标，使用双向绑定方式与外界的数据进行交互

例子：

```html
<div ng-init="point = { lat: 121.491, lng: 31.233 }">
  <baidu-map center="point"></baidu-map>
</div>
```

### marker

使用 `<marker></marker>` 加入标注。元素内部的 html 是点击标注后显示的 InfoWindow 的内容。

参数：

* __latlng__: 标注的坐标

例子：
```html
<div ng-init="point = { lat: 121.491, lng: 31.233 }">
  <baidu-map center="point">
    <marker latlng="point">点击后显示的内容</marker>
  </baidu-map>
</div>
```

### baiduMapApi

如果需要使用 `BMap`，可以注入 `baiduMapApi`，在 then 里拿到 `Bmap`。这个模块会解决加载的时序问题。

例子：

```js
// 定义自己的服务
yourModule.factory('BaiduMapService', function($q, baiduMapApi) {
  return {
    getLocalCity: function() {
      return baiduMapApi.then(function(BMap) {
        var localcity = new BMap.LocalCity();
        return $q(function(resolve, reject) {
          localcity.get(function(r) {
            resolve(r);
          });
        });
      });
    }
  };
});

// 使用自己的服务
yourModule.controller('TestController', function(BaiduMapService) {
  var self = this;
  BaiduMapService.getLocalCity().then(function(r) {
    self.r = r;
  });
});
```
npm package: @flexem/rc-resize-observer
Description: Resize observer for React
Latest version: 1.0.0

# rc-resize-observer

[![NPM version][npm-image]][npm-url]
[![build status][travis-image]][travis-url]
[![Codecov][codecov-image]][codecov-url]
[![david deps][david-image]][david-url]
[![david devDeps][david-dev-image]][david-dev-url]
[![npm download][download-image]][download-url]

[npm-image]: http://img.shields.io/npm/v/rc-resize-observer.svg?style=flat-square
[npm-url]: http://npmjs.org/package/rc-resize-observer
[travis-image]: https://img.shields.io/travis/com/react-component/resize-observer.svg?style=flat-square
[travis-url]: https://travis-ci.com/react-component/resize-observer
[codecov-image]: https://img.shields.io/codecov/c/github/react-component/resize-observer/master.svg?style=flat-square
[codecov-url]: https://codecov.io/gh/react-component/resize-observer/branch/master
[david-image]: https://david-dm.org/react-component/resize-observer/status.svg?style=flat-square
[david-dev-url]: https://david-dm.org/react-component/resize-observer?type=dev
[david-dev-image]: https://david-dm.org/react-component/resize-observer/dev-status.svg?style=flat-square
[david-url]: https://david-dm.org/react-component/resize-observer
[download-image]: https://img.shields.io/npm/dm/rc-resize-observer.svg?style=flat-square
[download-url]: https://npmjs.org/package/rc-resize-observer

Resize observer for React.

## Live Demo

https://react-component.github.io/resize-observer/

## Install

[![rc-resize-observer](https://nodei.co/npm/rc-resize-observer.png)](https://npmjs.org/package/rc-resize-observer)

## Usage

```js
import ResizeObserver from 'rc-resize-observer';
import { render } from 'react-dom';

render(
  <ResizeObserver
    onResize={() => {
      console.log('resized!');
    }}
  >
    <textarea />
  </ResizeObserver>,
  mountNode,
);
```

## API

| Property | Type                        | Default | Description                     |
| -------- | --------------------------- | ------- | ------------------------------- |
| disabled | boolean                     | false   |                                 |
| onResize | ({ width, height }) => void | -       | Trigger when child node resized |

## Development

```
npm install
npm start
```

## License

rc-resize-observer is released under the MIT license.
npm package: @flexera/ui-component-styles
Description: CSS and SASS files for branding Flexera products.
Author: Adam Smith
Latest version: 1.0.2

# Flexera Component Styles
CSS and SASS files for branding Flexera products.

### Why
Certain legacy products can not be integrated into the `ui-fusion` repo but it's important to maintain
a common UI/UX between all products. Common UI/UX patterns will reduce the cognitive overhead for the 
customer switching between Flexera capabilities. The repo provider a few light weight utility files
for styling legacy products to match the `ui-fusion` repo.

### What  
The `assets` folder contains utility files which can be used to style legacy products:
* flexera-colors.scss: Flexera color pallet scss/sass variables.
* flexera-mixins.scss: scss/sass mixins which can be used to extend current selectors with Flexera styles.
* flexera-styles.css: list of css classes which can be used with legacy html to add Flexera styles.    

### How
The repo uses `ui-react-components` to generate all asset files. The `BaseTheme` is imported and a list
of "matchers" map the top level `BaseTheme` property into a flattened object.

* **key:** Built from the BaseTheme object hierarchy -  `{ space: { xl } }` becomes `space-xl`
* **value:** Array of css property and value objects - `{ margin: "2rem" }` 
```
{ [key]: [{ property: value }] }
```

The "converts" convert the flattened property objects into a string based on the targeted language.

`build.js` generates the assets and commits all the files to the repo. Will need to integrate with
some CI to update the assets when a new version of the `ui-react-components` is released.

##### CI Idea
- `ui-react-components` releases a new version
- github fires a webhook to a AWS Lambda function
- AWS Lambda runs the build scripts, generates the files, adds the files to the repo, bumps up 
the `package.json` version and pushes all the changes to the repo.
- Deploy as a npm package? 😀
npm package: @flexfinancedefi/uikit
Description: Set of UI components for pancake projects
Latest version: 0.0.2

# 🥞 Pancake UIkit

[![Version](https://img.shields.io/npm/v/@flexfinancedefi/uikit)](https://www.npmjs.com/package/@flexfinancedefi/uikit) [![Size](https://img.shields.io/bundlephobia/min/@flexfinancedefi/uikit)](https://www.npmjs.com/package/@flexfinancedefi/uikit)

Pancake UIkit is a set of React components and hooks used to build pages on Pancake's apps. It also contains a theme file for dark and light mode.

## Install

`yarn add @flexfinancedefi/uikit`

## Setup

### Theme

Before using Pancake UIkit, you need to provide the theme file to styled-component.

```
import { ThemeProvider } from 'styled-components'
import { light, dark } from '@flexfinancedefi/uikit'
...
<ThemeProvider theme={isDark}>...</ThemeProvider>
```

### Reset

A reset CSS is available as a global styled component.

```
import { ResetCSS } from '@flexfinancedefi/uikit'
...
<ResetCSS />
```

### Types

This project is built with Typescript and export all the relevant types.

## How to use the UIkit

If you want to use components from the UIkit, check the [Storybook documentation](https://pancakeswap.github.io/pancake-uikit/)
npm package: @flexget/monaco-yaml
Description: YAML plugin for the Monaco Editor
Author: Kevin Decker
Latest version: 2.3.0

# Monaco YAML

YAML language plugin for the Monaco Editor. It provides the following features when editing YAML files:
* Code completion, based on JSON schemas or by looking at similar objects in the same file
* Hovers, based on JSON schemas
* Validation: Syntax errors and schema validation
* Formatting
* Document Symbols
* Syntax highlighting
* Automatically load remote schema files (by enabling DiagnosticsOptions.enableSchemaRequest)

Schemas can also be provided by configuration. See [here](https://github.com/Microsoft/monaco-json/blob/master/src/monaco.d.ts)
for the API that the JSON plugin offers to configure the JSON language support.

## Installing

`yarn add @flexget/monaco-yaml`
See `test/index.html` as an example. Both vs loader and ESM are supported. 

## Development

* `git clone https://github.com/kristenmills/monaco-yaml`
* `cd monaco-yaml`
* `yarn`
* open `$/monaco-yaml/demo/index.html` in your favorite browser.

A running example:
![demo-image](test-demo.png)

## Credits
- https://github.com/redhat-developer/yaml-language-server

### Maintain
Manually clone dependencies list below and update the project files accordingly:
- `src/languageservice`: https://github.com/redhat-developer/yaml-language-server
  - `cp yaml-language-server/src/languageservice monaco-yaml/src/languageservice`
  - Modify the import paths, go to the test page and see if it still works
- `src/yaml-ast-parser-custom-tags`: https://github.com/JPinkney/yaml-ast-parser/tree/master/src

## License
[MIT](https://github.com/pengx17/monaco-yaml/blob/master/LICENSE.md)
npm package: @flexi-ui/button
Description: Buttons allow users to perform actions and choose with a single tap.
Author: Muneeb Mughal
Latest version: 5.0.0

# @flexi-ui/button

Buttons allow users to perform actions and choose with a single tap.

## Installation

```sh
yarn add @flexi-ui/button
# or
npm i @flexi-ui/button
```
npm package: @flexi-ui/dom-animation
Description: Dom Animation from Framer Motion for dynamic import
Author: Muneeb Mughal
Latest version: 1.0.2

# @flexi-ui/dom-animation

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @flexi-ui/dom-animation
# or
npm i @flexi-ui/dom-animation
```
npm package: @flexi-ui/form
Description: A simple implementation to display a form animation when the source component is clicked
Author: Muneeb Mughal
Latest version: 4.0.0

# @flexi-ui/form

A form is a group of inputs that allows users submit data to a server and supports field validation errors.

## Installation

```sh

yarn add @flexi-ui/form

# or

npm i @flexi-ui/form

```
npm package: @flexi-ui/input
Description: The input component is designed for capturing user input within a text field.
Author: Muneeb Mughal
Latest version: 4.0.0

# @flexi-ui/input

Input is a component that allows users to enter text. It can be used to get user inputs in forms, search fields, and more.

This package contains the Input component and the TextArea component.

## Installation

```sh

yarn add @flexi-ui/input

# or

npm i @flexi-ui/input

```
npm package: @flexi-ui/link
Description: Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an &lt;a&gt; element.
Author: Muneeb Mughal
Latest version: 4.0.0

# @flexi-ui/link

Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an `<a>` tag.

## Installation

```sh
yarn add @flexi-ui/link
# or
npm i @flexi-ui/link
```
npm package: @flexi-ui/react-rsc-utils
Description: A set of utilities for react compatible with RSC
Author: Muneeb Mughal
Latest version: 1.0.2

# @flexi-ui/react-rsc-utils

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @flexi-ui/react-rsc-utils
# or
npm i @flexi-ui/react-rsc-utils
```
npm package: @flexi-ui/react-utils
Description: A set of utilities for react on client side
Author: Muneeb Mughal
Latest version: 1.0.4

# @flexi-ui/react-utils

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @flexi-ui/react-utils
# or
npm i @flexi-ui/react-utils
```
npm package: @flexi-ui/ripple
Description: A simple implementation to display a ripple animation when the source component is clicked
Author: Muneeb Mughal
Latest version: 5.0.0

# @flexi-ui/ripple

This is a component that creates a ripple effect on the screen.

## Installation

```sh
yarn add @flexi-ui/ripple
# or
npm i @flexi-ui/ripple
```
npm package: @flexi-ui/shared-icons
Description: Internal icons set, commonly used in the components stories
Author: Muneeb Mughal
Latest version: 1.0.2

# @flexi-ui/shared-icons

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @flexi-ui/shared-icons
# or
npm i @flexi-ui/shared-icons
```
npm package: @flexi-ui/shared-utils
Description: A set of FlexiUI utilities
Author: Muneeb Mughal
Latest version: 1.0.3

# @flexi-ui/shared-utils

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @flexi-ui/shared-utils
# or
npm i @flexi-ui/shared-utils
```
npm package: @flexi-ui/spinner
Description: Loaders express an unspecified wait time or display the length of a process.
Author: Muneeb Mughal
Latest version: 5.0.0

# @flexi-ui/loading

Spinner express an unspecified wait time or display the length of a process.

## Installation

```sh
yarn add @flexi-ui/loading
# or
npm i @flexi-ui/loading
```
npm package: @flexi-ui/system
Description: FlexiUI system primitives
Author: Muneeb Mughal
Latest version: 1.1.2

# @flexi-ui/system

FlexiUI system primitives, here you can find the `extendVariants` utility, `FlexiUIProvider` and some other utilities.

## Installation

```sh
yarn add @flexi-ui/system
# or
npm i @flexi-ui/system
```
npm package: @flexi-ui/system-rsc
Description: FlexiUI system primitives compatibles with RSC imports
Author: Muneeb Mughal
Latest version: 5.0.0

# @flexi-ui/system-rsc

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @flexi-ui/system-rsc
# or
npm i @flexi-ui/system-rsc
```
npm package: @flexi-ui/test-utils
Description: A set of utilities for react testing
Author: Muneeb Mughal
Latest version: 1.0.1

# @flexi-ui/test-utils

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @flexi-ui/test-utils
# or
npm i @flexi-ui/test-utils
```
npm package: @flexi-ui/theme
Description: The default theme for FlexiUI components
Author: Muneeb Mughal
Latest version: 2.3.0

# @flexi-ui/theme

FlexiUI theme primitives, here you can find the TailwindCSS `plugin`, `colors`, `layout`, `spacing`, `typography` and some other utilities.

## Installation

```sh
yarn add @flexi-ui/theme
# or
npm i @flexi-ui/theme
```
npm package: @flexi-ui/use-aria-button
Description: Internal hook to handle button a11y and events, this is based on react-aria button hook but without the onClick warning
Author: Muneeb Mughal
Latest version: 1.0.3

# @flexi-ui/use-aria-button

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @flexi-ui/use-aria-button
# or
npm i @flexi-ui/use-aria-button
```
npm package: @flexi-ui/use-aria-link
Description: Internal hook to handle link a11y and events, this is based on react-aria link hook but without the onClick warning
Author: Muneeb Mughal
Latest version: 1.0.1

# @flexi-ui/use-aria-link

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @flexi-ui/use-aria-link

# or

npm i @flexi-ui/use-aria-link
```
npm package: @flexi-ui/use-callback-ref
Description: Internal hook to handle layout effects
Author: Muneeb Mughal
Latest version: 1.0.0

# @flexi-ui/use-callback-ref

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @flexi-ui/use-callback-ref

# or

npm i @flexi-ui/use-callback-ref
```
npm package: @flexi-ui/use-image
Description: React hook for progressing image loading
Author: Muneeb Mughal
Latest version: 1.0.0

# @flexi-ui/use-image

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @flexi-ui/use-image

# or

npm i @flexi-ui/use-image
```
npm package: @flexi-ui/use-safe-layout-effect
Description: Internal hook to handle layout effects
Author: Muneeb Mughal
Latest version: 0.0.1

# @flexi-ui/use-safe-layout-effect

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @flexi-ui/use-safe-layout-effect

# or

npm i @flexi-ui/use-safe-layout-effect
```
npm package: @flexible-agency/react-native-starter
Description: Clean and minimalist React Native template for a quick start.
Author: Flexible Agency
Latest version: 1.0.11

![React Native starter](.github/banner.svg)

**A quick and simple template for React Native.**

Create a new project using the command below. Replace `MyApp` with your app name.

```sh
npx @flexible-agency/react-native-starter MyApp
```

<br />

Included libraries:

* [React Native Navigation](https://wix.github.io/react-native-navigation/), a native navigation module

Included tools:

* [Prettier](https://prettier.io/), set up with `lint-staged` to automatically reformat on commit
* Scripts to automatically increment the build number
npm package: @flexible-agency/serverless-middleware
Description: Default serverless middleware for some of our projects.
Author: Thomas Schoffelen
Latest version: 1.5.1

# Serverless Middleware

Some helpers for writing API endpoints using AWS Lambda and [Laconia](https://github.com/laconiajs/laconia).

---

## Installation

```shell
yarn add @flexible-agency/serverless-middleware
```

## Example usage

```js
import { middleware, auth } from '@flexible-agency/serverless-middleware';

const dependencies = () => ({
	// dependencies for the Laconia dependency injector
});

export const app = async({ query, path, body }, { currentUser, /* dependences */ }) => {
	// if `auth` is included in the second param of `middleware`, currentUser
	// will be an object in the form of `{ id, groups, email, ... }`

	// your business logic goes here

	return {
		success: true,
		text: 'Hello, world!'
	};
}

export const handler = middleware(app, [auth]).register(dependencies);
```

## Options

### Warmup support

Out of the box this middleware setup supports the [serverless-plugin-warmup](https://github.com/FidelLimited/serverless-plugin-warmup) 
serverless plugin. 

Simply install the serverless plugin, no other changes to your code necessary. 
The middleware will automatically prevent code execution on warmup requests.



<br /><br />

---

<div align="center">
	<b>
		<a href="https://schof.co/consulting/?utm_source=flexible-agency/serverless-middleware">Get professional support for this package →</a>
	</b>
	<br>
	<sub>
		Custom consulting sessions availabe for implementation support and feature development.
	</sub>
</div>
npm package: @flexiblepersistence/backapi
Description: A simple API framework using Flexible Persistence
Author: Judah Holanda Correia Lima
Latest version: 0.1.18

# backApi

![Publish](https://github.com/Judahh/backApi/workflows/Publish/badge.svg)
[![npm version](https://badge.fury.io/js/@flexiblepersistence/backapi.svg)](https://badge.fury.io/js/@flexiblepersistence/backapi)
[![npm downloads](https://img.shields.io/npm/dt/@flexiblepersistence/backapi.svg)](https://img.shields.io/npm/dt/@flexiblepersistence/backapi.svg)

A simple API framework using Flexible Persistence

```js
const pool = new Pool(
((DBHandler.getReadHandler() as ServiceHandler)
    .persistence as SequelizeDB).getPersistenceInfo()
);
await Utils.init(pool);
const obj = {};
obj['test'] = 'test';
const handler = DBHandler.getHandler();
const controller = new TestController(DBHandler.getInit());

await ((DBHandler.getReadHandler() as ServiceHandler)
    .persistence as SequelizeDB)
    .getSequelize()
    .models.Test.sync({ force: true });
await handler.getWrite().clear('events');

const sentTest = new Test();
const sentTest2 = new Test();

const store = await controller.store(
    ({
    body: sentTest,
    } as unknown) as Request,
    (mockResponse as unknown) as Response
);
console.log('store:', store);
```

![Overview](./doc/overview.svg)

## Installation

This is a [Node.js](https://nodejs.org/en/) module available through the
[npm registry](https://www.npmjs.com/).

Before installing,
[download and install Node.js](https://nodejs.org/en/download/).

If this is a brand new project, make sure to create a `package.json` first with
the [`npm init` command](https://docs.npmjs.com/creating-a-package-json-file) or
[`yarn init` command](https://classic.yarnpkg.com/en/docs/cli/init/).

Installation is done using the
[`npm install` command](https://docs.npmjs.com/getting-started/installing-npm-packages-locally)
or [`yarn add` command](https://classic.yarnpkg.com/en/docs/cli/add):

```bash
$ npm install @flexiblepersistence/backapi
```

or

```bash
$ yarn add @flexiblepersistence/backapi
```

## Tests

To run the test suite, first install Docker and dependencies, then run
`docker-compose up -d` and `npm test`:

```bash
$ docker-compose up -d
$ npm install
$ npm test
```

or

```bash
$ docker-compose up -d
$ yarn
$ yarn test
```

## People

The original author of Journaly is [Judah Lima](https://github.com/Judahh)

[List of all contributors](https://github.com/Judahh/backApi/graphs/contributors)
npm package: @flexiblepersistence/backnextapi
Description: A simple API framework using Flexible Persistence
Author: Judah Holanda Correia Lima
Latest version: 0.2.4

# backNextApi

![Publish](https://github.com/Judahh/backNextApi/workflows/Publish/badge.svg)
[![npm version](https://badge.fury.io/js/@flexiblepersistence/backnextapi.svg)](https://badge.fury.io/js/@flexiblepersistence/backnextapi)
[![npm downloads](https://img.shields.io/npm/dt/@flexiblepersistence/backnextapi.svg)](https://img.shields.io/npm/dt/@flexiblepersistence/backnextapi.svg)

A simple API framework using Flexible Persistence

```js
const pool = new Pool(
((DBHandler.getReadHandler() as ServiceHandler)
    .persistence as SequelizeDB).getPersistenceInfo()
);
await Utils.init(pool);
const obj = {};
obj['test'] = 'test';
const handler = DBHandler.getHandler();
const controller = new TestController(DBHandler.getInit());

await ((DBHandler.getReadHandler() as ServiceHandler)
    .persistence as SequelizeDB)
    .getSequelize()
    .models.Test.sync({ force: true });
await handler.getWrite().clear('events');

const sentTest = new Test();
const sentTest2 = new Test();

const store = await controller.store(
    ({
    body: sentTest,
    } as unknown) as Request,
    (mockResponse as unknown) as Response
);
console.log('store:', store);
```

![Overview](./doc/overview.svg)

## Installation

This is a [Node.js](https://nodejs.org/en/) module available through the
[npm registry](https://www.npmjs.com/).

Before installing,
[download and install Node.js](https://nodejs.org/en/download/).

If this is a brand new project, make sure to create a `package.json` first with
the [`npm init` command](https://docs.npmjs.com/creating-a-package-json-file) or
[`yarn init` command](https://classic.yarnpkg.com/en/docs/cli/init/).

Installation is done using the
[`npm install` command](https://docs.npmjs.com/getting-started/installing-npm-packages-locally)
or [`yarn add` command](https://classic.yarnpkg.com/en/docs/cli/add):

```bash
$ npm install @flexiblepersistence/backnextapi
```

or

```bash
$ yarn add @flexiblepersistence/backnextapi
```

## Tests

To run the test suite, first install Docker and dependencies, then run
`docker-compose up -d` and `npm test`:

```bash
$ docker-compose up -d
$ npm install
$ npm test
```

or

```bash
$ docker-compose up -d
$ yarn
$ yarn test
```

## People

The original author of Journaly is [Judah Lima](https://github.com/Judahh)

[List of all contributors](https://github.com/Judahh/backNextApi/graphs/contributors)
npm package: @flexibly/dnd-kit-accessibility
Description: A generic toolkit to help with accessibility
Author: Claudéric Demers, Levon Brunson
Latest version: 3.1.1

# @dnd-kit/accessibility

[![Stable release](https://img.shields.io/npm/v/@dnd-kit/accessibility.svg)](https://npm.im/@dnd-kit/accessibility)

A generic set of components and hooks to help with live region announcements and screen reader instructions. This package is used internally by `@dnd-kit/core`.
npm package: @flexibly/dnd-kit-core
Description: dnd kit – a lightweight React library for building performant and accessible drag and drop experiences
Author: Claudéric Demers, Levon Brunson
Latest version: 6.2.3

# @dnd-kit/core

[![Stable release](https://img.shields.io/npm/v/@dnd-kit/core.svg)](https://npm.im/@dnd-kit/core)

@dnd-kit – a lightweight React library for building performant and accessible drag and drop experiences.

## Installation

To get started, install the `@dnd-kit/core` package via npm or yarn:

```
npm install @dnd-kit/core
```

## Usage

Visit [docs.dndkit.com](https://docs.dndkit.com) to learn how to get started with @dnd-kit.
npm package: @flexibly/dnd-kit-modifiers
Description: Translate modifier presets for use with `@dnd-kit` packages.
Author: Claudéric Demers, Levon Brunson
Latest version: 7.0.3

# @dnd-kit/modifiers

[![Stable release](https://img.shields.io/npm/v/@dnd-kit/modifiers.svg)](https://npm.im/@dnd-kit/sortable)

Modifiers let you dynamically modify the movement coordinates that are detected by sensors. They can be used for a wide range of use cases, for example:

- Restricting motion to a single axis
- Restricting motion to the draggable node container's bounding rectangle
- Restricting motion to the draggable node's scroll container bounding rectangle
- Applying resistance or clamping the motion

## Installation

To start using modifiers, install the modifiers package via yarn or npm:

```
npm install @dnd-kit/modifiers
```

## Usage

The modifiers repository contains a number of useful modifiers that can be applied on `DndContext` as well as `DragOverlay`.

```jsx
import {DndContext, DragOverlay} from '@dnd-kit';
import {
  restrictToVerticalAxis,
  restrictToWindowEdges,
} from '@dnd-kit/modifiers';

function App() {
  return (
    <DndContext modifiers={[restrictToVerticalAxis]}>
      {/* ... */}
      <DragOverlay modifiers={[restrictToWindowEdges]}>{/* ... */}</DragOverlay>
    </DndContext>
  );
}
```

As you can see from the example above, `DndContext` and `DragOverlay` can both have different modifiers.

## Built-in modifiers

### Restricting motion to an axis

#### `restrictToHorizontalAxis`

Restrict movement to only the horizontal axis.

#### `restrictToVerticalAxis`

Restrict movement to only the vertical axis.

### Restrict motion to a container's bounding rectangle

#### `restrictToWindowEdges`

Restrict movement to the edges of the window. This modifier can be useful to prevent the `DragOverlay` from being moved outside of the bounds of the window.

#### `restrictToParentElement`

Restrict movement to the parent element of the draggable item that is picked up.

#### `restrictToFirstScrollableAncestor`

Restrict movement to the first scrollable ancestor of the draggable item that is picked up.

### Snap to grid

#### `createSnapModifier`

Function to create modifiers to snap to a given grid size.

```javascript
import {createSnapModifier} from '@dnd-kit/modifiers';

const gridSize = 20; // pixels
const snapToGridModifier = createSnapModifier(gridSize);
```

### Snap to cursor

#### `snapCenterToCursor`

Snaps the center of the draggable item to the cursor when it is picked up. Has no effect when using the Keyboard sensor.

## Building custom modifiers

To build your own custom modifiers, refer to the implementation of the built-in modifiers of this package.

For example, here is an implementation to create a modifier to snap to grid:

```javascript
const gridSize = 20;

function snapToGrid(args) {
  const {transform} = args;

  return {
    ...transform,
    x: Math.ceil(transform.x / gridSize) * gridSize,
    y: Math.ceil(transform.y / gridSize) * gridSize,
  };
}
```
npm package: @flexibly/dnd-kit-sortable
Description: Official sortable preset and sensors for dnd kit
Author: Claudéric Demers, Levon Brunson
Latest version: 8.0.3

# @dnd-kit/sortable

[![Stable release](https://img.shields.io/npm/v/@dnd-kit/sortable.svg)](https://npm.im/@dnd-kit/sortable)

The sortable preset provides the building blocks to build sortable interfaces with @dnd-kit.

## Installation

To get started, install the sortable preset via npm or yarn:

```
npm install @dnd-kit/sortable
```

## Architecture

The sortable preset builds on top of the primitives exposed by `@dnd-kit/core` to help building sortable interfaces.

The sortable preset exposes two main concepts: `SortableContext` and the `useSortable` hook:

- The SortableContext provides information via context that is consumed by the `useSortable` hook.
- The useSortable hook is an abstraction that composes the `useDroppable` and `useDraggable` hooks.

![The useSortable hook is an abstraction that composes the useDroppable and useDraggable hooks](/.github/assets/use-sortable.png)

## Usage

Visit [docs.dndkit.com](https://docs.dndkit.com/presets/sortable) to learn how to use the Sortable preset.
npm package: @flexibly/dnd-kit-utilities
Description: Internal utilities to bee shared between `@dnd-kit` packages
Author: Claudéric Demers, Levon Brunson
Latest version: 3.2.3

# @dnd-kit/utilities

[![Stable release](https://img.shields.io/npm/v/@dnd-kit/utilities.svg)](https://npm.im/@dnd-kit/sortable)

Internal utilities to bee shared between `@dnd-kit` packages.
npm package: @flexicon/gridsome-source-build-meta
Description: Gridsome source plugin to add build information to the global metadata schema.
Author: Mike Repec
Latest version: 0.0.2

# @flexicon/gridsome-source-build-meta

Gridsome source plugin to add build information to the global metadata schema.

## Install

- `yarn add @flexicon/gridsome-source-build-meta`
- `npm install @flexicon/gridsome-source-build-meta`

## Usage

```js
module.exports = {
  plugins: [
    {
      use: '@flexicon/gridsome-source-build-meta',
      options: {
        formatLocale: 'en-US',
      },
    },
  ],
}
```

## Options

#### formatLocale

- Type: `string` _optional_

What locale to use with [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat)

Default: `en-GB`

#### formatOptions

- Type `object` _optional_

DateTime formatting options

Default:

```js
const formatOptions = {
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric',
}
```

## Metadata

- `buildInfo`
  - `buildTime` - `string` - Date time string formatted based on the options and generated at build time
  - `buildTimestamp` - `number` - UNIX timestamp at which the current build was triggered


## Example Query

```graphql
<static-query>
  metadata {
    buildInfo {
      buildTime
      buildTimestamp
    }
  }
</static query> 
```
npm package: @flexicore/flexicore-client
Description: This is a typescript client for Flexicore
Author: Asaf Ben Natan
Latest version: 4.0.5



## How To Install
add `"@flexicore/flexicore-client": "^2.2.7"` to your package.json

## How To Use
import the required service

    import { UserService} from'@flexicore/flexicore-client';

create a factory

    export  let  userServiceFactory = (http: HttpClient) =>  new  UsersService(http, SERVER_ADDRESS, new  UserService());

in the import section add:

    HttpClientModule,

in the provide section add:

    { provide:  'BASE_PATH', useValue:  SERVER_ADDRESS },
and 

    {provide:  UsersService, useFactory:  userServiceFactory, deps: [HttpClient]},
npm package: @flexilla/alpine-dropdown
Description: AlpineJS plugin for adding Dropdown functionality to your AlpineJS components
Author: Johnkat MJ
Latest version: 0.3.1

<h1 align="center">Alpine Dropdown</h1>

<p align="center">
  Simple Interactive Dropdown Component for <a href="https://alpinejs.dev">Alpine.js</a>
</p>

<p align="center">
  Part of the <a href="https://flexilla-docs.vercel.app">Flexilla</a> library - A collection of UI components for Alpine.js
</p>

## Overview

The Alpine Dropdown component provides a lightweight and flexible dropdown menu implementation for Alpine.js applications. It features:

- 🎯 Precise positioning
- 🎨 Customizable styling with Tailwind CSS support
- ⌨️ Keyboard navigation support
- 🔄 Smooth transitions and animations

## Installation

### CDN

Include the following `<script>` tag in the `<head>` of your document, just before Alpine.

```html
<script src="https://cdn.jsdelivr.net/npm/@flexilla/alpine-dropdown@latest/dist/cdn.min.js" defer></script>
```

### NPM

```shell
npm install @flexilla/alpine-dropdown
```

Add the `x-dropdown` directive to your project by importing the package **before** starting Alpine.

```js
import Alpine from 'alpinejs';
import PluginDropdown from '@flexilla/alpine-dropdown';

Alpine.plugin(PluginDropdown);

Alpine.start();
```

## Basic Usage

```html
<button data-dropdown-trigger data-dropdown-id="dropdown-1"
    class="border border-zinc-800 hover:bg-zinc-950 bg-zinc-900 text-white px-4 py-2 rounded-lg text-sm">
    Open Dropdown 
</button>
<div x-dropdown x-data role="list" id="dropdown-1" data-fx-popper
    class="fixed top-[--fx-popper-placement-y] left-[--fx-popper-placement-x] z-20 w-56 border border-zinc-800 bg-zinc-900/80 text-zinc-50 backdrop-filter backdrop-blur-xl rounded-lg flex flex-col overflow-hidden opacity-0 invisible fx-open:opacity-100 fx-open:visible ease-linear transition-transform translate-y-4 fx-open:translate-y-0">
    <a href="#" class="focus:outline focus:bg-zinc-900/90 outline-none focus:outline-blue-500 ease-linear flex hover-bg-zinc-800/80 p-2 rounded-md">
      Item 1
    </a>
    <a href="/" class="focus:outline focus:bg-zinc-900/90 outline-none focus:outline-blue-500 ease-linear flex hover-bg-zinc-800/80 p-2 rounded-md">Item 2</a>
    <a href="#" class="focus:outline focus:bg-zinc-900/90 outline-none focus:outline-blue-500 ease-linear flex hover-bg-zinc-800/80 p-2 rounded-md">Item 3</a>
    <a href="#" class="focus:outline focus:bg-zinc-900/90 outline-none focus:outline-blue-500 ease-linear flex hover-bg-zinc-800/80 p-2 rounded-md">Item 4</a>
</div>
```

## Documentation

For detailed documentation, customization options, and advanced usage examples, visit the [Flexilla Dropdown documentation](https://flexilla-docs.vercel.app/docs/components/dropdown).

## License

Copyright (c) 2025 Johnkat MJ and contributors.

Licensed under the MIT license, see [LICENSE](LICENSE) for details.
npm package: @flexilla/alpine-offcanvas
Description: AlpineJS plugin for adding offcanvas functionality to your AlpineJS components
Author: Johnkat MJ
Latest version: 0.3.1

<h1 align="center">Alpine Offcanvas</h1>

<p align="center">
  Simple Interactif Offcanvas Directive for <a href="https://alpinejs.dev">Alpine.js</a>
</p>


## Installation

### CDN

Include the following `<script>` tag in the `<head>` of your document, just before Alpine.

```html

```

### NPM

```shell
npm install @flexilla/alpine-offcanvas
```

Add the `x-offcanvas` directive to your project by importing the package **before** starting Alpine.

```js
import Alpine from 'alpinejs';
import PluginOffcanvas from '@flexilla/alpine-offcanvas';

Alpine.plugin(PluginOffcanvas);

Alpine.start();
```

##  Usage

```html

```

## License

Copyright (c) 2025 Johnkat MJ and contributors.

Licensed under the MIT license, see [LICENSE](LICENSE) for details.
npm package: @flexilla/alpine-popover
Description: AlpineJS plugin for adding Popover functionality to your AlpineJS components
Author: Johnkat MJ
Latest version: 0.3.1

<h1 align="center">Alpine Offcanvas</h1>

<p align="center">
  Simple Interactif Offcanvas Directive for <a href="https://alpinejs.dev">Alpine.js</a>
</p>


## Installation

### CDN

Include the following `<script>` tag in the `<head>` of your document, just before Alpine.

```html

```

### NPM

```shell
npm install @flexilla/alpine-offcanvas
```

Add the `x-offcanvas` directive to your project by importing the package **before** starting Alpine.

```js
import Alpine from 'alpinejs';
import PluginOffcanvas from '@flexilla/alpine-offcanvas';

Alpine.plugin(PluginOffcanvas);

Alpine.start();
```

##  Usage

```html

```

## License

Copyright (c) 2025 Johnkat MJ and contributors.

Licensed under the MIT license, see [LICENSE](LICENSE) for details.
npm package: @flexilla/alpine-tooltip
Description: AlpineJS plugin for creating tooltip components
Author: Johnkat MJ
Latest version: 0.1.1

<h1 align="center">Alpine Tooltip</h1>

<p align="center">
  A port of Flexilla Tooltip for <a href="https://alpinejs.dev">Alpine.js</a>
</p>


## Installation

### CDN

Include the following `<script>` tag in the `<head>` of your document, just before Alpine.

```html

```

### NPM

```shell
npm install @flexilla/alpine-tooltip
```

Add the `x-tooltip` directive to your project by importing the package **before** starting Alpine.

```js
import Alpine from 'alpinejs';
import PluginTooltip from '@flexilla/alpine-tooltip';

Alpine.plugin(PluginTooltip);

Alpine.start();
```

##  Usage

```html

```

## License

Copyright (c) 2025 Johnkat MJ and contributors.

Licensed under the MIT license, see [LICENSE](LICENSE) for details.
npm package: @flexilla/auto-resize-area
Description: A lightweight JavaScript component that automatically resizes text areas based on content
Author: johnkat-mj
Latest version: 2.1.0

# @flexilla/auto-resize-area

This package provides a utility class, `AutoResizableTextArea`, that allows you to create auto-resizable text areas in your web applications.

## Installation

You can install the `@flexilla/auto-resize-area` package via npm:

```shell
npm install @flexilla/auto-resize-area
```

## Usage

To use the `AutoResizableTextArea` class, follow these steps:

Import the class into your JavaScript or TypeScript file:
```ts
import { AutoResizableTextArea } from '@flexilla/auto-resize-area';
```

Use it With JS
```js
const autoResizableTextarea = new AutoResizableTextArea('[data-my-autorizable]');
```

Okay Now the Your Text Area will now autonomatically resize based on its content whenever the user types or window is resized

If you don't want to have to create instance, you can use the shortcut function `fAutoResizableTextArea` like this :

```js
import { fAutoResizableTextArea } from '@flexilla/auto-resize-area';
fAutoResizableTextArea('[data-my-autorizable]');
```
## Example
```html
<textarea placeholder="Enter something here" data-autoresizable class="px-3 py-1.5 w-full rounded-md bg-gray50 border border-gray-200 dark:border-gray-800 focus:outline focus:outline-2 focus:outline-blue-600 dark:focus:outline-blue-500 placeholder:text-gray-400 dark:placeholder:text-gray-600 text-gray-700 dark:text-gray-300 resize-none invalid:outline-red-600 dark:invalid:outline-red-500"></textarea>

<script>
  import { fAutoResizableTextArea } from '@flexilla/auto-resize-area';
  fAutoResizableTextArea('textarea');
</script>
```
npm package: @flexilla/collapse
Description: A versatile and interactive collapse component for creating collapsible sections in web applications, conserving space and improving user experience.
Author: johnkat-mj
Latest version: 2.1.6

# Collapse Component

The Collapse component is used to hide and show an element.

## Params

| Params       | Description                            | Type                                    |
| ------------ | -------------------------------------- | --------------------------------------- |
| collapseElement | The element to be collapsed/expanded    | HTMLElement                            |
| triggerElement  | The element that triggers the collapse | HTMLElement \| null                     |
| options       | Additional options for the Collapse    | CollapseOptions                         |


### CollapseOptions

| Option       | Description                            | Type                                    |
| ------------ | -------------------------------------- | --------------------------------------- |
| orientation  | The orientation of the collapse         | "vertical" \| "horizontal" \| "vertical" |
| defaultState | The default state of the collapse       | "open" \| "close" \| "close"             |

## Example

```js
const options = {
  orientation: "vertical",
  defaultState: "close",
};

const collapse = new Collapse(
  '#myCollapseElement',
  options,
  '#myTriggerElement',
);

// Show the collapse element
collapse.show();

// Hide the collapse element
collapse.hide();

// Toggle the collapse element
collapse.toggle();
```
npm package: @flexilla/dismissible
Description: A lightweight JavaScript component that automatically makes a component dismissible for easy user interaction.
Author: johnkat-mj
Latest version: 2.0.15

# @flexilla/dismissible | Dismissible Component

`@flexilla/dismissible` is a lightweight package that provides a way to dismiss elements from the DOM or hide them from the screen.

## Installation

```shell
npm install @flexilla/dismissible
```
Import 
```js
import Dismissible from '@flexilla/dismissible';
```

## Params

| Name | Description | Data Attributes | Type | | --------------------- | -------------------------------------- | --------------- | -------------------- | | dismissibleElement | The element to be dismissed. | - | HTMLElement | | action | The action to perform when dismissing the element. Available options: "remove-from-dom", "hide-from-screen". | data-action | "remove-from-dom" \| "hide-from-screen" | | onDismiss | The callback function to be executed when the element is dismissed. | - | () => void |

## Example
```html
<div class="dismissable-element" data-action="remove-from-dom">
    <button class="dismiss-button" data-dismiss-btn>Dismiss</button>
</div>

<script>
    const dismissible = new Dismissible('.dismissable-element',
        action: "remove-from-dom",
        onDismiss: () => {
            console.log("Element dismissed!");
        });

        // or 
        fDismissible('.dismissable-element',
        action: "remove-from-dom",
        onDismiss: () => {
            console.log("Element dismissed!");
        })
</script>
```
npm package: @flexilla/pin-input
Description: A lightweight JavaScript component for creating PIN and OTP input fields with validation and keyboard navigation support.
Author: johnkat-mj
Latest version: 0.0.2

# @flexilla/pin-input | PIN Input Component

`@flexilla/pin-input` is a lightweight JavaScript component for creating PIN and OTP input fields with validation and keyboard navigation support.

## Installation

```shell
npm install @flexilla/pin-input
```

Import 
```js
import { PinInput } from '@flexilla/pin-input';
```

## Usage

Create your HTML structure with input elements that have the `data-pin-input` attribute:

```html
<div data-demo-1 class="flex items-center gap-2"> 
  <input data-pin-input maxlength="1" class="size-10 border border-gray-200 rounded-md"/> 
  <input data-pin-input maxlength="1" class="size-10 border border-gray-200 rounded-md"/> 
  <input data-pin-input maxlength="1" class="size-10 border border-gray-200 rounded-md"/> 
  <input data-pin-input maxlength="1" class="size-10 border border-gray-200 rounded-md"/> 
</div>
```

Initialize the PinInput component:

```js
const pinContainer = document.querySelector('[data-demo-1]');
const pinInput = new PinInput(pinContainer, {
  validation: /\d/ // Optional: Custom validation regex (default: digits only)
});

// Listen for changes
pinInput.onChange((value) => {
  console.log('Current value:', value);
  
  if (pinInput.isComplete) {
    console.log('PIN is complete!');
    // Submit form or perform verification
  }
});

// Clean up event listeners when done
// pinInput.cleanup();
```

## Features

- Automatic focus management between inputs
- Paste support for filling multiple fields at once
- Keyboard navigation (arrow keys, backspace)
- Custom validation with regex patterns
- Completion detection
- Event callbacks

## API

### Options

| Name | Description | Type | Default |
| ---- | ----------- | ---- | ------- |
| validation | Regular expression for input validation | RegExp | `/\d/` (digits only) |

### Methods

| Method | Description |
| ------ | ----------- |
| `onChange(callback)` | Register a callback function that receives the current value when changed |
| `cleanup()` | Remove all event listeners |

### Properties

| Property | Description | Type |
| -------- | ----------- | ---- |
| `value` | Current combined value of all inputs | string |
| `isComplete` | Whether all input fields are filled | boolean |
npm package: @flexilla/popper
Description: Deprecated: This package is no longer maintained. Please use Replacement Package (https://github.com/unify-ui-dev/flexipop) instead.
Author: johnkat-mj
Latest version: 2.0.3
Deprecated: This package is no longer maintained. Please use Replacement Package (https://github.com/unify-ui-dev/flexipop) instead.

> [!IMPORTANT]
> ⚠️ This package has been replaced by [flexipop](https://github.com/unify-ui-dev/flexipop) This means we will no longer work on it.