open-index/open-npm huggingface dataset:
npm package: @medeity/apk
Description: 个人实验学习,请勿使用
Author: Mimo
Latest version: 1.11.0

# @medeity/apk

个人实验学习,请勿使用

# APK更新地址
https://registry.npmmirror.com/@medeity/apk/latest/files

# 如何发布
```js
//修改update下的更新日志后
npm run apk
npm publish .
```

# 镜像同步
使用浏览器打开以下链接:
https://npmmirror.com/sync/[packageName]
比如当前的package是:`@medeity/apk`,那么完整的请求地址是
https://npmmirror.com/sync/@medeity/apk

或者使用命令行
```
npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm sync @medeity/apk
```
npm package: @medeity/paperupdater
Description: 基本原理:
Author: Mimo
Latest version: 1.11.1

### 报纸机更新通知工具 @medeity/paperupdater

基本原理:

开发人员提交更新日志 → 自动生成版本配置 → 发布到 npm → 镜像同步 → 报纸机自动更新


# APK更新地址
https://registry.npmmirror.com/@medeity/paperupdater/latest/files

# 如何发布
```js
//修改update下的更新日志后
npm run apk
npm publish .
```

# 镜像同步
使用浏览器打开以下链接:
https://npmmirror.com/sync/[packageName]
比如当前的package是:`@medeity/paperupdater`,那么完整的请求地址是
https://npmmirror.com/sync/@medeity/paperupdater

或者使用命令行
```
npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm sync @medeity/paperupdater
```


关于 {"error":"[FORBIDDEN] \"@medeity/apk\" is not allow to unpkg files, see https://github.com/cnpm/unpkg-white-list"} 
npm run add -- --pkg=@medeity/paperupdater:*
尝试废弃 unpkg CDN镜像服务

### How to use
npm package: @medeity/subscribe
Description: 个人实验学习,请勿使用
Author: Mimo
Latest version: 1.41.0

# @medeity/subscribe

个人实验学习,请勿使用

当前订阅为 APP 自带, 无需手动添加, 当前版本: v41

当前订阅文件已适配 3 个 APP, 共有 17 规则组

如何编写订阅/贡献此项目 -> [CONTRIBUTING.md](./CONTRIBUTING.md)

## 适配 APP 列表

| 名称 | ID | 规则组 |
| - | - | - |
| Facebook | [com.facebook.katana](/docs/com.facebook.katana.md) | 3 |
| badoo | [com.badoo.mobile](/docs/com.badoo.mobile.md) | 8 |
| 抖音 | [com.ss.android.ugc.aweme](/docs/com.ss.android.ugc.aweme.md) | 6 |

## 原项目地址

[subscription](github.com/gkd-kit/subscription)

## 快速同步

https://npmmirror.com/sync/@medeity/subscribe

### 更新规则

```bash
# 执行命令更新规则并生成到dist
npm run build
# 执行发布命令
npm publish
```

### 更新APK

```bash
# 替换dist下的apk-release.apk执行命令更新APK信息
npm run apk
# 执行发布命令
npm publish
```

### 关于同步

发布上去的数据可能需要一定的时间同步到淘宝的镜像.

```bash
# 执行一次即可
npm install -g cnpm --registry=https://registry.npmmirror.com
# 同步该库
cnpm sync @medeity/subscribe
```
npm package: @medelm/vue-hello-component
Description: A simple and reusable Vue 3 component that greets the user. This component uses the `<script setup>` syntax and is designed to be easily integrated into any Vue 3 project.
Author: Med Elm
Latest version: 1.0.3

# Hello Vue Component

A simple and reusable Vue 3 component that greets the user. This component uses the `<script setup>` syntax and is designed to be easily integrated into any Vue 3 project.

## Features

- Displays a customizable greeting message.
- Button click event with a click counter.
- Scoped styles for easy integration.

## Installation

You can install this component via npm:

```bash
npm install @medelm/vue-hello-component
```

## Usage

First, import and register the component in your Vue application:

```javascript
// main.js or main.ts
import { createApp } from 'vue';
import App from './App.vue';
import Hello from 'hello-vue-component';

const app = createApp(App);
app.component('Hello', Hello);
app.mount('#app');
```

Then, use the component in your template:

```html
<template>
  <div id="app">
    <Hello name="Vue Developer" @clicked="handleClick" />
    <p>Total Clicks: {{ clickCount }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const clickCount = ref(0);

const handleClick = (count) => {
  clickCount.value = count;
  console.log(`Button clicked ${count} times`);
}
</script>
```

## Props

The component accepts the following props:

- `name` (String, required): The name to be displayed in the greeting.
- `greeting` (String, optional, default: 'Hello'): The greeting message.

## Emits

The component emits the following events:

- `clicked` (number): Emitted every time the button is clicked, passing the current click count as an argument.

## Example

Here's an example of how to use the component:

```html
<template>
  <div>
    <Hello name="World" greeting="Hi" @clicked="onClicked" />
    <p>Total Clicks: {{ clickCount }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const clickCount = ref(0);

const onClicked = (count) => {
  clickCount.value = count;
  console.log(`Button clicked ${count} times`);
}
</script>
```

## Styling

The component comes with scoped styles, so it will not affect other parts of your application. The styles can be customized by modifying the component's scoped CSS.

## License

MIT
npm package: @medelm/vue-image-selector
Description: [![Vue](https://img.shields.io/badge/Vue-%3E3.x-brightgreen?color=91aac3&labelColor=3FB27F)](https://vuejs.org/) ![Yup](https://img.shields.io/badge/yup-1.4.0-blue?logo=yup)
Author: Med Elm
Latest version: 2.0.1

# Vue Image Selector

[![Vue](https://img.shields.io/badge/Vue-%3E3.x-brightgreen?color=91aac3&labelColor=3FB27F)](https://vuejs.org/)
![Yup](https://img.shields.io/badge/yup-1.4.0-blue?logo=yup)

![vue-image-selector-logo](https://github.com/medelm1/vue-image-selector/assets/60750140/b6eb74ef-19c5-4c32-b1e9-8d593939e6d5)

Vue Image Selector is a flexible Vue 3 component and composable for handling image selection, preview, and validation within Vue applications.

## Installation

Install the package using npm or yarn:

```bash
npm install @medelm/vue-image-selector
# or
yarn add @medelm/vue-image-selector
```

## Usage

__1. Setup Plugin in Your Vue App__

Import and use the plugin in your main application file (`main.js` or `main.ts`):

```javascript
import { createApp } from 'vue';
import App from './App.vue';
import imageSelectorPlugin from '@medelm/vue-image-selector';
import '@medelm/vue-image-selector/style.css';

createApp(App)
  .use(imageSelectorPlugin)
  .mount('#app');
```

__2. Use the Component__

Use the `ImageSelector` component in your Vue components:

```html
<template>
  <ImageSelector v-bind="imageSelector" />
</template>

<script setup>
  import { useImageSelector } from '@medelm/vue-image-selector';

  const imageSelector = useImageSelector();

  // Optional: Handle callbacks or additional logic
</script>

<style scoped>
  /* Your scoped styles here */
</style>
```

__3. Customization__

- `Styling`: Customize the appearance using scoped CSS or by overriding classes in your project's stylesheets.
- `Callbacks`: Implement `onSelect` and `onReset` callbacks to handle image selection and reset events.

__4. Composable API__

The composable `useImageSelector` provides the following methods and reactive state:

- `select(event)`: Handles file input change and drag-and-drop events.
- `reset()`: Resets the image selection state.
- `onSelect(callback)`: Sets a callback function for when an image is selected.
- `onReset(callback)`: Sets a callback function for when the image selection is reset.
- `hasError()`: Checks if there is an error in image selection.
- `getError()`: Retrieves the error message, if any.
- `setError(errorMessage)`: Sets a custom error message.

## Contributing

Contributions are welcome! If you have any suggestions, bug reports, or want to contribute code, please open an issue or submit a pull request on GitHub.

## License

This project is licensed under the MIT License
npm package: @medely/fontawesome-common-types
Description: The iconic font, CSS, and SVG framework
Author: The Font Awesome Team
Latest version: 0.1.0

# @fortawesome/fontawesome-common-types - SVG with JavaScript

> "I came here to chew bubblegum and install Font Awesome 6 - and I'm all out of bubblegum"

[![npm](https://img.shields.io/npm/v/@fortawesome/fontawesome-common-types.svg?style=flat-square)](https://www.npmjs.com/package/@fortawesome/fontawesome-common-types)

## What is this package?

Font Awesome 6 JavaScript packages support TypeScript. This package abstracts out some of the common definitions that those packages use.

## Here be dragons

If you are trying to import types from this package we *highly* recommend you do the following instead as *all types in this package are re-exported to the main fontawesome package*.

your.ts

```
import {
  IconName
} from `@fortawesome/fontawesome-svg-core`

const myIcon: IconName = "..."
```

## Issues and support

Start with [GitHub issues](https://github.com/FortAwesome/Font-Awesome/issues) and ping us on [Twitter](https://twitter.com/fontawesome) if you need to.
npm package: @medely/fontawesome-svg-core
Description: The iconic font, CSS, and SVG framework
Author: The Font Awesome Team
Latest version: 0.1.0

# @fortawesome/fontawesome-svg-core - SVG with JavaScript version

> "I came here to chew bubblegum and install Font Awesome 6 - and I'm all out of bubblegum"

[![npm](https://img.shields.io/npm/v/@fortawesome/fontawesome-svg-core.svg?style=flat-square)](https://www.npmjs.com/package/@fortawesome/fontawesome-svg-core)

## Installation

```
$ npm i --save @fortawesome/fontawesome-svg-core
```

Or

```
$ yarn add @fortawesome/fontawesome-svg-core
```

## Documentation

Get started [here](https://docs.fontawesome.com/web/setup/get-started). Continue your journey [here](https://docs.fontawesome.com/web/setup/packages).

Or go straight to the [API documentation](https://docs.fontawesome.com/apis/javascript/get-started).

## Issues and support

Start with [GitHub issues](https://github.com/FortAwesome/Font-Awesome/issues) and ping us on [Twitter](https://twitter.com/fontawesome) if you need to.
npm package: @medes-ui/angular
Description: library
Author: mediadesain
Latest version: 2.0.0

> # This is beta version
> - This package not published yet
> - This branch is still on development only mediadesain team able to run
> - Choose release branch to run. example: released/1.18.0

## Next Version
More detail about the changes writen on [changelog](https://github.com/mediadesain/medes-ui-boilerplate/blob/main/CHANGELOG.md).
### 2.0.x (Release - 250xxx)
- MedesUI having some helper scripts, serivces & utils and angular library. On current version Angular libary will be split to another module.
- Update Major Changes to version 2 and create some new packages name are `@medes-ui/core`, `@medes-ui/angular`, `@medes-ui/react`.
- Script model, types, helper, service, utils & styling on `@medes-ui@1.x.x.x` are copied to @medes-ui/angular. To install run `npm i @medes-ui/core`.
- Update angular library to angular 19
- Angular library Created, package name @medes-ui/angular. To install run `npm i @medes-ui/angular`.
- Now Component React version added
- React library Created, package name @medes-ui/react. To install run `npm i @medes-ui/react`.
- Documentation Enhancement: Add Light/Dark Mode Toggle
- Documentation Enhancement: Switch Libraries Doc Type
- Documentation Enhancement: Simplify with standalone component
- Documentation Enhancement: Simplify routing system
npm package: @medes-ui/core
Description: library
Author: mediadesain
Latest version: 2.0.0

> # This is beta version
> - This package not published yet
> - This branch is still on development only mediadesain team able to run
> - Choose release branch to run. example: released/1.18.0

## Next Version
More detail about the changes writen on [changelog](https://github.com/mediadesain/medes-ui-boilerplate/blob/main/CHANGELOG.md).
### 2.0.x (Release - 250xxx)
- MedesUI having some helper scripts, serivces & utils and angular library. On current version Angular libary will be split to another module.
- Update Major Changes to version 2 and create some new packages name are `@medes-ui/core`, `@medes-ui/angular`, `@medes-ui/react`.
- Script model, types, helper, service, utils & styling on `@medes-ui@1.x.x.x` are copied to @medes-ui/angular. To install run `npm i @medes-ui/core`.
- Update angular library to angular 19
- Angular library Created, package name @medes-ui/angular. To install run `npm i @medes-ui/angular`.
- Now Component React version added
- React library Created, package name @medes-ui/react. To install run `npm i @medes-ui/react`.
- Documentation Enhancement: Add Light/Dark Mode Toggle
- Documentation Enhancement: Switch Libraries Doc Type
- Documentation Enhancement: Simplify with standalone component
- Documentation Enhancement: Simplify routing system
npm package: @medes-ui/react
Description: library
Author: mediadesain
Latest version: 2.0.0

> # This is beta version
> - This package not published yet
> - This branch is still on development only mediadesain team able to run
> - Choose release branch to run. example: released/1.18.0

## Next Version
More detail about the changes writen on [changelog](https://github.com/mediadesain/medes-ui-boilerplate/blob/main/CHANGELOG.md).
### 2.0.x (Release - 250xxx)
- MedesUI having some helper scripts, serivces & utils and angular library. On current version Angular libary will be split to another module.
- Update Major Changes to version 2 and create some new packages name are `@medes-ui/core`, `@medes-ui/angular`, `@medes-ui/react`.
- Script model, types, helper, service, utils & styling on `@medes-ui@1.x.x.x` are copied to @medes-ui/angular. To install run `npm i @medes-ui/core`.
- Update angular library to angular 19
- Angular library Created, package name @medes-ui/angular. To install run `npm i @medes-ui/angular`.
- Now Component React version added
- React library Created, package name @medes-ui/react. To install run `npm i @medes-ui/react`.
- Documentation Enhancement: Add Light/Dark Mode Toggle
- Documentation Enhancement: Switch Libraries Doc Type
- Documentation Enhancement: Simplify with standalone component
- Documentation Enhancement: Simplify routing system
npm package: @medfakowl/rtvsp-types
Description: TypeScript-Typdefinitionen für das Rollenskript-Template für virtuelle Simulationspersonen (RTvSP)
Latest version: 0.0.26

# RTvSP Typdefinitionen

Dieses Paket enthält die TypeScript-Typdefinitionen für das Rollenskript-Template für virtuelle Simulationspersonen (RTvSP). Die Typen spiegeln das RTSP-Referenzmodell (Rollenskript-Template für Simulationspersonen) wider und ermöglichen statische Typprüfung in Projekten, die RTvSP-Daten erzeugen oder konsumieren.

## Installation

```bash
npm install @medfakowl/rtvsp-types
```

## Verwendung

```ts
import type { RTvSP, RTvSPPersona, RTvSPScenario } from "@medfakowl/rtvsp-types";
```

## Konsistenzprüfung

Hinweis: Die Konsistenzprüfung ist nur im Repo verfügbar und nicht Teil des veröffentlichten npm-Pakets.

```bash
npm run check
```

Der Check stellt sicher, dass Bindings, RTSP-Referenz und Typdefinitionen synchron bleiben.

## RTvSP-spezifische Typen

Folgende Typdefinitionen sind Bestandteil von RTvSP, aber (bisher) nicht im RTSP-Referenzmodell abgebildet:

<!-- missing-bindings:start -->

- `RTvSP.prompt`
- `RTvSPPersona.latestVersionRef`
- `RTvSPPersona.profileImageFileMeta`
- `RTvSPPersona.profileImagePath`
- `RTvSPPersona.profileImagePrompt`
- `RTvSPPersona.profileImageStatus`
- `RTvSPPersona.profileImageUpdatedAt`
- `RTvSPPersona.version`
- `RTvSPPersona.voice`
- `RTvSPScenario.freePracticeAvailable`
- `RTvSPScenario.latestVersionRef`
- `RTvSPScenario.shortDescription`
- `RTvSPScenario.version`

<!-- missing-bindings:end -->

## Lizenz

Veröffentlicht unter den Bedingungen der MIT-Lizenz, siehe [`LICENCE`](./LICENCE).
npm package: @medga/hardhat-clone
Description: Clone an on-chain contract into Hardhat project
Author: MEDGA Team
Latest version: 0.1.0

# hardhat-clone: Clone on-chain contracts into your hardhat project

`hardhat-clone` is a plugin of [Hardhat](https://hardhat.org/) smart contract development toolchain.
`hardhat-clone` takes the address of a verified contract deployed on the blockchain (any EVM-compatible blockchain, e.g., Ethereum, Binanace Smart Chain, Optimism, etc.) and clone the contract source into the current Hardhat project. 
The cloned contracts are reorganized such that it can be compiled together with other 
contracts in the Hardhat project.

This project is a migrated implementation of `forge clone` feature of [foundry](https://book.getfoundry.sh/reference/forge/forge-clone) in Hardhat, maintained by [MEDGA](https://medga.org) Team.

## Features

@medga/hardhat-clone differs from other similar Hardhat plugins:

- Clone multiple on-chain contracts into current Hardhat project.
- Cloned contracts are fully compilable, using the same compiler settings as on chain.
- Cloned contracts are reusable by other contracts in the Hardhat project (e.g., import as dependency, etc.).

## Usage

Install `hardhat-clone` plugin:
```shell
npm i @medga/hardhat-clone
```

Import `hardhat-clone` plugin in your Hardhat config file (e.g., `hardhat.config.ts`):
```typescript
import '@medga/hardhat-clone'
```

Clone an on-chain verified contract from Etherscan: 
```shell
npx hardhat clone --etherscan-api-key <API_KEY> <ADDRESS> <FOLDER>
```

This command clones the specified contract from Ethereum Mainnet (source provided by Etherscan API) into `<FOLDER>`, which is a folder path relative to the root of Hardhat project. 

Cloning from other EVM-compatible is also possible by specifying the chain ID with `--chain`.

## Tutorial

We offer a tutorial of use @medga/hardhat-clone: [TUTORIAL.md](./TUTORIAL.md).

## Technical Design

The technical details can be found in [DESIGN.md](./DESIGN.md).

## Other Similar Projects

- [hardhat-etherscan-contract-cloner](https://www.npmjs.com/package/hardhat-etherscan-contract-cloner)
- [forge clone](https://book.getfoundry.sh/reference/forge/forge-clone)
- [cast etherscan-source](https://book.getfoundry.sh/reference/cast/cast-etherscan-source)

## Sponsors

@medga/hardhat-clone is part of MEDGA project, aiming to enhance Ethereum smart contract development and debugging experience.
The project is sponsored by:
- [Ethereum Foundation](https://esp.ethereum.foundation/)
- [MegaETH Labs](https://megaeth.systems)
- [Offside Labs](https://offside.io/)
npm package: @medi-car-bd/mcb-shared-auth
Description: Shared authentication module for MCB applications
Author: MediCarBD
Latest version: 0.0.5

# mcb-backend-boilerplate

```bash
rm -r node_modules package-lock.json
```

- Prisma Generate

```bash
pnpm prisma generate
```

- Run Prisma To Initialize Database

```bash
pnpm prisma init
```

- Generate Prisma Client

```bash
pnpm prisma generate

```

- Run Prisma Migrations

```bash
pnpm prisma:migrate
```

- Shared Auth package installation

```bash
set GITHUB_TOKEN="your_github_token"

npm config set //registry.npmjs.org/:_authToken "your_npm_token"

pnpm install @mcb-shared-auth/auth
```

#Or Use

```bash
pnpm install github:Medi-Car-BD/mcb-shared-auth
```

- Patched version of the shared auth package

```bash
npm version patch
```
npm package: @medi-q/core
Description: Type-safe media queries.
Author: Karibash
Latest version: 0.3.1

# @medi-q/core

The @medi-q/core package is a framework agnostic for simply generating media queries.

## 🚀 Installation

```
$ npm install @medi-q/core
```

## 👏 Getting Started

By using the createMediQ function, you can create a helper function to generate media queries.
You can also generate media queries with multiple conditions by connecting the queries with and or.

```tsx
import { createMediQ } from '@medi-q/core';

const mediQ = createMediQ({
  tiny: '400px',
  small: '600px',
  medium: '800px',
  large: '1000px',
});

const maxSmall = mediQ('max-small');
const minMedium = mediQ('min-medium');
const minSmallAndMaxMedium = mediQ('min-small-and-max-medium');

const onResize = (): void => {
  if (matchMedia(maxSmall).matches) {
    console.log('isLessThanSmall');
  } else if (matchMedia(minMedium).matches) {
    console.log('isGreaterThanMedium');
  } else if (matchMedia(minSmallAndMaxMedium).matches) {
    console.log('isBetweenSmallAndMedium');
  }
};
onResize();
window.onresize = onResize;
```
npm package: @medi-q/emotion
Description: medi-q for emotion.
Author: Karibash
Latest version: 0.3.1

# @medi-q/emotion

This is a package for using medi-q with [emotion](https://github.com/emotion-js/emotion).

## 🚀 Installation

```
$ npm install @medi-q/core @medi-q/react @medi-q/emotion
```

## 👏 Getting Started

Use the ThemeProvider component to pass the Theme object and MediQ object to the subordinate components.

```tsx
import React from 'react';
import { BreakPoints, createMediQ } from '@medi-q/core';
import { ThemeProvider } from '@medi-q/emotion';

import { theme } from './theme';

const breakPoints: BreakPoints = {
  tiny: '400px',
  small: '600px',
  medium: '800px',
  large: '1000px',
};

const App: React.FC = () => {
  return (
    <ThemeProvider theme={theme} mediQ={createMediQ(breakPoints)}>
      ...
    </ThemeProvider>
  );
};

export default App;
```

By using the useMediQ hook in the lower-level component, you can execute a media query.
You can also generate media queries with multiple conditions by connecting the queries with and or.

```tsx
import React from 'react';
import styled from '@emotion/styled';
import { useMediQ } from '@medi-q/react';

const Wrapper = styled.div`
  background: ${props => props.theme.background};

  ${props => props.theme.mediQ('max-medium')} {
    background: blue;
  }
`;

const Page: React.FC = () => {
  const isLessThanSmall = useMediQ('max-small');
  const isGreaterThanMedium = useMediQ('min-medium');
  const isBetweenSmallAndMedium = useMediQ('min-small-and-max-medium');
  return (
    <Wrapper>
      {isLessThanSmall && <div>isLessThanSmall</div>}
      {isGreaterThanMedium && <div>isGreaterThanMedium</div>}
      {isBetweenSmallAndMedium && <div>isBetweenSmallAndMedium</div>}
    </Wrapper>
  );
};

export default Page;
```
npm package: @medi-q/react
Description: medi-q for react.
Author: Karibash
Latest version: 0.3.1

# @medi-q/react

This is a package for using medi-q with [react](https://github.com/facebook/react).

## 🚀 Installation

```
$ npm install @medi-q/core @medi-q/react
```

## 👏 Getting Started

Use the MediQProvider component to pass mediQ objects to lower-level components.

```tsx
import React from 'react';
import { BreakPoints, createMediQ } from '@medi-q/core';
import { MediQProvider } from '@medi-q/react';

const breakPoints: BreakPoints = {
  tiny: '400px',
  small: '600px',
  medium: '800px',
  large: '1000px',
};

const App: React.FC = () => {
  return (
    <MediQProvider mediQ={createMediQ(breakPoints)}>
      ...
    </MediQProvider>
  );
};

export default App;
```

By using the useMediQ hook in the lower-level component, you can execute a media query.
You can also generate media queries with multiple conditions by connecting the queries with and or.

```tsx
import React from 'react';
import { useMediQ } from '@medi-q/react';

const Page: React.FC = () => {
  const isLessThanSmall = useMediQ('max-small');
  const isGreaterThanMedium = useMediQ('min-medium');
  const isBetweenSmallAndMedium = useMediQ('min-small-and-max-medium');
  return (
    <div>
      {isLessThanSmall && <div>isLessThanSmall</div>}
      {isGreaterThanMedium && <div>isGreaterThanMedium</div>}
      {isBetweenSmallAndMedium && <div>isBetweenSmallAndMedium</div>}
    </div>
  );
};

export default Page;
```
npm package: @medi-q/styled
Description: medi-q for styled-components.
Author: Karibash
Latest version: 0.3.1

# @medi-q/styled

This is a package for using medi-q with [styled-components](https://github.com/styled-components/styled-components).

## 🚀 Installation

```
$ npm install @medi-q/core @medi-q/react @medi-q/styled
```

## 👏 Getting Started

Use the ThemeProvider component to pass the Theme object and MediQ object to the subordinate components.

```tsx
import React from 'react';
import { BreakPoints, createMediQ } from '@medi-q/core';
import { ThemeProvider } from '@medi-q/styled';

import { theme } from './theme';

const breakPoints: BreakPoints = {
  tiny: '400px',
  small: '600px',
  medium: '800px',
  large: '1000px',
};

const App: React.FC = () => {
  return (
    <ThemeProvider theme={theme} mediQ={createMediQ(breakPoints)}>
      ...
    </ThemeProvider>
  );
};

export default App;
```

By using the useMediQ hook in the lower-level component, you can execute a media query.
You can also generate media queries with multiple conditions by connecting the queries with and or.

```tsx
import React from 'react';
import styled from 'styled-components';
import { useMediQ } from '@medi-q/react';

const Wrapper = styled.div`
  background: ${props => props.theme.background};

  ${props => props.theme.mediQ('max-medium')} {
    background: blue;
  }
`;

const Page: React.FC = () => {
  const isLessThanSmall = useMediQ('max-small');
  const isGreaterThanMedium = useMediQ('min-medium');
  const isBetweenSmallAndMedium = useMediQ('min-small-and-max-medium');
  return (
    <Wrapper>
      {isLessThanSmall && <div>isLessThanSmall</div>}
      {isGreaterThanMedium && <div>isGreaterThanMedium</div>}
      {isBetweenSmallAndMedium && <div>isBetweenSmallAndMedium</div>}
    </Wrapper>
  );
};

export default Page;
```
npm package: @media-apron/react
Description: Media player components for React - A branch project of Apron Design
Author: https://apron.design/react/
Latest version: 26.0.3

# Media Apron - React

媒体播放组件库 React 版本 - Apron Design 分支项目

## 简介

Media Apron 是一个专注于媒体播放的组件库，提供功能丰富的 Video 和 Audio 组件。

## 特性

- 🎨 美观的自定义 UI 设计，专业的矢量图标
- 📱 16:9 响应式布局，自动适应容器宽度
- 📋 支持播放列表（简单模式和完整模式）
- ⚡ 自动隐藏控制栏，3 秒无操作自动隐藏
- 🎯 沉浸模式和全屏模式
- 🔊 智能音量控制（根据音量级别显示不同图标）
- ⏩ 播放速度调节（0.25x - 2x）
- 📝 字幕支持（CC 字幕）
- 🎬 封面图和视频信息显示
- ⌨️ 键盘快捷键（ESC 退出沉浸/全屏）

## 安装

```bash
npm install @media-apron/react
```

## 使用

### 单个视频

```tsx
import { Video } from '@media-apron/react';

function App() {
  return (
    <Video
      src="video.mp4"
      poster="cover.jpg"
    />
  );
}
```

### 播放列表（简单模式）

```tsx
import { Video } from '@media-apron/react';

function App() {
  const playlist = [
    'video1.mp4',
    'video2.mp4',
    'video3.mp4',
  ];

  return <Video source={playlist} />;
}
```

### 播放列表（完整模式）

```tsx
import { Video, VideoSource } from '@media-apron/react';

function App() {
  const playlist: VideoSource[] = [
    {
      title: '视频标题',
      summary: '视频简介',
      poster: 'cover.jpg',
      url: 'video1.mp4',
      cc: 'subtitles.vtt',
    },
    {
      title: '第二个视频',
      summary: '视频简介',
      poster: 'cover2.jpg',
      url: 'video2.mp4',
    },
  ];

  return (
    <Video
      source={playlist}
      primaryColor="#1890ff"
    />
  );
}
```

## API

### VideoProps

| 属性 | 类型 | 默认值 | 说明 |
|-----|------|--------|------|
| src | `string` | - | 视频源 URL（优先级最高） |
| source | `string \| string[] \| VideoSource[]` | - | 播放源或播放列表 |
| primaryColor | `string` | `#333333` | 主题色（进度条颜色） |
| className | `string` | - | 自定义类名 |
| ...rest | `VideoHTMLAttributes` | - | 继承所有原生 video 标签属性 |

### VideoSource

```typescript
interface VideoSource {
  title: string;      // 视频标题
  summary?: string;   // 视频摘要
  poster?: string;    // 封面图
  url: string;        // 视频 URL
  cc?: string;        // 字幕文件 URL
}
```

## 功能说明

### 默认尺寸

组件默认宽度 100%，高度按 16:9 比例自动计算。

### 控制栏

- 自动隐藏：鼠标移出后 3 秒自动隐藏
- 进度条：可点击跳转，可拖动调整进度
- 播放控制：播放/暂停、下一个（播放列表模式）
- 时间显示：当前时间/总时长

### 右侧功能按钮

- **音量**：显示音量百分比，hover 展开音量滑块，点击切换静音
- **设置**：播放速度调节、字幕开关（如果有）
- **播放列表**：从右侧展开播放列表面板（仅播放列表模式）
- **沉浸模式**：占满整个视口，ESC 退出
- **全屏**：进入浏览器全屏，ESC 退出

## 开发

```bash
# 安装依赖
npm install

# 开发模式（查看示例）
npm run dev

# 构建
npm run build

# 类型检查
npm run type-check
```

## License

MIT
npm package: @media-apron/vue-next
Description: > Apron Design (Vue3) 的一个分支组件，用于在页面上生产各种码。 > > （原始命名为 @qr-apron，但后续将会继续开发各种其他类型的条形码、二维码，因此更名为 @code-apron）
Latest version: 1.2.0

# @code-apron/vue-next

> Apron Design (Vue3) 的一个分支组件，用于在页面上生产各种码。
>
> （原始命名为 @qr-apron，但后续将会继续开发各种其他类型的条形码、二维码，因此更名为 @code-apron）

## 使用
可前往 [二维码 Qrcode - 组件 | Apron Design for Vue3](https://vue-next.apron.design/components/qrcode.html) 查看。

目前已开放二维码（链接为文档）：
- [二维码 QRcode - 组件 | Apron Design for Vue3](https://vue-next.apron.design/components/qrcode.html) 
- [二维码 Pdf417 - 组件 | Apron Design for Vue3](https://vue-next.apron.design/components/pdf417.html) 

以下是一个简单的 demo：
```vue
<script setup>
import CodeApron from '@code-apron/vue-next'
Vue.use(CodeApron)
</script>

<template>
  <ap-qrcode text="this is a qrcode"></ap-qrcode>
</template>
```

## 开发者
主程：[田昊天](https://www.mitkimi.com/about)：一个说不清是前端还是全栈的“研发人员”。

同时，我们也希望开发者们可以加入进来。

## 新功能开发：

### 步骤
1. 前往 [Github 项目主页](https://github.com/offontime/CodeApron) 克隆代码。
2. 路由进 `CodeApron/vue-next` 安装依赖
    ```sh
    git clone git@github.com:offontime/CodeApron.git
    cd CodeApron/vue-next
    yarn
    ```
3. 启动项目
    > 我们会要求您拉一个自己的开发分支，例如：`feature-xxx`，开发并调试完成新功能后向我们提交 PR
    ```sh
    git checkout -b feature-xxx
    yarn dev
    ```

### 指南
1. 本项目 QRcode 使用基础包 `qrcode` 版本 ^1.5.3 作为渲染工具。在后续开发中如果有实际需求，则会根据情况升级此包。
2. 本项目 pdf417 使用 tcpdf library，GitHub：https://github.com/bkuzmic/pdf417-js
3. 脚手架使用 vite 搭建，vue3-ts 编写。
4. 参与贡献请先阅读：[参与开发](https://vue-next.apron.design/docs/developer.html) 和 [如何优雅地在 Github 上贡献代码](https://vue-next.apron.design/docs/developer.html)