open-index/open-npm huggingface dataset:
npm package: @kitsuyui/js-rectangle-dividing
Description: Divide a rectangle into n rectangles
Author: Yui KITSU
Latest version: 0.4.0

# js-rectangle-dividing

[![codecov](https://codecov.io/gh/kitsuyui/js-rectangle-dividing/branch/main/graph/badge.svg?token=E6RO7KERTY)](https://codecov.io/gh/kitsuyui/js-rectangle-dividing)

## Description

<img width="444" alt="Example" src="https://github.com/kitsuyui/js-rectangle-dividing/assets/2596972/9f0e4ec7-31e3-48e0-bf67-079d9a327412">

Divide a rectangle into N rectangles by given weights.

The spin-off package of https://github.com/kitsuyui/react-playground/tree/main/packages/treemap

## Docs

- TypeDoc: https://js-rectangle-dividing.docs.kitsuyui.com/

## Usage

### Install

```sh
pnpm install
```

### Build

```sh
pnpm build
```

### Run with development mode (watch mode)

```sh
pnpm dev
```

## Test

```sh
pnpm test
```

## License

MIT
npm package: @kitsuyui/js-square-dividing
Description: Divide a square into n squares
Author: Yui KITSU
Latest version: 0.1.0

# js-square-dividing

[![codecov](https://codecov.io/gh/kitsuyui/js-square-dividing/branch/main/graph/badge.svg?token=E6RO7KERTY)](https://codecov.io/gh/kitsuyui/js-square-dividing)

## Description

<img width="444" alt="Example" src="https://github.com/kitsuyui/js-square-dividing/assets/2596972/9f0e4ec7-31e3-48e0-bf67-079d9a327412">

Divide a square into N squares by given weights.

The spin-off package of https://github.com/kitsuyui/react-playground/tree/main/packages/treemap

## Docs

- TypeDoc: https://js-square-dividing.typedoc.kitsuyui.com/

## Usage

### Install

```sh
pnpm install
```

### Build

```sh
pnpm build
```

### Run with development mode (watch mode)

```sh
pnpm dev
```

## Test

```sh
pnpm test
```

## License

MIT
npm package: @kitsuyui/react-binary
Description: Binary representation of number for React
Author: Yui Kitsu
Latest version: 0.2.1

# @kitsuyui/react-binary

[![npm version](https://badge.fury.io/js/@kitsuyui%2Freact-binary.svg)](https://badge.fury.io/js/@kitsuyui%2Freact-binary)

This is a React component representing a binary value.

## Demo

Storybook: https://react-playground.docs.kitsuyui.com/storybook/

## Installation

### npm

```sh
npm install @kitsuyui/react-binary
```

### yarn

```sh
yarn add @kitsuyui/react-binary
```

### pnpm

```sh
pnpm add @kitsuyui/react-binary
```

## License

MIT
npm package: @kitsuyui/react-clock
Description: A react component to display a clock.
Author: Yui Kitsu
Latest version: 0.2.1

# @kitsuyui/react-clock

[![npm version](https://badge.fury.io/js/@kitsuyui%2Freact-clock.svg)](https://badge.fury.io/js/@kitsuyui%2Freact-clock)

Simple clock React component.

## Demo

Storybook: https://react-playground.docs.kitsuyui.com/storybook/

## Installation

### npm

```sh
npm install @kitsuyui/react-clock
```

### yarn

```sh
yarn add @kitsuyui/react-clock
```

### pnpm

```sh
pnpm add @kitsuyui/react-clock
```

## Usage

```tsx
import {
  ClockContextProvider,
  DateContext,
  AnalogClock,
  DigitalClock,
} from '@kitsuyui/react-clock'

const Clock = () => {
  return (
    <ClockContextProvider>
      <DateContext.Consumer>
        {(date: Date) => (
          <>
            <AnalogClock timezone="Asia/Tokyo" date={date} />
            <DigitalClock timezone="America/New_York" date={date} />
          </>
        )}
      </DateContext.Consumer>
    </ClockContextProvider>
  )
}
```

ClockContainer is a component that provides DateContext.
Clocks are pure components that do not depend on DateContext directly.
Just pass the date and timezone as props.
So you can define your own Timer component by same interface.

## License

MIT
npm package: @kitsuyui/react-components
Description: React components made by kitsuyui
Author: Yui Kitsu
Latest version: 0.1.7

# @kitsuyui/react-components

[![npm version](https://badge.fury.io/js/@kitsuyui%2Freact-components.svg)](https://badge.fury.io/js/@kitsuyui%2Freact-components)

## What is this?

React components collection.

- [@kitsuyui/react-clock](https://www.npmjs.com/package/@kitsuyui/react-clock)
- [@kitsuyui/react-stopwatch](https://www.npmjs.com/package/@kitsuyui/react-stopwatch)
- [@kitsuyui/react-timer](https://www.npmjs.com/package/@kitsuyui/react-timer)
- [@kitsuyui/react-dekamoji](https://www.npmjs.com/package/@kitsuyui/react-dekamoji)

and more. This package includes all of this series.

## Demo

Storybook: https://react-playground.docs.kitsuyui.com/storybook/

## License

MIT
npm package: @kitsuyui/react-dekamoji
Description: A component that displays text in the entire display area of the component.
Author: Yui Kitsu
Latest version: 0.2.1

# @kitsuyui/react-dekamoji

[![npm version](https://badge.fury.io/js/@kitsuyui%2Freact-dekamoji.svg)](https://badge.fury.io/js/@kitsuyui%2Freact-dekamoji)

Dekamoji is a React component that changes the font size according to the size of the parent element. It displays the largest possible font size that can be displayed in response to changes in the size of the parent element.

## Demo

Storybook: https://react-playground.docs.kitsuyui.com/storybook/

## Installation

### npm

```sh
npm install @kitsuyui/react-dekamoji
```

### yarn

```sh
yarn add @kitsuyui/react-dekamoji
```

### pnpm

```sh
pnpm add @kitsuyui/react-dekamoji
```

## License

MIT
npm package: @kitsuyui/react-editablelabel
Description: A component that can edit label
Author: Yui Kitsu
Latest version: 0.1.7

# @kitsuyui/react-editablelabel

[![npm version](https://badge.fury.io/js/@kitsuyui%2Freact-editablelabel.svg)](https://badge.fury.io/js/@kitsuyui%2Freact-editablelabel)

A React component that can edit text by clicking.
What this means in DOM is usually a span tag, which becomes an input tag when clicked.
Other than that, no CSS is applied. CSS reset / decoration must be done by the user.

## Demo

Storybook: https://react-playground.docs.kitsuyui.com/storybook/

## Installation

### npm

```sh
npm install @kitsuyui/react-editablelabel
```

### yarn

```sh
yarn add @kitsuyui/react-editablelabel
```

### pnpm

```sh
pnpm add @kitsuyui/react-editablelabel
```

## License

MIT
npm package: @kitsuyui/react-hello
Description: Hello world component for React
Author: Yui Kitsu
Latest version: 0.2.1

# @kitsuyui/react-hello

This is a simple React component that displays a "Hello, World!" message.
This component is for demonstration purposes to develop this repository.

## Demo

Storybook: https://react-playground.docs.kitsuyui.com/storybook/

## Installation

### npm

```sh
npm install @kitsuyui/react-hello
```

### yarn

```sh
yarn add @kitsuyui/react-hello
```

### pnpm

```sh
pnpm add @kitsuyui/react-hello
```

## License

MIT
npm package: @kitsuyui/react-measure
Description: A react component to measure the size of a DOM node.
Author: Yui Kitsu
Latest version: 0.2.1

# @kitsuyui/react-measure

[![npm version](https://badge.fury.io/js/@kitsuyui%2Freact-measure.svg)](https://badge.fury.io/js/@kitsuyui%2Freact-measure)

React component that gets the size of the parent element and renders it.

## Demo

Storybook: https://react-playground.docs.kitsuyui.com/storybook/

## Installation

### npm

```sh
npm install @kitsuyui/react-measure
```

### yarn

```sh
yarn add @kitsuyui/react-measure
```

### pnpm

```sh
pnpm add @kitsuyui/react-measure
```

## License

MIT
npm package: @kitsuyui/react-physical-size
Description: I want to get the physical size of the device. But this package is meaningless. Because PPI is constant value for each device. In CSS definition, 1in is always 96px. So PPI = sqrt(96 * 96) = 96. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_
Author: Yui Kitsu
Latest version: 0.1.7

# @kitsuyui/react-physical-size

I want to get the physical size of the device.
But this package is meaningless. Because PPI is constant value for each device.
In CSS definition, 1in is always 96px. So PPI = sqrt(96 * 96) = 96.
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

I recommend you to use just `calc()` function in CSS.

Why do I keep it? Just for curiosity.
npm package: @kitsuyui/react-stopwatch
Description: A react component to display a stopwatch.
Author: Yui Kitsu
Latest version: 0.2.1

# @kitsuyui/react-stopwatch

[![npm version](https://badge.fury.io/js/@kitsuyui%2Freact-stopwatch.svg)](https://badge.fury.io/js/@kitsuyui%2Freact-stopwatch)

Simple stopwatch React component.

## Demo

Storybook: https://react-playground.docs.kitsuyui.com/storybook/

## Installation

### npm

```sh
npm install @kitsuyui/react-stopwatch
```

### yarn

```sh
yarn add @kitsuyui/react-stopwatch
```

### pnpm

```sh
pnpm add @kitsuyui/react-stopwatch
```

## Usage

```tsx
import { StopWatchContainer, MinimalStopwatch } from '@kitsuyui/react-stopwatch'

const Stopwatch = () => {
  return (
    <StopwatchContainer>
      <StopwatchContext.Consumer>
        {(props: StopwatchProps) => <MinimalStopwatch {...props} />}
      </StopwatchContext.Consumer>
    </StopwatchContainer>
  )
}
```

StopwatchContainer is a component that provides StopwatchContext.
Stopwatchs are pure components that do not depend on StopwatchContext. Accept StopwatchProps as props.
So you can define your own Stopwatch component by same interface.

```typescript
export interface StopwatchValue {
  elapsedTime: number
  running: boolean
}

export interface StopwatchActions {
  start(): void
  stop(): void
  toggle(): void
  reset(): void
}

export type StopwatchProps = StopwatchValue & StopwatchActions
```

## License

MIT
npm package: @kitsuyui/react-tab
Description: Abstract tab UI component for React
Author: Yui Kitsu
Latest version: 0.2.1

# @kitsuyui/react-tab

[![npm version](https://badge.fury.io/js/@kitsuyui%2Freact-tab.svg)](https://badge.fury.io/js/@kitsuyui%2Freact-tab)

Simple tab React component.
This component is a base for creating tab UI components.
This component doesn't have any styles, positions, states, or any other details.
This component only provides an ideal structure for tab UI and its ReactContext.

So, you can customize the tab UI as you want.
Or you can compose this component with other components and CSS modules.

`TabUIBase` renders only the active tab content by default. Use `contentMode="keep-mounted"` to keep every tab content mounted, and read the active tab state from `TabContext` inside your custom content container.

## Demo

Storybook: https://react-playground.docs.kitsuyui.com/storybook/

## Installation

### npm

```sh
npm install @kitsuyui/react-tab
```

### yarn

```sh
yarn add @kitsuyui/react-tab
```

### pnpm

```sh
pnpm add @kitsuyui/react-tab
```

## License

MIT
npm package: @kitsuyui/react-textfield
Description: A component that wrapped HTMLInputElement
Author: Yui Kitsu
Latest version: 0.2.1

# @kitsuyui/react-textfield

[![npm version](https://badge.fury.io/js/@kitsuyui%2Freact-textfield.svg)](https://badge.fury.io/js/@kitsuyui%2Freact-textfield)

This package provides a text field component for React.

It is very pure and similar with the default `<input type="text">` element and `<textarea>` element.

So you can pass the same props as those elements. (i.e. `disabled`, `placeholder`, `maxLength`, `minLength`, `required`, `pattern`, `readOnly`, `autoComplete`, `autoFocus`, `name`, `id`, `className`, `style`, ..., etc.)
This means, you can use this component as a drop-in replacement for those elements.

The big difference is that this component how to handle the events.
In default browser elements (`<input type="text">` and `<textarea>`), the `onChange` event is fired in every key press.
But when you are using IME or something special input method, the `onChange` event is fired in every key press even if the input is not completed or text conversion is not completed. (e.g. Japanese IME, Chinese IME, espanso, etc.)
This component calls the `onInput` handler `(text: string) => void` only when the input is completed or text conversion is completed. (Internally, it uses `CompositionEvent` to detect the completion of input or text conversion)

Warning: This component has no effect to prevent the re-rendering of parent component.
This means, if this component is re-created by parent component, the input may lost text conversion state.

## Demo

Storybook: https://react-playground.docs.kitsuyui.com/storybook/

## Installation

### npm

```sh
npm install @kitsuyui/react-textfield
```

### yarn

```sh
yarn add @kitsuyui/react-textfield
```

### pnpm

```sh
pnpm add @kitsuyui/react-textfield
```

## Reference

- https://maku.blog/p/cv6fpx7/
- https://gist.github.com/KurtGokhan/9aafd8e83c9bc6a2946fe2dc7f2c1d19
- https://qiita.com/pochman/items/5b69ebedf4465f93c2f1

## License

MIT
npm package: @kitsuyui/react-timer
Description: A react component to display a timer
Author: Yui Kitsu
Latest version: 0.2.1

# @kitsuyui/react-timer

[![npm version](https://badge.fury.io/js/@kitsuyui%2Freact-timer.svg)](https://badge.fury.io/js/@kitsuyui%2Freact-timer)

Simple timer React component.

## Demo

Storybook: https://react-playground.docs.kitsuyui.com/storybook/

## Installation

### npm

```sh
npm install @kitsuyui/react-timer
```

### yarn

```sh
yarn add @kitsuyui/react-timer
```

### pnpm

```sh
pnpm add @kitsuyui/react-timer
```

## Usage

```tsx
import { TimerContainer, MinimalTimer } from '@kitsuyui/react-timer'

const Timer = () => {
  return (
    <TimerContainer>
      <TimerContext.Consumer>
        {(timer: TimerProps) => <MinimalTimer {...timer} />}
      </TimerContext.Consumer>
    </TimerContainer>
  )
}
```

TimerContainer is a component that provides TimerContext.
Timers are pure components that do not depend on TimerContext. Accept TimerProps as props.
So you can define your own Timer component by same interface.

```typescript
export interface TimerValue {
  remaining: number
  running: boolean
}

export interface TimerActions {
  start(): void
  stop(): void
  toggle(): void
  reset(): void
  incrementTimerValue(value: number): void
  setTimerValue(value: number): void
}

export type TimerProps = TimerValue & TimerActions
```

## License

MIT
npm package: @kitsuyui/react-treemap
Description: A react treemap component.
Author: Yui Kitsu
Latest version: 0.2.1

# @kitsuyui/react-treemap

[![npm version](https://badge.fury.io/js/@kitsuyui%2Freact-treemap.svg)](https://badge.fury.io/js/@kitsuyui%2Freact-treemap)

Treemap is a component that displays boxes like a tree mapping chart.

## Demo

Storybook: https://react-playground.docs.kitsuyui.com/storybook/

## Installation

### npm

```sh
npm install @kitsuyui/react-treemap
```

### yarn

```sh
yarn add @kitsuyui/react-treemap
```

### pnpm

```sh
pnpm add @kitsuyui/react-treemap
```

## License

MIT
npm package: @kitsuyui/react-wavebox
Description: A component container that shape is changing time to time.
Author: Yui Kitsu
Latest version: 0.2.1

# @kitsuyui/react-wavebox

[![npm version](https://badge.fury.io/js/@kitsuyui%2Freact-wavebox.svg)](https://badge.fury.io/js/@kitsuyui%2Freact-wavebox)

Wavebox is a component that deforms vertically and horizontally. It is useful for debugging responsive layouts.

## Demo

Storybook: https://react-playground.docs.kitsuyui.com/storybook/

## Installation

### npm

```sh
npm install @kitsuyui/react-wavebox
```

### yarn

```sh
yarn add @kitsuyui/react-wavebox
```

### pnpm

```sh
pnpm add @kitsuyui/react-wavebox
```

## License

MIT
npm package: @kitsuyui/react-zoomer
Description: A component that displays text in the entire display area of the component.
Author: Yui Kitsu
Latest version: 0.2.1

# @kitsuyui/react-zoomer

[![npm version](https://badge.fury.io/js/@kitsuyui%2Freact-zoomer.svg)](https://badge.fury.io/js/@kitsuyui%2Freact-zoomer)

zoomer is a React component that changes the font size according to the size of the parent element. It displays the largest possible font size that can be displayed in response to changes in the size of the parent element.

## Demo

Storybook: https://react-playground.docs.kitsuyui.com/storybook/

## Installation

### npm

```sh
npm install @kitsuyui/react-zoomer
```

### yarn

```sh
yarn add @kitsuyui/react-zoomer
```

### pnpm

```sh
pnpm add @kitsuyui/react-zoomer
```

## License

MIT
npm package: @kitsuyui/rectangle-dividing
Description: A rectangle dividing algorithm written in Rust
Latest version: 0.1.4

# rust-rectangle-dividing

A library of rectangle dividing written in Rust.
It can be compiled to WebAssembly. So you can use it in JavaScript.

## Motivation

I want to divide a rectangle into smaller rectangles by given conditions (weights, aspect ratio, etc.).

Mainly, I want to use this for generating a map for my react-playground
- https://github.com/kitsuyui/react-playground
- https://react-playground.docs.kitsuyui.com/storybook/?path=/docs/base-treemap-introduction--docs

## Usage in JavaScript

### Install

This package is published on NPM [@kitsuyui/rectangle-dividing](https://www.npmjs.com/package/@kitsuyui/rectangle-dividing)

```sh
$ npm install @kitsuyui/rectangle-dividing
# or
$ yarn add @kitsuyui/rectangle-dividing
# or
$ pnpm add @kitsuyui/rectangle-dividing
```

### Example

```js
import { dividing } from "@kitsuyui/rectangle-dividing";

const rect = { x: 0, y: 0, w: 900, h: 800 };
const weights: Float32Array = Float32Array.from([4, 4, 1, 1, 1, 1]);
const aspectRatio = 1.5;
const verticalFirst = true;
const boustrophedron = true;
const divided = dividing(rect, weights, aspectRatio, verticalFirst, boustrophedron);
for (const d of divided) {
  console.log(d);
}
```

### Result

```js
{ x: 0, y: 0, w: 600, h: 400 }
{ x: 0, y: 400, w: 600, h: 400 }
{ x: 600, y: 600, w: 300, h: 200 }
{ x: 600, y: 400, w: 300, h: 200 }
{ x: 600, y: 200, w: 300, h: 200 }
{ x: 600, y: 0, w: 300, h: 200 }
```

dividing's arguments are

- `rect`: The rectangle to be divided
- `weights`: The weights of each rectangle
- `isVertical`: The direction of the first division
- `aspectRatio`: The aspect ratio of each rectangle
- `boustrophedon`: The direction of the next division in the same level

# License

MIT
npm package: @kitsuyui/ts-playground
Description: A playground for TypeScript
Author: Yui Kitsu
Latest version: 0.0.5

# ts-playground

[![codecov](https://codecov.io/gh/kitsuyui/ts-playground/branch/main/graph/badge.svg?token=E6RO7KERTY)](https://codecov.io/gh/kitsuyui/ts-playground)

Playground for TypeScript

## Usage

### Build

```sh
yarn build
```

### Run with development mode (watch mode)

```sh
yarn dev
```

## Test

```sh
yarn test
```

## License

MIT
npm package: @kitsy/cnos
Description: Batteries-included CNOS runtime package wired with the official plugins.
Latest version: 1.6.0

# @kitsy/cnos

Developer-friendly CNOS runtime assembly. It bundles the core engine plus the official built-in plugins, exposes the default singleton runtime at `@kitsy/cnos`, and provides explicit creation/configuration helpers under `@kitsy/cnos/configure`.

Current runtime surface includes:
- `@kitsy/cnos` singleton with `cnos(key)` and `ready()`
- `@kitsy/cnos/configure` with `createCnos()`
- `@kitsy/cnos/browser` for promoted `public.*` reads in browser code
- `@kitsy/cnos/build` with `resolveBrowserData()`
- `read`, `require`, `readOr`
- `value`, `secret`, `meta`
- `inspect`
- `toObject`, `toNamespace`
- `toEnv`, `toPublicEnv`

CLI-oriented storage/export rules to be aware of:
- user-defined values and secrets remain private by default
- public/browser exposure comes from `public.promote`
- shell env export comes from explicit `envMapping.explicit`
- local secret material lives outside the repo in encrypted vault storage under `~/.cnos/secrets`

Use `@kitsy/cnos-vite` for Vite projects, `@kitsy/cnos-next` for Next.js projects, and `@kitsy/cnos-webpack` for webpack/static bundles when you want CNOS public values projected into framework-native env surfaces and embedded for `@kitsy/cnos/browser`.
npm package: @kitsy/cnos-docs
Description: Source-of-truth CNOS documentation content for Astro Starlight and other static docs consumers.
Latest version: 1.6.0

# @kitsy/cnos-docs

Source-of-truth documentation content for CNOS.

This package is framework-agnostic content intended to be consumed by Astro Starlight or any other static documentation builder that can read Markdown/MDX plus a navigation manifest.

Exports:
- `@kitsy/cnos-docs/manifest`
- `@kitsy/cnos-docs/docs/*`
- `@kitsy/cnos-docs/assets/*`
npm package: @kitsy/cnos-vite
Description: Vite integration for CNOS public config injection.
Latest version: 1.6.0

# @kitsy/cnos-vite

Vite integration for CNOS.

It resolves CNOS public config during Vite config evaluation and injects the exported values into `import.meta.env.*` and `process.env.*` define replacements using the Vite public convention.
npm package: @kitsy/cnos-webpack
Description: Webpack integration for CNOS public config injection.
Latest version: 1.6.0

# @kitsy/cnos-webpack

Webpack integration for CNOS.

It resolves CNOS public config during webpack startup, injects `process.env.*` define replacements for promoted public values, and embeds `globalThis.__CNOS_BROWSER_DATA__` for `@kitsy/cnos/browser`.

Webpack uses an empty public env prefix by default. Configure `public.frameworks.webpack` in your manifest or pass `prefix` to the plugin if you want names such as `APP_*`.

Recommended plugin order:
- `new CnosWebpackPlugin(...)`
- `new HtmlWebpackPlugin(...)`
- `new MiniCssExtractPlugin(...)`
- `new CopyPlugin(...)`
- `new ESLintPlugin(...)`

If your webpack config is CommonJS, load CNOS via dynamic `import()` inside an async `module.exports = async () => ...` factory. If webpack loads your config as ESM, `require(...)` is not available.