react-tech-ui 1.0.2 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -71,7 +71,12 @@ npm install
71
71
  npm run dev
72
72
  ```
73
73
 
74
- 启动后访问 http://localhost:3000 查看组件库大屏演示效果。
74
+ 启动后访问 http://localhost:3000 查看组件库演示页面。
75
+
76
+ Demo 包含:
77
+ - **首页** — 组件库概览和导航
78
+ - **快速上手** — 安装引入说明
79
+ - **组件文档** — 20 个组件的交互式演示 + 代码示例 + Props 说明
75
80
 
76
81
  ### 构建组件库
77
82
 
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../chunks/jsx-runtime-7asRZgsb.cjs");const t=require("../chunks/FloatingButton-nOl8ZHul.cjs");exports.FloatingButton=t.FloatingButton;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../chunks/jsx-runtime-7asRZgsb.cjs");const t=require("../chunks/FloatingButton-Cr-iBsbx.cjs");exports.FloatingButton=t.FloatingButton;
@@ -1,5 +1,5 @@
1
1
  import "../chunks/jsx-runtime-C6iVud2f.js";
2
- import { F as a } from "../chunks/FloatingButton-DcNfUVcB.js";
2
+ import { F as a } from "../chunks/FloatingButton-cdLpsxpb.js";
3
3
  export {
4
4
  a as FloatingButton
5
5
  };
@@ -0,0 +1 @@
1
+ "use strict";const c=require("./jsx-runtime-7asRZgsb.cjs"),a=require("react"),H=require("react-dom"),W=require("./index-pCtiW2Id.cjs"),I=require("./ThemeProvider-CGtZuVnU.cjs");function q(e,n){switch(n.type){case"show":return{visible:!0,options:n.options||{}};case"hide":return{...e,visible:!1};case"update":return{...e,options:{...e.options,...n.options}};default:return e}}const B=({visible:e,options:n,pos:o,setPos:b})=>{const M=a.useRef(null),[s,v]=a.useState(!1),[f,E]=a.useState(!1),x=a.useRef({mx:0,my:0,bx:0,by:0}),[P,y]=a.useState(!1),l=n.size??48,m=n.draggable??!0,h=n.edgeSnap??!0,d=n.snapThreshold??60,w=n.variant??"default",{themeVars:g}=I.useTheme(),_=a.useCallback((t,r)=>{const u=window.innerWidth-l,j=window.innerHeight-l;return{x:Math.max(0,Math.min(t,u)),y:Math.max(0,Math.min(r,j))}},[l]),C=a.useCallback((t,r)=>{if(!h)return{x:t,y:r};const u=window.innerWidth/2;return{x:t+l/2<u?d:window.innerWidth-l-d,y:r}},[h,l,d]);a.useEffect(()=>{if(!e)return;const t=n.position==="left"?{x:d,y:window.innerHeight-l-80}:n.position==="right"?{x:window.innerWidth-l-24,y:window.innerHeight-l-80}:n.initialPosition&&n.initialPosition.x!==void 0&&n.initialPosition.y!==void 0?{x:n.initialPosition.x,y:n.initialPosition.y}:{x:window.innerWidth-l-24,y:window.innerHeight-l-80};b(t)},[e,n.position,n.initialPosition,l,d]);const N=a.useCallback(t=>{m&&(t.preventDefault(),v(!0),E(!1),x.current={mx:t.clientX,my:t.clientY,bx:o.x,by:o.y},t.target.setPointerCapture(t.pointerId))},[m,o]),S=a.useCallback(t=>{if(!s)return;const r=t.clientX-x.current.mx,u=t.clientY-x.current.my;(Math.abs(r)>3||Math.abs(u)>3)&&E(!0);const j=x.current.bx+r,Y=x.current.by+u;b(_(j,Y))},[s,_]),k=a.useCallback(()=>{var t,r;if(s)if(v(!1),f&&h){const u=C(o.x,o.y);b(u),(t=n.onDragEnd)==null||t.call(n,u)}else f&&((r=n.onDragEnd)==null||r.call(n,o))},[s,f,h,C,o,n]),z=a.useCallback(t=>{var r;f||(r=n.onClick)==null||r.call(n,t)},[f,n]);a.useEffect(()=>{if(!m)return;const t=()=>{b(r=>_(r.x,r.y))};return window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[m,_,b]);const X=a.useMemo(()=>({"--tech-fab-primary":g["--tech-primary"],"--tech-fab-glow":g["--tech-glow-primary"],"--tech-fab-border":g["--tech-border"],"--tech-fab-border-active":g["--tech-border-active"],"--tech-fab-bg-card":g["--tech-bg-card"],"--tech-fab-text-primary":g["--tech-text-primary"],"--tech-fab-size":`${l}px`}),[g,l]),i={position:"fixed",left:o.x,top:o.y,zIndex:9999};return e?H.createPortal(c.jsxRuntimeExports.jsxs("div",{ref:M,className:W.clsx("tech-fab",`tech-fab--${w}`,s&&"tech-fab--dragging",P&&"tech-fab--hovered",m&&"tech-fab--draggable",n.className),style:{...X,...i,...n.style},onPointerDown:m?N:void 0,onPointerMove:m?S:void 0,onPointerUp:m?k:void 0,onClick:z,onMouseEnter:()=>y(!0),onMouseLeave:()=>y(!1),role:"button",tabIndex:0,children:[c.jsxRuntimeExports.jsx("div",{className:"tech-fab__corner tech-fab__corner--tl"}),c.jsxRuntimeExports.jsx("div",{className:"tech-fab__corner tech-fab__corner--tr"}),c.jsxRuntimeExports.jsx("div",{className:"tech-fab__corner tech-fab__corner--bl"}),c.jsxRuntimeExports.jsx("div",{className:"tech-fab__corner tech-fab__corner--br"}),c.jsxRuntimeExports.jsx("div",{className:"tech-fab__pulse"}),c.jsxRuntimeExports.jsxs("div",{className:"tech-fab__content",children:[n.icon&&c.jsxRuntimeExports.jsx("span",{className:"tech-fab__icon",children:n.icon}),n.children&&c.jsxRuntimeExports.jsx("span",{className:"tech-fab__label",children:n.children})]})]}),document.body):null};let D=null;const L=()=>{const[e,n]=a.useReducer(q,{visible:!1,options:{}}),[o,b]=a.useState({x:0,y:0});return a.useEffect(()=>{D={state:e,dispatch:n,pos:o,setPos:b}},[e,o]),c.jsxRuntimeExports.jsx(B,{visible:e.visible,options:e.options,pos:o,setPos:b})};function T(){if(!D){const e=document.createElement("div");document.body.appendChild(e);const{createRoot:n}=require("react-dom/client");n(e).render(a.createElement(L))}return D}const R=a.forwardRef((e,n)=>{const[o,b]=a.useState(!1),M=a.useRef(null),[s,v]=a.useState(()=>{var i,t;return{x:((i=e.initialPosition)==null?void 0:i.x)??window.innerWidth-e.size-24,y:((t=e.initialPosition)==null?void 0:t.y)??window.innerHeight-e.size-80}}),[f,E]=a.useState(!1),[x,P]=a.useState(!1),y=a.useRef({mx:0,my:0,bx:0,by:0}),[l,m]=a.useState(!1),{themeVars:h}=I.useTheme(),d=e.size??48,w=a.useCallback((i,t)=>{const r=window.innerWidth-d,u=window.innerHeight-d;return{x:Math.max(0,Math.min(i,r)),y:Math.max(0,Math.min(t,u))}},[d]),g=a.useCallback((i,t)=>{if(!e.edgeSnap)return{x:i,y:t};const r=window.innerWidth/2;return{x:i+d/2<r?e.snapThreshold:window.innerWidth-d-e.snapThreshold,y:t}},[e.edgeSnap,d,e.snapThreshold]),_=a.useCallback(i=>{e.draggable&&(i.preventDefault(),E(!0),P(!1),y.current={mx:i.clientX,my:i.clientY,bx:s.x,by:s.y},i.target.setPointerCapture(i.pointerId))},[e.draggable,s]),C=a.useCallback(i=>{if(!f)return;const t=i.clientX-y.current.mx,r=i.clientY-y.current.my;(Math.abs(t)>3||Math.abs(r)>3)&&P(!0);const u=y.current.bx+t,j=y.current.by+r;v(w(u,j))},[f,w]),N=a.useCallback(()=>{var i,t;if(f)if(E(!1),x&&e.edgeSnap){const r=g(s.x,s.y);v(r),(i=e.onDragEnd)==null||i.call(e,r)}else x&&((t=e.onDragEnd)==null||t.call(e,s))},[f,x,e.edgeSnap,g,s,e]),S=a.useCallback(i=>{var t;x||(t=e.onClick)==null||t.call(e,i)},[x,e]);a.useEffect(()=>{if(!e.draggable)return;const i=()=>{v(t=>w(t.x,t.y))};return window.addEventListener("resize",i),()=>window.removeEventListener("resize",i)},[e.draggable,w]);const k=a.useMemo(()=>({"--tech-fab-primary":h["--tech-primary"],"--tech-fab-glow":h["--tech-glow-primary"],"--tech-fab-border":h["--tech-border"],"--tech-fab-border-active":h["--tech-border-active"],"--tech-fab-bg-card":h["--tech-bg-card"],"--tech-fab-text-primary":h["--tech-text-primary"],"--tech-fab-size":`${d}px`}),[h,d]),z=e.draggable?{position:"fixed",left:s.x,top:s.y,zIndex:9999}:{position:"fixed",right:24,bottom:80,zIndex:9999};if(a.useImperativeHandle(n,()=>({show:()=>b(!0),hide:()=>b(!1),update:i=>{var t,r;v({x:((t=i.initialPosition)==null?void 0:t.x)??s.x,y:((r=i.initialPosition)==null?void 0:r.y)??s.y})}})),!o)return null;const X=c.jsxRuntimeExports.jsxs("div",{ref:M,className:W.clsx("tech-fab",`tech-fab--${e.variant}`,f&&"tech-fab--dragging",l&&"tech-fab--hovered",e.draggable&&"tech-fab--draggable",e.className),style:{...k,...z,...e.style},onPointerDown:e.draggable?_:void 0,onPointerMove:e.draggable?C:void 0,onPointerUp:e.draggable?N:void 0,onClick:S,onMouseEnter:()=>m(!0),onMouseLeave:()=>m(!1),role:"button",tabIndex:0,children:[c.jsxRuntimeExports.jsx("div",{className:"tech-fab__corner tech-fab__corner--tl"}),c.jsxRuntimeExports.jsx("div",{className:"tech-fab__corner tech-fab__corner--tr"}),c.jsxRuntimeExports.jsx("div",{className:"tech-fab__corner tech-fab__corner--bl"}),c.jsxRuntimeExports.jsx("div",{className:"tech-fab__corner tech-fab__corner--br"}),c.jsxRuntimeExports.jsx("div",{className:"tech-fab__pulse"}),c.jsxRuntimeExports.jsxs("div",{className:"tech-fab__content",children:[e.icon&&c.jsxRuntimeExports.jsx("span",{className:"tech-fab__icon",children:e.icon}),e.children&&c.jsxRuntimeExports.jsx("span",{className:"tech-fab__label",children:e.children})]})]});return H.createPortal(X,document.body)});R.displayName="TechFloatingButton";R.show=(e={})=>{T().dispatch({type:"show",options:e})};R.hide=()=>{T().dispatch({type:"hide"})};R.update=e=>{T().dispatch({type:"update",options:e})};exports.FloatingButton=R;
@@ -0,0 +1,250 @@
1
+ import { j as r } from "./jsx-runtime-C6iVud2f.js";
2
+ import U, { forwardRef as V, useState as y, useRef as E, useCallback as f, useEffect as X, useMemo as k, useImperativeHandle as q, useReducer as A } from "react";
3
+ import { createPortal as L } from "react-dom";
4
+ import { c as $ } from "./index-CcykAxZN.js";
5
+ import { u as B } from "./ThemeProvider-uEdKkbFn.js";
6
+ function G(e, n) {
7
+ switch (n.type) {
8
+ case "show":
9
+ return { visible: !0, options: n.options || {} };
10
+ case "hide":
11
+ return { ...e, visible: !1 };
12
+ case "update":
13
+ return { ...e, options: { ...e.options, ...n.options } };
14
+ default:
15
+ return e;
16
+ }
17
+ }
18
+ const J = ({ visible: e, options: n, pos: o, setPos: b }) => {
19
+ const S = E(null), [c, w] = y(!1), [u, j] = y(!1), m = E({ mx: 0, my: 0, bx: 0, by: 0 }), [N, v] = y(!1), d = n.size ?? 48, g = n.draggable ?? !0, h = n.edgeSnap ?? !0, s = n.snapThreshold ?? 60, _ = n.variant ?? "default", { themeVars: x } = B(), M = f((t, i) => {
20
+ const l = window.innerWidth - d, P = window.innerHeight - d;
21
+ return {
22
+ x: Math.max(0, Math.min(t, l)),
23
+ y: Math.max(0, Math.min(i, P))
24
+ };
25
+ }, [d]), z = f((t, i) => {
26
+ if (!h) return { x: t, y: i };
27
+ const l = window.innerWidth / 2;
28
+ return { x: t + d / 2 < l ? s : window.innerWidth - d - s, y: i };
29
+ }, [h, d, s]);
30
+ X(() => {
31
+ if (!e) return;
32
+ const t = n.position === "left" ? { x: s, y: window.innerHeight - d - 80 } : n.position === "right" ? { x: window.innerWidth - d - 24, y: window.innerHeight - d - 80 } : n.initialPosition && n.initialPosition.x !== void 0 && n.initialPosition.y !== void 0 ? { x: n.initialPosition.x, y: n.initialPosition.y } : { x: window.innerWidth - d - 24, y: window.innerHeight - d - 80 };
33
+ b(t);
34
+ }, [e, n.position, n.initialPosition, d, s]);
35
+ const D = f((t) => {
36
+ g && (t.preventDefault(), w(!0), j(!1), m.current = {
37
+ mx: t.clientX,
38
+ my: t.clientY,
39
+ bx: o.x,
40
+ by: o.y
41
+ }, t.target.setPointerCapture(t.pointerId));
42
+ }, [g, o]), R = f((t) => {
43
+ if (!c) return;
44
+ const i = t.clientX - m.current.mx, l = t.clientY - m.current.my;
45
+ (Math.abs(i) > 3 || Math.abs(l) > 3) && j(!0);
46
+ const P = m.current.bx + i, F = m.current.by + l;
47
+ b(M(P, F));
48
+ }, [c, M]), H = f(() => {
49
+ var t, i;
50
+ if (c)
51
+ if (w(!1), u && h) {
52
+ const l = z(o.x, o.y);
53
+ b(l), (t = n.onDragEnd) == null || t.call(n, l);
54
+ } else u && ((i = n.onDragEnd) == null || i.call(n, o));
55
+ }, [c, u, h, z, o, n]), T = f((t) => {
56
+ var i;
57
+ u || (i = n.onClick) == null || i.call(n, t);
58
+ }, [u, n]);
59
+ X(() => {
60
+ if (!g) return;
61
+ const t = () => {
62
+ b((i) => M(i.x, i.y));
63
+ };
64
+ return window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
65
+ }, [g, M, b]);
66
+ const W = k(() => ({
67
+ "--tech-fab-primary": x["--tech-primary"],
68
+ "--tech-fab-glow": x["--tech-glow-primary"],
69
+ "--tech-fab-border": x["--tech-border"],
70
+ "--tech-fab-border-active": x["--tech-border-active"],
71
+ "--tech-fab-bg-card": x["--tech-bg-card"],
72
+ "--tech-fab-text-primary": x["--tech-text-primary"],
73
+ "--tech-fab-size": `${d}px`
74
+ }), [x, d]), a = {
75
+ position: "fixed",
76
+ left: o.x,
77
+ top: o.y,
78
+ zIndex: 9999
79
+ };
80
+ return e ? L(
81
+ /* @__PURE__ */ r.jsxs(
82
+ "div",
83
+ {
84
+ ref: S,
85
+ className: $(
86
+ "tech-fab",
87
+ `tech-fab--${_}`,
88
+ c && "tech-fab--dragging",
89
+ N && "tech-fab--hovered",
90
+ g && "tech-fab--draggable",
91
+ n.className
92
+ ),
93
+ style: { ...W, ...a, ...n.style },
94
+ onPointerDown: g ? D : void 0,
95
+ onPointerMove: g ? R : void 0,
96
+ onPointerUp: g ? H : void 0,
97
+ onClick: T,
98
+ onMouseEnter: () => v(!0),
99
+ onMouseLeave: () => v(!1),
100
+ role: "button",
101
+ tabIndex: 0,
102
+ children: [
103
+ /* @__PURE__ */ r.jsx("div", { className: "tech-fab__corner tech-fab__corner--tl" }),
104
+ /* @__PURE__ */ r.jsx("div", { className: "tech-fab__corner tech-fab__corner--tr" }),
105
+ /* @__PURE__ */ r.jsx("div", { className: "tech-fab__corner tech-fab__corner--bl" }),
106
+ /* @__PURE__ */ r.jsx("div", { className: "tech-fab__corner tech-fab__corner--br" }),
107
+ /* @__PURE__ */ r.jsx("div", { className: "tech-fab__pulse" }),
108
+ /* @__PURE__ */ r.jsxs("div", { className: "tech-fab__content", children: [
109
+ n.icon && /* @__PURE__ */ r.jsx("span", { className: "tech-fab__icon", children: n.icon }),
110
+ n.children && /* @__PURE__ */ r.jsx("span", { className: "tech-fab__label", children: n.children })
111
+ ] })
112
+ ]
113
+ }
114
+ ),
115
+ document.body
116
+ ) : null;
117
+ };
118
+ let I = null;
119
+ const K = () => {
120
+ const [e, n] = A(G, { visible: !1, options: {} }), [o, b] = y({ x: 0, y: 0 });
121
+ return X(() => {
122
+ I = { state: e, dispatch: n, pos: o, setPos: b };
123
+ }, [e, o]), /* @__PURE__ */ r.jsx(J, { visible: e.visible, options: e.options, pos: o, setPos: b });
124
+ };
125
+ function Y() {
126
+ if (!I) {
127
+ const e = document.createElement("div");
128
+ document.body.appendChild(e);
129
+ const { createRoot: n } = require("react-dom/client");
130
+ n(e).render(U.createElement(K));
131
+ }
132
+ return I;
133
+ }
134
+ const C = V((e, n) => {
135
+ const [o, b] = y(!1), S = E(null), [c, w] = y(() => {
136
+ var a, t;
137
+ return {
138
+ x: ((a = e.initialPosition) == null ? void 0 : a.x) ?? window.innerWidth - e.size - 24,
139
+ y: ((t = e.initialPosition) == null ? void 0 : t.y) ?? window.innerHeight - e.size - 80
140
+ };
141
+ }), [u, j] = y(!1), [m, N] = y(!1), v = E({ mx: 0, my: 0, bx: 0, by: 0 }), [d, g] = y(!1), { themeVars: h } = B(), s = e.size ?? 48, _ = f((a, t) => {
142
+ const i = window.innerWidth - s, l = window.innerHeight - s;
143
+ return {
144
+ x: Math.max(0, Math.min(a, i)),
145
+ y: Math.max(0, Math.min(t, l))
146
+ };
147
+ }, [s]), x = f((a, t) => {
148
+ if (!e.edgeSnap) return { x: a, y: t };
149
+ const i = window.innerWidth / 2;
150
+ return { x: a + s / 2 < i ? e.snapThreshold : window.innerWidth - s - e.snapThreshold, y: t };
151
+ }, [e.edgeSnap, s, e.snapThreshold]), M = f((a) => {
152
+ e.draggable && (a.preventDefault(), j(!0), N(!1), v.current = {
153
+ mx: a.clientX,
154
+ my: a.clientY,
155
+ bx: c.x,
156
+ by: c.y
157
+ }, a.target.setPointerCapture(a.pointerId));
158
+ }, [e.draggable, c]), z = f((a) => {
159
+ if (!u) return;
160
+ const t = a.clientX - v.current.mx, i = a.clientY - v.current.my;
161
+ (Math.abs(t) > 3 || Math.abs(i) > 3) && N(!0);
162
+ const l = v.current.bx + t, P = v.current.by + i;
163
+ w(_(l, P));
164
+ }, [u, _]), D = f(() => {
165
+ var a, t;
166
+ if (u)
167
+ if (j(!1), m && e.edgeSnap) {
168
+ const i = x(c.x, c.y);
169
+ w(i), (a = e.onDragEnd) == null || a.call(e, i);
170
+ } else m && ((t = e.onDragEnd) == null || t.call(e, c));
171
+ }, [u, m, e.edgeSnap, x, c, e]), R = f((a) => {
172
+ var t;
173
+ m || (t = e.onClick) == null || t.call(e, a);
174
+ }, [m, e]);
175
+ X(() => {
176
+ if (!e.draggable) return;
177
+ const a = () => {
178
+ w((t) => _(t.x, t.y));
179
+ };
180
+ return window.addEventListener("resize", a), () => window.removeEventListener("resize", a);
181
+ }, [e.draggable, _]);
182
+ const H = k(() => ({
183
+ "--tech-fab-primary": h["--tech-primary"],
184
+ "--tech-fab-glow": h["--tech-glow-primary"],
185
+ "--tech-fab-border": h["--tech-border"],
186
+ "--tech-fab-border-active": h["--tech-border-active"],
187
+ "--tech-fab-bg-card": h["--tech-bg-card"],
188
+ "--tech-fab-text-primary": h["--tech-text-primary"],
189
+ "--tech-fab-size": `${s}px`
190
+ }), [h, s]), T = e.draggable ? { position: "fixed", left: c.x, top: c.y, zIndex: 9999 } : { position: "fixed", right: 24, bottom: 80, zIndex: 9999 };
191
+ if (q(n, () => ({
192
+ show: () => b(!0),
193
+ hide: () => b(!1),
194
+ update: (a) => {
195
+ var t, i;
196
+ w({
197
+ x: ((t = a.initialPosition) == null ? void 0 : t.x) ?? c.x,
198
+ y: ((i = a.initialPosition) == null ? void 0 : i.y) ?? c.y
199
+ });
200
+ }
201
+ })), !o) return null;
202
+ const W = /* @__PURE__ */ r.jsxs(
203
+ "div",
204
+ {
205
+ ref: S,
206
+ className: $(
207
+ "tech-fab",
208
+ `tech-fab--${e.variant}`,
209
+ u && "tech-fab--dragging",
210
+ d && "tech-fab--hovered",
211
+ e.draggable && "tech-fab--draggable",
212
+ e.className
213
+ ),
214
+ style: { ...H, ...T, ...e.style },
215
+ onPointerDown: e.draggable ? M : void 0,
216
+ onPointerMove: e.draggable ? z : void 0,
217
+ onPointerUp: e.draggable ? D : void 0,
218
+ onClick: R,
219
+ onMouseEnter: () => g(!0),
220
+ onMouseLeave: () => g(!1),
221
+ role: "button",
222
+ tabIndex: 0,
223
+ children: [
224
+ /* @__PURE__ */ r.jsx("div", { className: "tech-fab__corner tech-fab__corner--tl" }),
225
+ /* @__PURE__ */ r.jsx("div", { className: "tech-fab__corner tech-fab__corner--tr" }),
226
+ /* @__PURE__ */ r.jsx("div", { className: "tech-fab__corner tech-fab__corner--bl" }),
227
+ /* @__PURE__ */ r.jsx("div", { className: "tech-fab__corner tech-fab__corner--br" }),
228
+ /* @__PURE__ */ r.jsx("div", { className: "tech-fab__pulse" }),
229
+ /* @__PURE__ */ r.jsxs("div", { className: "tech-fab__content", children: [
230
+ e.icon && /* @__PURE__ */ r.jsx("span", { className: "tech-fab__icon", children: e.icon }),
231
+ e.children && /* @__PURE__ */ r.jsx("span", { className: "tech-fab__label", children: e.children })
232
+ ] })
233
+ ]
234
+ }
235
+ );
236
+ return L(W, document.body);
237
+ });
238
+ C.displayName = "TechFloatingButton";
239
+ C.show = (e = {}) => {
240
+ Y().dispatch({ type: "show", options: e });
241
+ };
242
+ C.hide = () => {
243
+ Y().dispatch({ type: "hide" });
244
+ };
245
+ C.update = (e) => {
246
+ Y().dispatch({ type: "update", options: e });
247
+ };
248
+ export {
249
+ C as F
250
+ };
@@ -1,8 +1,8 @@
1
- import { default as React } from 'react';
1
+ import { default as React, ReactNode } from 'react';
2
2
 
3
3
  export interface FloatingButtonProps {
4
4
  icon?: React.ReactNode;
5
- children?: React.ReactNode;
5
+ children?: ReactNode;
6
6
  variant?: 'default' | 'neon' | 'glow' | 'glass';
7
7
  size?: number;
8
8
  draggable?: boolean;
@@ -20,5 +20,21 @@ export interface FloatingButtonProps {
20
20
  className?: string;
21
21
  style?: React.CSSProperties;
22
22
  }
23
- export declare const FloatingButton: React.FC<FloatingButtonProps>;
23
+ export interface FloatingButtonRef {
24
+ show: () => void;
25
+ hide: () => void;
26
+ update: (props: FloatingButtonOptions) => void;
27
+ }
28
+ export type FloatingButtonPosition = 'left' | 'right';
29
+ export interface FloatingButtonOptions extends Omit<FloatingButtonProps, 'initialPosition'> {
30
+ position?: FloatingButtonPosition | {
31
+ x: number;
32
+ y: number;
33
+ };
34
+ initialPosition?: {
35
+ x?: number;
36
+ y?: number;
37
+ };
38
+ }
39
+ export declare const FloatingButton: React.ForwardRefExoticComponent<FloatingButtonProps & React.RefAttributes<FloatingButtonRef>>;
24
40
  export default FloatingButton;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../chunks/jsx-runtime-7asRZgsb.cjs");const o=require("../theme/index.cjs"),t=require("../chunks/DataCard-DjcUGxo9.cjs"),n=require("../chunks/DecorationLine-Be4QQyry.cjs"),i=require("../chunks/DigitalNumber-BWP5OjvN.cjs"),c=require("../chunks/FlowLight-DLBCaU07.cjs"),a=require("../chunks/Modal-DxqX4m57.cjs"),s=require("../chunks/ScreenAdapter-DpfmLRd5.cjs"),u=require("../chunks/ScrollTable-B21j9zGn.cjs"),l=require("../chunks/StatusIndicator-DhPwugAy.cjs"),T=require("../chunks/TechBorder-KTRXvzVv.cjs"),h=require("../chunks/TechButton-DYdIWO-l.cjs"),d=require("../chunks/TechTitle-B3pkYIbI.cjs"),m=require("../chunks/Drawer-CuoztnnD.cjs"),q=require("../chunks/FloatingButton-nOl8ZHul.cjs"),r=require("../chunks/Icon-ISAK5vLx.cjs"),S=require("../chunks/Masonry-LPU0R1mE.cjs"),D=require("../chunks/Popconfirm-CgPdSp84.cjs"),g=require("../chunks/QRCode-B2Sdq1f6.cjs"),b=require("../chunks/Skeleton-CKvua4DB.cjs"),e=require("../chunks/ThemeProvider-CGtZuVnU.cjs"),p=require("../chunks/Toast-CedBaeZV.cjs");exports.techTheme=o.techTheme;exports.DataCard=t.DataCard;exports.DecorationLine=n.DecorationLine;exports.DigitalNumber=i.DigitalNumber;exports.FlowLight=c.FlowLight;exports.Modal=a.Modal;exports.ScreenAdapter=s.ScreenAdapter;exports.ScrollTable=u.ScrollTable;exports.StatusIndicator=l.StatusIndicator;exports.TechBorder=T.TechBorder;exports.TechButton=h.TechButton;exports.TechTitle=d.TechTitle;exports.Drawer=m.Drawer;exports.FloatingButton=q.FloatingButton;exports.Icon=r.Icon;exports.iconNames=r.iconNames;exports.Masonry=S.Masonry;exports.Popconfirm=D.Popconfirm;exports.QRCode=g.QRCodeComponent;exports.Skeleton=b.Skeleton;exports.ThemeProvider=e.ThemeProvider;exports.presetThemes=e.presetThemes;exports.themeLabels=e.themeLabels;exports.useTheme=e.useTheme;exports.Toast=p.Toast;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../chunks/jsx-runtime-7asRZgsb.cjs");const o=require("../theme/index.cjs"),t=require("../chunks/DataCard-DjcUGxo9.cjs"),n=require("../chunks/DecorationLine-Be4QQyry.cjs"),i=require("../chunks/DigitalNumber-BWP5OjvN.cjs"),c=require("../chunks/FlowLight-DLBCaU07.cjs"),a=require("../chunks/Modal-DxqX4m57.cjs"),s=require("../chunks/ScreenAdapter-DpfmLRd5.cjs"),u=require("../chunks/ScrollTable-B21j9zGn.cjs"),l=require("../chunks/StatusIndicator-DhPwugAy.cjs"),T=require("../chunks/TechBorder-KTRXvzVv.cjs"),h=require("../chunks/TechButton-DYdIWO-l.cjs"),d=require("../chunks/TechTitle-B3pkYIbI.cjs"),m=require("../chunks/Drawer-CuoztnnD.cjs"),q=require("../chunks/FloatingButton-Cr-iBsbx.cjs"),r=require("../chunks/Icon-ISAK5vLx.cjs"),S=require("../chunks/Masonry-LPU0R1mE.cjs"),D=require("../chunks/Popconfirm-CgPdSp84.cjs"),g=require("../chunks/QRCode-B2Sdq1f6.cjs"),b=require("../chunks/Skeleton-CKvua4DB.cjs"),e=require("../chunks/ThemeProvider-CGtZuVnU.cjs"),p=require("../chunks/Toast-CedBaeZV.cjs");exports.techTheme=o.techTheme;exports.DataCard=t.DataCard;exports.DecorationLine=n.DecorationLine;exports.DigitalNumber=i.DigitalNumber;exports.FlowLight=c.FlowLight;exports.Modal=a.Modal;exports.ScreenAdapter=s.ScreenAdapter;exports.ScrollTable=u.ScrollTable;exports.StatusIndicator=l.StatusIndicator;exports.TechBorder=T.TechBorder;exports.TechButton=h.TechButton;exports.TechTitle=d.TechTitle;exports.Drawer=m.Drawer;exports.FloatingButton=q.FloatingButton;exports.Icon=r.Icon;exports.iconNames=r.iconNames;exports.Masonry=S.Masonry;exports.Popconfirm=D.Popconfirm;exports.QRCode=g.QRCodeComponent;exports.Skeleton=b.Skeleton;exports.ThemeProvider=e.ThemeProvider;exports.presetThemes=e.presetThemes;exports.themeLabels=e.themeLabels;exports.useTheme=e.useTheme;exports.Toast=p.Toast;
@@ -12,7 +12,7 @@ import { T as M } from "../chunks/TechBorder-Cu-JqkTf.js";
12
12
  import { T as g } from "../chunks/TechButton-CTrXjlsD.js";
13
13
  import { T as I } from "../chunks/TechTitle-DfLwdrV5.js";
14
14
  import { D as P } from "../chunks/Drawer-u77zScbz.js";
15
- import { F as C } from "../chunks/FloatingButton-DcNfUVcB.js";
15
+ import { F as C } from "../chunks/FloatingButton-cdLpsxpb.js";
16
16
  import { I as Q, i as k } from "../chunks/Icon-HxIzkEdE.js";
17
17
  import { M as y } from "../chunks/Masonry-CxVB3-w9.js";
18
18
  import { P as R } from "../chunks/Popconfirm-C3npOXd6.js";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-tech-ui",
3
- "version": "1.0.2",
3
+ "version": "1.0.3",
4
4
  "description": "科技风格React UI组件库,支持大屏页面使用",
5
5
  "main": "dist/index/index.cjs",
6
6
  "module": "dist/index/index.js",
@@ -1,109 +0,0 @@
1
- import { j as s } from "./jsx-runtime-C6iVud2f.js";
2
- import { useRef as R, useState as _, useCallback as m, useEffect as G, useMemo as J } from "react";
3
- import { createPortal as K } from "react-dom";
4
- import { c as O } from "./index-CcykAxZN.js";
5
- import { u as P } from "./ThemeProvider-uEdKkbFn.js";
6
- const Q = ({
7
- icon: w,
8
- children: M,
9
- variant: W = "default",
10
- size: t = 48,
11
- draggable: c = !1,
12
- initialPosition: f,
13
- edgeSnap: u = !0,
14
- snapThreshold: v = 60,
15
- onClick: i,
16
- onDragEnd: o,
17
- className: Y,
18
- style: F
19
- }) => {
20
- const { themeVars: a } = P(), H = R(null), [n, y] = _(() => ({
21
- x: (f == null ? void 0 : f.x) ?? window.innerWidth - t - 24,
22
- y: (f == null ? void 0 : f.y) ?? window.innerHeight - t - 80
23
- })), [b, j] = _(!1), [d, N] = _(!1), x = R({ mx: 0, my: 0, bx: 0, by: 0 }), [L, X] = _(!1), l = m((e, r) => {
24
- const h = window.innerWidth - t, p = window.innerHeight - t;
25
- return {
26
- x: Math.max(0, Math.min(e, h)),
27
- y: Math.max(0, Math.min(r, p))
28
- };
29
- }, [t]), I = m((e, r) => {
30
- if (!u) return { x: e, y: r };
31
- const h = window.innerWidth / 2;
32
- return { x: e + t / 2 < h ? v : window.innerWidth - t - v, y: r };
33
- }, [u, t, v]), B = m((e) => {
34
- c && (e.preventDefault(), j(!0), N(!1), x.current = {
35
- mx: e.clientX,
36
- my: e.clientY,
37
- bx: n.x,
38
- by: n.y
39
- }, e.target.setPointerCapture(e.pointerId));
40
- }, [c, n]), U = m((e) => {
41
- if (!b) return;
42
- const r = e.clientX - x.current.mx, h = e.clientY - x.current.my;
43
- (Math.abs(r) > 3 || Math.abs(h) > 3) && N(!0);
44
- const p = x.current.bx + r, A = x.current.by + h;
45
- y(l(p, A));
46
- }, [b, l]), $ = m(() => {
47
- if (b)
48
- if (j(!1), d && u) {
49
- const e = I(n.x, n.y);
50
- y(e), o == null || o(e);
51
- } else d && (o == null || o(n));
52
- }, [b, d, u, I, n, o]), S = m((e) => {
53
- d || i == null || i(e);
54
- }, [d, i]);
55
- G(() => {
56
- if (!c) return;
57
- const e = () => {
58
- y((r) => l(r.x, r.y));
59
- };
60
- return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
61
- }, [c, l]);
62
- const T = J(() => ({
63
- "--tech-fab-primary": a["--tech-primary"],
64
- "--tech-fab-glow": a["--tech-glow-primary"],
65
- "--tech-fab-border": a["--tech-border"],
66
- "--tech-fab-border-active": a["--tech-border-active"],
67
- "--tech-fab-bg-card": a["--tech-bg-card"],
68
- "--tech-fab-text-primary": a["--tech-text-primary"],
69
- "--tech-fab-size": `${t}px`
70
- }), [a, t]), V = c ? { position: "fixed", left: n.x, top: n.y, zIndex: 9999 } : { position: "fixed", right: 24, bottom: 80, zIndex: 9999 }, q = /* @__PURE__ */ s.jsxs(
71
- "div",
72
- {
73
- ref: H,
74
- className: O(
75
- "tech-fab",
76
- `tech-fab--${W}`,
77
- b && "tech-fab--dragging",
78
- L && "tech-fab--hovered",
79
- c && "tech-fab--draggable",
80
- Y
81
- ),
82
- style: { ...T, ...V, ...F },
83
- onPointerDown: c ? B : void 0,
84
- onPointerMove: c ? U : void 0,
85
- onPointerUp: c ? $ : void 0,
86
- onClick: S,
87
- onMouseEnter: () => X(!0),
88
- onMouseLeave: () => X(!1),
89
- role: "button",
90
- tabIndex: 0,
91
- children: [
92
- /* @__PURE__ */ s.jsx("div", { className: "tech-fab__corner tech-fab__corner--tl" }),
93
- /* @__PURE__ */ s.jsx("div", { className: "tech-fab__corner tech-fab__corner--tr" }),
94
- /* @__PURE__ */ s.jsx("div", { className: "tech-fab__corner tech-fab__corner--bl" }),
95
- /* @__PURE__ */ s.jsx("div", { className: "tech-fab__corner tech-fab__corner--br" }),
96
- /* @__PURE__ */ s.jsx("div", { className: "tech-fab__pulse" }),
97
- /* @__PURE__ */ s.jsxs("div", { className: "tech-fab__content", children: [
98
- w && /* @__PURE__ */ s.jsx("span", { className: "tech-fab__icon", children: w }),
99
- M && /* @__PURE__ */ s.jsx("span", { className: "tech-fab__label", children: M })
100
- ] })
101
- ]
102
- }
103
- );
104
- return K(q, document.body);
105
- };
106
- Q.displayName = "TechFloatingButton";
107
- export {
108
- Q as F
109
- };
@@ -1 +0,0 @@
1
- "use strict";const o=require("./jsx-runtime-7asRZgsb.cjs"),t=require("react"),T=require("react-dom"),U=require("./index-pCtiW2Id.cjs"),P=require("./ThemeProvider-CGtZuVnU.cjs"),X=({icon:y,children:w,variant:q="default",size:r=48,draggable:c=!1,initialPosition:x,edgeSnap:b=!0,snapThreshold:v=60,onClick:d,onDragEnd:a,className:C,style:E})=>{const{themeVars:u}=P.useTheme(),I=t.useRef(null),[n,_]=t.useState(()=>({x:(x==null?void 0:x.x)??window.innerWidth-r-24,y:(x==null?void 0:x.y)??window.innerHeight-r-80})),[f,j]=t.useState(!1),[m,R]=t.useState(!1),i=t.useRef({mx:0,my:0,bx:0,by:0}),[S,M]=t.useState(!1),l=t.useCallback((e,s)=>{const h=window.innerWidth-r,p=window.innerHeight-r;return{x:Math.max(0,Math.min(e,h)),y:Math.max(0,Math.min(s,p))}},[r]),N=t.useCallback((e,s)=>{if(!b)return{x:e,y:s};const h=window.innerWidth/2;return{x:e+r/2<h?v:window.innerWidth-r-v,y:s}},[b,r,v]),W=t.useCallback(e=>{c&&(e.preventDefault(),j(!0),R(!1),i.current={mx:e.clientX,my:e.clientY,bx:n.x,by:n.y},e.target.setPointerCapture(e.pointerId))},[c,n]),Y=t.useCallback(e=>{if(!f)return;const s=e.clientX-i.current.mx,h=e.clientY-i.current.my;(Math.abs(s)>3||Math.abs(h)>3)&&R(!0);const p=i.current.bx+s,L=i.current.by+h;_(l(p,L))},[f,l]),$=t.useCallback(()=>{if(f)if(j(!1),m&&b){const e=N(n.x,n.y);_(e),a==null||a(e)}else m&&(a==null||a(n))},[f,m,b,N,n,a]),k=t.useCallback(e=>{m||d==null||d(e)},[m,d]);t.useEffect(()=>{if(!c)return;const e=()=>{_(s=>l(s.x,s.y))};return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[c,l]);const B=t.useMemo(()=>({"--tech-fab-primary":u["--tech-primary"],"--tech-fab-glow":u["--tech-glow-primary"],"--tech-fab-border":u["--tech-border"],"--tech-fab-border-active":u["--tech-border-active"],"--tech-fab-bg-card":u["--tech-bg-card"],"--tech-fab-text-primary":u["--tech-text-primary"],"--tech-fab-size":`${r}px`}),[u,r]),F=c?{position:"fixed",left:n.x,top:n.y,zIndex:9999}:{position:"fixed",right:24,bottom:80,zIndex:9999},H=o.jsxRuntimeExports.jsxs("div",{ref:I,className:U.clsx("tech-fab",`tech-fab--${q}`,f&&"tech-fab--dragging",S&&"tech-fab--hovered",c&&"tech-fab--draggable",C),style:{...B,...F,...E},onPointerDown:c?W:void 0,onPointerMove:c?Y:void 0,onPointerUp:c?$:void 0,onClick:k,onMouseEnter:()=>M(!0),onMouseLeave:()=>M(!1),role:"button",tabIndex:0,children:[o.jsxRuntimeExports.jsx("div",{className:"tech-fab__corner tech-fab__corner--tl"}),o.jsxRuntimeExports.jsx("div",{className:"tech-fab__corner tech-fab__corner--tr"}),o.jsxRuntimeExports.jsx("div",{className:"tech-fab__corner tech-fab__corner--bl"}),o.jsxRuntimeExports.jsx("div",{className:"tech-fab__corner tech-fab__corner--br"}),o.jsxRuntimeExports.jsx("div",{className:"tech-fab__pulse"}),o.jsxRuntimeExports.jsxs("div",{className:"tech-fab__content",children:[y&&o.jsxRuntimeExports.jsx("span",{className:"tech-fab__icon",children:y}),w&&o.jsxRuntimeExports.jsx("span",{className:"tech-fab__label",children:w})]})]});return T.createPortal(H,document.body)};X.displayName="TechFloatingButton";exports.FloatingButton=X;