open-index/open-npm huggingface dataset:
npm package: @figmazing/resizable
Description: ### install
Latest version: 0.0.5

# @figmazing/resizable

### install

```bash
yarn add @figmazing/resizable
```

### usage

> Both `ui` and `main` are required to use this package.

```tsx
// ui
import { Resizable } from "@figmazing/resizable";

// create a resizable component

const App = () => {
  return (
    <Resizable
      style={{
        position: "fixed",
        bottom: "2px",
        right: "2px",
        width: "16px",
        height: "16px",
      }}
    />
  );
};
```

```ts
// main
import "@figmazing/resizable/main";

// If you want restore last size
import { restoreWindowSize } from "@figmazing/resizable/main";

function app() {
  // restore last size
  restoreWindowSize();
}
```
npm package: @figouzes/falcon-css
Description: Typesafe CSS composer
Author: FalconPilot
Latest version: 0.3.13

<p align="center">
  <img alt="FalconCSS" src="https://github.com/figouzes-articulees/fig-one/blob/main/packages/falcon-css/logo.svg">
</p>

# What is FalconCSS ?

When contributing to the Figouzes project, I wanted to introduce a type-safe way to write CSS. I got used to a wonderful library called [elm-css](https://github.com/rtfeldman/elm-css), which is, in my opinion, a really optimal way of composing CSS (I could never thank RTFeldman enough for his work on elm-css).

It's a collection of types and framework-agnostic functions used to compose CSS. It currently is in very, very early stage and requires some heavy work. It also uses [csstype](https://github.com/frenic/csstype) to be as consistent as possible with CSS evolutions.

### Examples

With server-side CSS building :
```ts
import {
  backgroundColor,
  cssProperties,
  display
} from '@figouzes/falcon-css'

const generateCSS = cssProperties([
  display('inline-block'),
  backgroundColor([200, 255, 150])
])
```

With styled-components
```ts
import {
  backgroundColor,
  cssProperties,
  display
} from '@figouzes/falcon-css'

import { styled } from 'your-styled-components-framework'

const myComponent = styled`
  ${display('inline-block')}
  ${backgroundColor([200, 255, 150])}
`
```

With a JSS-style framework
```ts
import { rgba } from '@figouzes/falcon-css'

import { jss } from 'your-jss-like-framework'

const myElement = jss({
  display: 'inline-block',
  backgroundColor: rgba([200, 250, 150])
})
```
npm package: @figr-design/identity-code-lib
Description: This repo contains code for components exported from Figrs design system generator (Identity).
Author: Figr
Latest version: 1.15.0

<h1 align="center">Identity Code Library</h1>

[Identity](https://identity.figr.design/) is a design system generator by [Figr Design](https://figr.design/).

Identity has a figma plugin using which you can generate an entire design system in figma.

Identity Code Library offer production ready React component for the components that we offer in the design system generated via our Identity Figma plugin.

## Installation

```bash
npm i @figr-design/identity-code-lib
```

```bash
yarn add @figr-design/identity-code-lib
```

## How to use?

### Step 1

Generate a design system via our figma plugin - [Identity](https://www.figma.com/community/plugin/1350743748296105581/generate-design-systems-quickly-figr-identity-free-beta).

Side note: If you just want to try our components before creating a full design system then please visit [our docs](https://identity.figr.design/installation/) and follow the instruction mentioned there.

### Step 2

Copy the CSS styles from our plugin and paste in in your root css file.

If you don't have an root CSS file then follow these steps:

```
1: cd /path/to/your-project-directory

2: touch index.css

3: Open main.tsx or root component and import the root css file in it.

4: import "./index.css"

5: Paste your copied CSS styles in "index.css".
```

### Step 3

Use your required components.

```javascript
import { Button } from "@figr-design/identity-code-lib";
import "@figr-design/identity-code-lib/dist/index.css";

export default function App() {
  return <Button>Submit</Button>;
}
```

## License

This project is licensed under the terms of the
[MIT license](/LICENSE).