framepexls-ui-lib 0.1.12 → 0.1.13
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/AppTopbar.d.mts +8 -9
- package/dist/AppTopbar.d.ts +8 -9
- package/dist/AppTopbar.js +10 -1
- package/dist/AppTopbar.mjs +10 -1
- package/dist/Button.js +1 -1
- package/dist/Button.mjs +1 -1
- package/package.json +1 -1
package/dist/AppTopbar.d.mts
CHANGED
|
@@ -1,17 +1,16 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
|
|
3
|
+
type TopbarAction = {
|
|
4
|
+
label: string;
|
|
5
|
+
onClick?: () => void;
|
|
6
|
+
};
|
|
3
7
|
type Props = {
|
|
4
8
|
title: string;
|
|
5
9
|
subtitle?: string;
|
|
6
|
-
primary?:
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
};
|
|
10
|
-
secondary?: {
|
|
11
|
-
label: string;
|
|
12
|
-
onClick?: () => void;
|
|
13
|
-
};
|
|
10
|
+
primary?: TopbarAction;
|
|
11
|
+
secondary?: TopbarAction;
|
|
12
|
+
actions?: TopbarAction[];
|
|
14
13
|
};
|
|
15
|
-
declare function AppTopbar({ title, subtitle, secondary, primary }: Props): react_jsx_runtime.JSX.Element;
|
|
14
|
+
declare function AppTopbar({ title, subtitle, secondary, primary, actions }: Props): react_jsx_runtime.JSX.Element;
|
|
16
15
|
|
|
17
16
|
export { AppTopbar as default };
|
package/dist/AppTopbar.d.ts
CHANGED
|
@@ -1,17 +1,16 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
|
|
3
|
+
type TopbarAction = {
|
|
4
|
+
label: string;
|
|
5
|
+
onClick?: () => void;
|
|
6
|
+
};
|
|
3
7
|
type Props = {
|
|
4
8
|
title: string;
|
|
5
9
|
subtitle?: string;
|
|
6
|
-
primary?:
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
};
|
|
10
|
-
secondary?: {
|
|
11
|
-
label: string;
|
|
12
|
-
onClick?: () => void;
|
|
13
|
-
};
|
|
10
|
+
primary?: TopbarAction;
|
|
11
|
+
secondary?: TopbarAction;
|
|
12
|
+
actions?: TopbarAction[];
|
|
14
13
|
};
|
|
15
|
-
declare function AppTopbar({ title, subtitle, secondary, primary }: Props): react_jsx_runtime.JSX.Element;
|
|
14
|
+
declare function AppTopbar({ title, subtitle, secondary, primary, actions }: Props): react_jsx_runtime.JSX.Element;
|
|
16
15
|
|
|
17
16
|
export { AppTopbar as default };
|
package/dist/AppTopbar.js
CHANGED
|
@@ -23,13 +23,22 @@ __export(AppTopbar_exports, {
|
|
|
23
23
|
});
|
|
24
24
|
module.exports = __toCommonJS(AppTopbar_exports);
|
|
25
25
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
26
|
-
function AppTopbar({ title, subtitle, secondary, primary }) {
|
|
26
|
+
function AppTopbar({ title, subtitle, secondary, primary, actions }) {
|
|
27
27
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sticky top-0 z-30 border-b border-black/5 bg-white backdrop-blur-xl dark:bg-[#0b0a0a]/60", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-4 sm:px-6 xl:px-8 xl:pl-20", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex h-16 items-center justify-between", children: [
|
|
28
28
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
|
|
29
29
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: "text-lg font-semibold tracking-tight", children: title }),
|
|
30
30
|
subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-slate-500", children: subtitle })
|
|
31
31
|
] }) }),
|
|
32
32
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
33
|
+
Array.isArray(actions) && actions.map((a, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
34
|
+
"button",
|
|
35
|
+
{
|
|
36
|
+
onClick: a.onClick,
|
|
37
|
+
className: "rounded-xl border border-slate-200 px-3 py-2 text-sm font-medium shadow-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/5",
|
|
38
|
+
children: a.label
|
|
39
|
+
},
|
|
40
|
+
`action-${idx}-${a.label}`
|
|
41
|
+
)),
|
|
33
42
|
secondary && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
34
43
|
"button",
|
|
35
44
|
{
|
package/dist/AppTopbar.mjs
CHANGED
|
@@ -1,12 +1,21 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
function AppTopbar({ title, subtitle, secondary, primary }) {
|
|
3
|
+
function AppTopbar({ title, subtitle, secondary, primary, actions }) {
|
|
4
4
|
return /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-30 border-b border-black/5 bg-white backdrop-blur-xl dark:bg-[#0b0a0a]/60", children: /* @__PURE__ */ jsx("div", { className: "px-4 sm:px-6 xl:px-8 xl:pl-20", children: /* @__PURE__ */ jsxs("div", { className: "flex h-16 items-center justify-between", children: [
|
|
5
5
|
/* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxs("div", { children: [
|
|
6
6
|
/* @__PURE__ */ jsx("h1", { className: "text-lg font-semibold tracking-tight", children: title }),
|
|
7
7
|
subtitle && /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-500", children: subtitle })
|
|
8
8
|
] }) }),
|
|
9
9
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
10
|
+
Array.isArray(actions) && actions.map((a, idx) => /* @__PURE__ */ jsx(
|
|
11
|
+
"button",
|
|
12
|
+
{
|
|
13
|
+
onClick: a.onClick,
|
|
14
|
+
className: "rounded-xl border border-slate-200 px-3 py-2 text-sm font-medium shadow-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/5",
|
|
15
|
+
children: a.label
|
|
16
|
+
},
|
|
17
|
+
`action-${idx}-${a.label}`
|
|
18
|
+
)),
|
|
10
19
|
secondary && /* @__PURE__ */ jsx(
|
|
11
20
|
"button",
|
|
12
21
|
{
|
package/dist/Button.js
CHANGED
|
@@ -71,7 +71,7 @@ function Button({
|
|
|
71
71
|
return "bg-blue-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-blue-500";
|
|
72
72
|
}
|
|
73
73
|
})();
|
|
74
|
-
const activeClass = active ? variant === "primary" ? "ring-2 ring-slate-300/60 dark:ring-white/20" : variant === "ghost" ? inverted ? "bg-white/15 text-white shadow-sm" : "bg-slate-100 text-slate-900 shadow-sm" : variant === "outline" ? inverted ? "bg-white/10 text-white" : "bg-slate-50" : variant === "secondary" ? inverted ? "bg-white/15 text-white" : "bg-slate-100" : "" : "";
|
|
74
|
+
const activeClass = active ? variant === "primary" ? "ring-2 ring-slate-300/60 dark:ring-white/20" : variant === "ghost" ? inverted ? "bg-white/15 text-white shadow-sm" : "bg-slate-100 text-slate-900 ring-1 ring-slate-300 dark:ring-white/15 shadow-sm" : variant === "outline" ? inverted ? "bg-white/10 text-white" : "bg-slate-50 ring-1 ring-slate-300 dark:ring-white/15" : variant === "secondary" ? inverted ? "bg-white/15 text-white" : "bg-slate-100 ring-1 ring-slate-300/80 dark:ring-white/15" : "" : "";
|
|
75
75
|
const hasChildren = children !== void 0 && children !== null && children !== false;
|
|
76
76
|
const showText = hasChildren && !iconOnly;
|
|
77
77
|
const iconLeft = !loading ? leftIcon != null ? leftIcon : iconOnly ? icon != null ? icon : children : void 0 : void 0;
|
package/dist/Button.mjs
CHANGED
|
@@ -48,7 +48,7 @@ function Button({
|
|
|
48
48
|
return "bg-blue-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-blue-500";
|
|
49
49
|
}
|
|
50
50
|
})();
|
|
51
|
-
const activeClass = active ? variant === "primary" ? "ring-2 ring-slate-300/60 dark:ring-white/20" : variant === "ghost" ? inverted ? "bg-white/15 text-white shadow-sm" : "bg-slate-100 text-slate-900 shadow-sm" : variant === "outline" ? inverted ? "bg-white/10 text-white" : "bg-slate-50" : variant === "secondary" ? inverted ? "bg-white/15 text-white" : "bg-slate-100" : "" : "";
|
|
51
|
+
const activeClass = active ? variant === "primary" ? "ring-2 ring-slate-300/60 dark:ring-white/20" : variant === "ghost" ? inverted ? "bg-white/15 text-white shadow-sm" : "bg-slate-100 text-slate-900 ring-1 ring-slate-300 dark:ring-white/15 shadow-sm" : variant === "outline" ? inverted ? "bg-white/10 text-white" : "bg-slate-50 ring-1 ring-slate-300 dark:ring-white/15" : variant === "secondary" ? inverted ? "bg-white/15 text-white" : "bg-slate-100 ring-1 ring-slate-300/80 dark:ring-white/15" : "" : "";
|
|
52
52
|
const hasChildren = children !== void 0 && children !== null && children !== false;
|
|
53
53
|
const showText = hasChildren && !iconOnly;
|
|
54
54
|
const iconLeft = !loading ? leftIcon != null ? leftIcon : iconOnly ? icon != null ? icon : children : void 0 : void 0;
|