open-index/open-npm huggingface dataset:
npm package: @figspec/components
Description: Unofficial Figma spec viewer: Live Embed Kit - Live + Guidelines + Inspector
Latest version: 2.1.0

# @figspec/components

[![npm version](https://img.shields.io/npm/v/%40figspec/components)](https://www.npmjs.com/package/@figspec/components)
[![docs HTML (with demo)](<https://img.shields.io/badge/docs-HTML%20(with%20demo)-e67700>)
](https://pocka.github.io/figspec/)

`@figspec/components` is a set of CustomElements that renders Figma file/frame and displays Figma's editor-like inspector for a selected node.

The components are designed to work on Figma REST API result.
This library does not provided a functionality to invoke Figma REST API endpoints.

## Installation

```sh
$ npm i @figspec/components
```

This library does not provide bundled script. Please use CDN or bundle on your own.

## Usage

Import the entry script (`import '@figspec/components'`) and it'll register our custom elements.
Then you can now use these on your page.

```html
<body>
  <figspec-frame-viewer id="figma_frame"></figspec-frame-viewer>
</body>
```

```js
// your script.js
import "@figspec/components";

const figmaFrame = document.getElementById("figma_frame")

figmaFrame.apiResponse = /* ... */;
figmaFrame.renderedImage = /* ... */;
```

To display an entire Figma File, use `<figspec-file-viewer>` instead.

```html
<body>
  <figspec-file-viewer id="figma_file"></figspec-file-viewer>
</body>
```

```js
// your script.js
import "@figspec/components";

const figmaFile = document.getElementById("figma_file")

figmaFrame.apiResponse = /* ... */;
figmaFrame.renderedImages = /* ... */;
```

To see working examples and API docs, please check out [the docs site](https://pocka.github.io/figspec/).

## Browser supports

This library works on browser implementing WebComponents v1 spec and ES2019.
The bundled files are at `esm/es2019`.

## Related packages

- [`@figspec/react`](https://github.com/pocka/figspec-react) ... React bindings for this package.
npm package: @figspec/react
Description: React binding for figspec
Latest version: 2.0.1

# @figspec/react

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
[![npm](https://img.shields.io/npm/v/@figspec/react?label=%40figspec%2Freact)](https://www.npmjs.com/package/@figspec/react)

A React binding for [`@figspec/components`](https://github.com/pocka/figspec).

## Installation

```sh
# npm
$ npm i @figspec/react

# Yarn
$ yarn add @figspec/react

# pnpm
$ pnpm add @figspec/react
```

## Usage

See the docs at `@figspec/components`.

This bindings enables you to use the CustomElement's property via React's component props.
You don't need to use kebab-case attributes :camel::dash:

```jsx
import { FigspecViewer } from "@figspec/react";

const logSelectedNode = (ev) => {
  console.log(ev.detail.selectedNode);
};

<FigspecFrameViewer
  nodes={nodes}
  renderedImage={renderedImage}
  zoomMargin={200}
  onNodeSelect={logSelectedNode}
/>;
```
npm package: @figueio/utils
Description: ## Making a change
Latest version: 1.1.1


# USAGE

## Making a change

After making a change, you should call the command

```bash
yarn changeset
```


## Making a new version of the package

When we want to release a new version, you should call the command

```bash
yarn changeset version
```

It will create a changelog based on all change made

## Publishing

When a new version is made, a push on main will automatically publish on npm the package
npm package: @figui3/icons
Description: Icon components for FigUI3 Design System
Latest version: 5.0.0

# @figui3/icons

Icon components for FigUI3 Design System, sourced from Figma UI3.

## Installation

```bash
npm install @figui3/icons
# or
yarn add @figui3/icons
# or
pnpm add @figui3/icons
```

## Usage

Icons are available in two sizes: **16px** (standard) and **24px** (large).

### Importing Icons

```tsx
// Import 16px icons
import { Plus, Close, ChevronRight } from '@figui3/icons/16';

// Import 24px icons
import { Search, Settings } from '@figui3/icons/24';
```

### Basic Usage

```tsx
import { Plus } from '@figui3/icons/16';

function MyComponent() {
  return <Plus />;
}
```

### Custom Size

```tsx
import { Search } from '@figui3/icons/24';

function MyComponent() {
  return <Search size={32} />;
}
```

### Custom Color

Icons use `currentColor` by default and can be customized:

```tsx
import { Check } from '@figui3/icons/16';

// Using CSS color
<Check color="#00ff00" />

// Using design tokens
<Check color="var(--color-icon-success)" />

// Inheriting from parent
<div style={{ color: 'red' }}>
  <Check /> {/* Will be red */}
</div>
```

### All Props

```tsx
interface IconProps {
  size?: number;        // Custom size in pixels (default: 16 or 24)
  color?: string;       // Custom color (default: currentColor)
  className?: string;   // Additional CSS class
  // ...all SVG element props
}
```

## Available Icons (16px)

- `Check` - Checkmark icon
- `ChevronDown` - Downward chevron
- `ChevronRight` - Rightward chevron
- `Close` - Close/X icon
- `Minus` - Minus/subtract icon
- `Plus` - Plus/add icon
- `Search` - Search/magnifying glass
- `Settings` - Settings/gear icon

## Available Icons (24px)

- `ChevronDown` - Downward chevron
- `ChevronRight` - Rightward chevron
- `Close` - Close/X icon
- `Plus` - Plus/add icon
- `Search` - Search/magnifying glass
- `Settings` - Settings/gear icon

## Creating Custom Icons

Use the `createIcon` factory function to create your own icons:

```tsx
import { createIcon } from '@figui3/icons';

const MyCustomIcon = createIcon({
  path: (
    <path
      d="M8 3v10M3 8h10"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
    />
  ),
  displayName: 'MyCustomIcon',
  defaultSize: 16,
});

// Use it like any other icon
<MyCustomIcon size={20} />
```

## Design System Integration

Icons are designed to work seamlessly with FigUI3 design tokens:

```tsx
import { Plus } from '@figui3/icons/16';

// Primary action
<Plus color="var(--color-icon-brand)" />

// Danger action
<Plus color="var(--color-icon-danger)" />

// Disabled state
<Plus color="var(--color-icon-disabled)" />
```

## TypeScript Support

Full TypeScript support with exported types:

```tsx
import type { IconProps, CreateIconOptions } from '@figui3/icons';
```

## License

MIT