framepexls-ui-lib 1.5.0 → 1.6.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 (5) hide show
  1. package/dist/Checkbox.d.mts +1 -1
  2. package/dist/Checkbox.d.ts +1 -1
  3. package/dist/Sidebar.js +76 -50
  4. package/dist/Sidebar.mjs +78 -51
  5. package/package.json +1 -1
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/Sidebar.js CHANGED
@@ -744,6 +744,7 @@ function Sidebar({
744
744
  groups,
745
745
  mobile: true,
746
746
  activeKey,
747
+ toggleCollapsed,
747
748
  go,
748
749
  navEditable: navEnabled,
749
750
  navCustomizeLabel: navCustomizeButtonLabel,
@@ -1954,45 +1955,79 @@ function SidebarInner({
1954
1955
  ) }) : null
1955
1956
  ] });
1956
1957
  };
1958
+ const showCollapseToggle = !mobile && typeof toggleCollapsed === "function";
1959
+ const renderCollapseToggle = () => {
1960
+ if (!showCollapseToggle) return null;
1961
+ if (loading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fx-skeleton shrink-0", style: { width: 40, height: 40, borderRadius: 16 } });
1962
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.default, { content: collapsed ? "Expandir barra lateral" : "Contraer barra lateral", placement: "right", offset: 10, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1963
+ import_Button.default,
1964
+ {
1965
+ noPaddingX: true,
1966
+ "aria-label": collapsed ? "Expandir barra lateral" : "Contraer barra lateral",
1967
+ onClick: toggleCollapsed,
1968
+ variant: "ghost",
1969
+ size: "sm",
1970
+ leftIcon: collapsed ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.CaretLineRightIcon, { className: "h-4 w-4", "aria-hidden": true }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.CaretLineLeftIcon, { className: "h-4 w-4", "aria-hidden": true }),
1971
+ className: "shrink-0 h-10 w-10 p-0 !gap-0 rounded-2xl border border-[var(--border)] bg-[var(--card)] text-[var(--foreground)] shadow-sm hover:bg-[color-mix(in_oklab,var(--surface)_70%,transparent)] active:scale-95",
1972
+ title: void 0
1973
+ }
1974
+ ) });
1975
+ };
1957
1976
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: ["flex h-full flex-col", loading ? "pointer-events-none select-none" : ""].join(" "), "aria-busy": loading ? "true" : void 0, children: [
1958
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between px-1", children: [
1959
- loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: ["flex items-center gap-3", collapsed ? "justify-center" : ""].join(" "), children: [
1977
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-1", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
1978
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: ["flex min-w-0 flex-1 items-center gap-3", collapsed ? "justify-center" : ""].join(" "), children: [
1960
1979
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fx-skeleton", style: { width: collapsed ? 44 : 40, height: collapsed ? 44 : 40, borderRadius: 16 } }),
1961
1980
  !collapsed ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-2", children: [
1962
1981
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fx-skeleton", style: { width: "8.5rem", height: 14, borderRadius: 10 } }),
1963
1982
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fx-skeleton", style: { width: "10.5rem", height: 10, borderRadius: 10, opacity: 0.9 } })
1964
1983
  ] }) : null
1965
- ] }) : showBrand ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Button.default, { unstyled: true, type: "button", onClick: onBrandClick, className: ["flex items-center gap-3", collapsed ? "justify-center" : ""].join(" "), title: "Ir al inicio", children: [
1966
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1967
- import_AvatarSquare.default,
1968
- {
1969
- size: collapsed ? 44 : 40,
1970
- src: brandLogoSrc != null ? brandLogoSrc : void 0,
1971
- alt: brandTitle,
1972
- initials: brandInitials,
1973
- imageFit: brandLogoSrc ? "contain" : "cover",
1974
- radiusClass: "rounded-2xl",
1975
- color,
1976
- className: "ring-0"
1977
- }
1978
- ),
1979
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: !collapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1980
- import_framer_motion.motion.div,
1981
- {
1982
- initial: { opacity: 0, x: -6 },
1983
- animate: { opacity: 1, x: 0 },
1984
- exit: { opacity: 0, x: -6 },
1985
- transition: { duration: 0.15 },
1986
- className: "leading-tight",
1987
- children: [
1988
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-lg font-semibold tracking-tight", children: brandTitle }),
1989
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-[0.6875rem] uppercase tracking-wide text-[var(--muted)] text-left", children: brandSubtitle })
1990
- ]
1991
- },
1992
- "brand-meta"
1993
- ) })
1994
- ] }) : hasWorkspace ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0 flex-1 pr-2", children: [
1995
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1984
+ ] }),
1985
+ renderCollapseToggle()
1986
+ ] }) : showBrand ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
1987
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1988
+ import_Button.default,
1989
+ {
1990
+ unstyled: true,
1991
+ type: "button",
1992
+ onClick: onBrandClick,
1993
+ className: ["min-w-0 flex flex-1 items-center gap-3", collapsed ? "justify-center" : ""].join(" "),
1994
+ title: "Ir al inicio",
1995
+ children: [
1996
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1997
+ import_AvatarSquare.default,
1998
+ {
1999
+ size: collapsed ? 44 : 40,
2000
+ src: brandLogoSrc != null ? brandLogoSrc : void 0,
2001
+ alt: brandTitle,
2002
+ initials: brandInitials,
2003
+ imageFit: brandLogoSrc ? "contain" : "cover",
2004
+ radiusClass: "rounded-2xl",
2005
+ color,
2006
+ className: "ring-0"
2007
+ }
2008
+ ),
2009
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: !collapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2010
+ import_framer_motion.motion.div,
2011
+ {
2012
+ initial: { opacity: 0, x: -6 },
2013
+ animate: { opacity: 1, x: 0 },
2014
+ exit: { opacity: 0, x: -6 },
2015
+ transition: { duration: 0.15 },
2016
+ className: "leading-tight",
2017
+ children: [
2018
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-lg font-semibold tracking-tight", children: brandTitle }),
2019
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-[0.6875rem] uppercase tracking-wide text-[var(--muted)] text-left", children: brandSubtitle })
2020
+ ]
2021
+ },
2022
+ "brand-meta"
2023
+ ) })
2024
+ ]
2025
+ }
2026
+ ),
2027
+ renderCollapseToggle()
2028
+ ] }) : hasWorkspace ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
2029
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
2030
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1996
2031
  WorkspaceSwitcher,
1997
2032
  {
1998
2033
  collapsed,
@@ -2005,23 +2040,14 @@ function SidebarInner({
2005
2040
  variant: "panel",
2006
2041
  color
2007
2042
  }
2008
- ),
2009
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SidebarTools, { condensed: collapsed }) })
2010
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold text-[var(--muted)]", children: "Navegaci\xF3n" }),
2011
- !mobile && (loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hidden xl:inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fx-skeleton", style: { width: 32, height: 32, borderRadius: 12 } }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.default, { content: collapsed ? "Expandir sidebar" : "Contraer sidebar", placement: "right", offset: 10, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2012
- import_Button.default,
2013
- {
2014
- noPaddingX: true,
2015
- "aria-label": collapsed ? "Expandir barra lateral" : "Contraer barra lateral",
2016
- onClick: toggleCollapsed,
2017
- variant: "ghost",
2018
- size: "sm",
2019
- leftIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.ChevronLeftRightIcon, { collapsed: collapsed != null ? collapsed : false }),
2020
- className: "hidden xl:inline-flex h-8 w-8 p-0 !gap-0 rounded-xl border border-[var(--border)] bg-[var(--card)] text-[var(--foreground)] shadow-sm hover:bg-[color-mix(in_oklab,var(--surface)_70%,transparent)] active:scale-[0.98]",
2021
- title: void 0
2022
- }
2023
- ) }))
2024
- ] }),
2043
+ ) }),
2044
+ renderCollapseToggle()
2045
+ ] }),
2046
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SidebarTools, { condensed: collapsed }) })
2047
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
2048
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: ["min-w-0 flex-1 text-sm font-semibold text-[var(--muted)]", collapsed ? "text-center" : ""].join(" "), children: "Navegaci\xF3n" }),
2049
+ renderCollapseToggle()
2050
+ ] }) }),
2025
2051
  showTopPanel || loading && skShowTopPanel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: ["mt-4 px-1", collapsed ? "" : ""].join(" "), children: loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: collapsed ? "rounded-3xl border border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_92%,transparent)] p-2 shadow-sm" : "overflow-hidden rounded-3xl border border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_92%,transparent)] shadow-sm", children: collapsed ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-center justify-center gap-2", children: [
2026
2052
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fx-skeleton", style: { width: 44, height: 44, borderRadius: 16 } }),
2027
2053
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fx-skeleton", style: { width: 56, height: 12, borderRadius: 10 } })
package/dist/Sidebar.mjs CHANGED
@@ -11,10 +11,11 @@ import Input from "./Input.mjs";
11
11
  import Select from "./Select.mjs";
12
12
  import Tooltip from "./Tooltip.mjs";
13
13
  import {
14
+ CaretLineLeftIcon,
15
+ CaretLineRightIcon,
14
16
  CheckIcon,
15
17
  ChevronDownIcon,
16
18
  CloseIcon,
17
- ChevronLeftRightIcon,
18
19
  DotsSixVerticalIcon,
19
20
  ListStarIcon,
20
21
  MagnifyingGlassIcon,
@@ -722,6 +723,7 @@ function Sidebar({
722
723
  groups,
723
724
  mobile: true,
724
725
  activeKey,
726
+ toggleCollapsed,
725
727
  go,
726
728
  navEditable: navEnabled,
727
729
  navCustomizeLabel: navCustomizeButtonLabel,
@@ -1932,45 +1934,79 @@ function SidebarInner({
1932
1934
  ) }) : null
1933
1935
  ] });
1934
1936
  };
1937
+ const showCollapseToggle = !mobile && typeof toggleCollapsed === "function";
1938
+ const renderCollapseToggle = () => {
1939
+ if (!showCollapseToggle) return null;
1940
+ if (loading) return /* @__PURE__ */ jsx("div", { className: "fx-skeleton shrink-0", style: { width: 40, height: 40, borderRadius: 16 } });
1941
+ return /* @__PURE__ */ jsx(Tooltip, { content: collapsed ? "Expandir barra lateral" : "Contraer barra lateral", placement: "right", offset: 10, children: /* @__PURE__ */ jsx(
1942
+ Button,
1943
+ {
1944
+ noPaddingX: true,
1945
+ "aria-label": collapsed ? "Expandir barra lateral" : "Contraer barra lateral",
1946
+ onClick: toggleCollapsed,
1947
+ variant: "ghost",
1948
+ size: "sm",
1949
+ leftIcon: collapsed ? /* @__PURE__ */ jsx(CaretLineRightIcon, { className: "h-4 w-4", "aria-hidden": true }) : /* @__PURE__ */ jsx(CaretLineLeftIcon, { className: "h-4 w-4", "aria-hidden": true }),
1950
+ className: "shrink-0 h-10 w-10 p-0 !gap-0 rounded-2xl border border-[var(--border)] bg-[var(--card)] text-[var(--foreground)] shadow-sm hover:bg-[color-mix(in_oklab,var(--surface)_70%,transparent)] active:scale-95",
1951
+ title: void 0
1952
+ }
1953
+ ) });
1954
+ };
1935
1955
  return /* @__PURE__ */ jsxs("div", { className: ["flex h-full flex-col", loading ? "pointer-events-none select-none" : ""].join(" "), "aria-busy": loading ? "true" : void 0, children: [
1936
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-1", children: [
1937
- loading ? /* @__PURE__ */ jsxs("div", { className: ["flex items-center gap-3", collapsed ? "justify-center" : ""].join(" "), children: [
1956
+ /* @__PURE__ */ jsx("div", { className: "px-1", children: loading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
1957
+ /* @__PURE__ */ jsxs("div", { className: ["flex min-w-0 flex-1 items-center gap-3", collapsed ? "justify-center" : ""].join(" "), children: [
1938
1958
  /* @__PURE__ */ jsx("div", { className: "fx-skeleton", style: { width: collapsed ? 44 : 40, height: collapsed ? 44 : 40, borderRadius: 16 } }),
1939
1959
  !collapsed ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
1940
1960
  /* @__PURE__ */ jsx("div", { className: "fx-skeleton", style: { width: "8.5rem", height: 14, borderRadius: 10 } }),
1941
1961
  /* @__PURE__ */ jsx("div", { className: "fx-skeleton", style: { width: "10.5rem", height: 10, borderRadius: 10, opacity: 0.9 } })
1942
1962
  ] }) : null
1943
- ] }) : showBrand ? /* @__PURE__ */ jsxs(Button, { unstyled: true, type: "button", onClick: onBrandClick, className: ["flex items-center gap-3", collapsed ? "justify-center" : ""].join(" "), title: "Ir al inicio", children: [
1944
- /* @__PURE__ */ jsx(
1945
- AvatarSquare,
1946
- {
1947
- size: collapsed ? 44 : 40,
1948
- src: brandLogoSrc != null ? brandLogoSrc : void 0,
1949
- alt: brandTitle,
1950
- initials: brandInitials,
1951
- imageFit: brandLogoSrc ? "contain" : "cover",
1952
- radiusClass: "rounded-2xl",
1953
- color,
1954
- className: "ring-0"
1955
- }
1956
- ),
1957
- /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: !collapsed && /* @__PURE__ */ jsxs(
1958
- motion.div,
1959
- {
1960
- initial: { opacity: 0, x: -6 },
1961
- animate: { opacity: 1, x: 0 },
1962
- exit: { opacity: 0, x: -6 },
1963
- transition: { duration: 0.15 },
1964
- className: "leading-tight",
1965
- children: [
1966
- /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold tracking-tight", children: brandTitle }),
1967
- /* @__PURE__ */ jsx("div", { className: "text-[0.6875rem] uppercase tracking-wide text-[var(--muted)] text-left", children: brandSubtitle })
1968
- ]
1969
- },
1970
- "brand-meta"
1971
- ) })
1972
- ] }) : hasWorkspace ? /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 pr-2", children: [
1973
- /* @__PURE__ */ jsx(
1963
+ ] }),
1964
+ renderCollapseToggle()
1965
+ ] }) : showBrand ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
1966
+ /* @__PURE__ */ jsxs(
1967
+ Button,
1968
+ {
1969
+ unstyled: true,
1970
+ type: "button",
1971
+ onClick: onBrandClick,
1972
+ className: ["min-w-0 flex flex-1 items-center gap-3", collapsed ? "justify-center" : ""].join(" "),
1973
+ title: "Ir al inicio",
1974
+ children: [
1975
+ /* @__PURE__ */ jsx(
1976
+ AvatarSquare,
1977
+ {
1978
+ size: collapsed ? 44 : 40,
1979
+ src: brandLogoSrc != null ? brandLogoSrc : void 0,
1980
+ alt: brandTitle,
1981
+ initials: brandInitials,
1982
+ imageFit: brandLogoSrc ? "contain" : "cover",
1983
+ radiusClass: "rounded-2xl",
1984
+ color,
1985
+ className: "ring-0"
1986
+ }
1987
+ ),
1988
+ /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: !collapsed && /* @__PURE__ */ jsxs(
1989
+ motion.div,
1990
+ {
1991
+ initial: { opacity: 0, x: -6 },
1992
+ animate: { opacity: 1, x: 0 },
1993
+ exit: { opacity: 0, x: -6 },
1994
+ transition: { duration: 0.15 },
1995
+ className: "leading-tight",
1996
+ children: [
1997
+ /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold tracking-tight", children: brandTitle }),
1998
+ /* @__PURE__ */ jsx("div", { className: "text-[0.6875rem] uppercase tracking-wide text-[var(--muted)] text-left", children: brandSubtitle })
1999
+ ]
2000
+ },
2001
+ "brand-meta"
2002
+ ) })
2003
+ ]
2004
+ }
2005
+ ),
2006
+ renderCollapseToggle()
2007
+ ] }) : hasWorkspace ? /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
2008
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
2009
+ /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(
1974
2010
  WorkspaceSwitcher,
1975
2011
  {
1976
2012
  collapsed,
@@ -1983,23 +2019,14 @@ function SidebarInner({
1983
2019
  variant: "panel",
1984
2020
  color
1985
2021
  }
1986
- ),
1987
- /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(SidebarTools, { condensed: collapsed }) })
1988
- ] }) : /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-[var(--muted)]", children: "Navegaci\xF3n" }),
1989
- !mobile && (loading ? /* @__PURE__ */ jsx("div", { className: "hidden xl:inline-flex", children: /* @__PURE__ */ jsx("div", { className: "fx-skeleton", style: { width: 32, height: 32, borderRadius: 12 } }) }) : /* @__PURE__ */ jsx(Tooltip, { content: collapsed ? "Expandir sidebar" : "Contraer sidebar", placement: "right", offset: 10, children: /* @__PURE__ */ jsx(
1990
- Button,
1991
- {
1992
- noPaddingX: true,
1993
- "aria-label": collapsed ? "Expandir barra lateral" : "Contraer barra lateral",
1994
- onClick: toggleCollapsed,
1995
- variant: "ghost",
1996
- size: "sm",
1997
- leftIcon: /* @__PURE__ */ jsx(ChevronLeftRightIcon, { collapsed: collapsed != null ? collapsed : false }),
1998
- className: "hidden xl:inline-flex h-8 w-8 p-0 !gap-0 rounded-xl border border-[var(--border)] bg-[var(--card)] text-[var(--foreground)] shadow-sm hover:bg-[color-mix(in_oklab,var(--surface)_70%,transparent)] active:scale-[0.98]",
1999
- title: void 0
2000
- }
2001
- ) }))
2002
- ] }),
2022
+ ) }),
2023
+ renderCollapseToggle()
2024
+ ] }),
2025
+ /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(SidebarTools, { condensed: collapsed }) })
2026
+ ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
2027
+ /* @__PURE__ */ jsx("div", { className: ["min-w-0 flex-1 text-sm font-semibold text-[var(--muted)]", collapsed ? "text-center" : ""].join(" "), children: "Navegaci\xF3n" }),
2028
+ renderCollapseToggle()
2029
+ ] }) }),
2003
2030
  showTopPanel || loading && skShowTopPanel ? /* @__PURE__ */ jsx("div", { className: ["mt-4 px-1", collapsed ? "" : ""].join(" "), children: loading ? /* @__PURE__ */ jsx("div", { className: collapsed ? "rounded-3xl border border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_92%,transparent)] p-2 shadow-sm" : "overflow-hidden rounded-3xl border border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_92%,transparent)] shadow-sm", children: collapsed ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2", children: [
2004
2031
  /* @__PURE__ */ jsx("div", { className: "fx-skeleton", style: { width: 44, height: 44, borderRadius: 16 } }),
2005
2032
  /* @__PURE__ */ jsx("div", { className: "fx-skeleton", style: { width: 56, height: 12, borderRadius: 10 } })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "framepexls-ui-lib",
3
- "version": "1.5.0",
3
+ "version": "1.6.0",
4
4
  "private": false,
5
5
  "license": "MIT",
6
6
  "description": "Componentes UI de Framepexls para React/Next.",