open-index/open-npm huggingface dataset:
npm package: @panosc-portal/panosc-common-ts
Description: panosc common ts
Author: Sylvain FEROT
Latest version: 0.0.2

# panosc-common-ts

[![LoopBack](https://github.com/strongloop/loopback-next/raw/master/docs/site/imgs/branding/Powered-by-LoopBack-Badge-(blue)-@2x.png)](http://loopback.io/)

## Installation

Install PanoscCommonTsComponent using `npm`;

```sh
$ [npm install | yarn add] panosc-common-ts
```

## Basic Use

Configure and load PanoscCommonTsComponent in the application constructor
as shown below.

```ts
import {PanoscCommonTsComponent, PanoscCommonTsComponentOptions, DEFAULT_PANOSC_COMMON_TS_OPTIONS} from 'panosc-common-ts';
// ...
export class MyApplication extends BootMixin(ServiceMixin(RepositoryMixin(RestApplication))) {
  constructor(options: ApplicationConfig = {}) {
    const opts: PanoscCommonTsComponentOptions = DEFAULT_PANOSC_COMMON_TS_OPTIONS;
    this.configure(PanoscCommonTsComponentBindings.COMPONENT).to(opts);
      // Put the configuration options here
    });
    this.component(PanoscCommonTsComponent);
    // ...
  }
  // ...
}
```
npm package: @panosen/agent-ui
Description: 一个现代化的 React 按钮组件，支持自定义颜色和渐变效果。
Latest version: 0.0.6

# @panosen/rc-button

一个现代化的 React 按钮组件，支持自定义颜色和渐变效果。

## 特性

- 🎨 **自定义颜色** - 支持通过 `color` 属性自定义按钮颜色
- ✨ **现代化设计** - 优雅的渐变和悬停效果
- 🎯 **完整的交互状态** - 支持 hover、active、focus、disabled 状态
- 📦 **轻量级** - 零依赖（除了 React）
- 🔧 **TypeScript 支持** - 完整的类型定义
- 🎭 **灵活配置** - 支持图标、自定义样式等

## 安装

```bash
npm install @panosen/rc-button
```

或使用 pnpm：

```bash
pnpm add @panosen/rc-button
```

或使用 yarn：

```bash
yarn add @panosen/rc-button
```

## 使用

### 基础用法

```tsx
import { Button } from '@panosen/rc-button';
import '@panosen/rc-button/style.css';

function App() {
  return (
    <Button onClick={() => console.log('clicked')}>
      Click Me
    </Button>
  );
}
```

### 自定义颜色

```tsx
<Button color="#FF5733">Red Orange</Button>
<Button color="#33FF57">Lime Green</Button>
<Button color="#3357FF">Royal Blue</Button>
```

### 带图标

```tsx
<Button icon={<YourIcon />}>
  Button with Icon
</Button>
```

### 自定义样式

```tsx
<Button 
  className="my-custom-class"
  style={{ fontSize: '1.2rem' }}
>
  Custom Style
</Button>
```

## API

### Button Props

| 属性 | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| `children` | `React.ReactNode` | - | 按钮内容 |
| `icon` | `React.ReactNode` | - | 按钮图标 |
| `className` | `string` | - | 自定义类名 |
| `style` | `React.CSSProperties` | - | 自定义样式 |
| `color` | `string` | `#667eea` | 按钮主题颜色（支持 hex 格式） |
| `onClick` | `React.MouseEventHandler` | - | 点击事件处理函数 |

组件使用 `React.forwardRef`，支持传递 ref 到按钮元素。

## 颜色系统

按钮使用 CSS 变量来实现动态颜色系统：

- `--button-color`: 主题色
- `--button-hover-color`: 悬停颜色（自动计算为较暗的颜色）
- `--button-active-color`: 激活颜色（自动计算为更暗的颜色）

当你传入 `color` 属性时，组件会自动计算 hover 和 active 状态的颜色。

## 样式特性

- **渐变背景** - 悬停时显示微妙的渐变效果
- **阴影效果** - 悬停和聚焦时的柔和阴影
- **平滑过渡** - 所有状态变化都有流畅的过渡动画
- **无障碍支持** - 完整的键盘导航和焦点管理

## 开发

```bash
# 安装依赖
pnpm install

# 开发模式
pnpm dev

# 构建
pnpm build

# 代码检查
pnpm lint
```

## 技术栈

- React 18/19
- TypeScript
- Vite
- SCSS Modules

## 浏览器支持

支持所有现代浏览器：

- Chrome (最新版本)
- Firefox (最新版本)
- Safari (最新版本)
- Edge (最新版本)

## 相关链接

- [GitHub Repository](https://github.com/panosen-react/panosen-rc-button)
- [npm Package](https://www.npmjs.com/package/@panosen/rc-button)
npm package: @panosen/ngx-ace
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.0.0.
Latest version: 0.2.4

# PanosenNgxAce

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

## Code scaffolding

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

## Build

Run `ng build panosen-ngx-ace` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

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

## Running unit tests

Run `ng test panosen-ngx-ace` 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.