open-index/open-npm huggingface dataset:
npm package: @getflourish/xstate-markdown-compiler
Description: Compile XState Markdown DSL to XState v5 machine code
Latest version: 0.1.2

# @getflourish/xstate-markdown-compiler

Compile an XState-flavored Markdown DSL (`machine.md` / `*.machine.md`) into XState v5 machine code.

This DSL is optimized for **fast writing of state machines in real-time collaboration** (for example, while whiteboarding in meetings), then compiling that draft into production-ready XState code.

### Why this format

- write states and transitions quickly without TypeScript boilerplate
- iterate live with teammates in plain text
- compile to consistent, reviewable machine code
- progressively add bindings, guards, context, and action effects as the design matures

## Install

```bash
pnpm add -D @getflourish/xstate-markdown-compiler
```

## CLI usage

Compile a single file:

```bash
xstate-markdown-compile src/machines/hand-detector.machine.md --ext=ts
```

Compile all `machine.md` / `*.machine.md` files under a directory:

```bash
xstate-markdown-compile src --ext=ts
```

Watch mode:

```bash
xstate-markdown-compile src --ext=ts --watch
```

## JavaScript API

```js
import { parse, compile } from "@getflourish/xstate-markdown-compiler";

const source = `
id: demoMachine

States:
IDLE (initial)
ACTIVE

Transitions:
IDLE -> ACTIVE on START
ACTIVE -> IDLE on STOP
`;

const ast = parse(source);
if (ast.errors.length) {
  console.error(ast.errors);
} else {
  const output = compile(ast);
  console.log(output);
}
```

---

## DSL examples

### 1) Minimal state machine

```md
id: toggle

States:
OFF (initial)
ON

Transitions:
OFF -> ON on TOGGLE
ON -> OFF on TOGGLE
```

### 2) Services + action/guard bindings

```md
id: alarmMachine

Services:
device from "@/services/device"
settings from "@/services/settings"

Action Bindings:
ringAlarm = device.ring
stopAlarm = device.stop

Guard Bindings:
isAlarmEnabled = settings.isAlarmEnabled

States:
IDLE (initial)
ALARM entry: ringAlarm if isAlarmEnabled exit: stopAlarm if isAlarmEnabled

Transitions:
IDLE -> ALARM on TRIGGER
ALARM -> IDLE on DISMISS
```

### 3) Context + assign action effects

```md
id: counter

Context:
count: number = 0

Action Effects:
increment = assign count = context.count + 1
resetCount = assign count = 0

States:
READY (initial)

Transitions:
READY -> READY on INC do increment
READY -> READY on RESET do resetCount
```

### 4) Comments and top-level notes

```md
Counter machine used in onboarding flow

# Keep the machine simple and deterministic
id: counterWithComments

States:
# Start state
IDLE (initial)
RUNNING

Transitions:
# Begin counting
IDLE -> RUNNING on START
RUNNING -> IDLE on STOP
```

Top-level comments are preserved at the top of compiled output, and section comments are attached to nearby generated code.

## Output style

Compiler output uses:

- `setup({ guards, actions }).createMachine(...)`
- generated `context` when defined in DSL
- `assign(...)` for `Action Effects`
- descriptive synthetic action names for guarded entry/exit actions
npm package: @getfly-ui/badge
Description: Badge for getfly UI
Latest version: 0.0.11

# Badge component

![NPM License](https://img.shields.io/npm/l/%40getfly-ui%2Fbadge?style=for-the-badge)
![NPM Version](https://img.shields.io/npm/v/%40getfly-ui%2Fbadge?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/min/%40getfly-ui%2Fbadge?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40getfly-ui%2Fbadge?style=for-the-badge)
![NPM Downloads](https://img.shields.io/npm/dm/%40getfly-ui%2Fbadge?style=for-the-badge)
![NPM Type Definitions](https://img.shields.io/npm/types/%40getfly-ui%2Fbadge?style=for-the-badge)

## How to use

```ts
import { Badge } from '@getfly-ui/badge';
```

OR

```ts
import { Badge } from 'getfly-ui';
```

# Props

## Badge

| Prop | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| `preset` | `enum` | `medium` | Preset badge |
| `color` | `string or undefined` |  | Color |
| `colorTheme` | `enum` | `cerulean-700` | Color theme |
| `text` | `number` |  | Text content number |
| `textColor` | `string or undefined` |  | Text color |
| `textColorTheme` | `enum` | `white` | Text color theme |
npm package: @getfly-ui/breadcrumb
Description: BreadCrumb for getfly UI
Latest version: 0.0.1

# BreadCrumb component

![NPM License](https://img.shields.io/npm/l/%40getfly-ui%2Fbreadcrumb?style=for-the-badge)
![NPM Version](https://img.shields.io/npm/v/%40getfly-ui%2Fbreadcrumb?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/min/%40getfly-ui%2Fbreadcrumb?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40getfly-ui%2Fbreadcrumb?style=for-the-badge)
![NPM Downloads](https://img.shields.io/npm/dm/%40getfly-ui%2Fbreadcrumb?style=for-the-badge)
![NPM Type Definitions](https://img.shields.io/npm/types/%40getfly-ui%2Fbreadcrumb?style=for-the-badge)

## How to use

```ts
import { BreadCrumb } from '@getfly-ui/breadcrumb';
```

OR

```ts
import { BreadCrumb } from 'getfly-ui';
```

# Props
| Prop | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| `items` | `BreadcrumbItem[]` | `[]` | List of breadcrumb items |
| `separator` | `enum` | `'chevron_right_outline'` | Icon used to separate breadcrumb items |
| `variant` | `enum` | `'text'` | Display style variant |
| `textColorTheme` | `enum` | `'grayscale-800'` | Default text color theme |
| `separatorColorTheme` | `enum` | `'grayscale-800'` | Default separator color theme |
| `activeColor` | `enum` | `'blue-primary-600'` | Active (last item) text color theme |
| `iconColorTheme` | `enum` | `'grayscale-800'` | Default separator color theme |
| `sizeIcon` | `number or undefined` | `'20px'` | Size icon |
| `sizeSeparator` | `number or undefined` | `'20px'` | Size icon |
| `textPreset` | `enum` | `'body_s_regular'` | Typography preset from `@getfly-ui/common` |
| `isSeparator` | `boolean or undefined` |  |  |
| `onClick` | `((item: BreadcrumbItem, index: number) => void) or undefined` |  | Click event handler (for non-active items) |
npm package: @getfly-ui/check-box
Description: Check box for getfly UI
Latest version: 0.0.10

# CheckBox component

![NPM License](https://img.shields.io/npm/l/%40getfly-ui%2Fcheck-box?style=for-the-badge)
![NPM Version](https://img.shields.io/npm/v/%40getfly-ui%2Fcheck-box?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/min/%40getfly-ui%2Fcheck-box?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40getfly-ui%2Fcheck-box?style=for-the-badge)
![NPM Downloads](https://img.shields.io/npm/dm/%40getfly-ui%2Fcheck-box?style=for-the-badge)
![NPM Type Definitions](https://img.shields.io/npm/types/%40getfly-ui%2Fcheck-box?style=for-the-badge)

## How to use

```ts
import { Switch } from '@getfly-ui/check-box';
```

OR

```ts
import { Switch } from 'getfly-ui';
```

# Props

## CheckBox.Radio

| Prop | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| `isActive` | `boolean or undefined` |  |  |
| `disabled` | `boolean or undefined` |  |  |
| `useMergeClass` | `string or undefined` |  |  |
| `icon` | `enum` |  |  |
| `iconSize` | `number or undefined` |  |  |
| `iconColorTheme` | `enum` |  |  |
| `iconColor` | `string or undefined` |  |  |
| `text` | `string or undefined` |  |  |
| `textPreset` | `enum` |  |  |
| `textColorTheme` | `enum` |  |  |
| `textColor` | `string or undefined` |  |  |
| `subTitle` | `string or undefined` |  |  |
| `subTitleColorTheme` | `enum` |  |  |
| `subTitleColor` | `string or undefined` |  |  |
| `subTitlePreset` | `enum` |  |  |
| `positionCheckBox` | `enum` |  |  |
| `checkBoxPreset` | `enum` |  |  |
| `checkBoxSize` | `number or undefined` |  |  |
| `colorTheme` | `enum` |  |  |
| `color` | `string or undefined` |  |  |
| `onSelect` | `((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void) or undefined` |  |  |
| `type` | `enum` |  |  |


## CheckBox.Square

| Prop | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| `isActive` | `boolean or undefined` |  |  |
| `disabled` | `boolean or undefined` |  |  |
| `useMergeClass` | `string or undefined` |  |  |
| `icon` | `enum` |  |  |
| `iconSize` | `number or undefined` |  |  |
| `iconColorTheme` | `enum` |  |  |
| `iconColor` | `string or undefined` |  |  |
| `text` | `string or undefined` |  |  |
| `textPreset` | `enum` |  |  |
| `textColorTheme` | `enum` |  |  |
| `textColor` | `string or undefined` |  |  |
| `subTitle` | `string or undefined` |  |  |
| `subTitleColorTheme` | `enum` |  |  |
| `subTitleColor` | `string or undefined` |  |  |
| `subTitlePreset` | `enum` |  |  |
| `positionCheckBox` | `enum` |  |  |
| `checkBoxPreset` | `enum` |  |  |
| `checkBoxSize` | `number or undefined` |  |  |
| `colorTheme` | `enum` |  |  |
| `color` | `string or undefined` |  |  |
| `onSelect` | `((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void) or undefined` |  |  |
npm package: @getfly-ui/chip
Description: Chip for getfly UI
Latest version: 0.0.10

# Chip component

![NPM License](https://img.shields.io/npm/l/%40getfly-ui%2Fchip?style=for-the-badge)
![NPM Version](https://img.shields.io/npm/v/%40getfly-ui%2Fchip?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/min/%40getfly-ui%2Fchip?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40getfly-ui%2Fchip?style=for-the-badge)
![NPM Downloads](https://img.shields.io/npm/dm/%40getfly-ui%2Fchip?style=for-the-badge)
![NPM Type Definitions](https://img.shields.io/npm/types/%40getfly-ui%2Fchip?style=for-the-badge)

## How to use

```ts
import { Chip } from '@getfly-ui/chip';
```

OR

```ts
import { Chip } from 'getfly-ui';
```

# Props

## Chip

| Prop | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| `preset` | `enum` | `medium` | Preset chip |
| `type` | `enum` | `tag` | Type chip |
| `useMergeClass` | `boolean or undefined` | `true` | @description merge className |
| `backgroundColorTheme` | `enum` |  | Color theme background |
| `backgroundColor` | `string or undefined` |  | Color background |
| `borderColorTheme` | `enum` |  | Border color theme |
| `borderColor` | `string or undefined` |  | Border color |
| `iconLeft` | `enum` |  | Icon left |
| `iconLeftColorTheme` | `enum` |  | Icon left color theme |
| `iconLeftColor` | `string or undefined` |  | Icon left color |
| `iconLeftSize` | `number or undefined` | `16` | Icon left size |
| `imageSource` | `string or undefined` |  | Image source |
| `imageSize` | `number or undefined` | `16` | Image size |
| `label` | `string or undefined` |  | Label text |
| `labelColorTheme` | `enum` |  | Label color theme |
| `labelColor` | `string or undefined` |  | Label color |
| `iconRight` | `enum` |  | Icon right |
| `iconRightColorTheme` | `enum` |  | Icon right color theme |
| `iconRightColor` | `string or undefined` |  | Icon right color |
| `iconRightSize` | `number or undefined` | `16` | Icon right size |
| `notify` | `number or undefined` |  | Notify number |
| `notifyColorTheme` | `enum` | `cerulean-700` | Notify Color theme |
| `notifyColor` | `string or undefined` |  | Notify Color |
| `notifyTextColorTheme` | `enum` | `white` | Notify Text Color theme |
| `notifyTextColor` | `string or undefined` |  | Notify Text Color |
| `disabled` | `boolean or undefined` | `false` | Disabled |
npm package: @getfly-ui/cli
Description: Builder JS Getfly UI
Author: Nguyễn Đạt
Latest version: 0.0.5

# Getfly Cli

![NPM License](https://img.shields.io/npm/l/%40getfly-ui%2Fcli?style=for-the-badge)
![NPM Version](https://img.shields.io/npm/v/%40getfly-ui%2Fcli?style=for-the-badge)
![NPM Downloads](https://img.shields.io/npm/dm/%40getfly-ui%2Fcli?style=for-the-badge)
![NPM Type Definitions](https://img.shields.io/npm/types/%40getfly-ui%2Fcli?style=for-the-badge)

### Use Getfly cli

#### 1. Install package

```cmd
npm i @getfly-ui/cli

yarn add @getfly-ui/cli

pnpm add @getfly-ui/cli

```

#### 2. Add to script in `package.json`

```json
...

"scripts": {
  ...
  "build": "getfly-cli"
},
...

```

**require project `.ts` & `src/index.ts`**
**Hello**

```
src/
  ├── other_file.ts
  └── index.ts
.editorconfig
.gitignore
eslint.config.mjs
package.json
README.md
tsconfig.json
```

#### 3. Run build

```cmd
npm run build

yarn build

pnpm build

```
npm package: @getfly-ui/common
Description: tailwind, preset, color
Author: Nguyễn Đạt
Latest version: 0.0.19

# Getfly UI Common

![NPM License](https://img.shields.io/npm/l/%40getfly-ui%2Fcommon?style=for-the-badge)
![NPM Version](https://img.shields.io/npm/v/%40getfly-ui%2Fcommon?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/min/%40getfly-ui%2Fcommon?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40getfly-ui%2Fcommon?style=for-the-badge)
![NPM Downloads](https://img.shields.io/npm/dm/%40getfly-ui%2Fcommon?style=for-the-badge)
![NPM Type Definitions](https://img.shields.io/npm/types/%40getfly-ui%2Fcommon?style=for-the-badge)


## Tailwind config

### 1. Import config to `tailwind.css`

```css
@import 'tailwindcss';

@config '@getfly-ui/common/tailwind-config';
```

OR

```css
@import '@getfly-ui/common/tailwind.css';
```

### 2. Preset for text

```ts
import { textPresets, useTextPresets, type TextPresetNames } from '@getfly-ui/common';

const style = { ...textPresets.body_l_semibold };

// React hooks

const preset = useTextPresets();
const style = { ...preset.body_l_semibold };
```

### 3. Radius config

```ts
import { radius, type Radius } from '@getfly-ui/common';

const style = { ..., borderRadius: radius['radius-1'] };

```

### 4. Spacing config

```ts
import { spacing, type Spacing } from '@getfly-ui/common';

const style = { ..., padding: spacing['spacing-1'] };

```

### 5. Colors Palette

```ts
import { colors, useColors, type Colors } from '@getfly-ui/common';

const style = { ..., color: color['blue-600']};

// React hooks

const color = useColors();

const style = { ..., color: color['blue-600']};

```

### 6. Emotion `Convert style to class`

```ts

import emotion from '@getfly-ui/common/emotion';

const { css, cx } = emotion;
const baseButton = css({
  // object style sheet
  width: 100,
  height: 100,
});

```
npm package: @getfly-ui/confirm
Description: Confirm for getfly UI
Latest version: 0.0.10

# Confirm component

![NPM License](https://img.shields.io/npm/l/%40getfly-ui%2Fconfirm?style=for-the-badge)
![NPM Version](https://img.shields.io/npm/v/%40getfly-ui%2Fconfirm?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/min/%40getfly-ui%2Fconfirm?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40getfly-ui%2Fconfirm?style=for-the-badge)
![NPM Downloads](https://img.shields.io/npm/dm/%40getfly-ui%2Fconfirm?style=for-the-badge)
![NPM Type Definitions](https://img.shields.io/npm/types/%40getfly-ui%2Fconfirm?style=for-the-badge)

## How to use

```ts
import { Confirm } from '@getfly-ui/confirm';
```

OR

```ts
import { Confirm } from 'getfly-ui';
```

# Props
npm package: @getfly-ui/content-divider
Description: ContentDivider for getfly UI
Latest version: 0.0.1

# ContentDivider component

![NPM License](https://img.shields.io/npm/l/%40getfly-ui%2Fcontent-divider?style=for-the-badge)
![NPM Version](https://img.shields.io/npm/v/%40getfly-ui%2Fcontent-divider?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/min/%40getfly-ui%2Fcontent-divider?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40getfly-ui%2Fcontent-divider?style=for-the-badge)
![NPM Downloads](https://img.shields.io/npm/dm/%40getfly-ui%2Fcontent-divider?style=for-the-badge)
![NPM Type Definitions](https://img.shields.io/npm/types/%40getfly-ui%2Fcontent-divider?style=for-the-badge)

## How to use

```ts
import { ContentDivider } from '@getfly-ui/content-divider';
```

OR

```ts
import { ContentDivider } from 'getfly-ui';
```

# Props
| Prop | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| `text` | `string or undefined` |  | Text displayed between lines |
| `textPreset` | `enum` | `body_m_semibold` | Typography preset for text |
| `colorThemeText` | `enum` | `grayscale-600` | Color theme for text |
| `align` | `enum` | `center` | Alignment of text or content |
| `variant` | `enum` | `solid` | Line style type |
| `colorThemeDivider` | `enum` | `grayscale-300` | Divider line color theme |
| `lineLength` | `string or number or { left?: string or number or undefined; right?: string or number or undefined; } or undefined` |  | Optional fixed line length (px or %) |
| `gap` | `number or undefined` | `12` | Layout gap between text and line |
| `marginY` | `number or undefined` | `0` | Vertical margin |
| `fullWidth` | `boolean or undefined` | `true` | Full width mode |
| `isLine` | `boolean or undefined` | `true` | Hide all lines |
| `outline` | `boolean or undefined` | `false` | Rounded label background for text |
| `leftContent` | `ReactNode` |  | Optional left  custom content |
| `rightContent` | `ReactNode` |  | Optional right custom content |
| `children` | `ReactNode` |  | Custom children instead of text |
| `backgroundColorTheme` | `enum` |  |  |
npm package: @getfly-ui/eslint
Description: Getfly UI Eslint Config
Author: Nguyễn Đạt
Latest version: 0.0.3

# Getfly UI Eslint Config

![NPM License](https://img.shields.io/npm/l/%40getfly-ui%2Feslint?style=for-the-badge)
![NPM Version](https://img.shields.io/npm/v/%40getfly-ui%2Feslint?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/min/%40getfly-ui%2Feslint?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40getfly-ui%2Feslint?style=for-the-badge)
![NPM Downloads](https://img.shields.io/npm/dm/%40getfly-ui%2Feslint?style=for-the-badge)
![NPM Type Definitions](https://img.shields.io/npm/types/%40getfly-ui%2Feslint?style=for-the-badge)

## 1. Eslint config for js

```ts
// eslint.config.mjs
import { baseEslint } from '@getfly-ui/eslint;

export default baseEslint;

```

## 2. Eslint config for `react-package`

```ts
// eslint.config.mjs
import { reactPackage } from '@getfly-ui/eslint;

export default reactPackage;

```
npm package: @getfly-ui/icons
Description: Icons for getfly UI
Latest version: 0.0.2

# Icons component

![NPM License](https://img.shields.io/npm/l/%40getfly-ui%2Ficons?style=for-the-badge)
![NPM Version](https://img.shields.io/npm/v/%40getfly-ui%2Ficons?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/min/%40getfly-ui%2Ficons?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40getfly-ui%2Ficons?style=for-the-badge)
![NPM Downloads](https://img.shields.io/npm/dm/%40getfly-ui%2Ficons?style=for-the-badge)
![NPM Type Definitions](https://img.shields.io/npm/types/%40getfly-ui%2Ficons?style=for-the-badge)


> ⚠️ **IMPORTANT:** Working [Icomoon](https://icomoon.io/new-app) new app, not working [Old app](https://icomoon.io/app)

![Config icomoon new app](https://cdn.jsdelivr.net/npm/@getfly-ui/icons/docs/icomoon-new-app.png "Config icomoon new app")

![Demo Icomoon](https://cdn.jsdelivr.net/npm/@getfly-ui/icons/docs/demo.jpg "Demo iconmoon")

## How to use

```ts
import { Icomoon } from '@getfly-ui/icons';
```

OR

```ts
import { Icomoon } from 'getfly-ui';
```

### Config file json icomoon

#### React

```ts
import iconSet from './icomoon.json'; // icomoon new app

type IconProps = Omit<IcomoonProps, 'iconSet'>;

const Icon = ({ icon, size = 24, ...rest }: IconProps) => (
  <Icomoon iconSet={iconSet} icon={icon} size={size} {...rest} />
);

```

#### React Native

```ts
import Svg, { Path, Rect, G, Defs } from 'react-native-svg';

import iconSet from './icomoon.json'; // icomoon new app

type IconProps = Omit<IcomoonProps, 'iconSet'>;

// using native components
const nativeComponents = {
  path: Path,
  rect: Rect,
  g: G,
  defs: Defs,
};

const Icon = ({ icon, size = 24, ...rest }: IconProps) => (
  <Icomoon
    iconSet={iconSet}
    icon={icon}
    size={size}
    SvgComponent={Svg}
    components={nativeComponents}
    {...rest}
  />
);

```

# Props

## Icomoon

| Prop | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| `iconSet` | `any` |  |  |
| `icon` | `string` |  |  |
| `size` | `number` |  |  |
| `style` | `CSSProperties or undefined` |  |  |
| `className` | `string or undefined` |  |  |
| `color` | `string or undefined` |  |  |
| `offset` | `number or undefined` |  |  |
| `currentColor` | `boolean or undefined` |  |  |
| `SvgComponent` | `JSXElementConstructor<any> or undefined` |  | For React Native config Svg from react-native-svg |
| `components` | `ComponentMap or undefined` |  | Object config component { path: Path, g: G, rect: Rect, defs: Defs } |
npm package: @getfly-ui/notification
Description: Notification for getfly UI
Latest version: 0.0.11

# Notification component

![NPM License](https://img.shields.io/npm/l/%40getfly-ui%2Fnotification?style=for-the-badge)
![NPM Version](https://img.shields.io/npm/v/%40getfly-ui%2Fnotification?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/min/%40getfly-ui%2Fnotification?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40getfly-ui%2Fnotification?style=for-the-badge)
![NPM Downloads](https://img.shields.io/npm/dm/%40getfly-ui%2Fnotification?style=for-the-badge)
![NPM Type Definitions](https://img.shields.io/npm/types/%40getfly-ui%2Fnotification?style=for-the-badge)

## How to use

```ts
import { hideAllNotification, Notification, showNotification } from '@getfly-ui/notification';
```

OR

```ts
import { hideAllNotification, Notification, showNotification } from 'getfly-ui';

// other code

// function show notification
const handleAddNotify = () => showNotification({
  data: { text: '...', type: 'success' },
  onClick: () => {
    // handle onClick notification item
  }
});

// function hide all notification
const handleHideAllNotification = () => hideAllNotification();

// inject component into render function or App.tsx
...
<Notification />
...
```
npm package: @getfly-ui/portal
Description: Portal for getfly UI
Latest version: 0.0.2

# Portal component

![NPM License](https://img.shields.io/npm/l/%40getfly-ui%2Fportal?style=for-the-badge)
![NPM Version](https://img.shields.io/npm/v/%40getfly-ui%2Fportal?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/min/%40getfly-ui%2Fportal?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40getfly-ui%2Fportal?style=for-the-badge)
![NPM Downloads](https://img.shields.io/npm/dm/%40getfly-ui%2Fportal?style=for-the-badge)
![NPM Type Definitions](https://img.shields.io/npm/types/%40getfly-ui%2Fportal?style=for-the-badge)

## How to use

```ts
import { Portal } from '@getfly-ui/portal';
```

OR

```ts
import { Portal } from 'getfly-ui';
```

# Props

## Portal

| Prop        | Type                       | Default         | Description |
| ----------- | -------------------------- | --------------- | ----------- |
| `container` | `HTMLElement or undefined` | `document.body` |             |
npm package: @getfly-ui/progress
Description: Progress for getfly UI
Latest version: 0.0.10

# Progress component

![NPM License](https://img.shields.io/npm/l/%40getfly-ui%2Fprogress?style=for-the-badge)
![NPM Version](https://img.shields.io/npm/v/%40getfly-ui%2Fprogress?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/min/%40getfly-ui%2Fprogress?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40getfly-ui%2Fprogress?style=for-the-badge)
![NPM Downloads](https://img.shields.io/npm/dm/%40getfly-ui%2Fprogress?style=for-the-badge)
![NPM Type Definitions](https://img.shields.io/npm/types/%40getfly-ui%2Fprogress?style=for-the-badge)

## How to use

```ts
import { ProgressBar } from '@getfly-ui/progress';
```

OR

```ts
import { ProgressBar } from 'getfly-ui';
```

# Props

## ProgressBar.Line

| Prop | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| `percent` | `number` | `100` | @description Percent percent track |
| `percentPreset` | `enum` |  |  |
| `useMergeClass` | `boolean or undefined` |  |  |
| `className` | `string or undefined` |  |  |
| `colorThemeValue` | `enum` |  |  |
| `colorValue` | `string or undefined` |  |  |
| `label` | `string or undefined` |  |  |
| `isShowPercent` | `boolean or undefined` |  |  |
| `widthTrack` | `number or undefined` |  |  |
| `heightTrack` | `number or undefined` |  |  |
| `labelPreset` | `enum` |  |  |
| `colorThemeLabel` | `enum` |  |  |
| `colorLabel` | `string or undefined` |  |  |
| `sizeDot` | `number or undefined` |  |  |
| `colorDot` | `string or undefined` |  |  |
| `colorThemeDot` | `enum` |  |  |
| `colorBorderDot` | `string or undefined` |  |  |
| `colorThemeBorderDot` | `enum` |  |  |
| `colorThemeTrack` | `enum` |  |  |
| `colorTrack` | `string or undefined` |  |  |
| `colorBarTheme` | `enum` |  |  |
| `colorBar` | `string or undefined` |  |  |
| `onChange` | `((percent: number) => void) or undefined` |  |  |


## ProgressBar.Circle

| Prop | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| `percent` | `number` | `100` | @description Percent percent track |
| `percentPreset` | `enum` |  |  |
| `useMergeClass` | `boolean or undefined` |  |  |
| `className` | `string or undefined` |  |  |
| `colorThemeValue` | `enum` |  |  |
| `colorValue` | `string or undefined` |  |  |
| `size` | `number` |  |  |
| `strokeWidth` | `number` |  |  |
| `colorThemeStroke` | `enum` |  |  |
| `colorStroke` | `string or undefined` |  |  |
| `colorThemeBorder` | `enum` |  |  |
| `colorBorder` | `string or undefined` |  |  |
| `text` | `string or undefined` |  |  |
| `colorThemeBackground` | `enum` |  |  |
| `colorBackground` | `string or undefined` |  |  |
npm package: @getfly-ui/segment
Description: Segment for getfly UI
Latest version: 0.0.11

# Segment component

![NPM License](https://img.shields.io/npm/l/%40getfly-ui%2Fsegment?style=for-the-badge)
![NPM Version](https://img.shields.io/npm/v/%40getfly-ui%2Fsegment?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/min/%40getfly-ui%2Fsegment?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40getfly-ui%2Fsegment?style=for-the-badge)
![NPM Downloads](https://img.shields.io/npm/dm/%40getfly-ui%2Fsegment?style=for-the-badge)
![NPM Type Definitions](https://img.shields.io/npm/types/%40getfly-ui%2Fsegment?style=for-the-badge)

## How to use

```ts
import { Segment } from '@getfly-ui/segment';
```

OR

```ts
import { Segment } from 'getfly-ui';
```

# Props

## Segment

| Prop | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| `classNameContainer` | `string or undefined` |  | @description Container segment |
| `classNameContent` | `string or undefined` |  | @description Option segment |
| `useMergeClassContainer` | `boolean or undefined` | `true` | @description merge className |
| `useMergeClassContent` | `boolean or undefined` | `true` | @description merge className |
| `disabled` | `boolean or undefined` |  | disable button |
| `data` | `ListItem[]` |  | array option segment |
| `idxActive` | `number or undefined` |  | Id option selected |
| `onSelect` | `(id: number, event?: MouseEvent<HTMLButtonElement, MouseEvent> or undefined) => void` |  | select option segment |
| `textPreset` | `enum` |  |  |
npm package: @getfly-ui/svg
Description: Svg icon for getfly UI
Latest version: 0.0.12

# Icon component

![NPM License](https://img.shields.io/npm/l/%40getfly-ui%2Fsvg?style=for-the-badge)
![NPM Version](https://img.shields.io/npm/v/%40getfly-ui%2Fsvg?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/min/%40getfly-ui%2Fsvg?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40getfly-ui%2Fsvg?style=for-the-badge)
![NPM Downloads](https://img.shields.io/npm/dm/%40getfly-ui%2Fsvg?style=for-the-badge)
![NPM Type Definitions](https://img.shields.io/npm/types/%40getfly-ui%2Fsvg?style=for-the-badge)

## How to use

```ts
import { Svg } from '@getfly-ui/svg';
```

OR

```ts
import { Svg } from 'getfly-ui';
```

# Props

## Svg

| Prop | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| `size` | `number | undefined` | `` |  |
| `useMergeClass` | `boolean | undefined` | `` |  |
| `className` | `string | undefined` | `` |  |
| `disabled` | `boolean | undefined` | `` |  |
| `marginLeft` | `number | undefined` | `` |  |
| `marginRight` | `number | undefined` | `` |  |
| `paddingLeft` | `number | undefined` | `` |  |
| `paddingRight` | `number | undefined` | `` |  |
| `onClick` | `((_e: MouseEvent<SVGSVGElement, MouseEvent>) => void) | undefined` | `` |  |
| `onMouseOver` | `(() => void) | undefined` | `` |  |
| `onMouseLeave` | `(() => void) | undefined` | `` |  |
| `name` | `enum` | `` |  |
| `type` | `enum` | `` |  |
| `colorTheme` | `enum` | `` |  |
| `color` | `string | undefined` | `` |  |
npm package: @getfly-ui/text-area
Description: TextArea for getfly UI
Latest version: 0.0.1

# TextArea component

![NPM License](https://img.shields.io/npm/l/%40getfly-ui%2Ftext-area?style=for-the-badge)
![NPM Version](https://img.shields.io/npm/v/%40getfly-ui%2Ftext-area?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/min/%40getfly-ui%2Ftext-area?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40getfly-ui%2Ftext-area?style=for-the-badge)
![NPM Downloads](https://img.shields.io/npm/dm/%40getfly-ui%2Ftext-area?style=for-the-badge)
![NPM Type Definitions](https://img.shields.io/npm/types/%40getfly-ui%2Ftext-area?style=for-the-badge)

## How to use

```ts
import { TextArea } from '@getfly-ui/text-area';
```

OR

```ts
import { TextArea } from 'getfly-ui';
```

# Props

## TextArea

| Prop | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| `disabled` | `boolean or undefined` |  | Disable the field |
| `required` | `boolean or undefined` |  | Mark as required |
| `onChange` | `ChangeEventHandler<HTMLTextAreaElement> or ((event: ChangeEvent<HTMLTextAreaElement>) => void) or undefined` |  | Change handler |
| `onBlur` | `FocusEventHandler<HTMLTextAreaElement> or ((event: FocusEvent<HTMLTextAreaElement, Element>) => void) or undefined` |  | Blur handler |
| `label` | `string or undefined` |  | Label displayed above the textarea |
| `hint` | `string or undefined` |  | Helper text displayed below |
| `hintPosition` | `enum` |  | @description - 'belowInput': below input
- 'belowLabel': below label |
| `error` | `boolean or undefined` |  | Error message or state |
| `hintPreset` | `enum` |  | Typography preset |
| `hintColor` | `enum` |  | Color |
| `variant` | `enum` | `'default'` | Visual variant of the component |
| `textPreset` | `enum` |  | Typography preset |
npm package: @getfly-ui/text-input
Description: TextInput for getfly UI
Latest version: 0.0.1

# TextInput component

![NPM License](https://img.shields.io/npm/l/%40getfly-ui%2Ftext-input?style=for-the-badge)
![NPM Version](https://img.shields.io/npm/v/%40getfly-ui%2Ftext-input?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/min/%40getfly-ui%2Ftext-input?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40getfly-ui%2Ftext-input?style=for-the-badge)
![NPM Downloads](https://img.shields.io/npm/dm/%40getfly-ui%2Ftext-input?style=for-the-badge)
![NPM Type Definitions](https://img.shields.io/npm/types/%40getfly-ui%2Ftext-input?style=for-the-badge)

## How to use

```ts
import { TextInput } from '@getfly-ui/text-input';
```

OR

```ts
import { TextInput } from 'getfly-ui';
```

# Props

## TextInput

| Prop | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| `required` | `boolean or undefined` |  | Mark as required |
| `onChange` | `ChangeEventHandler<HTMLInputElement> or ((event: ChangeEvent<HTMLTextAreaElement>) => void) or undefined` |  | Change handler |
| `onBlur` | `FocusEventHandler<HTMLInputElement> or ((event: FocusEvent<HTMLTextAreaElement, Element>) => void) or undefined` |  | Blur handler |
| `label` | `string or undefined` |  | Label displayed above the textarea |
| `hint` | `string or string[] or undefined` |  | Helper text displayed below |
| `hintPreset` | `enum` |  | Typography preset |
| `hintColorTheme` | `enum` |  | Color |
| `error` | `boolean or undefined` |  | Error message or state |
| `variant` | `enum` | `'default'` | Visual variant of the component |
| `labelPosition` | `enum` | `'top'` | Visual variant of the component |
| `inputGroup` | `ReactElement<unknown, string or JSXElementConstructor<any>>[] or undefined` |  |  |
| `textPreset` | `enum` |  | Typography preset |
| `iconLeft` | `enum` |  |  |
| `iconLeftColor` | `string or undefined` |  |  |
| `iconLeftName` | `enum` |  |  |
| `iconLeftColorTheme` | `enum` |  |  |
| `sizeIconLeft` | `number or undefined` |  |  |
npm package: @getfly-ui/tooltip
Description: Tooltip for getfly UI
Latest version: 0.0.11

# Tooltip component

![NPM License](https://img.shields.io/npm/l/%40getfly-ui%2Ftooltip?style=for-the-badge)
![NPM Version](https://img.shields.io/npm/v/%40getfly-ui%2Ftooltip?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/min/%40getfly-ui%2Ftooltip?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40getfly-ui%2Ftooltip?style=for-the-badge)
![NPM Downloads](https://img.shields.io/npm/dm/%40getfly-ui%2Ftooltip?style=for-the-badge)
![NPM Type Definitions](https://img.shields.io/npm/types/%40getfly-ui%2Ftooltip?style=for-the-badge)

## How to use

```ts
import { Tooltip } from '@getfly-ui/tooltip';
```

OR

```ts
import { Tooltip } from 'getfly-ui';
```

# Props

## Tooltip

| Prop | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| `children` | `ReactNode` |  | Content |
| `title` | `string` |  | Title tooltip |
| `placement` | `enum` | `'top'` | Placement |
| `useMergeClass` | `boolean or undefined` | `true` | Merge className |
| `usePortal` | `boolean or undefined` | `true` | Portal append to `container` 👇 |
| `container` | `HTMLElement or undefined` | `document.Body` | HTMLElement (default Body) |
| `colorTheme` | `enum` | `'grayscale-900'` | Background color theme tooltip |
| `color` | `string or undefined` |  | Background color tooltip |
| `textColorTheme` | `enum` | `'white'` | Text color theme tooltip |
| `textColor` | `string or undefined` |  | Text color |
| `textPreset` | `enum` | `'body_s_semibold'` | Text preset |
| `maxWidth` | `number or undefined` | `150` | maxWidth content |
| `classNameTooltip` | `string or undefined` |  | ClassName Tooltip css |
| `classNameArrow` | `string or undefined` |  | ClassName Arrow css |
| `classNameContainer` | `string or undefined` |  | ClassName Container css |
npm package: @getfly-ui/ts
Description: Typescript Config
Latest version: 0.0.5

# Getfly UI TsConfig

![NPM License](https://img.shields.io/npm/l/%40getfly-ui%2Fts?style=for-the-badge)
![NPM Version](https://img.shields.io/npm/v/%40getfly-ui%2Fts?style=for-the-badge)
![NPM Downloads](https://img.shields.io/npm/dm/%40getfly-ui%2Fts?style=for-the-badge)
![NPM Type Definitions](https://img.shields.io/npm/types/%40getfly-ui%2Fts?style=for-the-badge)

- Add content to **tsconfig.json**

## 1. base for js

```json
// tsconfig.json
{
  "extends": "@getfly-ui/ts/tsconfig.base.json",
  "compilerOptions": {
    "rootDir": ".",
    "allowJs": true,
    "noEmit": true,
    "removeComments": true,
    "sourceMap": false,
    "skipLibCheck": true
  },
  "include": ["*"],
  "exclude": ["node_modules", "dist"]
}
```

## 2. build for react package

```json
// tsconfig.json
{
  "extends": "@getfly-ui/ts/tsconfig.build.json",
  "compilerOptions": {
    "outDir": "dist",
    "types": ["@getfly-ui/ts/types"]
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}
```
npm package: @getflywheel/eslint-config-local
Description: Shareable ESLint ruleset for Local.
Author: Flywheel
Latest version: 1.0.5

[![npm version](https://badge.fury.io/js/%40getflywheel%2Feslint-config-local.svg)](https://badge.fury.io/js/%40getflywheel%2Feslint-config-local)

This package provides Local by Flywheel's .eslintrc as a shared config.