open-index/open-npm huggingface dataset:
npm package: @ivy-interactive/ivy-design-system
Description: Modular multi-product token-based design system for Ivy products
Author: Ivy Interactive
Latest version: 1.1.31

# Ivy Design System

Color tokens for Ivy-Framework with light and dark theme support.

## Installation

**npm**

```bash
npm install ivy-design-system
```

**.NET**

```bash
dotnet add package Ivy.DesignSystem
```

## Usage

### CSS

```css
@import "ivy-design-system/css/ivy-framework";
@import "ivy-design-system/css/light";

.button {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
}
```

### Tailwind

```javascript
import ivyTokens from "ivy-design-system/tailwind/ivy-framework";

export default {
  ...ivyTokens,
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
};
```

### TypeScript

```typescript
import { tokens } from "ivy-design-system";

const primary = tokens["color-primary"];
```

### C#

```csharp
using Ivy.Themes;

var primary = IvyFrameworkTokens.Color.Primary;
var background = LightThemeTokens.Color.Background;
```

## Tokens

- **Semantic**: primary, secondary, destructive, success, warning, info
- **UI**: background, foreground, border, input, ring, muted, accent, card, popover
- All tokens include foreground variants
- Light and dark theme support

Tokens are defined in `figma-tokens/$tokens.json` and exported to CSS, Tailwind, TypeScript, and C#.

## Development

```bash
npm install
npm run build
```

## Links

- [GitHub](https://github.com/Ivy-Interactive/Ivy-Design-System)
- [npm](https://www.npmjs.com/package/ivy-design-system)
- [NuGet](https://www.nuget.org/packages/Ivy.DesignSystem)

MIT © Ivy Interactive
npm package: @ivy-js/iv
Description: JS template engine
Author: Bertrand Laporte
Latest version: 0.4.0

# ivy

ivy (aka. iv) is a lightweight JS template engine mixing concepts from ReactJS, Angular2 and Incremental DOM.

It is based on two independent pillars: on one hand, a template syntax named [XJS][] that was designed as a refinement of React's [JSX][] and, on the other hand, a state-management library ([trax][]) that allows to track changes in data objects.

[XJS]: https://github.com/AmadeusITGroup/xjs
[JSX]: https://reactjs.org/docs/introducing-jsx.html
[trax]: https://github.com/AmadeusITGroup/trax


ivy introduces many new concepts, such as
- [templates as functions][tf], that can be read as a sequence of JavaScript statements
- [js statements][jss] for loops, conditional blocks, local variables, etc.
- [param nodes][pnd] to support advanced component APIs with multiple named content blocks
- [decorators][] to combine multiple behaviors on a same elements (or components)
- [labels][] to retrieve references to generated HTML elements (or components)
- [CMS content][cms] support - to dynamically interpret template fragments served by a CMS
- [pre-processors][pp] to inject or modify a template content a compilation time

[tf]: http://amadeusITGroup.github.io/ivy/#/examples/hello
[jss]: http://amadeusITGroup.github.io/ivy/#/examples/loops
[pnd]: http://amadeusITGroup.github.io/ivy/#/examples/section
[decorators]: http://amadeusITGroup.github.io/ivy/#/api/decorators
[labels]: http://amadeusITGroup.github.io/ivy/#/examples/labels1
[cms]: http://amadeusITGroup.github.io/ivy/#/examples/fragment1
[pp]: http://amadeusITGroup.github.io/ivy/#/examples/preprocessors

Please visit [ivy documentation page][ivy] for more details and examples

[ivy]: http://amadeusITGroup.github.io/ivy


----
Code and documentation licensed under MIT

Copyright © 2020 Amadeus SAS
npm package: @ivyfang/react-day-picker
Description: Flexible date picker component for React
Author: Ivy Fang
Latest version: 7.2.11

<p align="center">
<a href="http://react-day-picker.js.org"><img width="80" style="margin: 0 auto" alt="title" src="https://user-images.githubusercontent.com/120693/33364057-0d4a962a-d4e3-11e7-8506-0f9aede2b345.png"></a>
</p>
<h1 align="center">react-day-picker</h1>
<p align="center">
  Flexible date picker component for <a href="https://facebook.github.io/react/">React</a>.
  <br />
  Highly customizable, localizable, with ARIA support, no external dependencies, 9KB gzipped
</p>
<p align="center">
  <a href="http://react-day-picker.js.org"><img width="266" alt="screen shot 2017-11-29 at 08 53 17" src="https://user-images.githubusercontent.com/120693/33363979-cb60fb5a-d4e2-11e7-8d21-f4779b8b9105.png">
</a>
</p>
<p align="center">
  <a href="http://react-day-picker.js.org">Documentation</a> | <a href="http://react-day-picker.js.org/examples/basic">Examples</a> | <a href="http://react-day-picker.js.org/api/DayPicker">API</a> | <a href="http://react-day-picker.js.org/changelog">Changelog</a>
</p>
<p align="center">
  <a href="https://www.npmjs.com/package/react-day-picker">
    <img src="https://img.shields.io/npm/v/react-day-picker.svg?style=flat-square" alt="npm version">
  </a>
  <a href="http://npm-stat.com/charts.html?package=react-day-picker">
    <img src="https://img.shields.io/npm/dm/react-day-picker.svg?style=flat-square" alt="npm downloads">
  </a>
  <a href="https://circleci.com/gh/gpbl/react-day-picker">
    <img src="https://img.shields.io/circleci/project/github/gpbl/react-day-picker/master.svg?style=flat-square" alt="circleci">
  </a>
  <a href="https://codecov.io/gh/gpbl/react-day-picker">
    <img src="https://img.shields.io/codecov/c/github/gpbl/react-day-picker/master.svg?style=flat-square" alt="npm downloads">
  </a>
</p>

## Get support

Please fork and use [https://codesandbox.io/s/XDAE3x0W8](https://codesandbox.io/s/XDAE3x0W8) to reproduce your problem.

* Ask on on [Stack Overflow](http://stackoverflow.com/questions/tagged/react-day-picker?sort=newest) tagging your question with `react-day-picker`.
* Open a [new issue](https://github.com/gpbl/react-day-picker/issues/new) on GitHub.
* Join the [Gitter room](https://gitter.im/gpbl/react-day-picker) to chat with other developers.
npm package: @ivyfang/react-native-multi-slider
Description: Android and iOS supported pure JS slider component with multiple markers for React Native
Author: Ivy Fang
Latest version: 1.0.4

# react-native-multi-slider

Pure JS react native slider component with one or two markers.
Options to customize track, touch area and provide customer markers and callbacks for touch events and value changes.

## Examples

```
cd example
npm install
react-native run-ios
react-native run-android
```

![Example](https://raw.githubusercontent.com/ptomasroos/react-native-multi-slider/master/docs/demo.gif)


## Getting Started

- [Installation](#installation)

### Installation

```bash
$ npm install --save @ptomasroos/react-native-multi-slider
```

### Usage in a ScrollView

```
 enableScroll = () => this.setState({ scrollEnabled: true });
 disableScroll = () => this.setState({ scrollEnabled: false });
 
 render() {
   return (
     <ScrollView scrollEnabled={this.state.scrollEnabled}>
      <MultiSlider
        ...
        onValuesChangeStart={this.disableScroll}
        onValuesChangeFinish={this.enableScroll}
      />
    </ScrollView>
    );
```
### shape up CustomMarker as left and right

In order to make different styles on markers you can set isMarkersSeparated to true, define customMarkerLeft and customMarkerRight in MultiSlider. for example:


```
<MultiSlider
     ...
      isMarkersSeparated={true}
      
      customMarkerLeft={(e) => {
         return (<CustomSliderMarkerLeft
          currentValue={e.currentValue}/>)
          }}
         
         customMarkerRight={(e) => {
         return (<CustomSliderMarkerRight
         currentValue={e.currentValue}/>)
         }}
     />

```