open-index/open-npm huggingface dataset:
npm package: @kws3/buttons
Description: Functional button components for use with Svelte applications.
Author: Sharif Ahmed
Latest version: 0.5.2

Functional button components for use with Svelte applications.

## Includes:
`<ConfirmButton>`, `<SubmitButton>`, `<DeleteButton>`


## Usage:

### `<ConfirmButton>`
Import component:
`import { ConfirmButton } from '@kws3/buttons';`

**No SCSS import**

-------

### `<SubmitButton>`
Import component:
`import { SubmitButton } from '@kws3/buttons';`

**No SCSS import**

-------

### `<DeleteButton>`
Import component:
`import { DeleteButton } from '@kws3/buttons';`

**No SCSS import**
npm package: @kws3/calendar
Description: A full page Calendar component
Author: Khaled Ahmed
Latest version: 1.0.17

# Calendar Component

A full page Calendar component for Svelte apps.


## Import Component
`import Calendar from '@kws3/calendar';`

## Import SCSS

`@import "../../node_modules/@kws3/calendar/styles.scss";`

## Default SCSS variables

 - `$kws-calendar-border-color: $grey-lighter;`
 - `$kws-calendar-header-border-color: $grey-lighter;`
 - `$kws-calendar-header-background: #f9f9f9;`
 - `$kws-calendar-header-weekend-opacity: 0.5;`
 - `$kws-calendar-month-background: #fff;`
 - `$kws-calendar-month-today-background: #f2f8ff;`
 - `$kws-calendar-month-active-background: $info;`
 - `$kws-calendar-month-off-opacity: 0.5;`
 - `$kws-calendar-day-background: #fff;`
 - `$kws-calendar-day-today-background: #f2f8ff;`
npm package: @kws3/helpers
Description: Helper components for Svelte applications
Author: khaled Ahmed
Latest version: 0.5.12

Smaller helper components for use with Svelte applications.

## Includes:
`<Panel>`, `<Loader>`, `<Message>`, `<Notification>`, `<Icon>`.


## Usage:

### `<Panel>`
Import component:
`import { Panel } from '@kws3/helpers';`

Import Sass:
`@import '../node_modules/@kws3/helpers/components/Panel/styles.scss';`

Sass variables with default values:

 - `$kws-panel-background: #fff;`
 - `$kws-panel-box-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);`
 - `$kws-panel-title-color: #000;`
 - `$kws-panel-title-weight: 700;`
 - `$kws-panel-caret-open-color: #888;`
 - `$kws-panel-caret-closed-color: #00a4d8;`

-------

### `<Loader>`
Import component:
`import { Loader } from '@kws3/helpers';`

Import Sass:
`@import '../node_modules/@kws3/helpers/components/Loader/styles.scss';`

Sass variables with default values:

 - `$kws-loader-width: 2rem;`
 - `$kws-loader-height: 2rem;`
 - `$kws-loader-width-large: ($kws-loader-width * 3);`
 - `$kws-loader-height-large: ($kws-loader-height * 3);`
 - `$kws-loader-color: #ccc;`
 - `$kws-loader-overlay-background: rgba(0,0,0,0.15);`

-------

### `<Message>`
Import component:
`import { Message } from '@kws3/helpers';`

**No SCSS import**

-------

### `<Notification>`
Import component:
`import { Notification } from '@kws3/helpers';`

**No SCSS import**

-------

### `<Icon>`

**Requires FontAwesome version <= 4.7.0, this can be either loaded from your bundle, or from a CDN**

Import component:
`import { Icon } from '@kws3/helpers';`

**No SCSS import**
npm package: @kws3/keyboard-event-handlers
Description: Keyboard event handlers for Svelte App
Author: Sharif Ahmed
Latest version: 0.0.7

# Keyboard Event Handlers

Keyboard event handlers for Svelte App.

## Installation

```bash
npm install --save-dev @kws3/keyboard-event-handlers
```

## Usage

```html

<input on:enter='addTodo()' bind:value='newTodo'>
<code>Press enter to add item</code>

<ul>
  {#each todos as todo}
    <li>{todo}</li>
  {/each}
</ul>



<script>

  import {enter} from '@kws3/keyboard-event-handlers';

  export default {
    data: function () {
      return {
        newTodo: '',
        todos: ['add some more todos']
      };
    },
    events: {
      enter
    },
    methods: {
      addTodo(e){
        let { newTodo, todos } = this.get();
        todos.push(newTodo);
        this.set({todos});
      }
    }
  };
</script>
```


## Available events


* enter
* tab
* escape
* space
* leftarrow
* rightarrow
* downarrow
* uparrow
* backspace
* del


## Custom key events

```js
  import { makeKeyDefinition } from '@kws3/keyboard-event-handlers';
  var someKey = makeKeyDefinition(keycode)

```
npm package: @kws3/searchable-select
Description: A Searchable Select component for Svelte applications
Author: Sharif Ahmed
Latest version: 0.1.13

# Searchable Select Component

A Searchable Select component for Svelte apps.


## Import Component
`import SearchableSelect from '@kws3/searchable-select';`

## Import SCSS

`@import "../../node_modules/@kws3/searchable-select/styles.scss";`

## Default SCSS variables

 - `$kws-ss-item-selected-bg-color:#0071bc;`
 - `$kws-ss-item-selected-text-color:#ffffff;`
 - `$kws-ss-item-selecting-bg-color:#0071bc;`
 - `$kws-ss-item-selecting-text-color:#ffffff;`
 - `$kws-ss-dropdown-bg-color: #ffffff;`
 - `$kws-ss-dropdown-text-color: #333;`
 - `$kws-ss-caret-color: #0071bc;`
npm package: @kws3/utils
Description: Kws3 internel helpers for Svelte App
Author: Sharif Ahmed
Latest version: 0.5.5

# Utils

Kws3 internel helper functions for Svelte applications.

## Current exported functions
 - `truncate(str, len)` - truncates a string `str` to specified length `len`
 - `nl2br(str)` - converts new lines to `<br>` tags
 - `cloneObject(obj)` - deep clones an object
 - `rAF` - returns a cross-browser version of `requestAnimationFrame`
 - `debounce(func, threshold, immediate)` - Debounces a function `func` so that it can be called only once within the `threshold` time period. Optional third param specifies whether `func` should be invoked immediately on first call.