open-index/open-npm huggingface dataset:
npm package: @input-kit/timeline
Description: Accessible React timelines for milestones, launches, and journey storytelling
Author: Harshit
Latest version: 0.1.1

# @input-kit/timeline

Accessible React timelines for launches, customer journeys, hiring loops, and milestone storytelling.

## Installation

```bash
npm install @input-kit/timeline
```

## Features

- Vertical and horizontal timelines
- Left, right, centered, and alternating layouts
- Status-aware markers for completed, current, pending, and error states
- Grouped sections and labeled separators
- Clickable items with active-state tracking
- Utilities for formatting, sorting, and grouping events

## Usage

```tsx
import { Timeline, type TimelineEvent } from '@input-kit/timeline';

const events: TimelineEvent[] = [
	{
		id: 'beta',
		title: 'Private beta',
		description: 'Invite pilot customers and capture feedback.',
		date: '2026-04-08',
		status: 'current',
	},
	{
		id: 'launch',
		title: 'Public launch',
		description: 'Ship docs, onboarding, and support.',
		date: '2026-04-22',
		status: 'pending',
	},
];

export function Example() {
	return <Timeline events={events} position="alternate" />;
}
```

## Also Available

- `TimelineItem` for custom item composition
- `TimelineGroup` for collapsible grouped sections
- `TimelineSeparator` for labeled dividers
- `useTimeline` for event list state management
- `formatTimelineDate`, `sortEventsByDate`, `groupEventsByDate`

## Notes

- Use `position="alternate"` for portfolio or launch storytelling layouts.
- Use `orientation="horizontal"` when the narrative should scan left-to-right.
- Current items expose `aria-current="step"` for assistive technology.

## License

MIT © Input Kit
npm package: @input-kit/tooltip
Description: Accessible React tooltips with smart positioning and interactive content
Author: Harshit
Latest version: 0.1.1

# @input-kit/tooltip

Accessible React tooltips with smart positioning, interactive content, and controlled or uncontrolled state.

## Installation

```bash
npm install @input-kit/tooltip
```

## Features

- Smart viewport-aware placement with flip-on-collision behavior
- Hover and focus triggers
- Escape dismissal and outside-click dismissal
- Interactive tooltip surfaces for quick actions and teaching UI
- Controlled and uncontrolled open state
- Custom styling without requiring another positioning package

## Usage

```tsx
import { Tooltip } from '@input-kit/tooltip';

export function Example() {
	return (
		<Tooltip content="Launch metrics are refreshed every five minutes.">
			<button type="button">Hover me</button>
		</Tooltip>
	);
}
```

## Interactive Example

```tsx
<Tooltip
	interactive
	placement="right"
	content={<button type="button">Quick action</button>}
>
	<button type="button">Open helper</button>
</Tooltip>
```

## Hook

`useTooltip()` returns trigger props, tooltip props, refs, and visibility controls when you want to compose your own surface.

## Notes

- `delay` controls open timing and `closeDelay` controls hide timing.
- `interactive` enables pointer events and keeps the tooltip open while the pointer or focus moves into the content.
- Use the `style` prop on `Tooltip` to theme the content surface.

## License

MIT © Input Kit
npm package: @input-kit/tree
Description: Accessible React tree views with keyboard navigation, selection, and virtualization
Author: Harshit
Latest version: 0.1.1

# @input-kit/tree

Accessible React tree views with selection, checkbox states, keyboard navigation, and virtualization.

## Installation

```bash
npm install @input-kit/tree
```

## Features

- Arrow-key navigation through visible nodes
- Single, multiple, and checkbox selection modes
- Expand/collapse state management via `useTree`
- Indeterminate checkbox logic for nested selections
- Optional icons and configurable indentation
- `VirtualTree` for large datasets

## Usage

```tsx
import { Tree, type TreeNode } from '@input-kit/tree';

const nodes: TreeNode[] = [
	{
		id: 'src',
		label: 'src',
		children: [
			{ id: 'app', label: 'app.tsx' },
			{ id: 'routes', label: 'routes.ts' },
		],
	},
	{ id: 'package', label: 'package.json' },
];

export function Example() {
	return <Tree nodes={nodes} defaultExpandedIds={['src']} />;
}
```

## Virtualized Tree

```tsx
import { VirtualTree } from '@input-kit/tree';

<VirtualTree nodes={nodes} height={320} itemHeight={34} defaultExpandedIds={['src']} />
```

## Notes

- `ArrowRight` expands a node or moves focus into its first child.
- `ArrowLeft` collapses a node or moves focus back to its parent.
- `selectionMode="checkbox"` works best with `showCheckbox` enabled.

## License

MIT © Input Kit
npm package: @input-kit/upload
Description: React file upload primitives with drag-and-drop, previews, validation, and queues
Author: Harshit
Latest version: 0.1.1

# @input-kit/upload

React file upload primitives with drag-and-drop, preview support, validation, queues, and render-prop customization.

## Installation

```bash
npm install @input-kit/upload
```

## Features

- Drag-and-drop upload zone with active drag styling
- Queue management with concurrency limits
- File validation for count, size, and MIME types
- Image preview URLs out of the box
- Abort, retry, remove, and clear queue controls
- Render-prop API for custom upload surfaces

## Usage

```tsx
import { FileUpload } from '@input-kit/upload';

export function Example() {
	return (
		<FileUpload
			url="/api/upload"
			accept="image/*,.pdf"
			maxFiles={5}
			maxFileSize={5 * 1024 * 1024}
		/>
	);
}
```

## Custom Surface

```tsx
import { FileUpload, UploadList } from '@input-kit/upload';

<FileUpload url="/api/upload" autoUpload={false}>
	{({ files, removeFile, openFileDialog, isDragActive }) => (
		<div>
			<button onClick={openFileDialog} type="button">
				{isDragActive ? 'Release to add files' : 'Browse files'}
			</button>
			<UploadList files={files} onRemove={removeFile} />
		</div>
	)}
</FileUpload>
```

## Notes

- Use `autoUpload={false}` when you want a review step before uploading.
- `UploadList` and `UploadProgress` can be composed outside `FileUpload` for custom workflows.
- The render prop now receives both `isDragActive` and `openFileDialog` for richer custom UI.

## License

MIT © Input Kit
npm package: @input-kit/virtual
Description: React virtualization primitives for large lists and grids with dynamic sizing
Author: Harshit
Latest version: 0.1.1

# @input-kit/virtual

React virtualization primitives for large lists and grids with dynamic sizing, imperative scrolling, and end-reached callbacks.

## Installation

```bash
npm install @input-kit/virtual
```

## Features

- `VirtualList` for long feeds and dashboards
- `VirtualGrid` for card galleries and dense layouts
- Dynamic item sizing with `getItemSize`
- `onEndReached` support for infinite-loading lists
- Imperative refs for jump navigation and measurement
- `useVirtual()` hook for custom renderers

## Quick Start

```tsx
import { VirtualList } from '@input-kit/virtual';

const items = Array.from({ length: 5000 }, (_, index) => ({
  id: index,
  title: `Item ${index + 1}`,
}));

<VirtualList
  items={items}
  itemSize={56}
  height={400}
  renderItem={(item) => <div>{item.title}</div>}
/>
```

## Infinite Feed Example

```tsx
<VirtualList
  items={items}
  estimateSize={88}
  getItemSize={(index) => items[index].height}
  height={420}
  onEndReached={loadMore}
  onEndReachedThreshold={180}
  renderItem={(item) => <Card item={item} />}
/>
```

## Grid Example

```tsx
import { VirtualGrid } from '@input-kit/virtual';

<VirtualGrid
  items={cards}
  columnCount={3}
  cellWidth={220}
  cellHeight={150}
  height={360}
  gap={16}
  renderItem={(card) => <CardPreview card={card} />}
/>
```

## Hook Example

```tsx
import { useVirtual } from '@input-kit/virtual';

function CustomList() {
  const { containerRef, containerProps, contentProps, virtualItems, getItemProps } = useVirtual({
    count: 10000,
    estimateSize: 64,
    height: 480,
  });

  return (
    <div ref={containerRef} {...containerProps}>
      <div {...contentProps}>
        {virtualItems.map((item) => (
          <div key={item.key} {...getItemProps(item.index)}>
            Row {item.index}
          </div>
        ))}
      </div>
    </div>
  );
}
```

## Notes

- Use `itemSize` for fixed-height rows and `getItemSize` when content varies.
- `VirtualListRef` exposes `scrollToIndex`, `scrollTo`, `measure`, and `measureAll`.
- `VirtualGridRef` exposes imperative scroll helpers for large galleries.

## License

MIT © Input Kit
npm package: @input-output-hk/front-end-core-components
Description: IOHK front-end web core React components
Latest version: 1.0.9

<h1 align="center">
  IOHK Front-end core components
</h1>

<p align="center">
  Core React components for IOHK's web assets.
</p>

<p align="center">
  <a href="issues" title="IOHK Front-end Core Components issues">
    <img src="https://img.shields.io/github/issues/input-output-hk/front-end-core-components.svg" alt="IOHK Front-end Core Components issues" />
  </a>
  <img src="https://img.shields.io/github/forks/input-output-hk/front-end-core-components.svg" alt="Fork IOHK Front-end Core Components" />
  <img src="https://img.shields.io/github/stars/input-output-hk/front-end-core-components.svg" alt="IOHK Front-end Core Components stars" />
  <a href="LICENSE.md" title="IOHK Front-end Core Components license">
    <img src="https://img.shields.io/github/license/input-output-hk/front-end-core-components.svg" alt="IOHK Front-end Core Components license" />
  </a>
  <img src="https://img.shields.io/circleci/build/github/input-output-hk/front-end-core-components.svg" alt="CircleCI build">
  <img src="https://coveralls.io/repos/github/input-output-hk/front-end-core-components/badge.svg?branch=master" alt="Test coverage" />
</p>
<br />

## Installation

```bash
npm i --save @input-output-hk/front-end-core-components
```

or

```bash
yarn add @input-output-hk/front-end-core-components
```

## Components

* [Head](docs/components/Head.md)
* [Image](docs/components/Image.md)
* [Language](docs/components/Language.md)
* [Link](docs/components/Link.md)
* [Theme](docs/components/Theme.md)

## Contributing

Contributions are welcome via pull requests, likewise reported issues will be monitored. For more see [contributing](docs/contributing.md) and [code of conduct](docs/code_of_conduct.md).
npm package: @input-output-hk/front-end-core-libraries
Description: IOHK front-end core libraries
Latest version: 1.2.2

<h1 align="center">
  IOHK Front-end core libraries
</h1>

<p align="center">
  Core libraries for IOHK's web assets.
</p>

<p align="center">
  <a href="issues" title="IOHK Front-end Core Libraries issues">
    <img src="https://img.shields.io/github/issues/input-output-hk/front-end-core-libraries.svg" alt="IOHK Front-end Core Libraries issues" />
  </a>
  <img src="https://img.shields.io/github/forks/input-output-hk/front-end-core-libraries.svg" alt="Fork IOHK Front-end Core Libraries" />
  <img src="https://img.shields.io/github/stars/input-output-hk/front-end-core-libraries.svg" alt="IOHK Front-end Core Libraries stars" />
  <a href="LICENSE.md" title="IOHK Front-end Core Libraries license">
    <img src="https://img.shields.io/github/license/input-output-hk/front-end-core-libraries.svg" alt="IOHK Front-end Core Libraries license" />
  </a>
  <img src="https://img.shields.io/circleci/build/github/input-output-hk/front-end-core-libraries.svg" alt="CircleCI build">
  <img src="https://coveralls.io/repos/github/input-output-hk/front-end-core-libraries/badge.svg?branch=master" alt="Test coverage" />
</p>
<br />

## Installation

```bash
npm i --save @input-output-hk/front-end-core-libraries
```

or

```bash
yarn add @input-output-hk/front-end-core-libraries
```

## Libraries

* [analytics](docs/libraries/analytics.md)
* [logger](docs/libraries/logger.md)
* [theme](docs/libraries/theme.md)

## Contributing

Contributions are welcome via pull requests, likewise reported issues will be monitored. For more see [contributing](docs/contributing.md) and [code of conduct](docs/code_of_conduct.md).
npm package: @input-output-hk/front-end-site-components
Description: Opinionated React components for IOHK's front-end web team
Latest version: 1.15.0

<h1 align="center">
  IOHK front-end site components
</h1>

<p align="center">
  Opinionated React components for IOHK's front-end web team.
</p>

<p align="center">
  <a href="issues" title="IOHK Front-end Site Components issues">
    <img src="https://img.shields.io/github/issues/input-output-hk/front-end-site-components.svg" alt="IOHK Front-end Site Components issues" />
  </a>
  <img src="https://img.shields.io/github/forks/input-output-hk/front-end-site-components.svg" alt="Fork IOHK Front-end Site Components" />
  <img src="https://img.shields.io/github/stars/input-output-hk/front-end-site-components.svg" alt="IOHK Front-end Site Components stars" />
  <a href="LICENSE.md" title="IOHK Front-end Site Components license">
    <img src="https://img.shields.io/github/license/input-output-hk/front-end-site-components.svg" alt="IOHK Front-end Site Components license" />
  </a>
  <img src="https://img.shields.io/circleci/build/github/input-output-hk/front-end-site-components.svg" alt="CircleCI build">
  <img src="https://coveralls.io/repos/github/input-output-hk/front-end-site-components/badge.svg?branch=master" alt="Test coverage" />
</p>
<br />

## Installation

```bash
npm i --save @input-output-hk/front-end-site-components
```

or

```bash
yarn add @input-output-hk/front-end-site-components
```

## Components

* [Footer](docs/components/Footer.md)
* [Styles](docs/components/Styles.md)

## Contributing

Contributions are welcome via pull requests, likewise reported issues will be monitored. For more see [contributing](docs/contributing.md) and [code of conduct](docs/code_of_conduct.md).
npm package: @input-output-hk/front-end-themes
Description: IOHK front-end web theme configurations
Latest version: 1.2.6

# IOHK Front-end Themes

Theme configuration for multiple brands being worked on by IOHK.

## Installation

`npm i --save @input-output-hk/front-end-themes`

or

`yarn add @input-output-hk/front-end-themes`

## Usage

```
import { iohk, cardano, atala } from '@input-output-hk/front-end-themes'

...

console.log({
  themes: { iohk, cardano }
})
```

## Theme structure

*TODO*
npm package: @input-output-hk/react-preloader
Description: Preloader animation using the IOHK logo
Author: Scott Darby
Latest version: 1.0.5

<h1 align="center">
  IOHK Logo Preloader
</h1>

<p align="center">
  A canvas based preloader animation using the IOHK logo.
</p>

<p align="center">
  <a href="https://input-output-hk.github.io/react-preloader/" title="demo" target="_blank">🚀 DEMO 🚀</a>
</p>

<p align="center">
  <a href="https://github.com/input-output-hk/react-preloader/issues" title="React preloader issues">
    <img src="https://img.shields.io/github/issues/input-output-hk/react-preloader.svg" alt="React preloader issues" />
  </a>
  <img src="https://img.shields.io/github/forks/input-output-hk/react-preloader.svg" alt="Fork React preloader" />
  <img src="https://img.shields.io/github/stars/input-output-hk/react-preloader.svg" alt="React preloader stars" />
  <a href="https://github.com/input-output-hk/react-preloader/blob/master/LICENSE.md" title="React preloader license">
    <img src="https://img.shields.io/github/license/input-output-hk/react-preloader.svg" alt="React preloader license" />
  </a>
  <img src="https://img.shields.io/circleci/build/github/input-output-hk/react-preloader.svg" alt="CircleCI build">
  <img src="https://coveralls.io/repos/github/input-output-hk/react-preloader/badge.svg?branch=master" alt="Test coverage" />
</p>
<br />

## Contents

1. [Install](#install)
1. [Dependencies](#dependencies)
1. [Quick start](#quick-start)
1. [Contributing](#contributing)

## Install

```
npm i --save @input-output-hk/react-preloader
```

or

```
yarn add @input-output-hk/react-preloader
```

## Dependencies

* [React](https://reactjs.org/)

## Quick start

Import the component and add like so

```
import { Preloader } from '@input-output-hk/react-preloader'

...

render () {
    return (
      <div>
        <Preloader className='loader'/>
      </div>
    )
  }

```

## Contributing

Contributions are welcome, see [contributing](https://github.com/input-output-hk/react-preloader/blob/master/docs/contributing.md) for more info.
npm package: @inputkit/core
Description: Framework-agnostic utilities for formatted inputs: card type detection, Luhn validation, formatters, and validators.
Author: Paul Loffredo
Latest version: 0.2.0

# @inputkit/core

Framework-agnostic utilities for formatted inputs. Card type detection,
Luhn validation, formatters, and validators — no React, no DOM.

## Usage

```ts
import {
  formatCardNumber,
  detectCardType,
  validateCardNumber,
  validateLuhn,
  formatExpiry,
  stripNonDigits,
} from "@inputkit/core";

// Format a card number with auto-detected gaps
formatCardNumber("4111111111111111");
// => "4111 1111 1111 1111"

// Amex gets 4-6-5 grouping automatically
formatCardNumber("378282246310005");
// => "3782 822463 10005"

// Detect the brand from a partial number
const type = detectCardType("37");
// => { brand: "amex", displayName: "American Express", ... }

// Validate with Luhn, length, and type checks
validateCardNumber("4111111111111111");
// => undefined (valid)

validateCardNumber("4111111111111112");
// => "Card number is invalid"

// Format an expiry date
formatExpiry("1225", { prevValue: "", action: "insert" });
// => "12 / 25"

// Use Luhn directly
validateLuhn("4111111111111111");
// => true
```

## Custom card types

```ts
import { createCardTypeRegistry } from "@inputkit/core";

const registry = createCardTypeRegistry([
  {
    brand: "store-card",
    displayName: "My Store Card",
    startPattern: /^999/,
    lengths: [16],
    gaps: [4, 8, 12],
    code: { name: "PIN", length: 4 },
  },
]);

registry.detect("9991234567890123");
// => { brand: "store-card", ... }
```
npm package: @inputkit/react
Description: React hooks for formatted inputs: payment cards, TOTP/OTP codes, and custom formatted fields.
Author: Paul Loffredo
Latest version: 0.2.0

# @inputkit/react

React hooks for formatted inputs. Payment cards, TOTP codes, or anything
that needs formatting and validation. Prop getters spread directly onto
`<input>` or shadcn `<Input>`.

## Payment card inputs

```tsx
import { usePaymentInputs } from "@inputkit/react";

function PaymentForm() {
  const {
    getCardNumberProps,
    getExpiryDateProps,
    getCVCProps,
    meta,
  } = usePaymentInputs();

  return (
    <form onSubmit={() => submit(meta.values)}>
      <input {...getCardNumberProps()} />
      <input {...getExpiryDateProps()} />
      <input {...getCVCProps()} />
      {meta.cardType && <span>{meta.cardType.displayName}</span>}
      {meta.error && <span>{meta.error}</span>}
    </form>
  );
}
```

## TOTP / OTP codes

```tsx
import { useSegmentedInput } from "@inputkit/react";

function OTPInput() {
  const { getInputProps, slots } = useSegmentedInput({
    maxLength: 6,
    onComplete: (code) => verify(code),
  });

  return (
    <div style={{ position: "relative" }}>
      <input {...getInputProps()} />
      <div style={{ display: "flex", gap: 8 }}>
        {slots.map((slot, i) => (
          <div key={i}>{slot.char || (slot.hasFakeCaret ? "|" : "")}</div>
        ))}
      </div>
    </div>
  );
}
```

## Custom formatted input

```tsx
import { useFormattedInput } from "@inputkit/react";
import { formatCardNumber, stripNonDigits } from "@inputkit/core";

function CardInput() {
  const { getInputProps, meta } = useFormattedInput({
    format: (v) => formatCardNumber(v),
    parse: stripNonDigits,
    accept: /\d/,
    maxLength: 16,
  });

  return (
    <>
      <input {...getInputProps({ placeholder: "Card number" })} />
      {meta.isComplete && <span>Card type: {meta.rawValue}</span>}
    </>
  );
}
```

## Controlled mode

Every hook supports controlled values for integration with form libraries:

```tsx
const [card, setCard] = useState("");

const { getCardNumberProps } = usePaymentInputs({
  cardNumber: card,
  onChangeCardNumber: setCard,
});
```
npm package: @inputstudio/eslint-prettier
Description: EsLint and Prettier default configuration used at Input Studio
Author: Input Studio
Latest version: 1.0.1

# prettier

![GitHub](https://img.shields.io/github/license/inputstudio/eslint-prettier)

`@inputstudio/eslint-prettier` is a package to lint and prettify our source code at Input Studio.

## Installation

Install the package with your favorite package manager:

```bash
# npm
npm install @inputstudio/eslint-prettier
# yarn
yarn add @inputstudio/eslint-prettier
# pnpm
pnpm add @inputstudio/eslint-prettier
```

Install the dependencies used by the package:

```bash
npx install-peerdeps --dev @inputstudio/eslint-prettier
```

## Usage

1. Create an `.eslintrc` file in your project root and add:

```json
{
  "extends": ["@inputstudio/eslint-prettier"]
}
```

2. Add a new property to your package.json file:

```json
{
  "prettier": "@inputstudio/eslint-prettier/prettier"
}
```

## License

This project is licensed under the [MIT License](./LICENSE).
npm package: @inputstudio/utils
Description: Generic utility functions used at Input Studio
Author: Input Studio
Latest version: 0.1.1

# utils

[![Test](https://github.com/inputstudio/utils/actions/workflows/test.yml/badge.svg)](https://github.com/inputstudio/utils/actions/workflows/test.yml)
![npm (scoped)](https://img.shields.io/npm/v/@inputstudio/utils)
![npm bundle size](https://img.shields.io/bundlephobia/min/%40inputstudio%2Futils)
![GitHub](https://img.shields.io/github/license/inputstudio/utils)

`@inputstudio/utils` is a zero-dependency TypeScript utility library. It features a wide range of functions, from string to date, currency manipulation, and more.

## Installation

Install the package with your favorite package manager:

```bash
# npm
npm install @inputstudio/utils
# yarn
yarn add @inputstudio/utils
# pnpm
pnpm add @inputstudio/utils
```

## Usage

```ts
import { secret } from '@inputstudio/utils';
// or const { secret } = require('@inputstudio/utils');

const littleSecret = secret('hey 👋');

console.log(littleSecret); // h*****
```

## Development

Everyone is welcome to contribute to this project. To do so, please follow these steps:

1. Clone the repository
2. Checkout on `dev` branch and create a new branch from it
3. Install dependencies with `yarn`
4. Add your feature or fix
5. Add or update tests (we use [Vitest](https://vitest.dev) for testing)
6. Commit your changes (we follow [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/))
7. Push your branch
8. Open a pull request to `dev` branch

People from the team will review your pull request and merge it if everything is ok.

## Releasing

Quick guide to release a new version of the package:

```bash
yarn changeset # Create a new changeset
yarn changeset version # Bump the package version
```

## License

This project is licensed under the [MIT License](./LICENSE).
npm package: @inpyjamas/generator-defaults
Description: my personal opinionated generator for typescript eslint prettier express jest nodemon husky
Author: Fabian Morón Zirfas
Latest version: 0.6.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @inpyjamas/generator-defaults

[![npm (scoped)](https://img.shields.io/npm/v/@inpyjamas/generator-defaults)](https://www.npmjs.com/package/@inpyjamas/generator-defaults) [![Node.js Test CI](https://github.com/inpyjamas/generator-defaults/workflows/Node.js%20Test%20CI/badge.svg)](https://github.com/inpyjamas/generator-defaults/actions?query=workflow%3A%22Node.js+Test+CI%22) ![Build with love](https://img.shields.io/badge/build%20with-%E2%9D%A4%EF%B8%8F-success)

## About

my personal opinionated [Yeoman](https://yeoman.io/) generator for Typescript, Eslint, Prettier, Jest, Nodemon, Husky, Jekyll, Webpack…

With force upgrade all packages build in.

Most configuration is handled using [@inpyjamas/scripts](https://github.com/inpyjamas/scripts).

Except for

- [`.prettierignore`](https://github.com/prettier/prettier/issues/3460)
- Jekyll `_config.yml` and `Gemfile`

## Installing

```bash
npm install yo -g
```

```bash
npm install @inpyjamas/generator-defaults -g
```

## Usage

```bash
yo @inpyjamas/defaults
# Will prompt for your projects name and what type of project you want
# currently typescript only
```

This will create (in the current working directory) the following setup(s)

### Type `typescript-express`

Creates a setup with:

- Typescript
- Jest
- Eslint
- Prettier
- Nodemon
- Husky
- Lint-Staged
- Express with Morgan, Cors and Dotenv
- CZ Conventional Change-log
- Renovate Bot

### Type `typescript-jeykll-webpack`

- Typescript
- Jekyll
- Webpack (for Ts and scss/postcss)
- Jest
- Eslint
- Prettier
- Husky
- Lint-Staged
- CZ Conventional Change-log
- Renovate Bot
npm package: @inpyjamas/renovate-config
Description: shareable renovate config
Author: Fabian Morón Zirfas
Latest version: 1.1.0

# @inpyjamas/renovate-config

sharable renovate config for all my projects.

## Usage

Enable renovete-bot for your repo and add the following to `renovate.json`

```json
{
  "extends": ["github>inpyjamas/renovate-config"]
}
```

or

```json
{
  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
  "extends": ["github>inpyjamas/renovate-config"],
  "baseBranches": ["staging"]
}
```
npm package: @inpyjamas/scripts
Description: common config and scripts
Author: Fabian Morón Zirfas
Latest version: 1.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @inpyjamas/scripts

_⚠️ This is totally Work In Progress. Please ignore ⚠️_ An opinionated toolkit for setting up projects. Inspired (and plugged a lot) from [react-scripts][react-scripts] and [kcd-scripts][kcd-scripts]

## Todos/Ideas

- [ ] How to include scripts? `start` (`node dist/index.js`), `dev`, `build` (`tsc -p .` set `NODE_ENV`), ~~`test` (`jest` should detect ci and generate coverage, set `BABEL_ENV` and `NODE_ENV`)~~
- [ ] Document the existing configs
- [ ] How to update `package.json` with the right scripts? [mrm][mrm]? roll your own?
- [ ] Add plop?
- [ ] Add modules in the root so we don't have to link to `@inpyjamas/scripts/dist/config/eslint/typescript` just `@inpyjamas/scripts/eslint-typescript` or one module that exports all the configs `{eslint-ts:{…}}`
- [ ] ~~Scaffold configs for, prettier, lint-staged, jest, husky, .eslintignore or~~ This should be done by yo generator!

## Installation

Add it to an existing project

```bash
npm install @inpyjamas/scripts --save-dev --save-exact
```

Init a new project._⚠️ Not yet implemented ⚠️_
Most of the templates use `@inpyjamas/scripts` in one way or another

```bash
npm install --global yo
npm install --global @inpyjamas/generator-defaults
yo @inpyjamas/defaults
```

## Usage

## Included configs

## Extending configs

You can import any config and extend it.

```js
// this is jest.config.js
const config = require("@inpyjamas/scripts/jest");
config.testPathIgnorePatterns.push("src/scripts/test.ts");
config.collectCoverageFrom.push("!src/scripts/test.ts");
module.exports = config;
```

The package contains a merge utility for merging more complex scenarios.

```js
// this is jest.config.js
const config = require("@inpyjamas/scripts/jest");
const { merge } = require("@inpyjamas/scripts/utilities");

const localConfig = {
  testEnvironment: "jsdom",
  coverageThreshold: {
    global: {
      branches: 75,
      functions: 75,
      lines: 75,
      statements: 75,
    },
  },
};
module.exports = merge(config, localConfig);
```

## Release

- `npm version v0.1.x-alpha`
- git push --tags
- gh release create

---

[kcd-scripts]: https://github.com/kentcdodds/kcd-scripts
[react-scripts]: https://github.com/facebook/create-react-app
[mrm]: https://github.com/sapegin/mrm
npm package: @inqling/prettier-config
Description: A Prettier configuration file reflecting the inqling coding standards
Author: Inqling Team
Latest version: 1.1.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@inqling/prettier-config`

> The [Prettier](https://prettier.io) configuration that reflects the inqling coding standards.

## Usage

**Install**:

```bash
$ yarn add -D @inqling/prettier-config
```

or

```bash
$ npm install -D @inqling/prettier-config
```

**Edit `package.json`**:

```jsonc
{
	// ...
	"prettier": "@inqling/prettier-config"
}
```
npm package: @inqludeit/qualweb-plugin-cmp
Description: QualWeb plugin to dismiss cookie banners during evaluation.
Author: Johannes L. Borresen
Latest version: 2.0.1

# QualWeb plugin to suppress CMP banners

This package is a tiny wrapper around [@inqludeit/cmp-b-gone](https://www.github.com/tellus/cmp-b-gone) and is meant to be
used as a minimal way to use the module in your QualWeb workflows.

For more advanced scenarios, consider using that package directly, instead.

The purpose of this package is to suppress suppress CMP (Consent Management
Platform) banners. These "cookie banners" are required on sites operated in the
European Union, and are thus present on tonnes of websites.

There are at least two good reasons to use the module:

1. Some websites hide or completely withhold their actual content until consent to a cookie has been given. This plugin enables evaluating those sites with QualWeb by automating the consent action.
2. Many CMP banners have accessibility issues that are inherent to the implementation, and not the site itself. This causes a skew in the results of sites, giving the impression, for example, that the website has contrast issues when in fact the only component with contrast issues is the banner.

*NOTE: this software was built for the explicit purposes of enabling and enhancing automated accessibility testing, **NOT** to bypass the CMP banner for otherwise normal use of a website. If you use this software to bypass a banner it is presumed that you have accepted all terms of the site's use, including its cookie policy.*

# Installation and basic usage

Install it like any other package:

`pnpm install @inqludeit/qualweb-plugin-cmp`

Sometime *before* calling `QualWeb#evaluate()`:

```typescript
import { createPlugin } from '@inqludeit/qualweb-plugin-cmp';

qualweb.use(await createPlugin());
```

This will initialise the plugin with all the descriptors present in the package's `descriptors` folder.

During evaluation, the plugin will try to identify the CMP in use on a site to be evaluated. If it *fails* to detect any CMP, the evaluation will also be caused to fail. For this reason, we recommend running single URLs through QualWeb, since any missing descriptors will throw for the entire task.


# CMP descriptors

We call the object that can identify and bypass a cookie banner a "descriptor". 

Out of the box, @qualweb/cmp-b-gone comes bundled with a bunch of descriptors we've written by hand. They are all "simple" descriptors, based exclusively on CSS selectors. If the list of descriptors is insufficient, you can supplement them in the call to `createPlugin()` (see the docs in [@inqludeit/cmp-b-gone](https://www.github.com/tellus/cmp-b-gone) for more details on this).
npm package: @inquir/react-inquirsearch
Description: React components for Inquir Search
Latest version: 0.0.5

# Inquir React Search Library

React components for integrating search and chat functionality with the Inquir platform.

## Installation

```bash
npm install @inquir/react-inquirsearch
```

## Key Components

| Component      | Description                               |
| :------------- | :---------------------------------------- |
| SearchProvider | Context provider for search functionality |
| ChatContainer  | Chat interface with message history       |
| RndContainer   | Draggable/resizable container             |
| SearchModal    | Search dialog (Cmd/Ctrl + K)              |

## Basic Usage
Add default styles to your project:

```javascript
import '@inquir/react-inquirsearch/dist/main.css';
```

```javascript
import { SearchProvider, SearchModal, ChatContainer, RndContainer } from '@inquir/react-inquirsearch';
import '@inquir/react-inquirsearch/dist/main.css';

function App() {
  return (
    <SearchProvider
      indexName="your-index"
      apiKey="your-api-key"
      baseUrl="http://localhost:8000"
    >
      {/* Chat Window */}
      <RndContainer
        defaultPosition={{ x: window.innerWidth - 420, y: 100 }}
        defaultSize={{ width: 400, height: 600 }}
      >
        <ChatContainer 
          indexName="your-index"
          initialMessages={[{ message: "Hello!", sender: "bot" }]}
        />
      </RndContainer>

      {/* Search Modal (Cmd/Ctrl + K) */}
      <SearchModal />
    </SearchProvider>
  );
}

export default App;
```

## Component API

### SearchProvider Props

| Prop      | Type   | Required | Description            |
| :-------- | :----- | :------: | :--------------------- |
| indexName | string |    ✓     | Search index name      |
| apiKey    | string |    ✓     | API authentication key |
| baseUrl   | string |    ✓     | API base URL           |
| debounce  | number |          | Debounce time (ms)     |
| size      | number |          | Results per page       |

### ChatContainer Props

| Prop            | Type     | Required | Description       |
| :-------------- | :------- | :------: | :---------------- |
| indexName       | string   |    ✓     | Index name        |
| onError         | function |          | Error handler     |
| initialMessages | array    |          | Starting messages |

### RndContainer Props

| Prop            | Type    | Required | Description        |
| :-------------- | :------ | :------: | :----------------- |
| defaultPosition | object  |          | Initial {x,y}      |
| defaultSize     | object  |          | Initial dimensions |
| minWidth        | number  |          | Min width (px)     |
| minHeight       | number  |          | Min height (px)    |
| title           | string  |          | Window title       |
| header          | element |          | Custom header      |
| isVisible       | boolean |          | Show/hide          |

### SearchModal Props

Keyboard shortcut: `Cmd/Ctrl + K`
No additional props required.

## License

MIT License
npm package: @inquirer-cli/checkbox
Description: CLI tool for selecting multiple options using Inquirer.js
Author: YCM Jason
Latest version: 1.0.10

# @inquirer-cli/checkbox

CLI tool for selecting multiple options using Inquirer.js.

## Installation

No installation required. Use `npx` to run the tool directly:

```bash
npx -y @inquirer-cli/checkbox [...options]
```

> **Note**: The `-y` flag is used with `npx` to skip the installation prompt. This is necessary because the CLI's output is consumed by `$()` in bash, which would otherwise cause the script to freeze.

## Usage

Prompt the user to select multiple options:

```bash
choices=$(npx -y @inquirer-cli/checkbox -r "Select your favorite colors" -c "Red" -c "Blue" -c "Green")
echo "You selected:"
for choice in $choices; do
  echo "- $choice"
done
```

## Options

- `<message>` (required): The message to display to the user.
- `-c, --choice <choice>` (required): Define a choice (can be used multiple times).
- `-r, --required`: Make the input required.
- `-h, --help`: Show the help message and exit.

## Example

```sh
#!/bin/sh
choices=$(npx -y @inquirer-cli/checkbox -r "Select your favorite colors" -c "Red" -c "Blue" -c "Green")
echo "You selected:"
for choice in $choices; do
  echo "- $choice"
done
```

## License

MIT
npm package: @inquirer-cli/confirm
Description: CLI tool for yes/no confirmation using Inquirer.js
Author: YCM Jason
Latest version: 1.0.10

# @inquirer-cli/confirm

CLI tool for yes/no confirmation using Inquirer.js.

## Installation

No installation required. Use `npx` to run the tool directly:

```bash
npx -y @inquirer-cli/confirm [...options]
```

> **Note**: The `-y` flag is used with `npx` to skip the installation prompt. This is necessary because the CLI's output is consumed by `$()` in bash, which would otherwise cause the script to freeze.

## Usage

Prompt the user for confirmation:

```bash
if $(npx -y @inquirer-cli/confirm "Do you want to continue?"); then
  echo "Proceeding..."
else
  echo "Operation cancelled."
fi
```

## Options

- `<message>` (required): The message to display to the user.
- `-y, --yes`: Set the default answer to "yes" (default: "no").
- `-h, --help`: Show the help message and exit.

## Example

```sh
#!/bin/sh
if $(npx -y @inquirer-cli/confirm "Do you want to continue?"); then
  echo "Proceeding..."
else
  echo "Operation cancelled."
fi
```

## License

MIT
npm package: @inquirer-cli/input
Description: CLI tool for text input using Inquirer.js
Author: YCM Jason
Latest version: 1.0.10

# @inquirer-cli/input

CLI tool for text input using Inquirer.js.

## Installation

No installation required. Use `npx` to run the tool directly:

```bash
npx -y @inquirer-cli/input [...options]
```

> **Note**: The `-y` flag is used with `npx` to skip the installation prompt. This is necessary because the CLI's output is consumed by `$()` in bash, which would otherwise cause the script to freeze.

## Usage

Prompt the user for text input:

```bash
name=$(npx -y @inquirer-cli/input -r "What is your name?")
echo "Hello, $name!"
```

## Options

- `<message>` (required): The message to display to the user.
- `-r, --required`: Make the input required.
- `-h, --help`: Show the help message and exit.

## Example

```sh
#!/bin/sh
name=$(npx -y @inquirer-cli/input -r "What is your name?")
echo "Hello, $name!"
```

## License

MIT
npm package: @inquirer-cli/number
Description: CLI tool for numeric input using Inquirer.js
Author: YCM Jason
Latest version: 1.0.10

# @inquirer-cli/number

CLI tool for numeric input using Inquirer.js.

## Installation

No installation required. Use `npx` to run the tool directly:

```bash
npx -y @inquirer-cli/number [...options]
```

> **Note**: The `-y` flag is used with `npx` to skip the installation prompt. This is necessary because the CLI's output is consumed by `$()` in bash, which would otherwise cause the script to freeze.

## Usage

Prompt the user for numeric input:

```bash
age=$(npx -y @inquirer-cli/number -r "Enter your age")
echo "You are $age years old."
```

## Options

- `<message>` (required): The message to display to the user.
- `-r, --required`: Make the input required.
- `-h, --help`: Show the help message and exit.

## Example

```sh
#!/bin/sh
age=$(npx -y @inquirer-cli/number -r "Enter your age")
echo "You are $age years old."
```

## License

MIT
npm package: @inquirer-cli/password
Description: CLI tool for masked password input using Inquirer.js
Author: YCM Jason
Latest version: 1.0.10

# @inquirer-cli/password

CLI tool for masked password input using Inquirer.js.

## Installation

No installation required. Use `npx` to run the tool directly:

```bash
npx -y @inquirer-cli/password [...options]
```

> **Note**: The `-y` flag is used with `npx` to skip the installation prompt. This is necessary because the CLI's output is consumed by `$()` in bash, which would otherwise cause the script to freeze.

## Usage

Prompt the user for a password:

```bash
password=$(npx -y @inquirer-cli/password -r "Enter your password")
echo "Password received. $password"
```

## Options

- `<message>` (required): The message to display to the user.
- `-r, --required`: Make the input required.
- `-h, --help`: Show the help message and exit.

## Example

```sh
#!/bin/sh
password=$(npx -y @inquirer-cli/password -r "Enter your password")
echo "Password received. $password"
```

## License

MIT
npm package: @inquirer-cli/select
Description: CLI tool for selecting an option using Inquirer.js
Author: YCM Jason
Latest version: 1.0.10

# @inquirer-cli/select

CLI tool for selecting an option using Inquirer.js.

## Installation

No installation required. Use `npx` to run the tool directly:

```bash
npx -y @inquirer-cli/select [...options]
```

> **Note**: The `-y` flag is used with `npx` to skip the installation prompt. This is necessary because the CLI's output is consumed by `$()` in bash, which would otherwise cause the script to freeze.

## Usage

Prompt the user to select an option:

```bash
fruit=$(npx -y "@inquirer-cli/select" -c "Apple" -c "Banana" -c "Cherry" "Pick a fruit")
echo "You selected: $fruit"
```

## Options

- `<message>` (required): The message to display to the user.
- `-c, --choice <choice>` (required): Define a choice (can be used multiple times).
- `-r, --required`: Make the input required.
- `-h, --help`: Show the help message and exit.

## Example

```sh
#!/bin/sh
fruit=$(npx -y "@inquirer-cli/select" -c "Apple" -c "Banana" -c "Cherry" "Pick a fruit")
echo "You selected: $fruit"
```

## License

MIT
npm package: @inquirer/ansi
Description: A lightweight package providing ANSI escape sequences for terminal cursor manipulation and screen clearing.
Author: Simon Boudrias
Latest version: 2.0.5

# @inquirer/ansi

A lightweight package providing ANSI escape sequences for terminal cursor manipulation and screen clearing.

# Installation

<table>
<tr>
  <th>npm</th>
  <th>yarn</th>
</tr>
<tr>
<td>

```sh
npm install @inquirer/ansi
```

</td>
<td>

```sh
yarn add @inquirer/ansi
```

</td>
</tr>
</table>

## Usage

```js
import {
  cursorUp,
  cursorDown,
  cursorTo,
  cursorLeft,
  cursorHide,
  cursorShow,
  eraseLines,
} from '@inquirer/ansi';

// Move cursor up 3 lines
process.stdout.write(cursorUp(3));

// Move cursor to specific position (x: 10, y: 5)
process.stdout.write(cursorTo(10, 5));

// Hide/show cursor
process.stdout.write(cursorHide);
process.stdout.write(cursorShow);

// Clear 5 lines
process.stdout.write(eraseLines(5));
```

Or when used inside an inquirer prompt:

```js
import { cursorHide } from '@inquirer/ansi';
import { createPrompt } from '@inquirer/core';

export default createPrompt((config, done: (value: void) => void) => {
  return `Choose an option${cursorHide}`;
});
```

## API

### Cursor Movement

- **`cursorUp(count?: number)`** - Move cursor up by `count` lines (default: 1)
- **`cursorDown(count?: number)`** - Move cursor down by `count` lines (default: 1)
- **`cursorTo(x: number, y?: number)`** - Move cursor to position (x, y). If y is omitted, only moves horizontally
- **`cursorLeft`** - Move cursor to beginning of line

### Cursor Visibility

- **`cursorHide`** - Hide the cursor
- **`cursorShow`** - Show the cursor

### Screen Manipulation

- **`eraseLines(count: number)`** - Clear `count` lines and position cursor at the beginning of the first cleared line

# License

Copyright (c) 2025 Simon Boudrias (twitter: [@vaxilart](https://twitter.com/Vaxilart))<br/>
Licensed under the MIT license.
npm package: @inquirer/confirm
Description: Inquirer confirm prompt
Author: Simon Boudrias
Latest version: 6.0.11

# `@inquirer/confirm`

Simple interactive command line prompt to gather boolean input from users.

![Confirm prompt](https://cdn.rawgit.com/SBoudrias/Inquirer.js/28ae8337ba51d93e359ef4f7ee24e79b69898962/assets/screenshots/confirm.svg)

# Installation

<table>
<tr>
  <th>npm</th>
  <th>yarn</th>
</tr>
<tr>
<td>

```sh
npm install @inquirer/prompts
```

</td>
<td>

```sh
yarn add @inquirer/prompts
```

</td>
</tr>
<tr>
<td colSpan="2" align="center">Or</td>
</tr>
<tr>
<td>

```sh
npm install @inquirer/confirm
```

</td>
<td>

```sh
yarn add @inquirer/confirm
```

</td>
</tr>
</table>

# Usage

```js
import { confirm } from '@inquirer/prompts';
// Or
// import confirm from '@inquirer/confirm';

const answer = await confirm({ message: 'Continue?' });
```

## Options

| Property    | Type                    | Required | Description                                             |
| ----------- | ----------------------- | -------- | ------------------------------------------------------- |
| message     | `string`                | yes      | The question to ask                                     |
| default     | `boolean`               | no       | Default answer (true or false)                          |
| transformer | `(boolean) => string`   | no       | Transform the prompt printed message to a custom string |
| theme       | [See Theming](#Theming) | no       | Customize look of the prompt.                           |

## Theming

You can theme a prompt by passing a `theme` object option. The theme object only need to includes the keys you wish to modify, we'll fallback on the defaults for the rest.

```ts
type Theme = {
  prefix: string | { idle: string; done: string };
  spinner: {
    interval: number;
    frames: string[];
  };
  style: {
    answer: (text: string) => string;
    message: (text: string, status: 'idle' | 'done' | 'loading') => string;
    defaultAnswer: (text: string) => string;
  };
};
```

# License

Copyright (c) 2023 Simon Boudrias (twitter: [@vaxilart](https://twitter.com/Vaxilart))<br/>
Licensed under the MIT license.
npm package: @inradius/solid-wc-css-mixin
Description: A Solid.js CSS web component mixin.
Author: Travis Stroud
Latest version: 1.0.5

# @inradius/solid-wc-css-mixin
![npm version](https://img.shields.io/npm/v/@inradius/solid-wc-css-mixin) ![CI Action](https://github.com/inradius/solid-wc-utils-monorepo/actions/workflows/ci.yml/badge.svg) ![license](https://img.shields.io/npm/l/@inradius/solid-wc-css-mixin)

A lightweight mixin for [component-register](https://www.npmjs.com/package/component-register) that allows you to inject computed or inlined CSS directly into a Web Component's **Shadow Root** using Constructable Stylesheets.

## Why use this?
When building Web Components with Solid.js (via solid-element), managing styles can be tricky. This mixin:
- **Encapsulates Styles:** Keeps your CSS scoped to the component's Shadow DOM.
- **Performance:** Uses `adoptedStyleSheets` to ensure styles are parsed once and shared efficiently.
- **DX-Friendly:** Works seamlessly with Vite’s `?inline` imports or raw CSS strings.

## Installation
```bash
npm install @inradius/solid-wc-css-mixin component-register
# or
pnpm add @inradius/solid-wc-css-mixin component-register
```

## Usage
In your main entry point where you register your component, import your CSS as a string and pass it to the mixin.

```typescript
import { compose, register } from 'component-register';
import { withSolid } from 'solid-element';
import withCSS from '@inradius/solid-wc-css-mixin';

// Import your styles (works great with Vite/Webpack inlining)
import css from './styles.css?inline';

// Your Solid component
import App from './App';

compose(
  register('my-custom-element'),
  withCSS(css), // Injects the stylesheet
  withSolid
)(App);
```

## How it works
The mixin creates a new `CSSStyleSheet` object and pushes it into the element's `adoptedStyleSheets` array. This ensures that your styles do not "leak" out into the global scope, and global styles (unless using CSS variables) do not leak in.

## Requirements
- **Browser Support:** Requires a browser that supports [Constructable Stylesheets](https://caniuse.com/mdn-api_cssstylesheet_cssstylesheet).
- **Peer Dependencies:** This package is designed to be used with `component-register`.

## License
MIT