open-index/open-npm huggingface dataset:
npm package: @kwangure/strawberry
Description: A set of svelte components
Latest version: 0.61.2


<!--
	This document is generated from 'src/README_TEMPLATE.md'. Do not edit it directly.
-->
# Strawberry

Svelte utils and components.

## Installation

```bash
npm i @kwangure/strawberry

```

## General usage

### Button

```html
<script>
	import '@kwangure/strawberry/css/button.css';

	let count = 0;
</script>

<button on:click={() => count++}>
	Increment Counter: {count}
</button>

```

### Code

```html
<script>
	import { javascript } from '@kwangure/strawberry/code';

	const code = 'const five = 5;\nconst thirty = five * 6';
</script>

<code>
	{#each javascript(code) as { segment, color }}
		<span class='br-token-{color}'>{segment}</span>
	{/each}
</code>

```

### Dialog

```html
<script>
	import { Dialog } from '@kwangure/strawberry/default/dialog';

	/** @type {false | 'modal' | 'non-modal'} */
	let open;
</script>

<Dialog bind:open>
	Nice to meet you
	<button on:click={() => open = false}>👋 Bye!</button>
</Dialog>

<button on:click={() => open = 'modal'}>Show</button>
<button on:click={() => open = 'non-modal'}>Show modal</button>

```

### Dropdown

```html
<script>
    import { Dropdown, Popup } from '@kwangure/strawberry/default/dropdown';
</script>

<Dropdown>
	<button slot="trigger">
		Click for dropdown
	</button>
	<Popup>
		<div class="br-focusable">Purple</div>
		<div class="br-focusable">Penguin</div>
		<div class="br-focusable">Has</div>
		<div class="br-focusable">Landed</div>
	</Popup>
</Dropdown>

```

### Element

```html
<script>
    import { Element } from '@kwangure/strawberry/default/element';

    const element = {
    	type: 'p',
    	props: {
    		style: 'font-style: italic; color: red;',
    	},
    	children: ['I am a dynamically generated red <p/> tag element.'],
    };
</script>

<Element {element}/>
```

### Inputs

```html
<script>
	import { Container } from '@kwangure/strawberry/default/input/container';
</script>

<Container let:inputId>
	<label slot='label' for={inputId}>
		This is the input label
	</label>
	<input id={inputId} placeholder="I can say anything!"/>
</Container>

<Container let:inputId>
	<label slot='label' for={inputId}>
		Pick a pizza toping.
	</label>
	<select id={inputId}>
		<option>Pineapple</option>
		<option>Pepperoni</option>
		<option>Peppers</option>
	</select>
</Container>

```

### Switch

```html
<script>
    import { Switch } from '$lib/default/switch';

    let checked = true;
</script>

<Switch bind:checked/> {checked ? '': 'un'}checked

```

## License

[Apache 2.0](./LICENSE) © Kafungo Wangure
npm package: @kwangure/svelte-docs
Description: Generate JSON documentation for Svelte components and CSS.
Author: Kafungo Wangure
Latest version: 0.5.2

# Svelte Documentation Parser
Generate JSON documentation for Svelte components.

## Install
```bash
npm install -D @kwangure/svelte-docs
```

## Usage
### As a plugin
```javascript
// vite.config.js
import { plugin as docs } from '@kwangure/svelte-docs';
export default {
    plugins: [docs()],
};

// docs.js
import docs as './component.svelte:docs';

console.log({ docs });
```

### As a a parser
```javascript
// parse.js
import { parse } from '@kwangure/svelte-docs';

const filepath = path.resolve('./component.svelte');
const code = fs.readFileSync(filepath);
const docs = parse(code, { filepath });

console.log({ docs });
```

## Output

| Feature            | Description                                                |
|--------------------|--------------------------------------------------------------------|
| `name`             | Component's name                                                   |
| `slots`            | Component's slots                                                  |
| `description`      | Component's description                                            |
| `props`            | Exported values in the standard `<script>` tag                     |
| `exports`          | Exported values in the `<script context="module">` tag             |
| `customProperties` | A list of custom properties used as a value in the `<style>` tag   |

## Documentation Parsing

Only comments that begin with `*` are parsed as documentation. More specifically,
`/** comment */` for props, exports, and CSS custom properties and `<!--* comment -->`
for slots.

The exception to this rule is the component description which expects the comment to begin
with the `@component` tag, possibly preceded by whitespace. This matches
[`Svelte for VS Code`'s syntax](https://github.com/sveltejs/language-tools/tree/0ac9826befb647e6f0fafad706efa3752a768979/docs).

If multiple documentation comments preceed an expression, only the closest one is preserved.

### Example:
```html
<!--
    @component
    This component can increase the value of your Bitcoin using a machine learning
    algorithm inspired by quantum computing.
-->
<script>
    import sendToPapa from "./harmless.js";
    /** valid but ignored comment */
    /**
     * The wealth you want multiplied!
     * @type {string}
     */
    /* ignored comment */
    export let bitcoinAddress;

    sendToPapa(bitcoinAddress);
</script>

<div class="liar-liar">
    <h1>Become a billionaire in 16 months, guaranteed!<h1>
    <p>
        You know we're not scammers because we take 16 months.
    </p>
</div>

<!--* Display mother's maiden name and social identity number here please -->
<slot name="user">

<style>
    .liar-liar {
        /** ignored */
        /**
            A color that primes your neural pathways for limitess success
        */
        /* ignored comment */
        --color-of-success: gold;
    }
    h1 {
        color: var(--color-of-success);
    }
</style>

```

## License

[MIT](/LICENSE)
npm package: @kwanhathai/demo-lib
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.14.
Latest version: 0.0.1

# DemoLib

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.14.

## Code scaffolding

Run `ng generate component component-name --project demo-lib` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project demo-lib`.
> Note: Don't forget to add `--project demo-lib` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build demo-lib` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build demo-lib`, go to the dist folder `cd dist/demo-lib` and run `npm publish`.

## Running unit tests

Run `ng test demo-lib` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.