open-index/open-npm huggingface dataset:
npm package: @quictools/qlog-schema
Description: TypeScript schema for the qlog specification, providing logging for the QUIC and HTTP/3 network protocols.
Author: Hasselt University - EDM - QUIC Research
Latest version: 0.0.16

This TypeScript schema is published on NPM as @quictools/qlog-schema

npm install @quictools/qlog-schema

and then use it in your TypeScript files with:
import * as qlog from '@quictools/qlog-schema'

You can then load qlog files and cast the root json object to qlog.IQLog to get autocomplete etc.
npm package: @quid/merge-refs
Description: Utility to merge different React “refs” into a single call.
Latest version: 4.11.6

`merge-refs` is a little utility used to call different
React ["refs"][react-refs] all at once.

It can be especially useful if you are using two or more libraries
that need a reference of the same React component.

## Installation

```bash
npm install --save @quid/merge-refs

# or

yarn add @quid/merge-refs
```

## Usage

A typical use case is:

```jsx static
import mergeRefs from '@quid/merge-refs';

<Popper>
  {({ ref, style }) => (
    <MouseOutside>
      {ref2 => (
        <div style={style} ref={mergeRefs(ref, ref2)}>
          content
        </div>
      )}
    </MouseOutside>
  )}
</Popper>;
```

Or, with React hooks:

```jsx static
import mergeRefs from '@quid/merge-refs';

const ref1 = useRef(null);
const ref2 = useRef(null);

<div ref={mergeRefs(ref1, ref2)} />;
```

[react-refs]: https://reactjs.org/docs/refs-and-the-dom.html
npm package: @quid/react-core
Description: Core React Quid components
Latest version: 4.11.6

This package contains all the core UI elements needed to create our
interfaces and the most complex components of this project.

## Installation

```bash
npm install --save @quid/react-core

# or

yarn add @quid/react-core
```

<!-- NPM_ONLY> -->

More documentation is available at https://ui.quid.com

<!-- <NPM_ONLY -->
npm package: @quid/react-date-picker
Description: Lightweight date picker component
Latest version: 4.11.6

This component is a replacement for the HTML date picker element displayed when
a `input[type=date]` is expanded.

It is exported as a standalone package to make it easier its integration
with 3rd party code, but its suggested usage is with the [`@quid/react-forms#InputDate`](#inputdate) component.

## Installation

```bash
npm install --save @quid/react-date-picker

# or

yarn add @quid/react-date-picker
```

<!-- NPM_ONLY> -->

More documentation is available at https://ui.quid.com

<!-- <NPM_ONLY -->
npm package: @quid/react-dropdown
Description: React dropdown component with ARIA accessibility and advanced functionalities
Latest version: 4.11.8

A feature complete "dropdown" component built with React and Downshift.

It supports most of the possible use cases, included category grouping, two column layout, and more.

#### Installation

```bash
npm install --save @quid/react-dropdown

# or

yarn add @quid/react-dropdown
```

#### Usage

```jsx static
import Dropdown from '@quid/react-dropdown';

const items = [
  { id: 1, label: 'One' },
  { id: 2, label: 'Two' },
  { id: 3, label: 'Three' },
  { id: 4, label: 'Four' },
  { id: 5, label: 'Five' },
];

<Dropdown items={items} selectedItems={[items[0]]}>
  {({ getInputProps }) => <input readOnly {...getInputProps()} />}
</Dropdown>;
```
npm package: @quid/react-ellipsis
Description: Trim multi-line text and add ellipsis to it
Latest version: 4.11.6

react-ellipsis is a React component designed to trim multi-line text
to limit it to a given maximum height, adding the ellipsis (`…`) symbol
at the end to denote some text has been cut.

It provides the same functionality of the CSS [`text-overflow: ellipsis`][mdn-text-overflow]
but with support for multi-line texts.

## Installation

```bash
npm install --save @quid/react-ellipsis

# or

yarn add @quid/react-ellipsis
```

<!-- NPM_ONLY> -->

More documentation is available at https://ui.quid.com

<!-- <NPM_ONLY -->

[mdn-text-overflow]: https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
npm package: @quid/react-expandable-table
Description: Simple table with expandable row content and column sorting capabilities.
Latest version: 4.11.6

`react-expandable-table` is a simple yet powerful table component.

Its main features include: windowed rendering, pagination, row expansion on click,
header tooltips, and sorting.

It can be easily styled by overriding the Emotion `theme`, or by importing
and using as selectors all the components exported by the library.
(they can be found in the `src/styles.js` file for reference)

## Installation

```bash
npm install --save @quid/react-expandable-table

# or

yarn add @quid/react-expandable-table
```

<!--
Preserve the text below to show the documentation URL on the npm page.
You can use the "NPM_ONLY> ... <NPM_ONLY" delimiter to hide any text
from the ui.quid.com documentation but keep it visible on the npm page.
-->

<!-- NPM_ONLY> -->

More documentation is available at https://ui.quid.com

<!-- <NPM_ONLY -->
npm package: @quid/react-forms
Description: Collection of form-related React components, such as buttons, inputs, etc...
Latest version: 4.11.6

The `@quid/react-forms` package provides a comphrensive list of React form elements
such as input, labels, buttons, etc... to be used to create forms in your apps.

Most of the components provide the same API of the corresponding HTML element.

## Installation

```bash
npm install --save @quid/react-forms

# or

yarn add @quid/react-forms
```

## Usage

You can import any of the components as named imports from the package.

```js static
import { InputNumber, Label, TextArea } from '@quid/react-forms';
```

<!-- NPM_ONLY> -->

The documentation of each of the exported components is available at https://ui.quid.com/#react-forms

<!-- <NPM_ONLY -->
npm package: @quid/react-invalid-handler
Description: render-prop which provides an easy interface to interact with the HTML form validation API
Latest version: 4.11.6

This render-prop component makes it easy to handle HTML form input
validation on your input components.

## Usage

<!-- NPM_ONLY> -->

```js
import InvalidHandler from '@quid/react-invalid-handler';

<form onSubmit={evt => evt.preventDefault()}>
  <InvalidHandler errorMessage="Custom error message here">
    {(getInputProps, isInvalid) => (
      <input
        type="email"
        required
        {...getInputProps({ onChange: () => console.log('changed') })}
        style={{
          backgroundColor: isInvalid ? 'red' : 'white',
        }}
      />
    )}
  </InvalidHandler>
  <button type="submit">Submit</button>
</form>;
```

<!-- <NPM_ONLY -->

### `GetInputProps<{ onChange: Event => void, onInvalid: Event => void }>`

Call `getInputProps` to get two custom event handlers needed by the
target input element to properly report its validity state.

If you'd like to provide your own `onChange` and/or `onInvalid` callbacks,
you can call `getInputProps` with an object containing one or both the
functions to merge them with the ones provided by this component.

```js static
const { onChange } = getInputProps({ onChange: () => console.log('foobar') });
// calling `onChange` will trigger the `InvalidHandler` logic AND your console.log
```

### `isInvalid: boolean`

This argument will be `true` whenever the target input element has an invalid
value and the user tried to submit the form.

It wil reset to `false` after the user changes the value of the input element,
and set back to `true` if the user tries to submit the form again with invalid data.

<!-- NPM_ONLY> -->

More documentation is available at https://ui.quid.com

<!-- <NPM_ONLY -->
npm package: @quid/react-layouts
Description: Collection of layout related React components, such as Breadcrumb, Navbar, Tabs, etc...
Latest version: 4.11.6

`react-layouts` provides you helpful components for creating layouts.

## Installation

```bash
npm install --save @quid/react-layouts

# or

yarn add @quid/react-layouts
```

<!--
Preserve the text below to show the documentation URL on the npm page.
You can use the "NPM_ONLY> ... <NPM_ONLY" delimiter to hide any text
from the ui.quid.com documentation but keep it visible on the npm page.
-->

<!-- NPM_ONLY> -->

More documentation is available at https://ui.quid.com

<!-- <NPM_ONLY -->
npm package: @quid/react-mouse-outside
Description: Detect clicks and other mouse events outside of a React element
Latest version: 4.11.6

`react-mouse-outside` enables to listen for mouse events that happen
to the target reference elements.

## Installation

```bash
npm install --save @quid/react-mouse-outside

# or

yarn add @quid/react-mouse-outside
```

<!-- NPM_ONLY> -->

More documentation is available at https://ui.quid.com

<!-- <NPM_ONLY -->
npm package: @quid/react-popover
Description: Popover component based on react-popper
Latest version: 4.11.6

`@quid/react-popover` is a React component based upon `react-popper`,
used to quickly create popovers in your applications.

It supports all the advanced positioning provided by `react-popper`,
a "click outside" detection system to automatically close the popover
whenever the user clicks outside of it, open and close delays, and a
render-props based API to allow full customization of the component rendering.

As convenience utility, a `Container` component is exported from the paclage

## Installation

```bash
npm install --save @quid/react-popover

# or

yarn add @quid/react-popover
```

<!--
Preserve the text below to show the documentation URL on the npm page.
You can use the "NPM_ONLY> ... <NPM_ONLY" delimiter to hide any text
from the ui.quid.com documentation but keep it visible on the npm page.
-->

<!-- NPM_ONLY> -->

More documentation is available at https://ui.quid.com

<!-- <NPM_ONLY -->
npm package: @quid/react-tabs-provider
Description: render-props based component to handle tab navigation
Latest version: 4.11.6

This package provides a set of React components that make it easy to
handle tab based navigation user interfaces.

It supports both fully controlled and stateful approaches to better fit
the consumer requirements.

## Installation

```bash
npm install --save @quid/react-tabs-provider

# or

yarn add @quid/react-tabs-provider
```

<!-- NPM_ONLY> -->

More documentation is available at https://ui.quid.com

<!-- <NPM_ONLY -->
npm package: @quid/react-tooltip
Description: Tooltip component based on react-popper
Latest version: 4.11.6

`@quid/react-tooltip` is based on `@quid/react-popover`, it's a quick
way to add tooltips to your application without boilerplate.

Think about it as a pre-configured `@quid/react-popover`.

Please refer to the [`@quid/react-popover`](https://ui.quid.com/#!/Popover)
documentation for more information.

## Installation

```bash
npm install --save @quid/react-popover

# or

yarn add @quid/react-popover
```

<!--
Preserve the text below to show the documentation URL on the npm page.
You can use the "NPM_ONLY> ... <NPM_ONLY" delimiter to hide any text
from the ui.quid.com documentation but keep it visible on the npm page.
-->

<!-- NPM_ONLY> -->

More documentation is available at https://ui.quid.com

<!-- <NPM_ONLY -->
npm package: @quid/react-use-controlled-state
Description: React Hook to easily create fully controlled/uncontrolled React components.
Latest version: 4.11.6

`@quid/react-use-controlled-state` is a custom React Hook designed to
enable developers to easily create components able to work both as
[fully controlled][controlled-components] or [fully uncontrolled][uncontrolled-components]
without code repetition.

## Installation

```bash
npm install --save @quid/react-use-controlled-state

# or

yarn add @quid/react-use-controlled-state
```

## Usage example

Take this component as example:

```jsx static
import useControlledState from '@quid/react-use-controlled-state';

const MyComponent = ({ defaultOpen, open, onChange }) => {
  const [state, setState] = useControlledState(defaultOpen, open, onChange);

  return (
    <button type="button" onClick={() => setState(current => !current)}>
      {state === true ? 'component is open' : 'component is closed'}
    </button>
  );
};
```

Thanks to `@quid/react-use-controlled-state`, this component can be used in two
different ways now.

The first way let's you define a default open state, and let the component hold
and handle the state changes for you, transparently.

```jsx
import useControlledState from '@quid/react-use-controlled-state';

const MyComponent = ({ defaultOpen, open, onChange }) => {
  const [state, setState] = useControlledState(defaultOpen, open, onChange);

  return (
    <button type="button" onClick={() => setState(current => !current)}>
      {state === true ? 'component is open' : 'component is closed'}
    </button>
  );
};

<MyComponent defaultOpen={false} />;
```

The second way, makes you define a `open` property, along with an `onChange` callback.  
You will be responsible to update the state and maintain it externally.

```jsx
import useControlledState from '@quid/react-use-controlled-state';

const MyComponent = ({ defaultOpen, open, onChange }) => {
  const [state, setState] = useControlledState(defaultOpen, open, onChange);

  return (
    <button type="button" onClick={() => setState(current => !current)}>
      {state === true ? 'component is open' : 'component is closed'}
    </button>
  );
};

const App = () => {
  const [isOpen, setOpen] = React.useState(false);

  return <MyComponent open={isOpen} onChange={open => setOpen(open)} />;
};

<App />;
```

Both the approaches have their upsides and downsides, and it's useful to let your
users decide what fits better their needs.

<!-- NPM_ONLY> -->

---

More documentation is available at https://ui.quid.com

<!-- <NPM_ONLY -->

[controlled-components]: https://reactjs.org/docs/forms.html#controlled-components
[uncontrolled-components]: https://reactjs.org/docs/uncontrolled-components.html
npm package: @quid/stylis-plugin-focus-visible
Description: Polyfill for the CSS :focus-visible pseudo-class, to use with Emotion
Latest version: 4.11.6

This [Stylis][stylis] plugin is a polyfill for the [`:focus-visible`][focus-visible] CSS pseudo-class.

It works in conjuction with [`what-input`][what-input] to provide a reliable behavior on browsers
that don't natively support the `:focus-visible` pseudo-class.

Example input:

```css
.foo:focus-visible {
  color: red;
}
```

Example output:

```css
[data-whatinput='keyboard'] .foo:focus,
[data-whatinput='initial'] .foo:focus {
  color: red;
}
```

## Installation

```bash
npm install --save @quid/stylis-plugin-focus-visible

# or

yarn add @quid/stylis-plugin-focus-visible
```

## Usage with Emotion

Is it suggested to use this plugin with [Emotion][emotion]'s `CacheProvider`:

```jsx static
import 'what-input';
import { CacheProvider } from '@emotion/core';
import createCache from '@emotion/cache';
import focusVisiblePlugin from '@quid/stylis-plugin-focus-visible';

const emotionCache = createCache({
  stylisPlugins: [focusVisiblePlugin],
});

const App = () => (
  <CacheProvider value={emotionCache}>
    <StyledComponent>
      any children will be able to use `:focus-visible`
    </StyledComponent>
  </CacheProvider>
);
```

Beware, the cache instance should be shared across the app if multiple `CacheProvider`
components are used. If you define a new cache, Emotion will parse all your styles twice.

<!-- NPM_ONLY> -->

More documentation is available at https://ui.quid.com

<!-- <NPM_ONLY -->

[stylis]: https://github.com/thysultan/stylis.js
[focus-visible]: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
[what-input]: https://github.com/ten1seven/what-input
[emotion]: https://emotion.sh
npm package: @quidgest/ui
Description: Quidgest's UI framework
Author: Quidgest
Latest version: 0.16.68

# @quidgest/ui

Quidgest's UI framework.

## Features

- A collection of customizable and reusable Vue 3 components.
- Written in TypeScript for type safety and better developer experience.
- Easily style components using SCSS.
- Documentation and examples.

## Install

```cli
npm i @quidgest/ui
```

## Usage

Start by installing the framework. We recommend placing this logic in a dedicated file, such as `src/plugins/quidgest-ui.ts`.

```ts
// src/plugins/quidgest-ui.ts

import { createFramework } from '@quidgest/ui'

const framework = createFramework()

export default framework
```

Then, use the plugin in `main.ts`, as follows:

```ts
// src/main.ts

import { createApp } from 'vue'
import App from './App.vue'

import framework from './plugins/quidgest-ui'

createApp(App).use(framework).mount('#app')
```

Once installed, components can be used like so:

```vue
<template>
	<q-button @click="handleClick">Click me</q-button>
</template>

<script setup lang="ts">
	import { QButton } from '@quidgest/ui/components'

	function handleClick() {
		console.log("Parallel lines have so much in common. It's a shame they'll never meet.")
	}
</script>
```

## Development

The package utilizes Storybook for component development and organization. You can view the components locally in the Storybook documentation explorer.

Execute the following command to run Storybook:

```cli
npm run storybook
```

(You might need to execute `pnpm install` beforehand if you haven't done so.)

By default, Storybook will be running at `http://localhost:6006/`.

## Running Unit Tests

It's important to run unit tests during development to ensure code quality and correctness. Execute the following command to run the unit tests:

```cli
npm run test
```
npm package: @quidone/react-native-wheel-picker-feedback
Description: It provides native sound and haptic feedback from the wheel picker
Author: rozhkovs
Latest version: 2.0.0

[AUTHOR]: https://github.com/rozhkovs
[Q-WHEEl-PICKER]: https://github.com/quidone/react-native-wheel-picker

# 🙌 React Native Wheel Picker Feedback 🙌
<p>
  <a href="https://github.com/quidone/react-native-wheel-picker-feedback/blob/HEAD/LICENSE">
    <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="React Native Wheel Picker Feedback is released under the MIT license." />
  </a>
  <a href="https://www.npmjs.com/package/@quidone/react-native-wheel-picker-feedback">
    <img src="https://img.shields.io/npm/v/@quidone/react-native-wheel-picker-feedback?color=brightgreen&label=npm%20package" alt="Current npm package version." />
  </a>
</p>

It provides native sound and haptic feedback from the wheel picker. For platform other than iOS, nothing will happen.

This may be used with [@quidone/react-native-wheel-picker][Q-WHEEl-PICKER]

## Installation

```sh
yarn add @quidone/react-native-wheel-picker-feedback
```

## Usage

```ts
import WheelPickerFeedback from '@quidone/react-native-wheel-picker-feedback';

WheelPickerFeedback.triggerImpact();
WheelPickerFeedback.triggerSound();
WheelPickerFeedback.triggerSoundAndImpact()
```

## ⚡️ Try it out

```shell
git clone git@github.com:quidone/react-native-wheel-picker-feedback.git
cd react-native-wheel-picker-feedback
yarn install
cd example && bundle exec pod install && yarn ios
```

## 👨‍💻 Author
[Sergey Rozhkov][AUTHOR]

## 🎯 Was it helpful?
Do you like it and find it helpful? You can help this project in the following way:
- ⭐ Put the star.
- 💡 Suggest your ideas.
- 😉 Open a founded issue.

## 🤝 Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## 📄 License
Quidone React Native Wheel Picker Feedback is MIT licensed, as found in the [LICENSE](LICENSE) file.

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)