open-index/open-npm huggingface dataset:
npm package: @siimple/preset-elements
Description: Elements preset for the siimple css toolkit
Author: Josemi Juanes
Latest version: 0.0.2
Deprecated: This preset has been deprecated. Please migrate to new @siimple/modules instead

# @siimple/preset-elements

A preset for the **siimple CSS toolkit** that includes a collection of basic UI elements like buttons, alerts, and more!

## Install

```bash
$ npm install --save @siimple/preset-elements
```

Include the elements styles in your `siimple.config.js` file:

```js
import elements from "@siimple/preset-elements";

export default {
    // ...other configuration
    styles: {
        ...elements.styles,
        // ...other custom styles
    },
};
```

### Usage

Just apply the element classname to the HTML tag that you want to style:

```html
<button class="button">Submit</button>
```

Some elements will provide additional modifiers that you can use to change the default style of the element:

```html
<button class="button is-secondary is-full">
    Full width button
</button>
```

## License

[MIT License](https://github.com/jmjuanes/siimple/blob/main/LICENSE).
npm package: @siimple/preset-helpers
Description: Helpers preset for the siimple css toolkit
Author: Josemi Juanes
Latest version: 0.0.2
Deprecated: This preset has been deprecated. Please migrate to new @siimple/modules instead

# @siimple/preset-helpers

A preset for the **siimple CSS toolkit** for adding helpers for your project.

## Install

```bash
$ npm install --save @siimple/preset-helpers
```

Include the preset styles in your `siimple.config.js` file:

```js
import helpers from "@siimple/preset-helpers";

export default {
    // ...other configuration
    styles: {
        ...helpers.styles,
        // ...other custom styles
    },
};
```

## Usage

Helpers modifiers have the following class pattern:

```
.has-<shortcut>-<name>
.is-<name>
```

Some helpers modifiers, like colors and sizes, always use the `.has-<shortcut>-<name>` pattern. In this case,

- `shortcut` is the CSS attribute. For example we will use `bg` for the `background-color` and `w` for the `width`.
- `name` is the CSS value to apply. For example `full` usually will apply a `100%` value.

Example:

```html
<button class="button has-w-full has-bg-primary has-text-center">
    Example button
</button>
```

Other simple helpers modifiers will use the `.is-<name>` pattern. Example:

```html
<span class="is-capitalized">Hello world!</span>
```

## License

[MIT License](https://github.com/jmjuanes/siimple/blob/main/LICENSE).
npm package: @siimple/preset-ice
Description: A frosty and clean theme for siimple. Based on Nord Theme.
Author: Josemi Juanes
Latest version: 0.4.0

# @siimple/preset-ice

A frosty and clean theme for **siimple**. Based on [Nord Theme](https://www.nordtheme.com).

## Installation

Install this package using **npm**:

```
$ npm install --save siimple @siimple/preset-ice
```

## Usage

Use this theme in your `siimple.config.js` file:

```js
import ice from "@siimple/preset-ice";

export default {
    ...ice,
    // ...other configuration
};
```

This preset uses `Poppins` as default font for body text and headings. You will need to import this font in your HTML file:

```html
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700" rel="stylesheet">
```

## Additional variants

This preset introduces additional variants for some elements like buttons, alerts and badges. You can use the `success`, `warning` and `danger` variants to style your buttons, alerts and badges:

```html
<!-- Buttons -->
<button class="button is-danger">Danger button</button>
<button class="button is-warning">Warning button</button>
<button class="button is-success">Success button</button>

<!-- Alerts -->
<div class="alert is-danger">Danger alert</div>
<div class="alert is-warning">Warning alert</div>
<div class="alert is-success">Success alert</div>

<!-- Badges -->
<span class="badge is-danger">Danger badge</span>
<span class="badge is-warning">Warning badge</span>
<span class="badge is-success">Success badge</span>
```

## Acknowledgement

This theme has been inspired in [Nord Color palette](https://www.nordtheme.com).
npm package: @siimple/preset-icons
Description: Icons preset for the siimple css toolkit
Author: Josemi Juanes
Latest version: 0.0.2
Deprecated: This preset has been deprecated. Please migrate to new siimple-icons

# @siimple/preset-icons

A preset for the **siimple CSS toolkit** that provides a collection of **pure CSS icons**.

## Install

```bash
$ npm install --save @siimple/preset-icons
```

Include the preset styles in your `siimple.config.js` file:

```js
import icons from "@siimple/preset-icons";

export default {
    // ...other configuration
    styles: {
        ...icons.styles,
        // ...other custom styles
    },
};
```

## Usage

Use the class `icon-<icon-name>` to include icons in your HTML content. By default, icons will have the size and the color of the parent's font size and text color. This can be customized providing a custom `font-size` and `color` style properties.

```html
<!-- Moon icon with the same size and color of the parent's font size and color -->
<i class="icon-moon"></i>

<!-- Arrows icon in red and with a size of 32px -->
<i class="icon-arrows" style="font-size:32px;color:red;"></i>

<!-- Circle icon in blue and with a size of 64px-->
<i class="icon-circle" style="font-size:64px;color:blue;"></i>
```

## License

[MIT License](https://github.com/jmjuanes/siimple/blob/main/LICENSE).
npm package: @siimple/preset-markup
Description: Markup preset for the siimple css toolkit
Author: Josemi Juanes
Latest version: 0.0.2
Deprecated: This preset has been deprecated. Please migrate to new @siimple/modules instead

# @siimple/preset-markup

A preset for the **siimple CSS toolkit** for styling your markup elements.

## Install

```bash
$ npm install --save @siimple/preset-markup
```

Include the preset styles in your `siimple.config.js` file:

```js
import markup from "@siimple/preset-markup";

export default {
    // ...other configuration
    styles: {
        ...markup.styles,
        // ...other custom styles
    },
};
```

## Usage

### Headings

This preset includes styles for your heading elements, from `<h1>` through `<h6>`. Headings will reuse styles defined in the `text.heading` field of your theme configuration.

```html live=true
<h1>h1. Siimple heading</h1>
<h2>h2. Siimple heading</h2>
<h3>h3. Siimple heading</h3>
<h4>h4. Siimple heading</h4>
<h5>h5. Siimple heading</h5>
<h6>h6. Siimple heading</h6>
```

### Paragraph

This preset includes styles for your `<p>` elements. Paragraphs will reuse styles defined in the `text.paragraph` field of your theme configuration.

```html live=true
<p class="has-mb-0">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
    incididunt ut labore et dolore magna aliqua.
</p>
```

### Blockquotes

This preset includes styles for your `<blockquote>` elements:

```html live=true
<blockquote>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
    incididunt ut labore et dolore magna aliqua.
</blockquote>
```

### Inline links

This preset includes styles for your inline links elements. Links will reuse styles defined in the `text.link` field of your theme configuration.

```html live=true
You can style your <a href="">link</a> elements.
``` 

### Small text

This preset adds styles for your `<small>` elements, and reuse styles defined in the `text.small` field of your theme configuration.

```html live=true
You can style your <small>small text</small> elements.
```

### Inline code

This preset includes styles for your inline code elements, and will reuse styles defined in the `text.code` field of your theme configuration.

```html live=true
You can style your <code>inline code</code> elements.
```

### Horizontal rule

This preset includes styles for your `<hr>` elements: 

```html
<hr>
```

## License

[MIT License](https://github.com/jmjuanes/siimple/blob/main/LICENSE).
npm package: @siimple/preset-mustard
Description: A yellowish and clean theme for siimple.
Author: Josemi Juanes
Latest version: 0.4.0

# @siimple/preset-mustard

A very clean and yellowish theme preset for the **siimple CSS toolkit**.

## Installation

Add this preset to your project using **npm** or **yarn**:

```bash
$ npm install --save @siimple/preset-mustard
```

## Usage

Include this preset in your `siimple.config.js` file:

```js
import mustard from "@siimple/preset-mustard";

export default {
    ...mustard,
    // ...other configuration

    // If you need to define your own variants, first extend the preset variants.
    // For example:
    buttons: {
        ...mustard.buttons,
        // ...your custom buttons variants
    },

    // In case that you need to add your custom styles, first extend the styles
    // defined in mustard.styles:
    styles: {
        ...mustard.styles,
        // ...your custom styles
    },
};
```

This preset uses [`Inter`](https://fonts.google.com/specimen/Inter) as the default font family for both body and headings, so you will need to import this font in your HTML file:

```html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap">
```

## Additional variants

This preset introduces additional variants for some elements like buttons, alerts and badges. For example, you can use the `light` variant to create a more lithen alert, badge or button:

```html
<!-- Light button -->
<button class="button is-light">Light button</button>

<!-- Light alert -->
<div class="alert is-light">
    Light alert content
</div>

<!-- Light badge -->
<span class="badge is-light">Light badge</span>
```

You can also create `outlined` buttons or badges:

```html
<button class="button is-outlined">Outlined button</button>
```
npm package: @siimple/preset-noir
Description: An elegant and classic theme for siimple.
Author: Josemi Juanes
Latest version: 0.4.0

# @siimple/preset-noir

An elegant and classic theme for **siimple**.

## Installation

Install this package using **npm**:

```bash
$ npm install --save @siimple/preset-noir
```

## Usage

Add this theme to your `siimple.config.js` file:

```js
import noir from "@siimple/preset-noir";

export default {
    ...noir,
    // ...other configuration
    styles: {
        ...noir.styles,
        // other custom styles
    },
};
```

This preset uses [`Noto Serif`](https://fonts.google.com/specimen/Noto+Serif) for body text and for headings, so you will need to import this font in your HTML file:

```html
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700" rel="stylesheet">
```

## Additional variants

This preset introduces additional variants for some elements. You can use the `outlined` variant to create an outlined button or badge:

```html
<!-- Outlined button -->
<button class="button is-outlined">Outlined button</button>

<!-- Outlined badge -->
<span class="badge is-outlined">Outlined badge</span>
```
npm package: @siimple/preset-reboot
Description: Reboot preset for the siimple css toolkit
Author: Josemi Juanes
Latest version: 0.0.2
Deprecated: This preset has been deprecated. Please migrate to new @siimple/modules instead

# @siimple/preset-reboot

A preset for the **siimple CSS toolkit** for adding CSS reset styles.

## Install

```bash
$ npm install --save @siimple/preset-reboot
```

Include the preset styles in your `siimple.config.js` file:

```js
import reboot from "@siimple/preset-reboot";

export default {
    // ...other configuration
    styles: {
        ...reboot.styles,
        // ...other custom styles
    },
};
```

## License

[MIT License](https://github.com/jmjuanes/siimple/blob/main/LICENSE).
npm package: @siimple/preset-theme
Description: Default theme preset for the siimple css toolkit
Author: Josemi Juanes
Latest version: 0.0.2
Deprecated: This preset has been renamed as @siimple/preset-base

# @siimple/preset-theme

Default theme preset for the **siimple CSS toolkit**.

## Install

Install this package using **npm**:

```bash
$ npm install --save @siimple/preset-theme
```

## Usage

Use default theme in your `siimple.config.js` file:

```js
import theme from "@siimple/preset-theme";

export default {
    // Import all default scales, breakpoints and root styles
    ...theme,
    // Extend default theme scales
    colors: {
        ...theme.colors,
        text: "#000",
    },
    // ...other configuration
};
```

## License

[MIT License](https://github.com/jmjuanes/siimple/blob/main/LICENSE).
npm package: @siimple/presets
Description: A collection of presets for siimple.
Author: Josemi Juanes
Latest version: 0.4.0

# @siimple/presets

A collection of all official presets for **siimple**.

## Installation

Use **npm** or **yarn** for adding this package to your project:

```bash
$ yarn add @siimple/presets
```

## Usage

Presets can be imported from this package to your `siimple.config.js` file:

```js
import {base} from "@siimple/presets";

export default {
    ...base,
    // ...other custom configuration
};
```

The following presets can be imported:

- [base](https://siimple.josemi.xyz/presets/base).
- [dark](https://siimple.josemi.xyz/presets/dark).
- [ice](https://siimple.josemi.xyz/presets/ice).
- [mustard](https://siimple.josemi.xyz/presets/mustard).
- [noir](https://siimple.josemi.xyz/presets/noir).


# License

[MIT License](https://github.com/jmjuanes/siimple/blob/main/LICENSE).
npm package: @sijo0703/u-exchange-sdk
Description: 🛠 An SDK for building applications on top of U.EXCHANGE.
Author: udotcash
Latest version: 1.1.1

# Uniswap SDK

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![Actions Status](https://github.com/Uniswap/uniswap-sdk/workflows/CI/badge.svg)](https://github.com/Uniswap/uniswap-sdk)
[![npm version](https://img.shields.io/npm/v/@uniswap/sdk/latest.svg)](https://www.npmjs.com/package/@uniswap/sdk/v/latest)
[![npm bundle size (scoped version)](https://img.shields.io/bundlephobia/minzip/@uniswap/sdk/latest.svg)](https://bundlephobia.com/result?p=@uniswap/sdk@latest)

In-depth documentation on this SDK is available at [uniswap.org](https://uniswap.org/docs/v2/SDK/getting-started/).

## Running tests

To run the tests, follow these steps. You must have at least node v10 and [yarn](https://yarnpkg.com/) installed.

First clone the repository:

```sh
git clone https://github.com/Uniswap/uniswap-sdk.git
```

Move into the uniswap-sdk working directory

```sh
cd uniswap-sdk/
```

Install dependencies

```sh
yarn install
```

Run tests

```sh
yarn test
```

You should see output like the following:

```sh
yarn run v1.22.4
$ tsdx test
 PASS  test/constants.test.ts
 PASS  test/pair.test.ts
 PASS  test/fraction.test.ts
 PASS  test/miscellaneous.test.ts
 PASS  test/entities.test.ts
 PASS  test/trade.test.ts

Test Suites: 1 skipped, 6 passed, 6 of 7 total
Tests:       3 skipped, 82 passed, 85 total
Snapshots:   0 total
Time:        5.091s
Ran all test suites.
✨  Done in 6.61s.
```
npm package: @sika7/postcss-whitelist-sanitize
Description: PostCSS plugin this postcss plugin whitelist filter. sanitize leaving the allowed properties and values.
Author: sika7
Latest version: 1.0.0

# postcss-whitelist-sanitize

[PostCSS] plugin this postcss plugin whitelist filter. sanitize leaving the allowed properties and values..

[PostCSS]: https://github.com/postcss/postcss

```css
.foo {
  a: #eee; // <= remove unknown property.
  background-color: hoge; // <= remove unknown value.
  position: fixed; // <= remove not allowed property.
  color: #eee;
}
```

```css
.foo {
  color: #eee;
}
```

## Usage

**Step 1:** Install plugin:

```sh
npm install --save postcss postcss-whitelist-sanitize
```

**Step 2:** allow property config.

```js
const opts = {
  allowPropertys: ["background-color", "color"], // required
  validationCheck: true,
  allowPropertyCheck: true,
}
postcss([postcssWhitelistSanitize(opts)]).process()
```

## config

default config.
```js
{
  allowPropertys: [], // all not allow propertys.
  validationCheck: true, // default true.
  allowPropertyCheck: true, // default true.
}
```

| setting            | description                                                                                                       | default | example                | 
| ------------------ | ----------------------------------------------------------------------------------------------------------------- | ------- | ---------------------- | 
| allowPropertys     | setting a allow propertys.                                                                                        | []      | ["color","text-align"] | 
| validationCheck    | true is remove validation error property and value. General w3c style Guideline applies. Using ben-eb/css-values module. | true    |                 | 
| allowPropertyCheck | true is remove not allow property. Using allowPropertys.                                                          | true    |                        |

[official docs]: https://github.com/postcss/postcss#usage
npm package: @sika7/sanitize-html
Description: this package is html sanitize Provide.
Author: sika7
Latest version: 0.0.0

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

# @sika7/sanitize-html

this package is html sanitize. You can allow the attributes of each tag.

## Usage

**Step 1:** Install plugin:

```sh
npm install --save @sika7/sanitize-html
```

**Step 2:** add a functions or plugin.

```typescript
import { sanitizeHtml } from "@sika7/sanitize-html";

const result = sanitizeHtml("<div><p>test</p><div>test</div></div>", [
  {
    tag: "div",
    allowAttrs: ["class", "style"],
    allowStyle: ["color"],
  },
]);
console.log(result);
// # <div><div>test</div></div>
```

## config

```typescript
import { allowTag } from "@sika7/sanitize-html";
const allowTags: allowTag[] = {
  {
    tag: "div", // require
    allowAttrs: ["class", "style"], // options
    allowStyle: ["color"], // options
  },
};
```

| setting    | description                                | example                |
| ---------- | ------------------------------------------ | ---------------------- |
| tag        | allow tag name.                            | div                    |
| allowAttrs | allow attributes.                          | ['class','style']      |
| allowStyle | allow styles. require style in allowAttrs. | ['color','text-align'] |
npm package: @sika7/silver-html
Description: this package is provides HTML recursive processing.
Author: sika7
Latest version: 1.0.1

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

# @sika7/silver-html

this package is Can be recursively deleted or modified. for CommentNode and TextNode and ElementNode.

## Usage

**Step 1:** Install plugin:

```sh
npm install --save @sika7/silver-html
```

**Step 2:** add a functions or plugin.

[use example more](./docs/index.md)

```js
import { silverHtml } from '@sika7/silver-html'

const plugin = {
  pluginName: "devToMain",
  ElementNode: [
    {
      name: "all change tag for main",
      function: (element) => {
        element.tagName = "main";
        return element;
      },
    },
  ],
}
const result = silverHtml("<div>test</div>", {}, [plugin]);
console.log(result)
# <main>test</main>
```

## plugin

plugin config.
```js
const plugin = {
  pluginName: 'pluginName'; // required.
  ElementNode?: (node, level)    => node | null;
  CommentNode?: (comment, level) => node | null;
  TextNode?: (text, level)       => node | null;
}
```

| setting     | description                                    |     | 
| ----------- | ---------------------------------------------- | --- | 
| pluginName  | plugin name.                                   |     | 
| ElementNode | When creating recursive processing of elements |     | 
| CommentNode | When creating recursive processing of comment  |     | 
| TextNode    | When creating recursive processing of text     |     |
npm package: @sika7/silver-html-plugin-sanitize
Description: silver-html plugin for sanitize.
Author: sika7
Latest version: 1.0.2

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![Test](https://github.com/sika7/silver-html-plugin-sanitize/actions/workflows/test.yml/badge.svg?branch=main)](https://github.com/sika7/silver-html-plugin-sanitize/actions/workflows/test.yml)

# @sika7/silver-html-plugin-sanitize

this package is silver-html plugin

## Usage

**Step 1:** Install plugin:

```sh
npm install --save @sika7/silver-html
npm install --save @sika7/silver-html-plugin-sanitize
```

**Step 2:** add a functions or plugin.

```javascript
import { silverHtml } from '@sika7/silver-html'
import { silverHtmlSanitize } from "@sika7/silver-html-plugin-sanitize";

const result = silverHtml("<div><p>test</p><div>test</div></div>", {}, [
silverHtmlSanitize({
  allowTags: [
    {
      tag: "div",
      allowAttrs: ["class", "style"],
      allowStyle: ["color"],
    },
  ],
})]);
console.log(result)
// # <div><div>test</div></div>
```

## config

```javascript
const plugin = {
  allowTags: [
    {
      tag: "div", // require
      allowAttrs: ["class", "style"], // options
      allowStyle: ["color"],          // options
    },
  ]
}
```

| setting    | description                                | example                | 
| ---------- | ------------------------------------------ | ---------------------- | 
| tag        | allow tag name.                            | div                    | 
| allowAttrs | allow attributes.                          | ['class','style']      | 
| allowStyle | allow styles. require style in allowAttrs. | ['color','text-align'] |
npm package: @sikaeducation/eslint-config
Description: Linting and formatting for Sika's projects
Author: Kyle Coberly
Latest version: 4.0.0

# Sika's ESLint Config

[![CI](https://github.com/sikaeducation/eslint-config/actions/workflows/main.yml/badge.svg)](https://github.com/sikaeducation/eslint-config/actions/workflows/main.yml)

Install with `npm install -D eslint @sikaeducation/eslint-config`.

## Usage

```bash
# Install dependencies for TS and React
npm i -D eslint @sikaeducation/eslint-config
```

```js
// .eslintrc.js
module.exports = {
  extends: [
    "@sikaeducation",
    "@sikaeducation/eslint-config/src/configs/vitest",
  ],
};
```

- Integrate this with your editor's ESLint plugin for fix-on-save. Neovim's is part of `nvim-lsp-config`. If the app is `{"type": "module"}`, use `.eslintrc.cjs`.

## Available Configs

- `"@sikaeducation/eslint-config/src/configs/js"`
- `"@sikaeducation/eslint-config/src/configs/ts"`
- `"@sikaeducation/eslint-config/src/configs/react"`
- `"@sikaeducation/eslint-config/src/configs/react-ts"`
- `"@sikaeducation/eslint-config/src/configs/jest"`
- `"@sikaeducation/eslint-config/src/configs/jest-ts"`
- `"@sikaeducation/eslint-config/src/configs/storybook"`
- `"@sikaeducation/eslint-config/src/configs/playwright-test"`
- `"@sikaeducation/eslint-config/src/configs/playwright-jest"`
- `"@sikaeducation/eslint-config/src/configs/vitest"`

Default is JS+TS+React+React TS.

## Deployment

Set `NPM_TOKEN` on GitHub Actions to publish. Generate it on [Sika's npm page](https://www.npmjs.com/settings/sikaeducation/tokens) then add it to the [secrets page](https://github.com/sikaeducation/eslint-config/settings/secrets/actions).

Publish updates by incrementing the version with `npm version patch|minor|major` and pushing.
npm package: @sikaeducation/stylelint-config
Description: Linting and formatting for Sika's CSS and SCSS projects
Author: Kyle Coberly
Latest version: 2.0.0

# Sika's Stylelint Config

[![CI](https://github.com/sikaeducation/stylelint-config/actions/workflows/main.yml/badge.svg)](https://github.com/sikaeducation/stylelint-config/actions/workflows/main.yml)

Install with `npm install -D stylelint @sikaeducation/stylelint-config`.

## Usage

```bash
npm i -D stylelint @sikaeducation/stylelint-config
```

```js
// .stylelintrc.js
module.exports = {
  extends: ["@sikaeducation/stylelint-config"],
};
```

Integrate this with your editor's stylelint plugin for fix-on-save. If the app is `{"type": "module"}`, use `.stylelintrc.cjs`.

## Deployment

Set `NPM_TOKEN` on GitHub Actions to publish. Generate it on [Sika's npm page](https://www.npmjs.com/settings/sikaeducation/tokens) then add it to the [secrets page](https://github.com/sikaeducation/eslint-config/settings/secrets/actions).

Publish updates by incrementing the version with `npm version patch|minor|major` and pushing.
npm package: @sikandarmoyaldev/rehype-code-title
Description: A rehype plugin that extracts titles from code blocks and inserts them before the code, improving readability in markdown rendering.
Author: Sikandar
Latest version: 1.0.0

# rehypeCodeTitle

`rehypeCodeTitle` is a custom plugin for [rehype](https://github.com/rehypejs/rehype), designed to extract titles from code blocks and insert them before the `<code>` element inside `<pre>`. This plugin helps you add context or descriptive titles to code blocks in your HTML documents.

## Installation

To install, use npm:

```bash
npm install git+https://github.com/sikandarmoyaldev/rehype-code-title.git
```

## Contributing

If you want to contribute to this project, feel free to fork the repository, make changes, and submit a pull request. Please make sure to review the [Contribution Guidelines](CONTRIBUTING.md) before contributing.
npm package: @sikessem/ui
Description: Design responsive user interfaces with light/dark mode and theme management quickly with this TailwindCSS-based plugin.
Author: Sigui Kessé Emmanuel
Latest version: 0.1.0

# [Sikessem's UI Kit](https://sikessem.github.io/ui)

Design responsive user interfaces with light/dark mode and theme management quickly with this TailwindCSS-based plugin.

## 🚀 Installation

You can install [`@sikessem/ui`](https://sikessem.github.io/ui) from [`JSR`](https://jsr.io/@sikessem/ui):

- Using `npm`:

  ```bash
  npx jsr add @sikessem/ui
  ```

- Using `Yarn`:

  ```bash
  yarn dlx jsr add @sikessem/ui
  ```

- Using `PNPM`:

  ```bash
  pnpm dlx jsr add @sikessem/ui
  ```

- Using `Bun`:

  ```bash
  bunx jsr add @sikessem/ui
  ```

- Using `Deno`:

  ```bash
  deno add @sikessem/ui
  ```

  Without install:

  ```typescript
  import ui from 'jsr:@sikessem/ui';
  ```

## 🔧 Configuration

Add [`@sikessem/ui`](https://sikessem.github.io/ui) to your [TailwindCSS configuration](https://tailwindcss.com/docs/configuration):

- With `NPM` (from `node_modules`):

  ```javascript ins={1,5}
  import ui from '@sikessem/ui';

  /** @type {import('tailwindcss').Config} */
  export default {
  	plugins: [ui],
  };
  ```

- With `JSR` (using `Deno`):

  ```javascript ins={1,5}
  import ui from 'jsr:@sikessem/ui';

  /** @type {import('tailwindcss').Config} */
  export default {
  	plugins: [ui],
  };
  ```

## 💡 Usage

Simply use the provided class names in your `HTML` or `JSX` to apply color styles that adapt to the light or dark mode.

### Using Color Classes

Use the following class convention to apply color styles that adapt to light/dark themes:

- `variant-color-[light|dark]-X` where variant is a `TailwindCSS` variant (`text`, `bg`, `border`, etc.), color is the color name (e.g., `blue`, `red`, `green`, etc.), and X corresponds to:

  - 0: color-50 in light mode or color-950 in dark mode
  - 1: color-100 in light mode or color-900 in dark mode
  - 2: color-200 in light mode or color-800 in dark mode
  - 3: color-300 in light mode or color-700 in dark mode
  - 4: color-400 in light mode or color-600 in dark mode
- You can also use variant-color for variant-color-500 (adapts to theme)

### Example in HTML

```html
<!-- Light mode -->
<p class="text-blue-light-0">This is text in a light blue shade.</p>

<!-- Dark mode -->
<p class="text-blue-dark-0">This is text in a dark blue shade.</p>

<!-- Default color (adapts to theme) -->
<p class="text-blue-0">This is text in the default blue shade.</p>
```

## 📄 License

This project is licensed under the MIT License - see the [LICENSE.md file](./LICENSE.md) for details.
npm package: @sikka/alam
Description: SVG country flags for React in typescript
Author: Sikka Software
Latest version: 0.0.4

![alam-readme-1](https://github.com/sikka-software/alam/assets/46135573/707377e6-314b-47ba-8ed8-1a9b63c908f3)

# ALAM

SVG Country Flags for React (Package Name)

## Description

This NPM package provides a collection of SVG country flags, optimized for React applications and written in TypeScript. It offers a simple and efficient way to include scalable, high-quality flag icons in your web projects.

## Features

- High-quality SVG flags for a wide range of countries.
- Easy integration with React projects.
- TypeScript support for type safety and autocompletion.
- Lightweight with minimal dependencies.

## Installation

To install the package, run the following command in your project directory:

```bash
npm install @sikka/alam --save
```

## Usage

Import the flag component in your React application:

```jsx
import { SA } from '@sikka/alam';

const MyComponent = () => (
  <div>
    <SA />
  </div>
);

export default MyComponent;
```

## Props

| Prop        | Type   | Description                      | Required |
| ----------- | ------ | -------------------------------- | -------- |
| countryCode | string | ISO Alpha-2 country code         | Yes      |
| width       | string | Width of the flag (in pixels)    | No       |
| height      | string | Height of the flag (in pixels)   | No       |
| className   | string | Additional CSS class for styling | No       |

## Contributing

We welcome contributions to this package. If you have a suggestion or fix:

1. Fork the repository.
2. Create a new branch (`git checkout -b feature/AmazingFeature`).
3. Make your changes.
4. Commit your changes (`git commit -m 'Add some AmazingFeature'`).
5. Push to the branch (`git push origin feature/AmazingFeature`).
6. Open a pull request.

## License

Distributed under the MIT License. See `LICENSE` file for more information.

## Acknowledgments

- The SVG files of the flags were taken from [yammadev/flag-icons](https://github.com/yammadev/flag-icons).
npm package: @sikka/namat
Description: Procedural patterns toolkit
Author: SIKKA SOFTWARE
Latest version: 0.0.19

# Namat
Procedural patterns toolkit built on paper.js


## Getting Started
```
npm i @sikka/namat
```

## How to use

```

const namat = new Namat();
namat.setup();

```
## Contribute
To contribute, clone the repository and edit ```/index.js```
```
git clone git@github.com:sikka-software/vcardi.git
cd vcardi
```
# Namat
"# Namat"
npm package: @sikka/tawila
Description: Custom Data Tables
Author: sikka-software
Latest version: 1.4.2

# Tawila

> Custom Table Component

[![NPM](https://img.shields.io/npm/v/@sikka/tawila.svg)](https://www.npmjs.com/package/@sikka/tawila)
[![NPM](https://img.shields.io/npm/dt/@sikka/tawila.svg)](https://www.npmjs.com/package/@sikka/tawila)
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @sikka/tawila
```

## Usage

```jsx
import React, { Component } from 'react'

import { CustomTable } from '@sikka/tawila'
import 'tawila/dist/index.css' //Still in progress

class Example extends Component {
  render() {
    return (
      <CustomTable
        rowKeys={
          [
            // array of objects
            // documenting in progress
          ]
        }
        dataColumns={
          [
            // documenting in progress
          ]
        }
      />
    )
  }
}
```

## License

MIT © [SIKKA SOFTWARE](https://sikka.sa)
npm package: @sikt/sds-input-file
Description: ```sh npm i -s @sikt/sds-{form,input-file} ```
Latest version: 2.0.1

# `@sikt/sds-input-file`

## Consume

```sh
npm i -s @sikt/sds-{form,input-file}
```

### React

```js
import { InputFile, FileList, FileListItem } from "@sikt/sds-input-file";
import "@sikt/sds-form/dist/index.css";
import "@sikt/sds-input-file/dist/index.css";

<InputFile
  label="Upload documentation"
  aria-label="Upload documentation"
  accept=".doc,.docx"
  onChange={changeHandler}
>
  <FileList figCaption="Attatchments">
    files.map((file) => {
      <FileListItem
        fileSize={file.size}
        actionProps{{ label: `Remove ${file.name}`, onClick: handleFileClick }}
      >
        {file.name}
      </FileListItem>
    })
  </FileList>
</InputFile>
```

#### Caveats

- "aria-label": Should be the text content of the label prop. This is used to override React Aria DropZone that sets it's own aria-label.
- accept: Does not currently support wildcard (for example "\*" or "image/\*")

### Stylesheets & custom markup

Import stylesheet:

```css
@import url("@sikt/sds-form");
@import url("@sikt/sds-input-file");
```

Create custom markup:

```html
<!-- N/A -->
```
npm package: @sikuthenomad/create-react-js
Description: Provides a clean version of the scaffolding generated by `npm create vite@latest -> React -> Javascript`. Prompts for a project name. The version number will always represent the Vite version this project is synced with.
Author: SikuTheNomad
Latest version: 5.3.7

# @sikuthenomad/react-js
A minimal React & Vite template with cleaned-up boilerplate.

## Installation
```bash
npm create @sikuthenomad/react-js
```
You can skip the prompt by adding app name at the end:
```bash
npm create @sikuthenomad/react-js my-app
```
npm package: @sikuthenomad/create-react-js-es
Description: Proporciona una versión limpia de la plantilla generada por `npm create vite@latest -> React -> Javascript`.
Author: SikuTheNomad
Latest version: 1.0.0

# @sikuthenomad/react-js-es
Una plantilla mínima de React y Vite limpia.

## Instalación
```bash
npm create @sikuthenomad/react-js-es
```
Para omitir el solicitud, añada el nombre de la aplicación al final:
```bash
npm create @sikuthenomad/react-js-es mi-app
```
npm package: @sil-org/pipedream-utils
Description: Utilities to be used in Pipedream as NPM dependencies
Author: SIL Global
Latest version: 0.4.2

# Pipedream Utilities

This repository contains a collection of utilities that can be used as NPM dependencies in Pipedream (or any Javascript module). This allows you to re-use code without calling another workflow or adding a step.

## Utilities

The following categories of utilities are available under /utils:

- `helpers`: Miscellaneous utilities, such as string normalization and date manipulation.
  - lastDay
  - normalizeString
  - startsWith
- `netsuite`: NetSuite REST & SuiteQL helpers, including functions to execute SuiteQL queries.
  - getRecordPath
  - queryRecord
  - queryRecords
  - request
  - sqlString
- `sftp`: SFTP file operations, including a function to move a file by its path to a new destination on an SFTP host.
  - renameSftpFile

## Import Example

To use these utilities, install via NPM (optional for Pipedream) in your local environment:

```bash

npm install @sil-org/pipedream-utils
```

or in Pipedream just import the category/ies of functions you want.

`import { helpers, netsuite } from '@sil-org/pipedream-utils@^0.2.0'`

## Tests

To manually run the tests...

1. Clone this repo.
2. Install the npm dependencies: `npm install`
3. Run `npm test`

Note: If you also want to run the NetSuite integration tests, copy `.env.example` to
`.env` and put the application credentials (e.g. to your NetSuite Sandbox) in the
appropriate places in the `NETSUITE_CONFIG_DEV` value. Please remember to delete the `.env` file as soon as possible after you're finished.

## Contributing

Use the recommended extensions with VSCode/VSCodium.

If using a different IDE, read the .vscode/extensions.json file and install the equivalent extensions in your environment.

Use the scripts in package.json to test, lint and format your code.

The actions will check it when you push.

The "Publish" action must be triggered manually in Github after updating the package.json version (and running `npm i` to update it in the lock file.)