framepexls-ui-lib 1.15.0 → 1.16.0

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.
Files changed (11) hide show
  1. package/dist/Button.js +1 -1
  2. package/dist/Button.mjs +1 -1
  3. package/dist/Checkbox.d.mts +1 -1
  4. package/dist/Checkbox.d.ts +1 -1
  5. package/dist/PageScaffold.js +4 -4
  6. package/dist/PageScaffold.mjs +4 -4
  7. package/dist/Sidebar.js +6 -5
  8. package/dist/Sidebar.mjs +6 -5
  9. package/dist/Table.js +3 -3
  10. package/dist/Table.mjs +3 -3
  11. package/package.json +1 -1
package/dist/Button.js CHANGED
@@ -87,7 +87,7 @@ const Button = import_react.default.forwardRef(({
87
87
  stone: "bg-stone-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-stone-500",
88
88
  red: "bg-red-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-red-500",
89
89
  orange: "bg-orange-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-orange-500",
90
- amber: "bg-amber-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-amber-500",
90
+ amber: "bg-amber-600 text-slate-950 hover:opacity-90 active:scale-[.98] dark:bg-amber-500 dark:text-slate-950",
91
91
  yellow: "bg-yellow-500 text-slate-900 hover:opacity-95 active:scale-[.98] dark:bg-yellow-400",
92
92
  lime: "bg-lime-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-lime-500",
93
93
  green: "bg-green-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-green-500",
package/dist/Button.mjs CHANGED
@@ -54,7 +54,7 @@ const Button = React.forwardRef(({
54
54
  stone: "bg-stone-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-stone-500",
55
55
  red: "bg-red-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-red-500",
56
56
  orange: "bg-orange-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-orange-500",
57
- amber: "bg-amber-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-amber-500",
57
+ amber: "bg-amber-600 text-slate-950 hover:opacity-90 active:scale-[.98] dark:bg-amber-500 dark:text-slate-950",
58
58
  yellow: "bg-yellow-500 text-slate-900 hover:opacity-95 active:scale-[.98] dark:bg-yellow-400",
59
59
  lime: "bg-lime-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-lime-500",
60
60
  green: "bg-green-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-green-500",
package/dist/Checkbox.d.mts CHANGED
@@ -11,7 +11,7 @@ type CheckboxProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>,
11
11
  className?: string;
12
12
  inputClassName?: string;
13
13
  };
14
- declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
14
+ declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
15
15
  label?: React__default.ReactNode;
16
16
  description?: React__default.ReactNode;
17
17
  error?: boolean;
package/dist/Checkbox.d.ts CHANGED
@@ -11,7 +11,7 @@ type CheckboxProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>,
11
11
  className?: string;
12
12
  inputClassName?: string;
13
13
  };
14
- declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
14
+ declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
15
15
  label?: React__default.ReactNode;
16
16
  description?: React__default.ReactNode;
17
17
  error?: boolean;
package/dist/PageScaffold.js CHANGED
@@ -116,7 +116,7 @@ function PageScaffold({
116
116
  if (typeof emptyState === "string" || typeof emptyState === "number") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_EmptyState.default, { title: emptyState });
117
117
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_EmptyState.default, { ...emptyState });
118
118
  }, [emptyState]);
119
- const toolbarActions = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
119
+ const toolbarActions = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex w-full flex-col items-stretch gap-2 sm:w-auto sm:flex-row sm:flex-wrap sm:items-center sm:justify-end [&>*]:w-full sm:[&>*]:w-auto", children: [
120
120
  primaryAction && ((_p = tools == null ? void 0 : tools.primaryAction) != null ? _p : true) ? primaryAction.tooltip ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.default, { content: primaryAction.tooltip, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
121
121
  import_Button.default,
122
122
  {
@@ -144,7 +144,7 @@ function PageScaffold({
144
144
  ) : null,
145
145
  ((_u = tools == null ? void 0 : tools.actions) != null ? _u : true) ? actions : null
146
146
  ] });
147
- const toolbarControls = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
147
+ const toolbarControls = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex w-full flex-col items-stretch gap-2 sm:flex-row sm:flex-wrap sm:items-center", children: [
148
148
  filters && ((_v = tools == null ? void 0 : tools.filters) != null ? _v : true) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
149
149
  import_FiltersMultiSelect.default,
150
150
  {
@@ -227,9 +227,9 @@ function PageScaffold({
227
227
  disabled: search.disabled || showLoading
228
228
  }
229
229
  ) }),
230
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-wrap items-center justify-end gap-2", children: toolbarActions })
230
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-full lg:w-auto", children: toolbarActions })
231
231
  ] }),
232
- filters || sort || columns || tabs ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-wrap items-center justify-between gap-2", children: toolbarControls }) : null
232
+ filters || sort || columns || tabs ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between", children: toolbarControls }) : null
233
233
  ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between", children: [
234
234
  toolbarControls,
235
235
  toolbarActions
package/dist/PageScaffold.mjs CHANGED
@@ -83,7 +83,7 @@ function PageScaffold({
83
83
  if (typeof emptyState === "string" || typeof emptyState === "number") return /* @__PURE__ */ jsx(EmptyState, { title: emptyState });
84
84
  return /* @__PURE__ */ jsx(EmptyState, { ...emptyState });
85
85
  }, [emptyState]);
86
- const toolbarActions = /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
86
+ const toolbarActions = /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-stretch gap-2 sm:w-auto sm:flex-row sm:flex-wrap sm:items-center sm:justify-end [&>*]:w-full sm:[&>*]:w-auto", children: [
87
87
  primaryAction && ((_p = tools == null ? void 0 : tools.primaryAction) != null ? _p : true) ? primaryAction.tooltip ? /* @__PURE__ */ jsx(Tooltip, { content: primaryAction.tooltip, children: /* @__PURE__ */ jsx(
88
88
  Button,
89
89
  {
@@ -111,7 +111,7 @@ function PageScaffold({
111
111
  ) : null,
112
112
  ((_u = tools == null ? void 0 : tools.actions) != null ? _u : true) ? actions : null
113
113
  ] });
114
- const toolbarControls = /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
114
+ const toolbarControls = /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-stretch gap-2 sm:flex-row sm:flex-wrap sm:items-center", children: [
115
115
  filters && ((_v = tools == null ? void 0 : tools.filters) != null ? _v : true) ? /* @__PURE__ */ jsx(
116
116
  FiltersMultiSelect,
117
117
  {
@@ -194,9 +194,9 @@ function PageScaffold({
194
194
  disabled: search.disabled || showLoading
195
195
  }
196
196
  ) }),
197
- /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-end gap-2", children: toolbarActions })
197
+ /* @__PURE__ */ jsx("div", { className: "w-full lg:w-auto", children: toolbarActions })
198
198
  ] }),
199
- filters || sort || columns || tabs ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-between gap-2", children: toolbarControls }) : null
199
+ filters || sort || columns || tabs ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between", children: toolbarControls }) : null
200
200
  ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between", children: [
201
201
  toolbarControls,
202
202
  toolbarActions
package/dist/Sidebar.js CHANGED
@@ -577,7 +577,8 @@ function Sidebar({
577
577
  }
578
578
  };
579
579
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
580
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sticky top-0 z-40 flex h-14 items-center gap-2 border-b border-[var(--border)] bg-[var(--bg)] px-3 shadow-sm xl:hidden", children: [
580
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "aria-hidden": "true", className: "h-14 xl:hidden" }),
581
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "fixed inset-x-0 top-0 z-40 flex h-14 items-center gap-2 border-b border-[var(--border)] bg-[var(--bg)] px-3 shadow-sm xl:hidden", children: [
581
582
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
582
583
  import_Button.default,
583
584
  {
@@ -2145,10 +2146,10 @@ function SidebarInner({
2145
2146
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: !collapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2146
2147
  import_framer_motion.motion.div,
2147
2148
  {
2148
- initial: { opacity: 0, x: -6 },
2149
- animate: { opacity: 1, x: 0 },
2150
- exit: { opacity: 0, x: -6 },
2151
- transition: { duration: 0.16, ease: "easeOut" },
2149
+ initial: { opacity: 0, x: -10, filter: "blur(6px)" },
2150
+ animate: { opacity: 1, x: 0, filter: "blur(0px)" },
2151
+ exit: { opacity: 0, x: -14, filter: "blur(8px)" },
2152
+ transition: { duration: 0.22, ease: [0.22, 1, 0.36, 1] },
2152
2153
  className: "leading-tight",
2153
2154
  children: [
2154
2155
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-lg font-semibold tracking-tight text-left", children: brandTitle }),
package/dist/Sidebar.mjs CHANGED
@@ -556,7 +556,8 @@ function Sidebar({
556
556
  }
557
557
  };
558
558
  return /* @__PURE__ */ jsxs(Fragment, { children: [
559
- /* @__PURE__ */ jsxs("div", { className: "sticky top-0 z-40 flex h-14 items-center gap-2 border-b border-[var(--border)] bg-[var(--bg)] px-3 shadow-sm xl:hidden", children: [
559
+ /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "h-14 xl:hidden" }),
560
+ /* @__PURE__ */ jsxs("div", { className: "fixed inset-x-0 top-0 z-40 flex h-14 items-center gap-2 border-b border-[var(--border)] bg-[var(--bg)] px-3 shadow-sm xl:hidden", children: [
560
561
  /* @__PURE__ */ jsx(
561
562
  Button,
562
563
  {
@@ -2124,10 +2125,10 @@ function SidebarInner({
2124
2125
  /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: !collapsed && /* @__PURE__ */ jsxs(
2125
2126
  motion.div,
2126
2127
  {
2127
- initial: { opacity: 0, x: -6 },
2128
- animate: { opacity: 1, x: 0 },
2129
- exit: { opacity: 0, x: -6 },
2130
- transition: { duration: 0.16, ease: "easeOut" },
2128
+ initial: { opacity: 0, x: -10, filter: "blur(6px)" },
2129
+ animate: { opacity: 1, x: 0, filter: "blur(0px)" },
2130
+ exit: { opacity: 0, x: -14, filter: "blur(8px)" },
2131
+ transition: { duration: 0.22, ease: [0.22, 1, 0.36, 1] },
2131
2132
  className: "leading-tight",
2132
2133
  children: [
2133
2134
  /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold tracking-tight text-left", children: brandTitle }),
package/dist/Table.js CHANGED
@@ -50,19 +50,19 @@ function cx(...a) {
50
50
  return a.filter(Boolean).join(" ");
51
51
  }
52
52
  const Table = import_react.default.forwardRef(function Table2({ className, dense = false, children, ...rest }, ref) {
53
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
53
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-full overflow-x-auto overscroll-x-contain", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
54
54
  "table",
55
55
  {
56
56
  ref,
57
57
  className: cx(
58
- "min-w-full table-auto text-left text-[0.8125rem] sm:text-sm w-full",
58
+ "w-full min-w-full table-auto text-left text-[0.8125rem] sm:text-sm",
59
59
  dense && "text-xs",
60
60
  className
61
61
  ),
62
62
  ...rest,
63
63
  children
64
64
  }
65
- );
65
+ ) });
66
66
  });
67
67
  function Th({
68
68
  children,
package/dist/Table.mjs CHANGED
@@ -13,19 +13,19 @@ function cx(...a) {
13
13
  return a.filter(Boolean).join(" ");
14
14
  }
15
15
  const Table = React.forwardRef(function Table2({ className, dense = false, children, ...rest }, ref) {
16
- return /* @__PURE__ */ jsx(
16
+ return /* @__PURE__ */ jsx("div", { className: "w-full overflow-x-auto overscroll-x-contain", children: /* @__PURE__ */ jsx(
17
17
  "table",
18
18
  {
19
19
  ref,
20
20
  className: cx(
21
- "min-w-full table-auto text-left text-[0.8125rem] sm:text-sm w-full",
21
+ "w-full min-w-full table-auto text-left text-[0.8125rem] sm:text-sm",
22
22
  dense && "text-xs",
23
23
  className
24
24
  ),
25
25
  ...rest,
26
26
  children
27
27
  }
28
- );
28
+ ) });
29
29
  });
30
30
  function Th({
31
31
  children,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "framepexls-ui-lib",
3
- "version": "1.15.0",
3
+ "version": "1.16.0",
4
4
  "private": false,
5
5
  "license": "MIT",
6
6
  "description": "Componentes UI de Framepexls para React/Next.",