open-index/open-npm huggingface dataset:
npm package: @overdoser/react-toolkit
Description: A modern, themeable React component library with SCSS modules.
Latest version: 0.0.2

# @crk/react-toolkit

A modern, themeable React component library with SCSS modules.

## Installation

```bash
npm install @crk/react-toolkit
```

## Setup

Import the stylesheet in your app entry point:

```ts
import '@crk/react-toolkit/index.css';
```

## Theming

Override `--crk-*` CSS custom properties to customize the theme:

```css
:root {
  --crk-color-primary: #3b82f6;
  --crk-color-danger: #ef4444;
  --crk-font-family: 'Inter', sans-serif;
}
```

## Components

| Component | Description |
| --- | --- |
| **Button** | Variants: `primary`, `secondary`, `danger`, `ghost`. Multiple sizes. Loading states with `dots`, `shimmer`, and `border` animations. |
| **Link** | Styled link with variants and external link support. |
| **Typography** | Renders `h1`-`h6`, `p`, `span`, `label`. Supports `weight`, `color`, `align`, and `truncate`. |
| **List / ListItem** | Ordered and unordered lists with configurable spacing. |
| **Table** | Sortable columns, multi-sort with Ctrl+click, pagination, and server-side sort support. |
| **Dropdown** | Menu dropdown with chevron indicator. Also works as a selectable form input with `options`, `value`, and `onChange`. |
| **Popover** | Positioned popover anchored to a trigger element. |
| **Modal** | Portal-based modal with `Header`, `Body`, and `Footer` compound components. Includes focus trap and escape/backdrop close. |
| **Form / FormField** | Form wrapper with react-hook-form integration. |
| **Input** | Text input with sizes, error state, and prefix/suffix slots. |
| **Select** | Native `<select>` with a custom arrow indicator. |
| **Checkbox** | Checkbox with label and indeterminate state support. |
| **Radio / RadioGroup** | Context-based radio group. |
| **Textarea** | Textarea with resize control. |

## Hooks

| Hook | Description |
| --- | --- |
| `useClickOutside` | Detect clicks outside a ref element. |
| `useFocusTrap` | Trap focus within a container. |
| `useKeyboard` | Bind keyboard shortcuts. |
| `useTableSort` | Manage table sort state (single and multi-column). |

## Usage

### Button

```tsx
import { Button } from '@crk/react-toolkit';

<Button variant="primary" size="md" onClick={handleClick}>
  Save
</Button>

<Button variant="danger" loading loadingType="dots">
  Deleting...
</Button>
```

### Form

```tsx
import { Form, FormField, Input, Button } from '@crk/react-toolkit';
import { useForm } from 'react-hook-form';

function LoginForm() {
  const methods = useForm();

  return (
    <Form formMethods={methods} onSubmit={methods.handleSubmit(onSubmit)}>
      <FormField name="email" label="Email">
        <Input />
      </FormField>
      <FormField name="password" label="Password">
        <Input type="password" />
      </FormField>
      <Button type="submit" variant="primary">Log in</Button>
    </Form>
  );
}
```

## Peer Dependencies

- `react` >= 18
- `react-dom` >= 18
- `react-hook-form` >= 7 (optional, needed for Form/FormField)

## License

MIT
npm package: @overengineering/fps-meter
Description: Fast and simple FPS meter for React. Renders to a canvas element and uses requestAnimationFrame to update the FPS counter.
Latest version: 0.2.4

# fps-meter [![](https://badgen.net/npm/v/@overengineering/fps-meter)](https://www.npmjs.com/package/@overengineering/fps-meter)

Fast and simple FPS meter for React. Renders to a canvas element and uses requestAnimationFrame to update the FPS counter.

<img src='https://share.cleanshot.com/y7S2FbpP/download' style='width: 120px'>

<br />

### Install

```sh
pnpm add @overengineering/fps-meter
```

### Usage

```tsx
import React from 'react'
import { FPSMeter } from '@overengineering/fps-meter'

export const MyApp: React.FC = () => {
  return (
    <div>
      <FPSMeter className="absolute right-0 top-0" height={40} />
    </div>
  )
}
```
npm package: @overengineering/genie
Description: TypeScript code generation utilities 4
Latest version: 0.0.0

# `@overengineering/genie` 🧞

`@overengineering/genie` lets you write your config files (e.g. `package.json`, `tsconfig.json`, ...) in TypeScript and automatically generate the 

## Features

- TypeScript: You get the full power of TypeScript to write your config files
- Simple: Each `some-file.json.genie.ts` file generates a `some-file.json` file
- Watch mode
- Generates files as read-only (to encourage changes only via `genie` files)

## Example

```ts
import { packageJSON } from "@overengineering/genie";
import { commonDependencies, TYPESCRIPT_VERSION } from '../shared/repo.js'

export default packageJSON({
  name: "my-package",
  version: "1.0.0",
  description: "My package",
  type: "module",
  exports: {
    // You can have comments to explain why something is the way it is
    ".": "./dist/index.js"
  },
  scripts: {
    build: "tsc"
  },
  dependencies: {
    ...commonDependencies
  },
  devDependencies: {
    typescript: TYPESCRIPT_VERSION
  }
})
```

## Usage

```bash
bunx @overengineering/genie **/*.genie.ts

# or with global install
bun add -g @overengineering/genie
genie **/*.genie.ts
```

## Supported Formats

- `package.json`
- `tsconfig.json`

## FAQ

### What problems does `genie` solve?

A modern TypeScript codebase (especially monorepos) contain a lot of config/setup files (e.g. `package.json`, `tsconfig.json`, ...) which exhibit the following problems:

- No comments (e.g. to explain why a particular line of config is needed and how it relates to other parts of the codebase)
- Duplication/repetition

### Where does the name `genie` come from?

Together with my friend [Nathan Herald](https://github.com/myobie) we've been thinking of names of this project related to "TypeScript", code generation and which should be short and memorable. After a bit of brainstorming we came up with `genie` and we both liked it. 🧞

## Todo

- Support inline JS execution (e.g. for `package.json` scripts)
- Derive Effect schema from JSON schemas (e.g. for Biome plugin)
- VSCode extension
  - e.g. version auto-completion in `package.json.genie.ts` dependencies
  - Auto-regenerate on save