open-index/open-npm huggingface dataset:
npm package: @kuzanatoliorg/commitlint-config
Description: Kuzanatoliorg's commitlint config
Author: kuzanatoliy
Latest version: 1.4.0

# @kuzanatoliorg/commitlint-config

Shared configuration to use a commitlint library into the scope of @kuzantoliorg projects.

### Precondition

The package requires the installations:

[@commitlint/cli](https://www.npmjs.com/package/@commitlint/cli)

[@commitlint/config-conventional](https://www.npmjs.com/package/@commitlint/config-conventional)

### Install:

#### npm

```
npm install @kuzanatoliorg/commitlint-config --save-dev
```

#### yarn

```
yarn add @kuzanatoliorg/commitlint-config --dev
```

### Usage:

In case you don't have configuration the following **commitlint.config.js** configuration will be generated into the repository:

    module.exports = {
      extends: ['@commitlint/config-conventional'],
      rules: {
        'references-empty': [2, 'never'],
        'subject-case': [0, 'always'],
      },
    };
npm package: @kuzanatoliorg/prettier-config
Description: Kuzanatoliorg's prettier configuration
Author: kuzanatoliy
Latest version: 1.16.0

# @kuzanatoliorg/prettier-config

Shared configuration to use a prettier library into the scope of @kuzantoliorg projects.

## Precondition

The package requires the installation of [the prettier package](https://www.npmjs.com/package/prettier)

## Usage

### Install:

#### npm

```
npm install @kuzanatoliorg/prettier-config --save-dev
```

#### yarn

```
yarn add @kuzanatoliorg/prettier-config --dev
```

### Usage:

In case you don't have configuration the following **.prettierrc.js** configuration will be generated into the repository:

    module.exports = {
      ...require("@kuzanatoliorg/prettier-config"),
    };

**Note:** Script check only .json or .js config files and config into package.json.

For manual set-up, it is possible to add a link to package.json

    {
      // ...
      "prettier": "@kuzanatoliorg/prettier-config"
    }

or import into the js config file

    module.exports = {
      ...require("@kuzanatoliorg/prettier-config"),
      // Overided rules
    };

**Note:** Only js configuration allows overriding rules.
npm package: @kuzenbo/ai
Description: Initial Kuzenbo AI UI, hooks, and utility package scaffold.
Latest version: 0.0.1-alpha.3

# @kuzenbo/ai 🤖

Initial Kuzenbo AI UI, hooks, and utility package scaffold.

## Install 📦

```bash
bun add @kuzenbo/ai @kuzenbo/theme react react-dom
```

## Included Mocks 🧪

- `AiWidget` UI mock
- `useAiSession` hook mock
- `buildAiPrompt` utility mock
npm package: @kuzenbo/charts
Description: Ready-made chart components for Kuzenbo.
Latest version: 0.0.7

# @kuzenbo/charts

Ready-made chart components for Kuzenbo.

> ✅ **Status: Public**

## ✨ What This Package Solves

`@kuzenbo/charts` ships production-ready charts for trend, comparison, and distribution visualizations.

## 📦 Install

```bash
bun add @kuzenbo/charts @kuzenbo/core @kuzenbo/theme recharts
```

```bash
npm install @kuzenbo/charts @kuzenbo/core @kuzenbo/theme recharts
```

```bash
pnpm add @kuzenbo/charts @kuzenbo/core @kuzenbo/theme recharts
```

```bash
yarn add @kuzenbo/charts @kuzenbo/core @kuzenbo/theme recharts
```

## ✅ Requirements

- React 19+
- `react-dom`
- `recharts`
- `@kuzenbo/core`
- `@kuzenbo/theme`

## 🎨 Runtime Pairing

`@kuzenbo/charts` is designed to run with `@kuzenbo/core` and `@kuzenbo/theme`.

## ⚡ Quick Example

```tsx
"use client";

import { LineChart } from "@kuzenbo/charts/ui/line-chart";

const data = [
  { month: "Jan", revenue: 172000, target: 180000 },
  { month: "Feb", revenue: 186000, target: 190000 },
  { month: "Mar", revenue: 201000, target: 205000 },
];

const series = [
  { name: "revenue", label: "Revenue", color: "var(--color-chart-1)" },
  { name: "target", label: "Target", color: "var(--color-chart-4)" },
] as const;

export function ChartsQuickExample() {
  return (
    <LineChart
      chartRootProps={{ className: "h-80 w-full" }}
      data={data}
      dataKey="month"
      series={series}
      valueFormatter={(value) => `$${value.toLocaleString()}`}
      withLegend
    />
  );
}
```

## 🧱 Key Surface

- ✅ `@kuzenbo/charts/ui/area-chart`
- ✅ `@kuzenbo/charts/ui/bar-chart`
- ✅ `@kuzenbo/charts/ui/bubble-chart`
- ✅ `@kuzenbo/charts/ui/composite-chart`
- ✅ `@kuzenbo/charts/ui/donut-chart`
- ✅ `@kuzenbo/charts/ui/funnel-chart`
- ✅ `@kuzenbo/charts/ui/heatmap`
- ✅ `@kuzenbo/charts/ui/line-chart`
- ✅ `@kuzenbo/charts/ui/pie-chart`
- ✅ `@kuzenbo/charts/ui/radar-chart`
- ✅ `@kuzenbo/charts/ui/radial-bar-chart`
- ✅ `@kuzenbo/charts/ui/scatter-chart`
- ✅ `@kuzenbo/charts/ui/sparkline`

## 📚 Docs And Playgrounds

- [Charts Foundation](https://kuzenbo.com/docs/foundations/charts)
- [Line Chart](https://kuzenbo.com/docs/components/line-chart)
- [Bar Chart](https://kuzenbo.com/docs/components/bar-chart)

## 🧭 Compatibility And Status

`@kuzenbo/charts` is public and actively documented for production usage.
npm package: @kuzenbo/core
Description: Composable React UI primitives for Kuzenbo.
Latest version: 0.0.7

# @kuzenbo/core

Composable React UI primitives for production-grade interfaces.

> ✅ **Status: Public**

## ✨ What This Package Solves

`@kuzenbo/core` gives you token-aware primitives for forms, overlays, navigation, data display, and composition-heavy surfaces.

## 📦 Install

```bash
bun add @kuzenbo/core @kuzenbo/theme
```

```bash
npm install @kuzenbo/core @kuzenbo/theme
```

```bash
pnpm add @kuzenbo/core @kuzenbo/theme
```

```bash
yarn add @kuzenbo/core @kuzenbo/theme
```

## ✅ Requirements

- React 19+
- `react-dom`
- `@kuzenbo/theme`

## 🎨 Theme Pairing

`@kuzenbo/theme` is the required runtime pair for `@kuzenbo/core`.

## ⚡ Quick Example

```tsx
import "@kuzenbo/theme/prebuilt/kuzenbo.css";

import { Button } from "@kuzenbo/core/ui/button";
import { Card } from "@kuzenbo/core/ui/card";
import { ThemeBootstrapScript, ThemeProvider } from "@kuzenbo/theme";

export function CoreQuickExample() {
  return (
    <>
      <ThemeBootstrapScript />
      <ThemeProvider>
        <Card className="max-w-sm p-4">
          <p className="text-sm text-muted-foreground">
            Core primitives are ready.
          </p>
          <Button className="mt-3">Create project</Button>
        </Card>
      </ThemeProvider>
    </>
  );
}
```

## 📋 CopyButton

Use `CopyButton` when users need command-style clipboard actions with status feedback (`idle`, `copying`, `copied`, `failed`) and an accessible live region.

```tsx
import { CopyButton } from "@kuzenbo/core/ui/copy-button";

export function InstallCommandCopy() {
  return (
    <CopyButton value="pnpm add @kuzenbo/core @kuzenbo/theme">
      Copy install command
    </CopyButton>
  );
}
```

## 🧱 Key Surface

- Action controls (`Button`, `ActionIcon`, `ButtonGroup`)
- Forms and input controls (`Input`, `Select`, `Checkbox`, `RadioGroup`, `Textarea`, `NumberField`)
- Navigation and layout (`Container`, `Tabs`, `Breadcrumb`, `Sidebar`, `DropdownMenu`)
- Overlay and feedback (`Dialog`, `Drawer`, `Popover`, `Tooltip`, `Alert`, `Progress`)
- Data and composition (`Table`, `Card`, `Badge`, `Typography`, `Timeline`, `Toolbar`)
- Advanced interaction (`Autocomplete`, `Combobox`, `Command`, `Slider`, `RangeSlider`)

## 📚 Docs And Playgrounds

- [Installation](https://kuzenbo.com/docs/getting-started/installation)
- [Quickstart](https://kuzenbo.com/docs/getting-started/quickstart)
- [Components Index](https://kuzenbo.com/docs/components)
- [Button](https://kuzenbo.com/docs/components/button)
- [Action Icon](https://kuzenbo.com/docs/components/action-icon)
- [Composition Patterns](https://kuzenbo.com/docs/patterns/composition)

## 🧭 Compatibility And Status

`@kuzenbo/core` is public and actively documented. Keep `@kuzenbo/theme` installed in the same runtime.
npm package: @kuzenbo/datatable
Description: Initial Kuzenbo data table package scaffold powered by TanStack Table.
Latest version: 0.0.1-alpha.3

# @kuzenbo/datatable 📋

Initial Kuzenbo data table package scaffold powered by TanStack Table.

## Install 📦

```bash
bun add @kuzenbo/datatable @kuzenbo/theme @tanstack/react-table react react-dom
```

## Included Mocks 🧪

- `MockDataTable` UI mock
- `useDatatableState` hook mock
- `createMockColumns` utility mock
npm package: @kuzenbo/date
Description: Kuzenbo date and calendar primitives.
Latest version: 0.0.1-alpha.3

# @kuzenbo/date 📅

Kuzenbo date and calendar primitives.

## Install 📦

```bash
bun add @kuzenbo/date @kuzenbo/theme react react-dom react-day-picker
```

## Usage 🗓️

```tsx
import { Calendar } from "@kuzenbo/date";
```
npm package: @kuzenbo/hooks
Description: Standalone React hooks for Kuzenbo.
Latest version: 0.0.7

# @kuzenbo/hooks

Standalone React hooks for Kuzenbo and custom applications.

> ✅ **Status: Public**

## ✨ What This Package Solves

`@kuzenbo/hooks` provides focused React hooks that work independently of UI components and can be adopted in any React app.

## 📦 Install

```bash
bun add @kuzenbo/hooks
```

```bash
npm install @kuzenbo/hooks
```

```bash
pnpm add @kuzenbo/hooks
```

```bash
yarn add @kuzenbo/hooks
```

## ✅ Requirements

- React 19+

## 🎨 Theme Pairing

`@kuzenbo/hooks` can be used standalone.
When combined with Kuzenbo UI packages (`core`, `ai`, `charts`, `date`, `notifications`, `datatable`, `code`, `tiptap`), install `@kuzenbo/theme` as well.

## ⚡ Quick Example

```tsx
"use client";

import { useIsMobile } from "@kuzenbo/hooks/use-mobile";

export function HookQuickExample() {
  const isMobile = useIsMobile();

  return isMobile ? (
    <div data-layout="mobile">Mobile layout</div>
  ) : (
    <div data-layout="desktop">Desktop layout</div>
  );
}
```

## 🧱 Key Surface

- `useClipboard`
- `useFullscreen`
- `useIsMobile`
- `useIsomorphicEffect`

## 📚 Docs And Playgrounds

- [Hooks Index](https://kuzenbo.com/docs/hooks)
- [useClipboard](https://kuzenbo.com/docs/hooks/use-clipboard)
- [useFullscreen](https://kuzenbo.com/docs/hooks/use-fullscreen)
- [useMobile](https://kuzenbo.com/docs/hooks/use-mobile)
- [useIsomorphicEffect](https://kuzenbo.com/docs/hooks/use-isomorphic-effect)

## 🧭 Compatibility And Status

`@kuzenbo/hooks` is public and stable for standalone usage.
npm package: @kuzenbo/notifications
Description: Toast and notification primitives for Kuzenbo.
Latest version: 0.0.7

# @kuzenbo/notifications

Toast and notification primitives for non-blocking product feedback.

> ✅ **Status: Public**

## ✨ What This Package Solves

`@kuzenbo/notifications` provides composable toast primitives and ergonomic helper APIs for success, warning, error, loading, and async promise flows.

## 📦 Install

```bash
bun add @kuzenbo/notifications @kuzenbo/core @kuzenbo/theme
```

```bash
npm install @kuzenbo/notifications @kuzenbo/core @kuzenbo/theme
```

```bash
pnpm add @kuzenbo/notifications @kuzenbo/core @kuzenbo/theme
```

```bash
yarn add @kuzenbo/notifications @kuzenbo/core @kuzenbo/theme
```

## ✅ Requirements

- React 19+
- `react-dom`
- `@kuzenbo/core`
- `@kuzenbo/theme`

## 🎨 Runtime Pairing

`@kuzenbo/notifications` is designed to run with `@kuzenbo/core` and `@kuzenbo/theme`.

## ⚡ Quick Example

```tsx
"use client";

import { ToastProvider, useToast } from "@kuzenbo/notifications/ui/toast";

function SaveButton() {
  const toast = useToast();

  return (
    <button
      className="rounded-md border border-border px-3 py-2 text-sm"
      onClick={() => toast.success({ description: "Changes saved." })}
      type="button"
    >
      Save
    </button>
  );
}

export function NotificationsQuickExample() {
  return (
    <ToastProvider>
      <SaveButton />
    </ToastProvider>
  );
}
```

## 🧱 Key Surface

- Namespace primitives: `Toast.Root`, `Toast.Content`, `Toast.Title`, `Toast.Description`, `Toast.Action`, `Toast.Close`, `Toast.Viewport`
- Provider utilities: `ToastProvider`, `createToastManager`, `useToast`, `useToastManager`
- Async flows: `toast.promise(...)` for loading/success/error state transitions

## 📚 Docs And Playgrounds

- [Toast](https://kuzenbo.com/docs/components/toast)
- [Alert](https://kuzenbo.com/docs/components/alert)
- [Accessibility Foundation](https://kuzenbo.com/docs/foundations/accessibility)

## 🧭 Compatibility And Status

`@kuzenbo/notifications` is public and production-ready.
npm package: @kuzenbo/styles
Description: Optional global baseline styles for Kuzenbo apps.
Latest version: 0.0.7

# @kuzenbo/styles

Optional baseline global CSS for Kuzenbo-powered apps.

> ✅ **Status: Public**

## ✨ What This Package Solves

`@kuzenbo/styles` provides optional baseline global styles (focus rings, scrollbars, text wrapping, selection, motion-safe behavior) while keeping semantic theme token compatibility.

## 📦 Install

```bash
bun add @kuzenbo/styles
```

```bash
npm install @kuzenbo/styles
```

```bash
pnpm add @kuzenbo/styles
```

```bash
yarn add @kuzenbo/styles
```

## ✅ Requirements

- No React runtime dependency
- Optional companion package: `@kuzenbo/theme`

## 🎨 Theme Pairing

`@kuzenbo/styles` is optional baseline CSS.
For Kuzenbo UI packages (`core`, `ai`, `charts`, `date`, `notifications`, `datatable`, `code`, `tiptap`), install `@kuzenbo/theme` as the runtime theme layer.

## ⚡ Quick Example

```tsx
import "@kuzenbo/theme/prebuilt/kuzenbo.css";
import "@kuzenbo/styles/recommended.css";
```

## 🧱 Key Surface

- CSS entrypoint: `@kuzenbo/styles/recommended.css`
- Baseline behavior: focus-visible rings, scrollbar polish, semantic selection colors, motion-aware smooth scrolling
- Optional sticky-header offset variable: `--kb-anchor-offset`

## 📚 Docs And Playgrounds

- [Styling Guide](https://kuzenbo.com/docs/getting-started/styling)
- [Styles Baseline](https://kuzenbo.com/docs/foundations/styles-baseline)
- [Color Primitives](https://kuzenbo.com/docs/foundations/color-primitives)

## 🧭 Compatibility And Status

`@kuzenbo/styles` is public and safe to adopt incrementally.
npm package: @kuzmycz/react-cache
Description: Cache content and get notified when content changes
Author: kuzmycz
Latest version: 1.1.6

# react-cache

> Cache content and get notified when content changes

[![NPM](https://img.shields.io/npm/v/react-cache.svg)](https://www.npmjs.com/package/react-cache) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
[![gzip size](https://badgen.net/bundlephobia/minzip/@kuzmycz/react-cache)](https://bundlephobia.com/result?p=@kuzmycz/react-cache)

## Install

```bash
npm install --save @kuzmycz/react-cache
```

## Usage

```tsx
import * as React from 'react'

import {Cache} from 'react-cache'

const App = () => {
  return (
    <div>
      <div>Test</div>
      <Cache values={{}}>
        <Address name={'buyer'}/>
      </Cache>
    </div>
  )
};

const Address = ({name}) => {
  const [street, setStreet] = useCacheValue(`${name}.street`)
  const [city, setCity] = useCacheValue(`${name}.city`)
  const [state, setState] = useCacheValue(`${name}.state`)
  const [country, setCountry] = useCacheValue(`${name}.country`)
  const [postcode, setPostcode] = useCacheValue(`${name}.postcode`)

  return (<div>
    <label>
      Street:
      <input type='text' value={street} onChange={(e) => setStreet(e.target.value)} />
    </label>
    <label>
      City:
      <input type='text' value={city} onChange={(e) => setCity(e.target.value)} />
    </label>
    <label>
      State:
      <input type='text' value={state} onChange={(e) => setState(e.target.value)} />
    </label>
    <label>
      Country:
      <input type='text' value={country} onChange={(e) => setCountry(e.target.value)} />
    </label>
    <label>
      Postcode:
      <input type='text' value={postcode} onChange={(e) => setPostcode(e.target.value)} />
    </label>
  </div>)
}
```

## License

MIT © [kuzmycz](https://github.com/kuzmycz)
npm package: @kuzmycz/semaphore
Description: Semaphore for JS. A semaphore controls access to a critical resource in an asyncronous environment.
Author: Mark Kuzmycz
Latest version: 1.0.0

# Semaphore

## Overview
Semaphore is a package implemented to control access to a shared resources or code executed by multiple threads.

The purpose of a semaphore is to synchronize access to critical sections of your code. This is achieved by blocking access to other threads until the thread currently interacting with the resource has finished. Once completed, control is released, and the next waiter gains access to the resource.

Though JavaScript is technically single-threaded, it supports asynchronous activities, hence the need to prevent race conditions where two different paths of execution vie for the same resource.

A common use-case surfaces in React.js when multiple components depend on configuration information from a server (e.g., feature flags). Without some form of synchronization, multiple components can generate identical server requests simultaneously, creating unnecessary server load. By utilizing a semaphore, you can prevent subsequent access to the call to the server until the response returns. Any waiting components (those blocked) can then utilize the locally cached configuration, thus eliminating superfluous server traffic.


## Installation
Install via npm:
```shell
    npm install @kuzmycz/semaphore
```

## Importing

**CommonJS:**
```javascript
const {Semaphore} = require('@kuzmycz/semaphore');
```

**ES6:**
```javascript
import {Semaphore} from '@kuzmycz/semaphore';
```

**TypeScript:**
```typescript
import { Semaphore } from 'async-mutex';
```

## API
###Create a new semaphore:
```typescript
const semaphore = new Semaphore();
```

### Secure a code section with Semaphore:

```typescript
const release = await semaphore.acquire();
try {
    // ... code to execute
} finally {
    release();
}
```

*** Promise style ***
```typescript
semaphore.acquire().then((release) => {
    try {
        //... code to execute
    } finally {
        release();
    }
});
```

***IMPORTANT***: Always ensure that the release() function is called. Failure to do so will result in all current and future waiters waiting indefinitely.


## Design philosophy
Semaphore is designed to be user-friendly, weightless, with superior performance and dependency-free.