open-index/open-npm huggingface dataset:
npm package: @jegdev/semaui
Description: Una colección de componentes Lit minimalistas estilo Swiss Design
Author: JEG Dev Studios
Latest version: 0.0.2

# Sema UI

![NPM Version](https://img.shields.io/npm/v/@jegdev/semaui)
![License](https://img.shields.io/npm/l/@jegdev/semaui)
![Built with Lit](https://img.shields.io/badge/built%20with-Lit-blue)

[Español](#español) | [English](#english)

---

## Español

**La librería de componentes SEO-First.**
Web components ligeros y accesibles que automatizan la visibilidad de tu sitio.

Sema UI es un sistema de diseño minimalista construido con [Lit](https://lit.dev/). Proporciona componentes de interfaz de usuario hermosos y fáciles de copiar y pegar que inyectan automáticamente datos estructurados de **Schema.org** (JSON-LD) y manejan los estándares de accesibilidad por ti.

### Contenido

- [Características](#características)
- [Instalación](#instalación)

### Características

- **🚀 Extremadamente Rápido:** Construido sobre Web Components nativos. Cero sobrecarga de framework.
- **🔍 Automatización SEO:** Componentes como `<sema-brand>` o `<sema-breadcrumb>` generan automáticamente JSON-LD compatible con Google.
- **♿ Accesible:** Cumple con WAI-ARIA desde el primer momento.
- **🎨 Diseño Minimalista:** Inspirado en estéticas modernas (Shadcn/Vercel), listo para ser personalizado.
- **⚛️ Agnóstico al Framework:** Funciona en React, Vue, Angular, Svelte o HTML puro.

### Instalación

```bash
npm install @jegdev/semaui
```

---

## English

**The SEO-First Component Library.**
Lightweight, accessible web components that automate your site's visibility.

Sema UI is a minimalist design system built with [Lit](https://lit.dev/). It provides beautiful, copy-paste friendly UI components that automatically inject **Schema.org** structured data (JSON-LD) and handle accessibility standards for you.

### Contents

- Features
- Installation

### Features

- **🚀 Blazing Fast:** Built on native Web Components. Zero framework overhead.
- **🔍 SEO Automations:** Components like `<sema-brand>` or `<sema-breadcrumb>` automatically generate Google-compliant JSON-LD.
- **♿ Accessible:** WAI-ARIA compliant out of the box.
- **🎨 Minimalist Design:** Inspired by modern aesthetics (Shadcn/Vercel), ready to be customized.
- **⚛️ Framework Agnostic:** Works in React, Vue, Angular, Svelte, or vanilla HTML.

### Installation

```bash
npm install @jegdev/semaui
```
npm package: @jehankandy/jkcss-icons
Description: JKCSS Icons
Author: JehanKandy
Latest version: 1.2.0

<h1 align="center"> JKCSS Icons </h1>
<p align="center"><img src="https://avatars.githubusercontent.com/u/111488170?s=200&v=4"></p>

<p align="center">The JKCSS Icons</p>

# Introduction

- This is Icon Framwork of JKCSS
- The CDN added on v1.0.0 - 15 December 2023 version
- link for [JKCSS Icons](https://jkcss-css-framework.github.io/JKCSS-Icons/site/content/docs/)
- [JKCSS Icons NPM](https://www.npmjs.com/package/@jehankandy/jkcss-icons)

# Projects

- Project JKCSS Icons (Started 14 December 2023)

# Releases

## v1.2.0 04 January 2024 - latest

- Developing interface
- Updating CDN link
- Updataing documentation for Icons
- fixing some bugs
- - not for backgroud remove in all user icons
- - remove all version vice folders
- - now only one folder
- adding user friendly responsive navbar

## v1.2.0-beta1 30 December 2023

- Developing interface
- Updating CDN link
- adding documentation for Icons
- adding user icons

## v1.1.0 28 December 2023

- Developing interface
- adding copyright and other symbols
- Updating CDN link
- Release 1.1.0 NPM version
- fixing some bugs on previous releases

## v1.1.0-beta1 24 December 2023

- Developing interface
- Updating Currency Symbols
- Add and Updating Numbers (0 - 9)
- Updating CDN link
- Release 1.1.0 beta1 NPM version

## v1.0.0 15 December 2023

- developing interface
- adding first icons
- adding Currency Symbols
- add CDN link


## v1.0.0-alpha1 14 December 2023

- initial Release
- developing interface
- start the Project


# Developers
 
 <b>JehanKandy (Founder/Developer)</b>
 
  - [JehanKandy](https://github.com/JehanKandy)




# Copyright and license

Copyright 2021–2023 [JehanKandy](https://github.com/JehanKandy). The JKCSS Project released under the [MIT License](https://github.com/JKCSS/JKCSS-Framework/blob/main/LICENSE)

 
<br>
 
Please use this link to my OLD Account [JehanKandy](https://github.com/JehanKandy)
npm package: @jehankandy/react-jkcss
Description: JKCSS with React
Author: JehanKandy
Latest version: 1.2.0

# React-JKCSS

<p align="center">
  <img src="https://avatars.githubusercontent.com/u/167443241?s=200&v=4" /><br>
  Dynamic front-end development React support CSS framework
</p>

<hr>

## About React-JKCSS :heart:

- First Sri Lankan React support front-end development CSS framework
- - parallelly develop with [JKCSS](https://github.com/JKCSS-CSS-Framework) 
- This is the JKCSS components Build with React
- Dynamic front-end development CSS framework

## Quick Start Guide :computer:

- In Your React js Project
- open Terminal and install `@jehankandy/react-jkcss`

``` js

    npm i @jehankandy/react-jkcss

``` 

- follow up following code

``` jsx

import React from 'react'
import {ButtonBlue, ButtonRed, ButtonGray, ButtonGreen, ButtonInfo, ButtonYellow, ButtonCustom, BasicTable, BasicTableHover} from 'react-jkcss'


const ReactJK = () => {
  return (
    <div className="">
        <div>TesTing JKCSS REact</div>

        <ButtonBlue>
            Blue Button
        </ButtonBlue>
        <ButtonRed>
            Red Button
        </ButtonRed>
        <ButtonGray>
            Gray Button
        </ButtonGray>
        <ButtonGreen>
            Green Button
        </ButtonGreen>
        <ButtonInfo>
            Info Button
        </ButtonInfo>
        <ButtonYellow>
            Yellow Button
        </ButtonYellow>

        // custom button
        <ButtonCustom bgColor={"red"} textColor={"white"}>Custom Button</ButtonCustom>

        // tables

        <BasicTable columns={columns} data={data} />
        <BasicTableHover columns={columns} data={data} />

    </div>
  )
}

export default ReactJK

```

## Documentation :notebook:

| Component | Description |
|--------|--------|
| `<ButtonBlue> </ButtonBlue>` | Blue color Button |
| `<ButtonGray> </ButtonGray>` | Gray color Button |
| `<ButtonGreen> </ButtonGreen>` | Green color Button |
| `<ButtonInfo> </ButtonInfo>` | Info (LightBlue) color Button |
| `<ButtonRed> </ButtonRed>` | Red color Button |
| `<ButtonYellow> </ButtonYellow>` | Yellow color Button |
| `<ButtonCustom bgColor={"red"} textColor={"white"}>Custom Button</ButtonCustom>` | Custom Button |
| `<ButtonRed> </ButtonRed>` | Red color Button |
| `<BasicTable columns={columns} data={data} />` | BasicTable of JKCSS |
| `<BasicTableHover columns={columns} data={data} />` | BasicTable Hover of JKCSS |



## Versioning of the project :grey_question:

| Version | Description | Release Date|
|--------|--------|---------|
| v1.0.0 | initial release of the Project, Adding Butttons | 18 April 2024 |
| v1.1.0 | Updating Butttons, Adding tables | 16 May 2024 |
| v1.2.0 | Updating Butttons (Adding Large and Small Buttons) | 01 June 2024 |

## Developers and Designers

- [JehanKandy](https://github.com/BackendExpert)
- [Anupa Gamage](https://github.com/Anupa1998)

## License Copyright

- The React-JKCSS is Licensed under [MIT](https://github.com/React-JKCSS/ReactJKCSS/blob/master/LICENSE)
npm package: @jehon/img-loading
Description: Show waiting wheel when loading image and/or fade to next one when ready
Latest version: 0.4.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# img-loading

Ever wanted to have a waiting wheel while your image is loading?

Ever wanted to show a new image only when it is ready?

Juste act like this:

```html
    <jehon-img-loading src='your-image.jpg'></jehon-img-loading>
```

## How does it works?

At first, the element is initialized with a loading gif.

When the url change, the element will:
- Load the new image in the background
- When the new image is loaded, it will put it front and remove the old one (the old one being the waiting wheel for the first load).

## API 

The element has various API:

```js
    el = document.querySelector('jehon-image-loading...');

    /**
     * Show a waiting wheel while the url-image is loading
     */
    el.loadImageWhileWaiting(url)

    /**
     * Stay on current image while the url-image is loading
     */
    el.loadAndDisplayImage(url)
```

## Events

### load

Event fired when the new url-image is loaded and has been displayed.

In the detail, you will find the url of the loaded image.

## Credits

Waiting wheel: 
https://commons.wikimedia.org/wiki/File:Loading_icon.gif
https://commons.wikimedia.org/wiki/File:Hourglass_icon.png

Landscape:
Kerry Raymond - https://commons.wikimedia.org/wiki/File:Landscape_of_Tarome,_2022_08.jpg
Kerry Raymond - retrieved at https://commons.wikimedia.org/wiki/File:Landscape_of_Tarome,_2022_12.jpg
npm package: @jeias-test/hello-world-service
Description: This is a blank project for TypeScript development with CDK.
Author: Jeias Soares
Latest version: 0.1.0

# Welcome to your CDK TypeScript project!

This is a blank project for TypeScript development with CDK.

The `cdk.json` file tells the CDK Toolkit how to execute your app.

## Useful commands

 * `npm run build`   compile typescript to js
 * `npm run watch`   watch for changes and compile
 * `npm run test`    perform the jest unit tests
 * `cdk deploy`      deploy this stack to your default AWS account/region
 * `cdk diff`        compare deployed stack with current state
 * `cdk synth`       emits the synthesized CloudFormation template
npm package: @jeiea/openapi-react-query
Description: Fast, type-safe @tanstack/react-query client to work with your OpenAPI schema.
Author: Martin Paucot
Latest version: 0.5.0

# openapi-react-query

openapi-react-query is a type-safe tiny wrapper (1 kb) around [@tanstack/react-query](https://tanstack.com/query/latest/docs/framework/react/overview) to work with OpenAPI schema.

It works by using [openapi-fetch](../openapi-fetch) and [openapi-typescript](../openapi-typescript) so you get all the following features:

- ✅ No typos in URLs or params.
- ✅ All parameters, request bodies, and responses are type-checked and 100% match your schema
- ✅ No manual typing of your API
- ✅ Eliminates `any` types that hide bugs
- ✅ Eliminates `as` type overrides that can also hide bugs

## Setup

Install this library along with [openapi-fetch](../openapi-fetch) and [openapi-typescript](../openapi-typescript):

```bash
npm i openapi-react-query openapi-fetch
npm i -D openapi-typescript typescript
```

Next, generate TypeScript types from your OpenAPI schema using openapi-typescript:

```bash
npx openapi-typescript ./path/to/api/v1.yaml -o ./src/lib/api/v1.d.ts
```

## Usage

Once your types have been generated from your schema, you can create a [fetch client](../openapi-fetch), a react-query client and start querying your API.

```tsx
import createFetchClient from "openapi-fetch";
import createClient from "openapi-react-query";
import type { paths } from "./my-openapi-3-schema"; // generated by openapi-typescript

const fetchClient = createFetchClient<paths>({
  baseUrl: "https://myapi.dev/v1/",
});
const $api = createClient(fetchClient);

const MyComponent = () => {
  const { data, error, isPending } = $api.useQuery(
    "get",
    "/blogposts/{post_id}",
    {
      params: {
        path: { post_id: 5 },
      },
    }
  );

  if (isPending || !data) return "Loading...";

  if (error) return `An error occurred: ${error.message}`;

  return <div>{data.title}</div>;
};
```

> You can find more information about `createFetchClient` in the [openapi-fetch documentation](../openapi-fetch).

## 📓 Docs

[View Docs](https://openapi-ts.dev/openapi-react-query/)
npm package: @jeiiro/react-tailwind-modal
Description: A simple accessible modal component using TailwindCSS
Author: Jeiiro
Latest version: 1.4.0

# @jeiiro/react-tailwind-modal

Un composant modal simple, accessible et élégant construit avec React et stylisé avec TailwindCSS.

![Version](https://img.shields.io/badge/version-1.2.0-blue)
![License](https://img.shields.io/badge/license-MIT-green)

## Installation

```bash
npm install @jeiiro/react-tailwind-modal
```

## Prérequis

- React (v17, v18, v19)
- TailwindCSS dans votre projet

## Fonctionnalités

- Facile à intégrer
- Entièrement stylisé avec TailwindCSS
- Léger et performant
- Compatible avec React 17, 18 et 19

## Utilisation basique

```jsx
import React, { useState } from "react";
import Modal from "@jeiiro/react-tailwind-modal";

function App() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Ouvrir</button>
      <Modal
        isOpen={open}
        onClose={() => setOpen(false)}
      >
        <p>Ceci est une modale !</p>
      </Modal>
    </>
  );
}
```

## Props

- `isOpen` (booléen) : Indique si la modale est ouverte ou fermée.
- `onClose` (fonction) : Fonction appelée lorsque la modale est fermée.
- `children` (node) : Contenu à afficher de la modale.




## Personnalisation

Le composant utilise les classes TailwindCSS pour le style. Vous pouvez personnaliser l'apparence en modifiant les classes dans votre propre implémentation.

## Configuration de Tailwind CSS

Pour que les styles du composant modal fonctionnent correctement dans votre projet, vous devez configurer Tailwind CSS pour inclure les classes utilisées par le composant. Ajoutez la configuration suivante à votre fichier `tailwind.config.js` :

```js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@jeiiro/react-tailwind-modal/**/*.{js,jsx}"
  ],
  safelist: [
    'fixed',
    'inset-0',
    'flex',
    'items-center',
    'justify-center',
    'bg-black/50',
    'z-50',
    'bg-white',
    'p-6',
    'rounded-lg',
    'shadow-lg',
    'max-w-md',
    'w-full',
    'mt-4',
    'bg-blue-500',
    'hover:bg-blue-600',
    'text-white',
    'py-2',
    'px-4',
    'rounded'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

## Contribution

Les contributions sont les bienvenues ! N'hésitez pas à ouvrir une issue ou une pull request.

## Licence

MIT © Jeiiro