open-index/open-npm huggingface dataset:
npm package: @fleedge/alert
Description: This library was generated with [Nx](https://nx.dev).
Latest version: 0.0.6

# @fleedge/alert

This library was generated with [Nx](https://nx.dev).

```angular
<fl-alert [(isPresented)]="isAlertPresented">
	<ng-template flAlertIcon>
		<fl-icon name="delete" />
	</ng-template>
	<ng-template flAlertTitle>
		Permanently delete?
	</ng-template>
	<ng-template flAlertText>
		Deleting the selected messages will also remove them from all synced devices.
	</ng-template>
	<ng-template flAlertDismiss>
		<fl-button (trigger)="cancel()">
			<ng-template flButtonLabel>
				Cancel
			</ng-template>
		</fl-button>
	</ng-template>
	<ng-template flAlertConfirm>
		<fl-button (trigger)="confirm()">
			<ng-template flButtonLabel>
				Delete
			</ng-template>
		</fl-button>
	</ng-template>
</fl-alert>
```
npm package: @fleedge/dialog
Description: This library was generated with [Nx](https://nx.dev).
Latest version: 0.0.6

# @fleedge/dialog

This library was generated with [Nx](https://nx.dev).

```angular
<fl-dialog [(isPresented)]="isDialogPresented">
	<fl-dialog-scaffold *flDialogContent>
		<ng-template flDialogScaffoldTitle>
			Create a new album
		</ng-template>
		<ng-template flDialogScaffoldContent>
			Form for creating a new album
		</ng-template>
		<ng-template flDialogScaffoldDismiss let-dismiss>
			<fl-button (trigger)="dismiss()">
				<fl-label *flButtonLabel>
					<ng-template flLabelTitle>
						Cancel
					</ng-template>
					<ng-template flLabelIcon>
						<fl-icon name="close" />
					</ng-template>
				</fl-label>
			</fl-button>
		</ng-template>
		<ng-template flDialogScaffoldAction>
			<fl-button (trigger)="save()">
				<ng-template flButtonLabel>
					Save
				</ng-template>
			</fl-button>
		</ng-template>
	</fl-dialog-scaffold>
</fl-dialog>
```
npm package: @fleedge/list
Description: This library was generated with [Nx](https://nx.dev).
Latest version: 0.0.2

# @fleedge/list

This library was generated with [Nx](https://nx.dev).

```angular
<fl-list [(selection)]="selection">
	@for (item of items(); track item.id) {
		<ng-template flListItem>
			{{ item.label }}
		</ng-template>
	}
</fl-list>
```
npm package: @fleedge/scaffold
Description: This library was generated with [Nx](https://nx.dev).
Latest version: 0.0.3

# @fleedge/scaffold

This library was generated with [Nx](https://nx.dev).

```html
<fl-scaffold>
	<ng-template flScaffoldTopBar>
		<fl-top-app-bar>
			<ng-template flTopAppBarTitle>
				Title
			</ng-template>
		</fl-top-app-bar>
	</ng-template>
	<ng-template flScaffoldContent>
		Content
	</ng-template>
</fl-scaffold>
```
npm package: @fleedge/state-layer
Description: A state layer is a semi-transparent covering on an element that indicates its state.
Latest version: 0.0.2

# State Layer

A state layer is a semi-transparent covering on an element that indicates its state.

## Purpose

State layers provide a systematic approach to visualizing states by using opacity. A layer can be applied to an entire
element or in a circular shape and only one state layer can be applied at a given time.

## On colors

By default, a component’s state layer color is derived from the color of its content, either the color of an icon or
label text if no icon is present.

An on color is a color role used by the content. Each container color has its own corresponding on color.

For example, if a container color is secondary container, the content will use the on secondary container color role.

## Tokens & values

The state layer uses a fixed percentage for the opacity for each state. A state layer uses the color used by content
(usually the on color) and the percentage opacity for its respective state.

## Usage

```html
<button type="button">
	<fl-state-layer class="state-layer" />
</button>
```

```scss
button {
	position: relative;
	background-color: var(--fl-sys-color-secondary-container);
	color: var(--fl-sys-color-on-secondary-container);

	@media (hover: hover) {
		&:hover .state-layer {
			--fl-state-layer-background-color: rgba(
				var(--fl-sys-color-on-secondary-container-rgb),
				var(--fl-sys-state-hover-state-layer-opacity)
			);
		}
	}

	&:active .state-layer {
		--fl-state-layer-background-color: rgba(
			var(--fl-sys-color-on-secondary-container-rgb),
			var(--fl-sys-state-pressed-state-layer-opacity)
		);
	}

	&:focus-visible .state-layer {
		--fl-state-layer-background-color: rgba(
			var(--fl-sys-color-on-secondary-container-rgb),
			var(--fl-sys-state-focus-state-layer-opacity)
		);
	}
}
```
npm package: @fleedge/table
Description: This library was generated with [Nx](https://nx.dev).
Latest version: 0.0.2

# @fleedge/table

This library was generated with [Nx](https://nx.dev).

```html
<fl-table [data]="data()">
	<ng-container flColumnDef="position">
		<ng-template flHeaderCellDef>No.</ng-template>
		<ng-template flCellDef let-element>{{ element.position }}</ng-template>
	</ng-container>
	<ng-container flColumnDef="name">
		<ng-template flHeaderCellDef>Name</ng-template>
		<ng-template flCellDef let-element>{{ element.name }}</ng-template>
	</ng-container>
	<ng-container flColumnDef="weight">
		<ng-template flHeaderCellDef>Weight</ng-template>
		<ng-template flCellDef let-element>{{ element.weight }}</ng-template>
	</ng-container>
	<ng-container flColumnDef="symbol">
		<ng-template flHeaderCellDef>Symbol</ng-template>
		<ng-template flCellDef let-element>{{ element.symbol }}</ng-template>
	</ng-container>
</fl-table>
```
npm package: @fleek-platform/env-guards
Description: This package is solving not direct usage of `process.env`. Instead create in `src` of your package where you need secrets file `secrets.ts` and use it like this:
Latest version: 1.10.0

# EnvGuards

This package is solving not direct usage of `process.env`. Instead create in `src` of your package where you need secrets file `secrets.ts` and use it like this:

```
import { parseEnvs } from '@fleek-platform/env-guards';

export const envGuards = parseEnvs([
  'HERE_LIST', //
  'THE_ENV_VARIABLES',
  'YOU_WANT_TO_USE',
]);
```

and then everywhere in your package you can use it like this:

```
import { envGuards } from './envGuards';

console.log(envGuards.HERE_LIST);
```

## Add support of new ENV name

The list of strings (name of envs) that you can pass to `parseEnvs` function is limited. If you want to extend it and add new env name, feel free to add it in this file: `/packages/env-guards/src/lib/availableEnvKeys.ts` and build the package before usage.