@fxshelf/button-kit 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,125 @@
+# @fxshelf/button-kit
+
+[English](./README.md) · [中文](./README.zh-CN.md)
+
+Animated button shelf for **React** and **Vue** — switch looks with a `variant` string. Zero Framer / GSAP.
+
+Part of the [fxshelf](https://github.com/Luzhaotian/fxshelf) effect shelf — install independently.
+
+| | |
+|--|--|
+| **Docs / Demo** | [luzhaotian.github.io/fxshelf](https://luzhaotian.github.io/fxshelf/docs/effects/button-kit) |
+| **npm** | [`@fxshelf/button-kit@0.1.0`](https://www.npmjs.com/package/@fxshelf/button-kit) |
+| **CDN** | [unpkg](https://unpkg.com/@fxshelf/button-kit/) · [jsDelivr](https://cdn.jsdelivr.net/npm/@fxshelf/button-kit/) |
+
+Supports **npm**, **CDN `<script>`**, and **copy-as-source**. Details: site docs or [docs/使用说明.md](./docs/使用说明.md).
+
+## Install
+
+```bash
+npm install @fxshelf/button-kit
+```
+
+Import styles once:
+
+```ts
+import '@fxshelf/button-kit/styles.css'
+```
+
+| Consumer | Peer |
+|----------|------|
+| React | `react` / `react-dom` ≥ 18 |
+| Vue | `vue` ≥ 3.3, with `.vue` compilation (e.g. Vite) |
+
+## Usage — React
+
+```tsx
+import { Button } from '@fxshelf/button-kit'
+import '@fxshelf/button-kit/styles.css'
+
+export function Example() {
+  return <Button variant="glow">Continue</Button>
+}
+```
+
+## Usage — Vue
+
+Entry is source SFC: `@fxshelf/button-kit/vue`.
+
+```vue
+<script setup lang="ts">
+import { Button } from '@fxshelf/button-kit/vue'
+import '@fxshelf/button-kit/styles.css'
+</script>
+
+<template>
+  <Button variant="neon">Continue</Button>
+</template>
+```
+
+## Variants
+
+| Value | Effect |
+|-------|--------|
+| `solid` | Solid dark |
+| `outline` | Outline, fill on hover |
+| `soft` | Soft light fill |
+| `glow` | Breathing glow |
+| `neon` | Neon outline |
+| `shimmer` | Sweep light on hover |
+| `chroma` | Chroma shift; edge glow on hover |
+| `liquid` | Liquid rise fill |
+| `wipe` | Diagonal wipe fill |
+| `glass` | Frosted glass |
+
+Unknown strings fall back to `solid`.
+
+## Usage — CDN (React 18 UMD)
+
+Self-contained build `dist/button-kit.iife.js`, global `ButtonKit`. Full example: [docs/CDN示例.html](./docs/CDN示例.html).
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/@fxshelf/button-kit/dist/index.css" />
+
+<script crossorigin src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
+<script crossorigin src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
+<script src="https://unpkg.com/@fxshelf/button-kit/dist/button-kit.iife.js"></script>
+
+<div id="app"></div>
+<script>
+  ReactDOM.createRoot(document.getElementById('app')).render(
+    React.createElement(ButtonKit.Button, { variant: 'glow' }, 'Continue'),
+  )
+</script>
+```
+
+Pin the version in production, e.g. `@fxshelf/button-kit@0.1.0/...`.  
+Do not use jsDelivr GitHub `gh/.../dist` links (`dist/` is not committed).
+
+## Copy as source
+
+Skip npm and copy from this package’s `src/` (or `node_modules/@fxshelf/button-kit/`):
+
+```
+core/     # required (includes styles.css)
+react/    # React projects
+vue/      # Vue projects
+```
+
+Keep `core` next to `react` / `vue`, then:
+
+```tsx
+// React
+import { Button } from './components/button-kit/react'
+import './components/button-kit/core/styles.css'
+```
+
+```ts
+// Vue
+import { Button } from './components/button-kit/vue'
+import './components/button-kit/core/styles.css'
+```
+
+## License
+
+MIT

package/README.zh-CN.md

@@ -0,0 +1,125 @@
+# @fxshelf/button-kit
+
+[English](./README.md) · [中文](./README.zh-CN.md)
+
+面向 **React** / **Vue** 的按钮动效书架 —— 用 `variant` 字符串切换样式。零 Framer / GSAP 依赖。
+
+属于 [fxshelf](https://github.com/Luzhaotian/fxshelf) 动效书架中的一个可独立安装包。
+
+| | |
+|--|--|
+| **文档 / Demo** | [luzhaotian.github.io/fxshelf](https://luzhaotian.github.io/fxshelf/docs/effects/button-kit) |
+| **npm** | [`@fxshelf/button-kit@0.1.0`](https://www.npmjs.com/package/@fxshelf/button-kit) |
+| **CDN** | [unpkg](https://unpkg.com/@fxshelf/button-kit/) · [jsDelivr](https://cdn.jsdelivr.net/npm/@fxshelf/button-kit/) |
+
+支持 **npm**、**CDN `<script>`**、**复制源码**。详细用法见站点文档或 [docs/使用说明.md](./docs/使用说明.md)。
+
+## 安装
+
+```bash
+npm install @fxshelf/button-kit
+```
+
+记得引入样式：
+
+```ts
+import '@fxshelf/button-kit/styles.css'
+```
+
+| 使用方 | Peer |
+|--------|------|
+| React | `react` / `react-dom` ≥ 18 |
+| Vue | `vue` ≥ 3.3，且能编译 `.vue`（如 Vite） |
+
+## 用法 — React
+
+```tsx
+import { Button } from '@fxshelf/button-kit'
+import '@fxshelf/button-kit/styles.css'
+
+export function Example() {
+  return <Button variant="glow">继续</Button>
+}
+```
+
+## 用法 — Vue
+
+入口为源码 SFC：`@fxshelf/button-kit/vue`。
+
+```vue
+<script setup lang="ts">
+import { Button } from '@fxshelf/button-kit/vue'
+import '@fxshelf/button-kit/styles.css'
+</script>
+
+<template>
+  <Button variant="neon">继续</Button>
+</template>
+```
+
+## variant
+
+| 值 | 效果 |
+|----|------|
+| `solid` | 实心深色 |
+| `outline` | 描边，悬停填实 |
+| `soft` | 浅色软按钮 |
+| `glow` | 呼吸光晕 |
+| `neon` | 霓虹描边 |
+| `shimmer` | 悬停扫光 |
+| `chroma` | 炫彩流光；hover 贴边高斯光晕 |
+| `liquid` | 底部液体升起填充 |
+| `wipe` | 斜向擦除填充 |
+| `glass` | 毛玻璃半透明 |
+
+未知字符串会回退到 `solid`。
+
+## 用法 — CDN（React 18 UMD）
+
+自包含产物 `dist/button-kit.iife.js`，全局 `ButtonKit`。完整示例：[docs/CDN示例.html](./docs/CDN示例.html)。
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/@fxshelf/button-kit/dist/index.css" />
+
+<script crossorigin src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
+<script crossorigin src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
+<script src="https://unpkg.com/@fxshelf/button-kit/dist/button-kit.iife.js"></script>
+
+<div id="app"></div>
+<script>
+  ReactDOM.createRoot(document.getElementById('app')).render(
+    React.createElement(ButtonKit.Button, { variant: 'glow' }, '继续'),
+  )
+</script>
+```
+
+生产环境建议锁定版本，如 `@fxshelf/button-kit@0.1.0/...`。  
+不要用 jsDelivr GitHub `gh/.../dist` 直链（`dist/` 不进 Git）。
+
+## 复制源码
+
+不经过 npm 时，从本包 `src/`（或 `node_modules/@fxshelf/button-kit/`）拷贝：
+
+```
+core/     # 必拷（含 styles.css）
+react/    # React 项目
+vue/      # Vue 项目
+```
+
+保持 `core` 与 `react` / `vue` 同级，然后：
+
+```tsx
+// React
+import { Button } from './components/button-kit/react'
+import './components/button-kit/core/styles.css'
+```
+
+```ts
+// Vue
+import { Button } from './components/button-kit/vue'
+import './components/button-kit/core/styles.css'
+```
+
+## License
+
+MIT

package/dist/button-kit.iife.css

@@ -0,0 +1,273 @@
+/* src/core/styles.css */
+.fx-btn {
+  --fx-btn-fg: #0f0f12;
+  --fx-btn-bg: #f4f4f5;
+  --fx-btn-accent: #3b82f6;
+  --fx-btn-radius: 10px;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.7rem 1.25rem;
+  border: 1px solid transparent;
+  border-radius: var(--fx-btn-radius);
+  background: var(--fx-btn-bg);
+  color: var(--fx-btn-fg);
+  font: inherit;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  line-height: 1.2;
+  letter-spacing: 0.01em;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  isolation: isolate;
+  overflow: hidden;
+  transition:
+    transform 160ms ease,
+    box-shadow 200ms ease,
+    background-color 200ms ease,
+    border-color 200ms ease,
+    color 200ms ease;
+}
+.fx-btn:focus-visible {
+  outline: 2px solid var(--fx-btn-accent);
+  outline-offset: 3px;
+}
+.fx-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.fx-btn:active:not(:disabled) {
+  transform: translateY(1px) scale(0.98);
+}
+.fx-btn--solid {
+  --fx-btn-fg: #fafafa;
+  --fx-btn-bg: #18181b;
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
+}
+.fx-btn--solid:hover:not(:disabled) {
+  background: #27272a;
+}
+.fx-btn--outline {
+  --fx-btn-fg: #18181b;
+  --fx-btn-bg: transparent;
+  border-color: #d4d4d8;
+  background: transparent;
+}
+.fx-btn--outline:hover:not(:disabled) {
+  border-color: #18181b;
+  background: #18181b;
+  color: #fafafa;
+}
+.fx-btn--soft {
+  --fx-btn-fg: #1d4ed8;
+  --fx-btn-bg: #dbeafe;
+}
+.fx-btn--soft:hover:not(:disabled) {
+  background: #bfdbfe;
+  transform: translateY(-1px);
+}
+.fx-btn--soft:active:not(:disabled) {
+  transform: translateY(0) scale(0.98);
+}
+.fx-btn--glow {
+  --fx-btn-fg: #f8fafc;
+  --fx-btn-bg: #2563eb;
+  box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45), 0 8px 24px rgba(37, 99, 235, 0.28);
+  animation: fx-btn-glow-pulse 2.4s ease-in-out infinite;
+}
+.fx-btn--glow:hover:not(:disabled) {
+  background: #1d4ed8;
+  box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.18), 0 10px 28px rgba(37, 99, 235, 0.4);
+  animation: none;
+}
+@keyframes fx-btn-glow-pulse {
+  0%, 100% {
+    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4), 0 8px 24px rgba(37, 99, 235, 0.28);
+  }
+  50% {
+    box-shadow: 0 0 0 8px rgba(37, 99, 235, 0), 0 10px 28px rgba(37, 99, 235, 0.35);
+  }
+}
+.fx-btn--neon {
+  --fx-btn-fg: #67e8f9;
+  --fx-btn-bg: #0b1220;
+  border-color: #22d3ee;
+  box-shadow:
+    0 0 0 1px rgba(34, 211, 238, 0.25),
+    0 0 18px rgba(34, 211, 238, 0.35),
+    inset 0 0 12px rgba(34, 211, 238, 0.08);
+  text-shadow: 0 0 10px rgba(103, 232, 249, 0.55);
+}
+.fx-btn--neon:hover:not(:disabled) {
+  color: #ecfeff;
+  border-color: #67e8f9;
+  box-shadow:
+    0 0 0 1px rgba(103, 232, 249, 0.45),
+    0 0 28px rgba(34, 211, 238, 0.55),
+    inset 0 0 16px rgba(34, 211, 238, 0.14);
+}
+.fx-btn--shimmer {
+  --fx-btn-fg: #fafafa;
+  --fx-btn-bg: #111827;
+}
+.fx-btn--shimmer::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background:
+    linear-gradient(
+      110deg,
+      transparent 30%,
+      rgba(255, 255, 255, 0.28) 48%,
+      transparent 66%);
+  transform: translateX(-120%);
+  transition: transform 0.55s ease;
+}
+.fx-btn--shimmer:hover:not(:disabled)::before {
+  transform: translateX(120%);
+}
+.fx-btn--shimmer:hover:not(:disabled) {
+  background: #1f2937;
+}
+.fx-btn--chroma {
+  --fx-btn-fg: #fff;
+  --fx-btn-radius: 999px;
+  z-index: 0;
+  overflow: visible;
+  isolation: auto;
+  border: none;
+  background:
+    linear-gradient(
+      to right,
+      #03a9f4,
+      #f441a5,
+      #ffeb3b,
+      #03a9f4);
+  background-size: 400%;
+  letter-spacing: 0.08em;
+  animation: fx-btn-chroma-shift 8s ease infinite;
+}
+.fx-btn--chroma::before {
+  content: "";
+  position: absolute;
+  inset: -4px;
+  z-index: -1;
+  border-radius: inherit;
+  background:
+    linear-gradient(
+      to right,
+      #03a9f4,
+      #f441a5,
+      #ffeb3b,
+      #03a9f4);
+  background-size: 400%;
+  filter: blur(0);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.4s ease, filter 0.4s ease;
+  animation: fx-btn-chroma-shift 8s ease infinite;
+}
+.fx-btn--chroma:hover:not(:disabled)::before {
+  opacity: 1;
+  filter: blur(8px);
+}
+.fx-btn--chroma:active:not(:disabled) {
+  transform: translateY(1px) scale(0.98);
+}
+@keyframes fx-btn-chroma-shift {
+  0% {
+    background-position: 0%;
+  }
+  100% {
+    background-position: 400%;
+  }
+}
+.fx-btn--liquid {
+  --fx-btn-fg: #0891b2;
+  --fx-btn-bg: transparent;
+  z-index: 0;
+  border-color: #0891b2;
+  background: transparent;
+  overflow: hidden;
+}
+.fx-btn--liquid::before {
+  content: "";
+  position: absolute;
+  left: -30%;
+  bottom: 0;
+  z-index: -1;
+  width: 160%;
+  height: 220%;
+  border-radius: 42% 48% 0 0 / 28% 32% 0 0;
+  background:
+    linear-gradient(
+      180deg,
+      #22d3ee,
+      #0891b2);
+  transform: translateY(82%);
+  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.fx-btn--liquid:hover:not(:disabled) {
+  color: #fff;
+}
+.fx-btn--liquid:hover:not(:disabled)::before {
+  transform: translateY(12%);
+  animation: fx-btn-liquid-wave 2.4s ease-in-out infinite 0.55s;
+}
+@keyframes fx-btn-liquid-wave {
+  0%, 100% {
+    border-radius: 42% 48% 0 0 / 28% 32% 0 0;
+  }
+  50% {
+    border-radius: 48% 42% 0 0 / 34% 26% 0 0;
+  }
+}
+.fx-btn--wipe {
+  --fx-btn-fg: #f4f4f5;
+  --fx-btn-bg: transparent;
+  z-index: 0;
+  border-color: rgba(244, 244, 245, 0.7);
+  background: transparent;
+  overflow: hidden;
+}
+.fx-btn--wipe::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background: #f4f4f5;
+  transform: translateX(-105%) skewX(-12deg);
+  transform-origin: left center;
+  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
+}
+.fx-btn--wipe:hover:not(:disabled) {
+  color: #18181b;
+  border-color: #f4f4f5;
+}
+.fx-btn--wipe:hover:not(:disabled)::before {
+  transform: translateX(0) skewX(0deg);
+}
+.fx-btn--glass {
+  --fx-btn-fg: #f8fafc;
+  --fx-btn-bg: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.28);
+  background: rgba(255, 255, 255, 0.1);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 24px rgba(0, 0, 0, 0.18);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+}
+.fx-btn--glass:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.18);
+  border-color: rgba(255, 255, 255, 0.4);
+  transform: translateY(-1px);
+}
+.fx-btn--glass:active:not(:disabled) {
+  transform: translateY(0) scale(0.98);
+}
+/*# sourceMappingURL=button-kit.iife.css.map */

package/dist/button-kit.iife.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/styles.css"],"sourcesContent":[".fx-btn {\n  --fx-btn-fg: #0f0f12;\n  --fx-btn-bg: #f4f4f5;\n  --fx-btn-accent: #3b82f6;\n  --fx-btn-radius: 10px;\n\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 0.7rem 1.25rem;\n  border: 1px solid transparent;\n  border-radius: var(--fx-btn-radius);\n  background: var(--fx-btn-bg);\n  color: var(--fx-btn-fg);\n  font: inherit;\n  font-size: 0.9375rem;\n  font-weight: 600;\n  line-height: 1.2;\n  letter-spacing: 0.01em;\n  text-decoration: none;\n  cursor: pointer;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  isolation: isolate;\n  overflow: hidden;\n  transition:\n    transform 160ms ease,\n    box-shadow 200ms ease,\n    background-color 200ms ease,\n    border-color 200ms ease,\n    color 200ms ease;\n}\n\n.fx-btn:focus-visible {\n  outline: 2px solid var(--fx-btn-accent);\n  outline-offset: 3px;\n}\n\n.fx-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.fx-btn:active:not(:disabled) {\n  transform: translateY(1px) scale(0.98);\n}\n\n/* —— solid —— */\n.fx-btn--solid {\n  --fx-btn-fg: #fafafa;\n  --fx-btn-bg: #18181b;\n  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;\n}\n\n.fx-btn--solid:hover:not(:disabled) {\n  background: #27272a;\n}\n\n/* —— outline —— */\n.fx-btn--outline {\n  --fx-btn-fg: #18181b;\n  --fx-btn-bg: transparent;\n  border-color: #d4d4d8;\n  background: transparent;\n}\n\n.fx-btn--outline:hover:not(:disabled) {\n  border-color: #18181b;\n  background: #18181b;\n  color: #fafafa;\n}\n\n/* —— soft —— */\n.fx-btn--soft {\n  --fx-btn-fg: #1d4ed8;\n  --fx-btn-bg: #dbeafe;\n}\n\n.fx-btn--soft:hover:not(:disabled) {\n  background: #bfdbfe;\n  transform: translateY(-1px);\n}\n\n.fx-btn--soft:active:not(:disabled) {\n  transform: translateY(0) scale(0.98);\n}\n\n/* —— glow —— */\n.fx-btn--glow {\n  --fx-btn-fg: #f8fafc;\n  --fx-btn-bg: #2563eb;\n  box-shadow:\n    0 0 0 0 rgba(37, 99, 235, 0.45),\n    0 8px 24px rgba(37, 99, 235, 0.28);\n  animation: fx-btn-glow-pulse 2.4s ease-in-out infinite;\n}\n\n.fx-btn--glow:hover:not(:disabled) {\n  background: #1d4ed8;\n  box-shadow:\n    0 0 0 6px rgba(37, 99, 235, 0.18),\n    0 10px 28px rgba(37, 99, 235, 0.4);\n  animation: none;\n}\n\n@keyframes fx-btn-glow-pulse {\n  0%,\n  100% {\n    box-shadow:\n      0 0 0 0 rgba(37, 99, 235, 0.4),\n      0 8px 24px rgba(37, 99, 235, 0.28);\n  }\n  50% {\n    box-shadow:\n      0 0 0 8px rgba(37, 99, 235, 0),\n      0 10px 28px rgba(37, 99, 235, 0.35);\n  }\n}\n\n/* —— neon —— */\n.fx-btn--neon {\n  --fx-btn-fg: #67e8f9;\n  --fx-btn-bg: #0b1220;\n  border-color: #22d3ee;\n  box-shadow:\n    0 0 0 1px rgba(34, 211, 238, 0.25),\n    0 0 18px rgba(34, 211, 238, 0.35),\n    inset 0 0 12px rgba(34, 211, 238, 0.08);\n  text-shadow: 0 0 10px rgba(103, 232, 249, 0.55);\n}\n\n.fx-btn--neon:hover:not(:disabled) {\n  color: #ecfeff;\n  border-color: #67e8f9;\n  box-shadow:\n    0 0 0 1px rgba(103, 232, 249, 0.45),\n    0 0 28px rgba(34, 211, 238, 0.55),\n    inset 0 0 16px rgba(34, 211, 238, 0.14);\n}\n\n/* —— shimmer —— */\n.fx-btn--shimmer {\n  --fx-btn-fg: #fafafa;\n  --fx-btn-bg: #111827;\n}\n\n.fx-btn--shimmer::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n  background: linear-gradient(\n    110deg,\n    transparent 30%,\n    rgba(255, 255, 255, 0.28) 48%,\n    transparent 66%\n  );\n  transform: translateX(-120%);\n  transition: transform 0.55s ease;\n}\n\n.fx-btn--shimmer:hover:not(:disabled)::before {\n  transform: translateX(120%);\n}\n\n.fx-btn--shimmer:hover:not(:disabled) {\n  background: #1f2937;\n}\n\n/* —— chroma（炫彩流光 + hover 高斯光晕） —— */\n.fx-btn--chroma {\n  --fx-btn-fg: #fff;\n  --fx-btn-radius: 999px;\n  z-index: 0;\n  overflow: visible;\n  isolation: auto;\n  border: none;\n  background: linear-gradient(\n    to right,\n    #03a9f4,\n    #f441a5,\n    #ffeb3b,\n    #03a9f4\n  );\n  background-size: 400%;\n  letter-spacing: 0.08em;\n  animation: fx-btn-chroma-shift 8s ease infinite;\n}\n\n.fx-btn--chroma::before {\n  content: '';\n  position: absolute;\n  inset: -4px;\n  z-index: -1;\n  border-radius: inherit;\n  background: linear-gradient(\n    to right,\n    #03a9f4,\n    #f441a5,\n    #ffeb3b,\n    #03a9f4\n  );\n  background-size: 400%;\n  filter: blur(0);\n  opacity: 0;\n  pointer-events: none;\n  transition:\n    opacity 0.4s ease,\n    filter 0.4s ease;\n  animation: fx-btn-chroma-shift 8s ease infinite;\n}\n\n.fx-btn--chroma:hover:not(:disabled)::before {\n  opacity: 1;\n  filter: blur(8px);\n}\n\n.fx-btn--chroma:active:not(:disabled) {\n  transform: translateY(1px) scale(0.98);\n}\n\n@keyframes fx-btn-chroma-shift {\n  0% {\n    background-position: 0%;\n  }\n\n  100% {\n    background-position: 400%;\n  }\n}\n\n/* —— liquid（底部液体升起） —— */\n.fx-btn--liquid {\n  --fx-btn-fg: #0891b2;\n  --fx-btn-bg: transparent;\n  z-index: 0;\n  border-color: #0891b2;\n  background: transparent;\n  overflow: hidden;\n}\n\n.fx-btn--liquid::before {\n  content: '';\n  position: absolute;\n  left: -30%;\n  bottom: 0;\n  z-index: -1;\n  width: 160%;\n  height: 220%;\n  border-radius: 42% 48% 0 0 / 28% 32% 0 0;\n  background: linear-gradient(180deg, #22d3ee, #0891b2);\n  transform: translateY(82%);\n  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.fx-btn--liquid:hover:not(:disabled) {\n  color: #fff;\n}\n\n.fx-btn--liquid:hover:not(:disabled)::before {\n  transform: translateY(12%);\n  animation: fx-btn-liquid-wave 2.4s ease-in-out infinite 0.55s;\n}\n\n@keyframes fx-btn-liquid-wave {\n  0%,\n  100% {\n    border-radius: 42% 48% 0 0 / 28% 32% 0 0;\n  }\n\n  50% {\n    border-radius: 48% 42% 0 0 / 34% 26% 0 0;\n  }\n}\n\n/* —— wipe（左向右擦除填充） —— */\n.fx-btn--wipe {\n  --fx-btn-fg: #f4f4f5;\n  --fx-btn-bg: transparent;\n  z-index: 0;\n  border-color: rgba(244, 244, 245, 0.7);\n  background: transparent;\n  overflow: hidden;\n}\n\n.fx-btn--wipe::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n  background: #f4f4f5;\n  transform: translateX(-105%) skewX(-12deg);\n  transform-origin: left center;\n  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n.fx-btn--wipe:hover:not(:disabled) {\n  color: #18181b;\n  border-color: #f4f4f5;\n}\n\n.fx-btn--wipe:hover:not(:disabled)::before {\n  transform: translateX(0) skewX(0deg);\n}\n\n/* —— glass（毛玻璃） —— */\n.fx-btn--glass {\n  --fx-btn-fg: #f8fafc;\n  --fx-btn-bg: rgba(255, 255, 255, 0.1);\n  border-color: rgba(255, 255, 255, 0.28);\n  background: rgba(255, 255, 255, 0.1);\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, 0.22),\n    0 8px 24px rgba(0, 0, 0, 0.18);\n  backdrop-filter: blur(14px);\n  -webkit-backdrop-filter: blur(14px);\n}\n\n.fx-btn--glass:hover:not(:disabled) {\n  background: rgba(255, 255, 255, 0.18);\n  border-color: rgba(255, 255, 255, 0.4);\n  transform: translateY(-1px);\n}\n\n.fx-btn--glass:active:not(:disabled) {\n  transform: translateY(0) scale(0.98);\n}\n"],"mappings":"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","names":[]}

package/dist/button-kit.iife.js

@@ -0,0 +1,82 @@
+"use strict";
+var ButtonKit = (() => {
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __export = (target, all) => {
+    for (var name in all)
+      __defProp(target, name, { get: all[name], enumerable: true });
+  };
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+  // src/index.ts
+  var src_exports = {};
+  __export(src_exports, {
+    BUTTON_VARIANTS: () => BUTTON_VARIANTS,
+    Button: () => Button
+  });
+
+  // src/browser/react.ts
+  var globalReact = globalThis.React;
+  if (!globalReact) {
+    throw new Error(
+      '[button-kit] browser build: global "React" not found. Load a UMD build of React (react@18.3.x) before button-kit.'
+    );
+  }
+  var Fragment = globalReact.Fragment;
+  var createElement = globalReact.createElement;
+
+  // src/core/variants.ts
+  var BUTTON_VARIANTS = [
+    "solid",
+    "outline",
+    "soft",
+    "glow",
+    "neon",
+    "shimmer",
+    "chroma",
+    "liquid",
+    "wipe",
+    "glass"
+  ];
+  var DEFAULT_VARIANT = "solid";
+  function resolveVariant(variant) {
+    if (variant != null && BUTTON_VARIANTS.includes(variant)) {
+      return variant;
+    }
+    return DEFAULT_VARIANT;
+  }
+  function variantClassName(variant) {
+    return `fx-btn fx-btn--${resolveVariant(variant)}`;
+  }
+
+  // src/browser/jsx-runtime.ts
+  function jsx(type, props, key) {
+    const create = createElement;
+    return key === void 0 ? create(type, props) : create(type, { ...props, key });
+  }
+
+  // src/react/Button.tsx
+  function Button({
+    variant = "solid",
+    children,
+    className,
+    style,
+    type = "button",
+    ...rest
+  }) {
+    const classes = [variantClassName(variant), className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx("button", { type, className: classes, style, ...rest, children });
+  }
+  return __toCommonJS(src_exports);
+})();
+//# sourceMappingURL=button-kit.iife.js.map

package/dist/button-kit.iife.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/browser/react.ts","../src/core/variants.ts","../src/browser/jsx-runtime.ts","../src/react/Button.tsx"],"sourcesContent":["export {\n  Button,\n  BUTTON_VARIANTS,\n  type ButtonProps,\n  type ButtonVariant,\n} from './react'\n","// Browser (<script>) build only.\nimport type * as ReactModule from 'react'\n\ntype ReactGlobal = typeof ReactModule\n\nconst globalReact = (globalThis as { React?: ReactGlobal }).React\n\nif (!globalReact) {\n  throw new Error(\n    '[button-kit] browser build: global \"React\" not found. ' +\n      'Load a UMD build of React (react@18.3.x) before button-kit.',\n  )\n}\n\nexport const Fragment = globalReact.Fragment\nexport const createElement = globalReact.createElement\n","/** Built-in button looks. Pass any of these as `variant`. */\nexport const BUTTON_VARIANTS = [\n  'solid',\n  'outline',\n  'soft',\n  'glow',\n  'neon',\n  'shimmer',\n  'chroma',\n  'liquid',\n  'wipe',\n  'glass',\n] as const\n\nexport type ButtonVariant = (typeof BUTTON_VARIANTS)[number]\n\nexport const DEFAULT_VARIANT: ButtonVariant = 'solid'\n\nexport function resolveVariant(variant?: string): ButtonVariant {\n  if (\n    variant != null &&\n    (BUTTON_VARIANTS as readonly string[]).includes(variant)\n  ) {\n    return variant as ButtonVariant\n  }\n  return DEFAULT_VARIANT\n}\n\nexport function variantClassName(variant?: string): string {\n  return `fx-btn fx-btn--${resolveVariant(variant)}`\n}\n","import { createElement, Fragment } from './react'\nimport type { ElementType, Key, ReactElement } from 'react'\n\nexport { Fragment }\n\ntype CreateElement = (type: ElementType, props?: unknown) => ReactElement\n\nexport function jsx(\n  type: ElementType,\n  props: unknown,\n  key?: Key,\n): ReactElement {\n  const create = createElement as unknown as CreateElement\n  return key === undefined\n    ? create(type, props)\n    : create(type, { ...(props as Record<string, unknown>), key })\n}\n\nexport const jsxs = jsx\n","'use client'\n\nimport {\n  type ButtonHTMLAttributes,\n  type CSSProperties,\n  type ReactNode,\n} from 'react'\nimport {\n  BUTTON_VARIANTS,\n  type ButtonVariant,\n  variantClassName,\n} from '../core/variants'\nimport '../core/styles.css'\n\nexport type ButtonProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'className' | 'style' | 'children'\n> & {\n  /** Switch look by name: solid | outline | soft | glow | neon | shimmer | chroma | liquid | wipe | glass. */\n  variant?: ButtonVariant | (string & {})\n  children?: ReactNode\n  className?: string\n  style?: CSSProperties\n}\n\nexport function Button({\n  variant = 'solid',\n  children,\n  className,\n  style,\n  type = 'button',\n  ...rest\n}: ButtonProps) {\n  const classes = [variantClassName(variant), className]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <button type={type} className={classes} style={style} {...rest}>\n      {children}\n    </button>\n  )\n}\n\nexport { BUTTON_VARIANTS, type ButtonVariant }\nexport default Button\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACKA,MAAM,cAAe,WAAuC;AAE5D,MAAI,CAAC,aAAa;AAChB,UAAM,IAAI;AAAA,MACR;AAAA,IAEF;AAAA,EACF;AAEO,MAAM,WAAW,YAAY;AAC7B,MAAM,gBAAgB,YAAY;;;ACdlC,MAAM,kBAAkB;AAAA,IAC7B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAIO,MAAM,kBAAiC;AAEvC,WAAS,eAAe,SAAiC;AAC9D,QACE,WAAW,QACV,gBAAsC,SAAS,OAAO,GACvD;AACA,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT;AAEO,WAAS,iBAAiB,SAA0B;AACzD,WAAO,kBAAkB,eAAe,OAAO,CAAC;AAAA,EAClD;;;ACvBO,WAAS,IACd,MACA,OACA,KACc;AACd,UAAM,SAAS;AACf,WAAO,QAAQ,SACX,OAAO,MAAM,KAAK,IAClB,OAAO,MAAM,EAAE,GAAI,OAAmC,IAAI,CAAC;AAAA,EACjE;;;ACSO,WAAS,OAAO;AAAA,IACrB,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EACL,GAAgB;AACd,UAAM,UAAU,CAAC,iBAAiB,OAAO,GAAG,SAAS,EAClD,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,WACE,oBAAC,YAAO,MAAY,WAAW,SAAS,OAAe,GAAG,MACvD,UACH;AAAA,EAEJ;","names":[]}