@rslsp1/fa-app-tools 0.1.0 → 0.1.2
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/dist/index.d.mts +32 -2
- package/dist/index.d.ts +32 -2
- package/dist/index.js +107 -0
- package/dist/index.mjs +102 -0
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -1,5 +1,35 @@
|
|
|
1
|
-
import { RefObject } from 'react';
|
|
1
|
+
import React, { RefObject } from 'react';
|
|
2
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
3
|
|
|
3
4
|
declare function useOnClickOutside(ref: RefObject<HTMLElement | null>, handler: (e: MouseEvent | TouchEvent) => void): void;
|
|
4
5
|
|
|
5
|
-
|
|
6
|
+
declare function FaToolsBadge(): react_jsx_runtime.JSX.Element;
|
|
7
|
+
|
|
8
|
+
interface PillButtonProps {
|
|
9
|
+
icon?: string;
|
|
10
|
+
children: React.ReactNode;
|
|
11
|
+
variant?: 'filled' | 'outline' | 'solid' | 'danger' | 'ghost';
|
|
12
|
+
onClick?: () => void;
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
loading?: boolean;
|
|
15
|
+
className?: string;
|
|
16
|
+
}
|
|
17
|
+
declare const PillButton: React.FC<PillButtonProps>;
|
|
18
|
+
|
|
19
|
+
declare const SectionLabel: React.FC<{
|
|
20
|
+
children: React.ReactNode;
|
|
21
|
+
}>;
|
|
22
|
+
|
|
23
|
+
interface CompactDropdownProps {
|
|
24
|
+
value: string;
|
|
25
|
+
displayValue?: string;
|
|
26
|
+
options: {
|
|
27
|
+
label: string;
|
|
28
|
+
value: string;
|
|
29
|
+
}[];
|
|
30
|
+
onChange: (val: string) => void;
|
|
31
|
+
className?: string;
|
|
32
|
+
}
|
|
33
|
+
declare const CompactDropdown: React.FC<CompactDropdownProps>;
|
|
34
|
+
|
|
35
|
+
export { CompactDropdown, FaToolsBadge, PillButton, SectionLabel, useOnClickOutside };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,35 @@
|
|
|
1
|
-
import { RefObject } from 'react';
|
|
1
|
+
import React, { RefObject } from 'react';
|
|
2
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
3
|
|
|
3
4
|
declare function useOnClickOutside(ref: RefObject<HTMLElement | null>, handler: (e: MouseEvent | TouchEvent) => void): void;
|
|
4
5
|
|
|
5
|
-
|
|
6
|
+
declare function FaToolsBadge(): react_jsx_runtime.JSX.Element;
|
|
7
|
+
|
|
8
|
+
interface PillButtonProps {
|
|
9
|
+
icon?: string;
|
|
10
|
+
children: React.ReactNode;
|
|
11
|
+
variant?: 'filled' | 'outline' | 'solid' | 'danger' | 'ghost';
|
|
12
|
+
onClick?: () => void;
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
loading?: boolean;
|
|
15
|
+
className?: string;
|
|
16
|
+
}
|
|
17
|
+
declare const PillButton: React.FC<PillButtonProps>;
|
|
18
|
+
|
|
19
|
+
declare const SectionLabel: React.FC<{
|
|
20
|
+
children: React.ReactNode;
|
|
21
|
+
}>;
|
|
22
|
+
|
|
23
|
+
interface CompactDropdownProps {
|
|
24
|
+
value: string;
|
|
25
|
+
displayValue?: string;
|
|
26
|
+
options: {
|
|
27
|
+
label: string;
|
|
28
|
+
value: string;
|
|
29
|
+
}[];
|
|
30
|
+
onChange: (val: string) => void;
|
|
31
|
+
className?: string;
|
|
32
|
+
}
|
|
33
|
+
declare const CompactDropdown: React.FC<CompactDropdownProps>;
|
|
34
|
+
|
|
35
|
+
export { CompactDropdown, FaToolsBadge, PillButton, SectionLabel, useOnClickOutside };
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
var __defProp = Object.defineProperty;
|
|
2
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
@@ -19,6 +20,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
19
20
|
// src/index.ts
|
|
20
21
|
var index_exports = {};
|
|
21
22
|
__export(index_exports, {
|
|
23
|
+
CompactDropdown: () => CompactDropdown,
|
|
24
|
+
FaToolsBadge: () => FaToolsBadge,
|
|
25
|
+
PillButton: () => PillButton,
|
|
26
|
+
SectionLabel: () => SectionLabel,
|
|
22
27
|
useOnClickOutside: () => useOnClickOutside
|
|
23
28
|
});
|
|
24
29
|
module.exports = __toCommonJS(index_exports);
|
|
@@ -39,7 +44,109 @@ function useOnClickOutside(ref, handler) {
|
|
|
39
44
|
};
|
|
40
45
|
}, [ref, handler]);
|
|
41
46
|
}
|
|
47
|
+
|
|
48
|
+
// src/components/Badge.tsx
|
|
49
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
50
|
+
function FaToolsBadge() {
|
|
51
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
|
|
52
|
+
position: "fixed",
|
|
53
|
+
bottom: 12,
|
|
54
|
+
right: 12,
|
|
55
|
+
background: "rgba(255,255,255,0.08)",
|
|
56
|
+
border: "1px solid rgba(255,255,255,0.15)",
|
|
57
|
+
borderRadius: 8,
|
|
58
|
+
padding: "4px 10px",
|
|
59
|
+
fontSize: 10,
|
|
60
|
+
color: "rgba(255,255,255,0.4)",
|
|
61
|
+
fontFamily: "monospace",
|
|
62
|
+
zIndex: 9999,
|
|
63
|
+
pointerEvents: "none"
|
|
64
|
+
}, children: "fa-app-tools v0.1.1" });
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
// src/components/PillButton.tsx
|
|
68
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
69
|
+
var PillButton = ({
|
|
70
|
+
icon,
|
|
71
|
+
children,
|
|
72
|
+
variant = "filled",
|
|
73
|
+
onClick,
|
|
74
|
+
disabled,
|
|
75
|
+
loading,
|
|
76
|
+
className = ""
|
|
77
|
+
}) => {
|
|
78
|
+
const base = "flex items-center gap-[6px] justify-center h-[34px] rounded-xl font-bold tracking-[0.1px] transition-all cursor-pointer text-[10px] uppercase px-3";
|
|
79
|
+
const variants = {
|
|
80
|
+
filled: "bg-[#333] hover:bg-[#444] active:bg-[#222] text-white border border-white/5 disabled:opacity-30",
|
|
81
|
+
outline: "border border-[#595959] hover:bg-white/5 active:bg-white/10 text-white disabled:opacity-30",
|
|
82
|
+
solid: "bg-white hover:bg-gray-200 active:bg-gray-300 text-black disabled:opacity-30",
|
|
83
|
+
danger: "bg-red-500/10 border border-red-500/20 text-red-400 hover:bg-red-500/20 disabled:opacity-30",
|
|
84
|
+
ghost: "text-white/40 hover:text-white hover:bg-white/5 disabled:opacity-30"
|
|
85
|
+
};
|
|
86
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
87
|
+
"button",
|
|
88
|
+
{
|
|
89
|
+
className: `${base} ${variants[variant]} ${className}`,
|
|
90
|
+
onClick,
|
|
91
|
+
disabled,
|
|
92
|
+
children: [
|
|
93
|
+
loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "material-symbols-outlined text-[16px] animate-spin text-inherit", children: "autorenew" }) : icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "material-symbols-outlined text-[16px] text-inherit", children: icon }),
|
|
94
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "inline-block", children })
|
|
95
|
+
]
|
|
96
|
+
}
|
|
97
|
+
);
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
// src/components/SectionLabel.tsx
|
|
101
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
102
|
+
var SectionLabel = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex items-center px-2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-[9px] font-bold text-white/30 uppercase tracking-widest text-nowrap", children }) });
|
|
103
|
+
|
|
104
|
+
// src/components/CompactDropdown.tsx
|
|
105
|
+
var import_react2 = require("react");
|
|
106
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
107
|
+
var CompactDropdown = ({
|
|
108
|
+
value,
|
|
109
|
+
displayValue,
|
|
110
|
+
options,
|
|
111
|
+
onChange,
|
|
112
|
+
className = ""
|
|
113
|
+
}) => {
|
|
114
|
+
const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
|
|
115
|
+
const ref = (0, import_react2.useRef)(null);
|
|
116
|
+
useOnClickOutside(ref, () => setIsOpen(false));
|
|
117
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { ref, className: `relative shrink-0 ${className}`, children: [
|
|
118
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
119
|
+
"button",
|
|
120
|
+
{
|
|
121
|
+
type: "button",
|
|
122
|
+
onClick: () => setIsOpen(!isOpen),
|
|
123
|
+
className: "h-8 px-2.5 rounded-xl bg-white/5 border border-white/10 text-[9px] font-bold uppercase hover:bg-white/10 transition-all flex items-center justify-between gap-1.5 min-w-[50px]",
|
|
124
|
+
children: [
|
|
125
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "truncate", children: displayValue || value }),
|
|
126
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: `material-symbols-outlined text-[14px] text-white/40 transition-transform ${isOpen ? "rotate-180" : ""}`, children: "expand_more" })
|
|
127
|
+
]
|
|
128
|
+
}
|
|
129
|
+
),
|
|
130
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute z-50 top-[calc(100%+4px)] left-0 min-w-[120px] bg-[#1a1a1a] border border-white/10 rounded-xl overflow-hidden shadow-2xl backdrop-blur-md animate-dropdown origin-top-left", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "max-h-60 overflow-y-auto dark-scrollbar", children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
131
|
+
"button",
|
|
132
|
+
{
|
|
133
|
+
type: "button",
|
|
134
|
+
className: `w-full text-left px-3 py-2 text-[9px] font-bold uppercase tracking-[0.1px] hover:bg-white/5 transition-colors ${value === opt.value ? "bg-white/10 text-white" : "text-white/40"}`,
|
|
135
|
+
onClick: () => {
|
|
136
|
+
onChange(opt.value);
|
|
137
|
+
setIsOpen(false);
|
|
138
|
+
},
|
|
139
|
+
children: opt.label
|
|
140
|
+
},
|
|
141
|
+
opt.value
|
|
142
|
+
)) }) })
|
|
143
|
+
] });
|
|
144
|
+
};
|
|
42
145
|
// Annotate the CommonJS export names for ESM import in node:
|
|
43
146
|
0 && (module.exports = {
|
|
147
|
+
CompactDropdown,
|
|
148
|
+
FaToolsBadge,
|
|
149
|
+
PillButton,
|
|
150
|
+
SectionLabel,
|
|
44
151
|
useOnClickOutside
|
|
45
152
|
});
|
package/dist/index.mjs
CHANGED
|
@@ -14,6 +14,108 @@ function useOnClickOutside(ref, handler) {
|
|
|
14
14
|
};
|
|
15
15
|
}, [ref, handler]);
|
|
16
16
|
}
|
|
17
|
+
|
|
18
|
+
// src/components/Badge.tsx
|
|
19
|
+
import { jsx } from "react/jsx-runtime";
|
|
20
|
+
function FaToolsBadge() {
|
|
21
|
+
return /* @__PURE__ */ jsx("div", { style: {
|
|
22
|
+
position: "fixed",
|
|
23
|
+
bottom: 12,
|
|
24
|
+
right: 12,
|
|
25
|
+
background: "rgba(255,255,255,0.08)",
|
|
26
|
+
border: "1px solid rgba(255,255,255,0.15)",
|
|
27
|
+
borderRadius: 8,
|
|
28
|
+
padding: "4px 10px",
|
|
29
|
+
fontSize: 10,
|
|
30
|
+
color: "rgba(255,255,255,0.4)",
|
|
31
|
+
fontFamily: "monospace",
|
|
32
|
+
zIndex: 9999,
|
|
33
|
+
pointerEvents: "none"
|
|
34
|
+
}, children: "fa-app-tools v0.1.1" });
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
// src/components/PillButton.tsx
|
|
38
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
39
|
+
var PillButton = ({
|
|
40
|
+
icon,
|
|
41
|
+
children,
|
|
42
|
+
variant = "filled",
|
|
43
|
+
onClick,
|
|
44
|
+
disabled,
|
|
45
|
+
loading,
|
|
46
|
+
className = ""
|
|
47
|
+
}) => {
|
|
48
|
+
const base = "flex items-center gap-[6px] justify-center h-[34px] rounded-xl font-bold tracking-[0.1px] transition-all cursor-pointer text-[10px] uppercase px-3";
|
|
49
|
+
const variants = {
|
|
50
|
+
filled: "bg-[#333] hover:bg-[#444] active:bg-[#222] text-white border border-white/5 disabled:opacity-30",
|
|
51
|
+
outline: "border border-[#595959] hover:bg-white/5 active:bg-white/10 text-white disabled:opacity-30",
|
|
52
|
+
solid: "bg-white hover:bg-gray-200 active:bg-gray-300 text-black disabled:opacity-30",
|
|
53
|
+
danger: "bg-red-500/10 border border-red-500/20 text-red-400 hover:bg-red-500/20 disabled:opacity-30",
|
|
54
|
+
ghost: "text-white/40 hover:text-white hover:bg-white/5 disabled:opacity-30"
|
|
55
|
+
};
|
|
56
|
+
return /* @__PURE__ */ jsxs(
|
|
57
|
+
"button",
|
|
58
|
+
{
|
|
59
|
+
className: `${base} ${variants[variant]} ${className}`,
|
|
60
|
+
onClick,
|
|
61
|
+
disabled,
|
|
62
|
+
children: [
|
|
63
|
+
loading ? /* @__PURE__ */ jsx2("span", { className: "material-symbols-outlined text-[16px] animate-spin text-inherit", children: "autorenew" }) : icon && /* @__PURE__ */ jsx2("span", { className: "material-symbols-outlined text-[16px] text-inherit", children: icon }),
|
|
64
|
+
/* @__PURE__ */ jsx2("span", { className: "inline-block", children })
|
|
65
|
+
]
|
|
66
|
+
}
|
|
67
|
+
);
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
// src/components/SectionLabel.tsx
|
|
71
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
72
|
+
var SectionLabel = ({ children }) => /* @__PURE__ */ jsx3("div", { className: "flex items-center px-2", children: /* @__PURE__ */ jsx3("span", { className: "text-[9px] font-bold text-white/30 uppercase tracking-widest text-nowrap", children }) });
|
|
73
|
+
|
|
74
|
+
// src/components/CompactDropdown.tsx
|
|
75
|
+
import { useState, useRef } from "react";
|
|
76
|
+
import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
77
|
+
var CompactDropdown = ({
|
|
78
|
+
value,
|
|
79
|
+
displayValue,
|
|
80
|
+
options,
|
|
81
|
+
onChange,
|
|
82
|
+
className = ""
|
|
83
|
+
}) => {
|
|
84
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
85
|
+
const ref = useRef(null);
|
|
86
|
+
useOnClickOutside(ref, () => setIsOpen(false));
|
|
87
|
+
return /* @__PURE__ */ jsxs2("div", { ref, className: `relative shrink-0 ${className}`, children: [
|
|
88
|
+
/* @__PURE__ */ jsxs2(
|
|
89
|
+
"button",
|
|
90
|
+
{
|
|
91
|
+
type: "button",
|
|
92
|
+
onClick: () => setIsOpen(!isOpen),
|
|
93
|
+
className: "h-8 px-2.5 rounded-xl bg-white/5 border border-white/10 text-[9px] font-bold uppercase hover:bg-white/10 transition-all flex items-center justify-between gap-1.5 min-w-[50px]",
|
|
94
|
+
children: [
|
|
95
|
+
/* @__PURE__ */ jsx4("span", { className: "truncate", children: displayValue || value }),
|
|
96
|
+
/* @__PURE__ */ jsx4("span", { className: `material-symbols-outlined text-[14px] text-white/40 transition-transform ${isOpen ? "rotate-180" : ""}`, children: "expand_more" })
|
|
97
|
+
]
|
|
98
|
+
}
|
|
99
|
+
),
|
|
100
|
+
isOpen && /* @__PURE__ */ jsx4("div", { className: "absolute z-50 top-[calc(100%+4px)] left-0 min-w-[120px] bg-[#1a1a1a] border border-white/10 rounded-xl overflow-hidden shadow-2xl backdrop-blur-md animate-dropdown origin-top-left", children: /* @__PURE__ */ jsx4("div", { className: "max-h-60 overflow-y-auto dark-scrollbar", children: options.map((opt) => /* @__PURE__ */ jsx4(
|
|
101
|
+
"button",
|
|
102
|
+
{
|
|
103
|
+
type: "button",
|
|
104
|
+
className: `w-full text-left px-3 py-2 text-[9px] font-bold uppercase tracking-[0.1px] hover:bg-white/5 transition-colors ${value === opt.value ? "bg-white/10 text-white" : "text-white/40"}`,
|
|
105
|
+
onClick: () => {
|
|
106
|
+
onChange(opt.value);
|
|
107
|
+
setIsOpen(false);
|
|
108
|
+
},
|
|
109
|
+
children: opt.label
|
|
110
|
+
},
|
|
111
|
+
opt.value
|
|
112
|
+
)) }) })
|
|
113
|
+
] });
|
|
114
|
+
};
|
|
17
115
|
export {
|
|
116
|
+
CompactDropdown,
|
|
117
|
+
FaToolsBadge,
|
|
118
|
+
PillButton,
|
|
119
|
+
SectionLabel,
|
|
18
120
|
useOnClickOutside
|
|
19
121
|
};
|