@fxshelf/button-kit 0.1.0

package/dist/index.cjs

@@ -0,0 +1,47 @@
+"use client";
+'use strict';
+
+require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/react/Button.tsx
+
+// 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)}`;
+}
+function Button({
+  variant = "solid",
+  children,
+  className,
+  style,
+  type = "button",
+  ...rest
+}) {
+  const classes = [variantClassName(variant), className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { type, className: classes, style, ...rest, children });
+}
+
+exports.BUTTON_VARIANTS = BUTTON_VARIANTS;
+exports.Button = Button;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/variants.ts","../src/react/Button.tsx"],"names":["jsx"],"mappings":";;;;;;;;AACO,IAAM,eAAA,GAAkB;AAAA,EAC7B,OAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF;AAIO,IAAM,eAAA,GAAiC,OAAA;AAEvC,SAAS,eAAe,OAAA,EAAiC;AAC9D,EAAA,IACE,OAAA,IAAW,IAAA,IACV,eAAA,CAAsC,QAAA,CAAS,OAAO,CAAA,EACvD;AACA,IAAA,OAAO,OAAA;AAAA,EACT;AACA,EAAA,OAAO,eAAA;AACT;AAEO,SAAS,iBAAiB,OAAA,EAA0B;AACzD,EAAA,OAAO,CAAA,eAAA,EAAkB,cAAA,CAAe,OAAO,CAAC,CAAA,CAAA;AAClD;ACLO,SAAS,MAAA,CAAO;AAAA,EACrB,OAAA,GAAU,OAAA;AAAA,EACV,QAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA,GAAO,QAAA;AAAA,EACP,GAAG;AACL,CAAA,EAAgB;AACd,EAAA,MAAM,OAAA,GAAU,CAAC,gBAAA,CAAiB,OAAO,CAAA,EAAG,SAAS,CAAA,CAClD,MAAA,CAAO,OAAO,CAAA,CACd,IAAA,CAAK,GAAG,CAAA;AAEX,EAAA,uBACEA,cAAA,CAAC,YAAO,IAAA,EAAY,SAAA,EAAW,SAAS,KAAA,EAAe,GAAG,MACvD,QAAA,EACH,CAAA;AAEJ","file":"index.cjs","sourcesContent":["/** 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","'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"]}

package/dist/index.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=index.css.map */

package/dist/index.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/index.d.cts

@@ -0,0 +1,17 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode, CSSProperties } from 'react';
+
+/** Built-in button looks. Pass any of these as `variant`. */
+declare const BUTTON_VARIANTS: readonly ["solid", "outline", "soft", "glow", "neon", "shimmer", "chroma", "liquid", "wipe", "glass"];
+type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
+
+type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'style' | 'children'> & {
+    /** Switch look by name: solid | outline | soft | glow | neon | shimmer | chroma | liquid | wipe | glass. */
+    variant?: ButtonVariant | (string & {});
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+};
+declare function Button({ variant, children, className, style, type, ...rest }: ButtonProps): react.JSX.Element;
+
+export { BUTTON_VARIANTS, Button, type ButtonProps, type ButtonVariant };

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode, CSSProperties } from 'react';
+
+/** Built-in button looks. Pass any of these as `variant`. */
+declare const BUTTON_VARIANTS: readonly ["solid", "outline", "soft", "glow", "neon", "shimmer", "chroma", "liquid", "wipe", "glass"];
+type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
+
+type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'style' | 'children'> & {
+    /** Switch look by name: solid | outline | soft | glow | neon | shimmer | chroma | liquid | wipe | glass. */
+    variant?: ButtonVariant | (string & {});
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+};
+declare function Button({ variant, children, className, style, type, ...rest }: ButtonProps): react.JSX.Element;
+
+export { BUTTON_VARIANTS, Button, type ButtonProps, type ButtonVariant };

package/dist/index.js

@@ -0,0 +1,44 @@
+"use client";
+import 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/react/Button.tsx
+
+// 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)}`;
+}
+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 });
+}
+
+export { BUTTON_VARIANTS, Button };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/variants.ts","../src/react/Button.tsx"],"names":[],"mappings":";;;;;;AACO,IAAM,eAAA,GAAkB;AAAA,EAC7B,OAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF;AAIO,IAAM,eAAA,GAAiC,OAAA;AAEvC,SAAS,eAAe,OAAA,EAAiC;AAC9D,EAAA,IACE,OAAA,IAAW,IAAA,IACV,eAAA,CAAsC,QAAA,CAAS,OAAO,CAAA,EACvD;AACA,IAAA,OAAO,OAAA;AAAA,EACT;AACA,EAAA,OAAO,eAAA;AACT;AAEO,SAAS,iBAAiB,OAAA,EAA0B;AACzD,EAAA,OAAO,CAAA,eAAA,EAAkB,cAAA,CAAe,OAAO,CAAC,CAAA,CAAA;AAClD;ACLO,SAAS,MAAA,CAAO;AAAA,EACrB,OAAA,GAAU,OAAA;AAAA,EACV,QAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA,GAAO,QAAA;AAAA,EACP,GAAG;AACL,CAAA,EAAgB;AACd,EAAA,MAAM,OAAA,GAAU,CAAC,gBAAA,CAAiB,OAAO,CAAA,EAAG,SAAS,CAAA,CAClD,MAAA,CAAO,OAAO,CAAA,CACd,IAAA,CAAK,GAAG,CAAA;AAEX,EAAA,uBACE,GAAA,CAAC,YAAO,IAAA,EAAY,SAAA,EAAW,SAAS,KAAA,EAAe,GAAG,MACvD,QAAA,EACH,CAAA;AAEJ","file":"index.js","sourcesContent":["/** 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","'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"]}

package/docs/CDN/347/244/272/344/276/213.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>@fxshelf/button-kit · script 直引示例</title>
+  <!--
+    @fxshelf/button-kit 浏览器直引示例:零构建工具,React UMD + button-kit 浏览器产物。
+
+    资源走 npm CDN(需联网,包已发布为 @fxshelf/button-kit):
+      CSS: https://unpkg.com/@fxshelf/button-kit/dist/index.css
+      JS : https://unpkg.com/@fxshelf/button-kit/dist/button-kit.iife.js
+
+    本地已 build 时也可改成相对路径:
+      ../dist/index.css
+      ../dist/button-kit.iife.js
+
+    注意:不要用 jsDelivr 的 gh/.../dist 直链 —— dist/ 不进 Git,会 404。
+    注意:React 需用 18.x 的 UMD 版本 —— React 19 起官方不再提供 UMD 构建。
+  -->
+  <link rel="stylesheet" href="https://unpkg.com/@fxshelf/button-kit/dist/index.css" />
+  <style>
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      min-height: 100vh;
+      display: grid;
+      place-items: center;
+      gap: 1rem;
+      padding: 2rem;
+      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
+        "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+      background: #0f0f12;
+      color: #fafafa;
+    }
+    h1 { margin: 0 0 0.5rem; font-size: 1.5rem; }
+    p { margin: 0 0 1.5rem; opacity: 0.7; font-size: 0.95rem; }
+    #app { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
+  </style>
+</head>
+<body>
+  <div>
+    <h1>Button Kit</h1>
+    <p>零构建：React 18 UMD + <code>button-kit.iife.js</code>，全局 <code>ButtonKit</code>。</p>
+    <div id="app"></div>
+  </div>
+
+  <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>
+
+  <script>
+    var Button = ButtonKit.Button
+    var variants = ['solid', 'outline', 'soft', 'glow', 'neon', 'shimmer', 'chroma', 'liquid', 'wipe', 'glass']
+
+    ReactDOM.createRoot(document.getElementById('app')).render(
+      React.createElement(
+        React.Fragment,
+        null,
+        variants.map(function (v) {
+          return React.createElement(Button, { key: v, variant: v }, v)
+        }),
+      ),
+    )
+  </script>
+</body>
+</html>

package/docs//344/275/277/347/224/250/350/257/264/346/230/216.md

@@ -0,0 +1,72 @@
+# 使用说明
+
+## 安装
+
+```bash
+npm install @fxshelf/button-kit
+```
+
+记得引入样式：
+
+```ts
+import '@fxshelf/button-kit/styles.css'
+```
+
+## React
+
+```tsx
+import { Button } from '@fxshelf/button-kit'
+import '@fxshelf/button-kit/styles.css'
+
+<Button variant="glow">继续</Button>
+```
+
+## 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>
+```
+
+## CDN（React 18 UMD）
+
+需先加载 React 18 UMD，再加载 IIFE，并引入 CSS。完整页面见 [CDN示例.html](./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>
+<script>
+  ReactDOM.createRoot(document.getElementById('app')).render(
+    React.createElement(ButtonKit.Button, { variant: 'glow' }, '继续'),
+  )
+</script>
+```
+
+## 复制源码
+
+拷贝 `src/core`（含 `styles.css`）与 `src/react` 或 `src/vue`，保持同级目录即可。
+
+## variant
+
+| 值 | 效果 |
+|----|------|
+| `solid` | 实心深色 |
+| `outline` | 描边，悬停填实 |
+| `soft` | 浅色软按钮 |
+| `glow` | 呼吸光晕 |
+| `neon` | 霓虹描边 |
+| `shimmer` | 悬停扫光 |
+| `chroma` | 炫彩流光（默认动画）；hover 贴边高斯光晕 |
+| `liquid` | 底部液体升起填充 |
+| `wipe` | 斜向擦除填充 |
+| `glass` | 毛玻璃半透明 |
+
+未知字符串会回退到 `solid`。

package/docs//345/212/250/346/225/210/350/257/264/346/230/216-/344/270/223/344/270/232.md

@@ -0,0 +1,14 @@
+# 动效说明（专业）
+
+Button Kit 是一组纯 CSS 按钮变体：共享 `.fx-btn` 基类，按 `variant` 挂载 `.fx-btn--*` 修饰符。
+
+- `chroma`：默认渐变流光；hover 时 `::before`（`inset: -4px`）以轻微 blur 贴边发光
+- `liquid`：`::before` 自下而上升起，hover 后轻微波浪形变
+- `wipe`：斜向层从左擦入
+- `glass`：半透明 + `backdrop-filter`
+- `glow`：无限 `box-shadow` 脉冲
+- `shimmer`：`::before` 斜向高光平移
+- `neon`：描边 + 外发光 + 文字阴影
+- 其余为 hover / active 过渡
+
+无 JS 动画循环（除 CSS `@keyframes`），无 Framer / GSAP。

package/docs//345/212/250/346/225/210/350/257/264/346/230/216-/345/244/247/347/231/275/350/257/235.md

@@ -0,0 +1,5 @@
+# 动效说明（大白话）
+
+传一个字符串（比如 `"liquid"`），按钮就换一套样子。
+
+现在有：实心、描边、软色、发光、霓虹、扫光、炫彩、液体升起、斜擦填充、毛玻璃。不依赖动画库。