framepexls-ui-lib 0.3.0 → 0.3.1

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 (5) hide show
  1. package/dist/Sidebar.js +32 -8
  2. package/dist/Sidebar.mjs +32 -8
  3. package/dist/iconos/index.js +4 -14
  4. package/dist/iconos/index.mjs +4 -14
  5. package/package.json +1 -1
package/dist/Sidebar.js CHANGED
@@ -222,12 +222,16 @@ function Sidebar({
222
222
  ] })
223
223
  ] }),
224
224
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
225
- "aside",
225
+ import_framer_motion.motion.aside,
226
226
  {
227
227
  className: [
228
228
  "hidden xl:fixed xl:inset-y-0 xl:flex xl:flex-col xl:border-r xl:border-black/5 bg-white xl:py-6 dark:bg-[var(--fx-surface)] z-40",
229
- collapsed ? "xl:w-28 xl:px-3" : "xl:w-72 xl:px-4"
229
+ collapsed ? "xl:px-3" : "xl:px-4"
230
230
  ].join(" "),
231
+ initial: false,
232
+ animate: { width: collapsed ? 112 : 288 },
233
+ transition: { type: "spring", stiffness: 260, damping: 30, mass: 0.9 },
234
+ style: { width: collapsed ? 112 : 288 },
231
235
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
232
236
  SidebarInner,
233
237
  {
@@ -246,7 +250,16 @@ function Sidebar({
246
250
  )
247
251
  }
248
252
  ),
249
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: ["hidden xl:block", collapsed ? "xl:w-20" : "xl:w-72"].join(" ") }),
253
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
254
+ import_framer_motion.motion.div,
255
+ {
256
+ className: "hidden xl:block",
257
+ initial: false,
258
+ animate: { width: collapsed ? 112 : 288 },
259
+ transition: { type: "spring", stiffness: 260, damping: 30, mass: 0.9 },
260
+ style: { width: collapsed ? 112 : 288 }
261
+ }
262
+ ),
250
263
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: drawerOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_framer_motion.motion.div, { className: "fixed inset-0 z-40 xl:hidden", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: [
251
264
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-black/40" }),
252
265
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -315,10 +328,21 @@ function SidebarInner({
315
328
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between px-1", children: [
316
329
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Button.default, { unstyled: true, type: "button", className: "flex items-center gap-3", title: "Ir al inicio", children: [
317
330
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-2xl font-black tracking-tight", children: brandInitials }),
318
- !collapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "leading-tight", children: [
319
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-lg font-semibold tracking-tight", children: brandTitle }),
320
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-[11px] uppercase tracking-wide text-slate-400 text-left", children: brandSubtitle })
321
- ] })
331
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: !collapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
332
+ import_framer_motion.motion.div,
333
+ {
334
+ initial: { opacity: 0, x: -6 },
335
+ animate: { opacity: 1, x: 0 },
336
+ exit: { opacity: 0, x: -6 },
337
+ transition: { duration: 0.15 },
338
+ className: "leading-tight",
339
+ children: [
340
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-lg font-semibold tracking-tight", children: brandTitle }),
341
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-[11px] uppercase tracking-wide text-slate-400 text-left", children: brandSubtitle })
342
+ ]
343
+ },
344
+ "brand-meta"
345
+ ) })
322
346
  ] }),
323
347
  !mobile && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
324
348
  import_Button.default,
@@ -329,7 +353,7 @@ function SidebarInner({
329
353
  variant: "ghost",
330
354
  size: "sm",
331
355
  leftIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.ChevronLeftRightIcon, { collapsed: collapsed != null ? collapsed : false }),
332
- className: "hidden xl:inline-flex h-8 w-8 p-0 !gap-0 rounded-xl border border-slate-200 bg-white text-slate-700 shadow-sm hover:bg-slate-50 dark:border-white/10 dark:bg-white/5 dark:text-slate-200",
356
+ className: "hidden xl:inline-flex h-8 w-8 p-0 !gap-0 rounded-xl border border-slate-200 bg-white text-slate-700 shadow-sm hover:bg-slate-50 active:scale-[0.98] dark:border-white/10 dark:bg-white/5 dark:text-slate-200",
333
357
  title: collapsed ? "Expandir" : "Contraer"
334
358
  }
335
359
  )
package/dist/Sidebar.mjs CHANGED
@@ -189,12 +189,16 @@ function Sidebar({
189
189
  ] })
190
190
  ] }),
191
191
  /* @__PURE__ */ jsx(
192
- "aside",
192
+ motion.aside,
193
193
  {
194
194
  className: [
195
195
  "hidden xl:fixed xl:inset-y-0 xl:flex xl:flex-col xl:border-r xl:border-black/5 bg-white xl:py-6 dark:bg-[var(--fx-surface)] z-40",
196
- collapsed ? "xl:w-28 xl:px-3" : "xl:w-72 xl:px-4"
196
+ collapsed ? "xl:px-3" : "xl:px-4"
197
197
  ].join(" "),
198
+ initial: false,
199
+ animate: { width: collapsed ? 112 : 288 },
200
+ transition: { type: "spring", stiffness: 260, damping: 30, mass: 0.9 },
201
+ style: { width: collapsed ? 112 : 288 },
198
202
  children: /* @__PURE__ */ jsx(
199
203
  SidebarInner,
200
204
  {
@@ -213,7 +217,16 @@ function Sidebar({
213
217
  )
214
218
  }
215
219
  ),
216
- /* @__PURE__ */ jsx("div", { className: ["hidden xl:block", collapsed ? "xl:w-20" : "xl:w-72"].join(" ") }),
220
+ /* @__PURE__ */ jsx(
221
+ motion.div,
222
+ {
223
+ className: "hidden xl:block",
224
+ initial: false,
225
+ animate: { width: collapsed ? 112 : 288 },
226
+ transition: { type: "spring", stiffness: 260, damping: 30, mass: 0.9 },
227
+ style: { width: collapsed ? 112 : 288 }
228
+ }
229
+ ),
217
230
  /* @__PURE__ */ jsx(AnimatePresence, { children: drawerOpen && /* @__PURE__ */ jsxs(motion.div, { className: "fixed inset-0 z-40 xl:hidden", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: [
218
231
  /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/40" }),
219
232
  /* @__PURE__ */ jsxs(
@@ -282,10 +295,21 @@ function SidebarInner({
282
295
  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-1", children: [
283
296
  /* @__PURE__ */ jsxs(Button, { unstyled: true, type: "button", className: "flex items-center gap-3", title: "Ir al inicio", children: [
284
297
  /* @__PURE__ */ jsx("div", { className: "text-2xl font-black tracking-tight", children: brandInitials }),
285
- !collapsed && /* @__PURE__ */ jsxs("div", { className: "leading-tight", children: [
286
- /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold tracking-tight", children: brandTitle }),
287
- /* @__PURE__ */ jsx("div", { className: "text-[11px] uppercase tracking-wide text-slate-400 text-left", children: brandSubtitle })
288
- ] })
298
+ /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: !collapsed && /* @__PURE__ */ jsxs(
299
+ motion.div,
300
+ {
301
+ initial: { opacity: 0, x: -6 },
302
+ animate: { opacity: 1, x: 0 },
303
+ exit: { opacity: 0, x: -6 },
304
+ transition: { duration: 0.15 },
305
+ className: "leading-tight",
306
+ children: [
307
+ /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold tracking-tight", children: brandTitle }),
308
+ /* @__PURE__ */ jsx("div", { className: "text-[11px] uppercase tracking-wide text-slate-400 text-left", children: brandSubtitle })
309
+ ]
310
+ },
311
+ "brand-meta"
312
+ ) })
289
313
  ] }),
290
314
  !mobile && /* @__PURE__ */ jsx(
291
315
  Button,
@@ -296,7 +320,7 @@ function SidebarInner({
296
320
  variant: "ghost",
297
321
  size: "sm",
298
322
  leftIcon: /* @__PURE__ */ jsx(ChevronLeftRightIcon, { collapsed: collapsed != null ? collapsed : false }),
299
- className: "hidden xl:inline-flex h-8 w-8 p-0 !gap-0 rounded-xl border border-slate-200 bg-white text-slate-700 shadow-sm hover:bg-slate-50 dark:border-white/10 dark:bg-white/5 dark:text-slate-200",
323
+ className: "hidden xl:inline-flex h-8 w-8 p-0 !gap-0 rounded-xl border border-slate-200 bg-white text-slate-700 shadow-sm hover:bg-slate-50 active:scale-[0.98] dark:border-white/10 dark:bg-white/5 dark:text-slate-200",
300
324
  title: collapsed ? "Expandir" : "Contraer"
301
325
  }
302
326
  )
package/dist/iconos/index.js CHANGED
@@ -405,20 +405,10 @@ const CloseIcon = () => {
405
405
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6 6l12 12M18 6L6 18" }) });
406
406
  };
407
407
  const ChevronLeftRightIcon = ({ collapsed }) => {
408
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
409
- "svg",
410
- {
411
- viewBox: "0 0 24 24",
412
- className: `h-5 w-5 transition-transform ${collapsed ? "rotate-180" : ""}`,
413
- fill: "none",
414
- stroke: "currentColor",
415
- strokeWidth: "2",
416
- children: [
417
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9 18l-6-6 6-6" }),
418
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15 6l6 6-6 6" })
419
- ]
420
- }
421
- );
408
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
409
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "4", y: "4", width: "3", height: "16", rx: "1.5" }),
410
+ collapsed ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 8l4 4-4 4" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 8l-4 4 4 4" })
411
+ ] });
422
412
  };
423
413
  const MenuPuntosVerticalIcon = () => {
424
414
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", className: "h-4.5 w-4.5", fill: "currentColor", children: [
package/dist/iconos/index.mjs CHANGED
@@ -333,20 +333,10 @@ const CloseIcon = () => {
333
333
  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6L6 18" }) });
334
334
  };
335
335
  const ChevronLeftRightIcon = ({ collapsed }) => {
336
- return /* @__PURE__ */ jsxs(
337
- "svg",
338
- {
339
- viewBox: "0 0 24 24",
340
- className: `h-5 w-5 transition-transform ${collapsed ? "rotate-180" : ""}`,
341
- fill: "none",
342
- stroke: "currentColor",
343
- strokeWidth: "2",
344
- children: [
345
- /* @__PURE__ */ jsx("path", { d: "M9 18l-6-6 6-6" }),
346
- /* @__PURE__ */ jsx("path", { d: "M15 6l6 6-6 6" })
347
- ]
348
- }
349
- );
336
+ return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
337
+ /* @__PURE__ */ jsx("rect", { x: "4", y: "4", width: "3", height: "16", rx: "1.5" }),
338
+ collapsed ? /* @__PURE__ */ jsx("path", { d: "M10 8l4 4-4 4" }) : /* @__PURE__ */ jsx("path", { d: "M14 8l-4 4 4 4" })
339
+ ] });
350
340
  };
351
341
  const MenuPuntosVerticalIcon = () => {
352
342
  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", className: "h-4.5 w-4.5", fill: "currentColor", children: [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "framepexls-ui-lib",
3
- "version": "0.3.0",
3
+ "version": "0.3.1",
4
4
  "private": false,
5
5
  "license": "MIT",
6
6
  "description": "Componentes UI de Framepexls para React/Next.",