open-index/open-npm huggingface dataset:
npm package: @lms-elements/atomic
Description: Atomic components
Author: Vadim Khizhnyakov
Latest version: 7.2.13

# @lms-elements/atomic

> Atomic components that could be widely used

## Provided components

* Avatar
* Button
* ButtonViewEnum
* Checkbox
* FieldDropdown
* File
* NoteActions
* RadioField
* TextareaField
* Title
* Toggle

## Usage

```js
import { Checkbox } from '@lms-elements/atomic';

// code

<Checkbox
    checked={true}
    handleCheckboxChange={onCheckboxChange}
    label={'Label'}
/>

```
npm package: @lms-elements/hooks
Description: Custom React hooks
Author: Vadim Khizhnyakov
Latest version: 2.0.23

# @lms-elements/hooks

> React hooks that will save your time

## Provided hooks

* useGetHeightStyle
* useGetOnScrollHandler
* useGetScrollPosition
* useOuterClick
* useOuterClickField
* useWindowResize

## Usage

```js
import { useOuterClickField } from '@lms-elements/hooks';

// code
useOuterClickField(ref, input.onBlur, isBlur);
```
npm package: @lms-elements/test-component
Description: test component
Author: Vadim Khizhnyakov
Latest version: 2.0.226

# @lms-elements/test-component

<p>Test component with two themes</p>

Use it to test new features

## Installation

```
yarn add @lms-elements/test-component --dev
```

## Usage

``` js
import { TestComponent } from '@lms-elements/test-component';

// code

<TestComponent theme="dark" />
```
npm package: @lms-elements/utils
Description: commonly used utilities
Author: Vadim Khizhnyakov
Latest version: 1.1.4

# Utils

Package with commonly used utils

## Usage

```js
import { getObjectPropertyByString } from '@lms-elements/utils';

const a = {
    b: {
        c: {
            value: 'value',
        },
    },
};

const value = getObjectPropertyByString<string>(a, 'b.c.value'); // returns 'value'

```
npm package: @lms0016/claude-statusline-setup
Description: Setup Claude Code statusline with usage metrics display
Author: Alan
Latest version: 1.5.1

# claude-statusline-setup

Setup Claude Code statusline with usage metrics display.

## Installation

```bash
npm i -g @lms0016/claude-statusline-setup
claude-statusline-setup
```

## What it does

Installs a custom statusline for Claude Code that shows:

- Current model name (Opus, Sonnet, Haiku)
- Git branch with enhanced status indicators
- Context window usage
- Session usage (5-hour rolling limit)
- Weekly usage (7-day rolling limit)

Example output:
```
Opus · main ↑2 +3 ~1 · Context 32% (65k/200k) · Session 70% @2pm · Week 6% @Jan 24, 9am
```

### Git Status Indicators

| Symbol | Meaning |
|--------|---------|
| `↑N` | N commits ahead of remote |
| `↓N` | N commits behind remote |
| `+N` | N staged files |
| `~N` | N modified files (unstaged) |
| `-N` | N deleted files |
| `?N` | N untracked files |
| `!N` | N merge conflicts |
| `✓` | Clean working tree |

## Requirements

- macOS (uses Keychain for token storage)
- Claude Code CLI
- Node.js 16+ (required for npm, no additional install needed)

## Files installed

- `~/.claude/statusline-command.js` - The statusline script
- `~/.claude/settings.json` - Updated with statusLine config