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.
@@ -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
- label: string;
8
- onClick?: () => void;
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 };
@@ -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
- label: string;
8
- onClick?: () => void;
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
  {
@@ -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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "framepexls-ui-lib",
3
- "version": "0.1.12",
3
+ "version": "0.1.13",
4
4
  "private": false,
5
5
  "license": "MIT",
6
6
  "description": "Componentes UI de Framepexls para React/Next.",