@12-apps/ui 6.54.1 → 6.56.0

package/dist/chunk-M5BSVP2S.js

@@ -0,0 +1,175 @@
+import {
+  BreadcrumbEntry
+} from "./chunk-66H6O55L.js";
+import {
+  breadcrumbsBarStyles,
+  sizeIconMap
+} from "./chunk-XKUJIBF6.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/navigation/Breadcrumbs/Breadcrumbs.tsx
+import ArrowForwardIos from "@mui/icons-material/ArrowForwardIos";
+import ChevronRight from "@mui/icons-material/ChevronRight";
+import NavigateNext from "@mui/icons-material/NavigateNext";
+import Box from "@mui/material/Box/index.js";
+import MuiBreadcrumbs from "@mui/material/Breadcrumbs/index.js";
+import { useTheme, styled } from "@mui/material/styles/index.js";
+import useMediaQuery from "@mui/material/useMediaQuery/index.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var StyledBreadcrumbs = styled(MuiBreadcrumbs, {
+  shouldForwardProp: (prop) => prop !== "size" && prop !== "color" && prop !== "visualStyle" && prop !== "elevation"
+})(
+  ({ theme, size, color, visualStyle, elevation = 0 }) => ({
+    ...breadcrumbsBarStyles({ theme, size, color, visualStyle, elevation })
+  })
+);
+var AnimatedSeparator = styled(Box)(() => ({
+  display: "flex",
+  alignItems: "center",
+  opacity: 0.6,
+  transition: "all 0.2s ease",
+  "&:hover": {
+    opacity: 1,
+    transform: "scale(1.1)"
+  }
+}));
+var getSeparator = (separatorType) => {
+  const separatorContent = (() => {
+    switch (separatorType) {
+      case "slash":
+        return "/";
+      case "arrow":
+        return /* @__PURE__ */ jsx(NavigateNext, { fontSize: "small" });
+      case "chevron":
+        return /* @__PURE__ */ jsx(ChevronRight, { fontSize: "small" });
+      case "dot":
+        return "\u2022";
+      case "pipe":
+        return "|";
+      default:
+        return /* @__PURE__ */ jsx(ArrowForwardIos, { sx: { fontSize: sxRem(12) } });
+    }
+  })();
+  return /* @__PURE__ */ jsx(AnimatedSeparator, { children: separatorContent });
+};
+var collapseItems = ({
+  items,
+  effectiveMaxItems,
+  collapseBehavior
+}) => {
+  if (items.length <= effectiveMaxItems) {
+    return { displayItems: items, collapsedItems: [] };
+  }
+  if (collapseBehavior === "menu") {
+    const firstItem = items[0];
+    const tail = items.slice(-(effectiveMaxItems - 2));
+    return {
+      displayItems: firstItem ? [firstItem, ...tail] : tail,
+      collapsedItems: items.slice(1, -(effectiveMaxItems - 2))
+    };
+  }
+  if (collapseBehavior === "ellipsis") {
+    const half = Math.floor(effectiveMaxItems / 2);
+    return {
+      displayItems: [
+        ...items.slice(0, half),
+        { label: "...", href: "#", isEllipsis: true },
+        ...items.slice(-half)
+      ],
+      collapsedItems: []
+    };
+  }
+  return { displayItems: items, collapsedItems: [] };
+};
+var BREADCRUMBS_DEFAULTS = {
+  variant: "default",
+  separatorType: "default",
+  maxItems: 8,
+  showHomeIcon: true,
+  size: "md",
+  color: "neutral",
+  elevation: 1,
+  collapseBehavior: "menu",
+  mobileMaxItems: 3
+};
+var resolveProps = (props) => ({
+  ...BREADCRUMBS_DEFAULTS,
+  ...Object.fromEntries(
+    Object.entries(props).filter(([, value]) => value !== void 0)
+  )
+});
+var Breadcrumbs = React.forwardRef(
+  (componentProps, ref) => {
+    const {
+      variant,
+      separatorType,
+      items,
+      separator,
+      maxItems,
+      showHomeIcon,
+      size,
+      color,
+      elevation,
+      collapseBehavior,
+      mobileMaxItems,
+      ariaLabel,
+      copy,
+      dataTestId,
+      ...props
+    } = resolveProps(componentProps);
+    const theme = useTheme();
+    const finalSeparator = separator || getSeparator(separatorType);
+    const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+    const iconSize = sizeIconMap[size];
+    const effectiveMaxItems = isMobile ? mobileMaxItems : maxItems;
+    const shouldCollapse = items.length > effectiveMaxItems;
+    const { displayItems, collapsedItems } = collapseItems({
+      items,
+      effectiveMaxItems,
+      collapseBehavior
+    });
+    return /* @__PURE__ */ jsx(
+      StyledBreadcrumbs,
+      {
+        ref,
+        separator: finalSeparator,
+        maxItems: shouldCollapse ? void 0 : effectiveMaxItems,
+        size,
+        color,
+        visualStyle: variant,
+        elevation,
+        "aria-label": ariaLabel || "breadcrumb navigation",
+        role: "navigation",
+        "data-testid": dataTestId || "breadcrumbs",
+        ...props,
+        children: displayItems.map((item, index) => /* @__PURE__ */ jsx(
+          BreadcrumbEntry,
+          {
+            copy,
+            item,
+            index,
+            itemCount: displayItems.length,
+            collapsedItems,
+            collapseBehavior,
+            separator: finalSeparator,
+            showHomeIcon,
+            iconSize,
+            size,
+            variant,
+            dataTestId
+          },
+          index
+        ))
+      }
+    );
+  }
+);
+Breadcrumbs.displayName = "Breadcrumbs";
+
+export {
+  Breadcrumbs
+};
+//# sourceMappingURL=chunk-M5BSVP2S.js.map

package/dist/chunk-M5DBOM7R.js

@@ -0,0 +1,80 @@
+import {
+  fieldHeight
+} from "./chunk-RGVNXES5.js";
+import {
+  fieldRadiusPx
+} from "./chunk-GDN2LUTZ.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/layout/ContentToolbar/FilterTrigger.tsx
+import FilterIcon from "@mui/icons-material/FilterListRounded";
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FilterTrigger({
+  open,
+  onOpenChange,
+  hasActiveFilters = false,
+  activeCount = 0,
+  label = "Filtros",
+  "data-testid": testId = "toggle-filters-btn"
+}) {
+  const active = activeCount > 0 || hasActiveFilters;
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant: "text",
+      size: "small",
+      color: "inherit",
+      "data-testid": testId,
+      "aria-expanded": open,
+      "aria-label": open ? "Close filters" : "Open filters",
+      onClick: () => onOpenChange(!open),
+      startIcon: /* @__PURE__ */ jsx(FilterIcon, { sx: { fontSize: sxRem(16) } }),
+      sx: {
+        minWidth: 0,
+        height: fieldHeight,
+        px: 1,
+        gap: 0.25,
+        borderRadius: fieldRadiusPx,
+        textTransform: "none",
+        fontWeight: 600,
+        color: active ? "primary.main" : "text.primary",
+        bgcolor: open ? "action.selected" : "transparent"
+      },
+      children: [
+        label,
+        activeCount > 0 && /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: "span",
+            "data-testid": `${testId}-count`,
+            sx: {
+              ml: 0.5,
+              minWidth: sxRem(18),
+              height: sxRem(18),
+              px: 0.5,
+              borderRadius: 999,
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: sxRem(11.2),
+              fontWeight: 700,
+              lineHeight: 1,
+              bgcolor: "primary.main",
+              color: "primary.contrastText"
+            },
+            children: activeCount
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  FilterTrigger
+};
+//# sourceMappingURL=chunk-M5DBOM7R.js.map

package/dist/chunk-MECRQNCE.js

@@ -0,0 +1,67 @@
+import {
+  accentFor
+} from "./chunk-B7ZHEOQQ.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/Command/Command.styles.ts
+import { alpha } from "@mui/material/styles/index.js";
+var SIZE_MAP = {
+  xs: { widthPx: 400, fontPx: 12 },
+  sm: { widthPx: 450, fontPx: 14 },
+  md: { widthPx: 500, fontPx: 16 },
+  lg: { widthPx: 550, fontPx: 18 },
+  xl: { widthPx: 600, fontPx: 20 }
+};
+var commandSizeStyles = (theme, size) => {
+  const { widthPx, fontPx } = SIZE_MAP[size] || SIZE_MAP.md;
+  return { width: rem(theme, widthPx), fontSize: rem(theme, fontPx) };
+};
+var emphasisStyles = (theme, color, glow, pulse) => ({
+  ...glow && {
+    boxShadow: `0 0 ${rem(theme, 20)} ${alpha(accentFor(theme, color).main, 0.4)}`
+  },
+  ...pulse && {
+    animation: "pulse 2s infinite",
+    "@keyframes pulse": {
+      "0%": { boxShadow: `0 0 0 0 ${alpha(accentFor(theme, color).main, 0.4)}` },
+      "70%": { boxShadow: `0 0 0 ${rem(theme, 10)} ${alpha(accentFor(theme, color).main, 0)}` },
+      "100%": { boxShadow: `0 0 0 0 ${alpha(accentFor(theme, color).main, 0)}` }
+    }
+  }
+});
+var surfaceStyles = (theme, variant, color) => {
+  switch (variant) {
+    case "glass":
+      return {
+        backgroundColor: alpha(theme.palette.background.paper, 0.1),
+        backdropFilter: `blur(${rem(theme, 20)})`,
+        border: `1px solid ${alpha(accentFor(theme, color).main, 0.2)}`
+      };
+    case "gradient":
+      return {
+        background: `linear-gradient(135deg, ${accentFor(theme, color).main}, ${accentFor(theme, color).dark})`,
+        color: accentFor(theme, color).contrastText
+      };
+    case "elevated":
+      return { boxShadow: theme.shadows[8] };
+    case "minimal":
+      return { border: "none", boxShadow: "none" };
+    default:
+      return {};
+  }
+};
+var commandPaperStyles = (theme, { variant, color, glow, pulse }) => ({
+  transition: theme.transitions.create(["all"], {
+    duration: theme.transitions.duration.standard
+  }),
+  ...emphasisStyles(theme, color, glow, pulse),
+  ...surfaceStyles(theme, variant, color)
+});
+
+export {
+  commandSizeStyles,
+  commandPaperStyles
+};
+//# sourceMappingURL=chunk-MECRQNCE.js.map

package/dist/chunk-MIUPTZS6.js

@@ -0,0 +1,66 @@
+import {
+  fieldControlStyles
+} from "./chunk-RGVNXES5.js";
+import {
+  fieldRadius
+} from "./chunk-GDN2LUTZ.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/MapPreview/MapSearchBar.tsx
+import SearchIcon from "@mui/icons-material/Search";
+import Box from "@mui/material/Box/index.js";
+import InputAdornment from "@mui/material/InputAdornment/index.js";
+import TextField from "@mui/material/TextField/index.js";
+import { alpha, styled } from "@mui/material/styles/index.js";
+import { jsx } from "react/jsx-runtime";
+var SearchBar = styled(Box)(({ theme }) => ({
+  position: "absolute",
+  top: theme.spacing(2),
+  left: "50%",
+  transform: "translateX(-50%)",
+  zIndex: 2,
+  width: "90%",
+  maxWidth: rem(theme, 400)
+}));
+var SearchField = styled(TextField)(({ theme }) => ({
+  ...fieldControlStyles(theme),
+  "& .MuiOutlinedInput-root": {
+    background: alpha(theme.palette.background.paper, 0.95),
+    backdropFilter: `blur(${rem(theme, 10)})`,
+    WebkitBackdropFilter: `blur(${rem(theme, 10)})`,
+    borderRadius: fieldRadius(theme),
+    "& fieldset": {
+      borderColor: alpha(theme.palette.divider, 0.2)
+    }
+  }
+}));
+var MapSearchBar = ({
+  label,
+  value,
+  placeholder,
+  isSearching,
+  onChange,
+  onSubmit
+}) => /* @__PURE__ */ jsx(SearchBar, { children: /* @__PURE__ */ jsx(
+  SearchField,
+  {
+    fullWidth: true,
+    size: "small",
+    placeholder,
+    value,
+    onChange: (event) => onChange(event.target.value),
+    onKeyPress: onSubmit,
+    InputProps: {
+      startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(SearchIcon, { fontSize: "small", sx: { opacity: isSearching ? 0.5 : 1 } }) })
+    },
+    disabled: isSearching,
+    "aria-label": label
+  }
+) });
+
+export {
+  MapSearchBar
+};
+//# sourceMappingURL=chunk-MIUPTZS6.js.map

package/dist/chunk-MJH5DWIA.js

@@ -0,0 +1,216 @@
+import {
+  absoluteInk,
+  neutralTones,
+  shadowInk,
+  sheen
+} from "./chunk-SSX5ITPM.js";
+import {
+  rem,
+  rems,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/navigation/ContextMenu/ContextMenu.tsx
+import Divider from "@mui/material/Divider/index.js";
+import ListItemIcon from "@mui/material/ListItemIcon/index.js";
+import ListItemText from "@mui/material/ListItemText/index.js";
+import Menu from "@mui/material/Menu/index.js";
+import MenuItem from "@mui/material/MenuItem/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, styled } from "@mui/material/styles/index.js";
+import React, { cloneElement, isValidElement, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var StyledMenu = styled(Menu, {
+  shouldForwardProp: (prop) => prop !== "customVariant" && prop !== "size"
+})(({ theme, customVariant, size }) => ({
+  "& .MuiPaper-root": {
+    minWidth: rem(theme, 160),
+    borderRadius: theme.spacing(1),
+    ...customVariant === "glass" && {
+      backgroundColor: alpha(theme.palette.background.paper, 0.85),
+      backdropFilter: `blur(${rem(theme, 20)})`,
+      border: `1px solid ${alpha(theme.palette.divider, 0.1)}`,
+      boxShadow: `0 ${rems(theme, 8, 32)} ${shadowInk(theme, 0.12)}`
+    },
+    ...customVariant === "dark" && {
+      backgroundColor: alpha(neutralTones(theme).inverseSurface, 0.95),
+      color: absoluteInk(theme).white,
+      "& .MuiMenuItem-root": {
+        color: absoluteInk(theme).white
+      },
+      "& .MuiListItemIcon-root": {
+        color: absoluteInk(theme).white
+      },
+      "& .MuiDivider-root": {
+        borderColor: sheen(theme, 0.12)
+      }
+    },
+    ...size === "sm" && {
+      "& .MuiMenuItem-root": {
+        fontSize: rem(theme, 14),
+        minHeight: rem(theme, 32),
+        padding: theme.spacing(0.5, 1.5)
+      }
+    },
+    ...size === "lg" && {
+      "& .MuiMenuItem-root": {
+        fontSize: rem(theme, 18),
+        minHeight: rem(theme, 48),
+        padding: theme.spacing(1.5, 2)
+      }
+    }
+  }
+}));
+var paletteColor = (theme, color) => theme.palette[color]?.main || theme.palette.primary.main;
+var accentStyles = (theme, color) => {
+  const main = paletteColor(theme, color);
+  return {
+    color: main,
+    "& .MuiListItemIcon-root": { color: main },
+    "&:hover": { backgroundColor: alpha(main, 0.08) }
+  };
+};
+var StyledMenuItem = styled(MenuItem, {
+  shouldForwardProp: (prop) => !["color", "dangerous"].includes(prop)
+})(({ theme, color, dangerous }) => ({
+  borderRadius: theme.spacing(0.5),
+  margin: theme.spacing(0.25, 0.5),
+  transition: "all 0.2s ease",
+  "&:hover": {
+    backgroundColor: alpha(dangerous ? theme.palette.error.main : theme.palette.primary.main, 0.08)
+  },
+  ...dangerous && {
+    color: theme.palette.error.main,
+    "& .MuiListItemIcon-root": {
+      color: theme.palette.error.main
+    }
+  },
+  ...color && color !== "default" && !dangerous ? accentStyles(theme, color) : {}
+}));
+var MenuHeader = styled(Typography)(({ theme }) => ({
+  padding: theme.spacing(1, 2),
+  fontSize: rem(theme, 12),
+  fontWeight: 600,
+  textTransform: "uppercase",
+  color: theme.palette.text.secondary,
+  letterSpacing: rem(theme, 0.5)
+}));
+var ShortcutText = styled(Typography)(({ theme }) => ({
+  fontSize: rem(theme, 12),
+  color: theme.palette.text.secondary,
+  marginLeft: "auto",
+  paddingLeft: theme.spacing(2)
+}));
+var renderMenuItem = (item, handleItemClick, size) => {
+  if (item.type === "divider") {
+    return /* @__PURE__ */ jsx(Divider, { sx: { my: 0.5 } }, item.id);
+  }
+  if (item.type === "header") {
+    return /* @__PURE__ */ jsx(MenuHeader, { children: item.label }, item.id);
+  }
+  const hasIcon = !!item.icon;
+  return /* @__PURE__ */ jsxs(
+    StyledMenuItem,
+    {
+      disabled: item.disabled,
+      onClick: () => handleItemClick(item),
+      color: item.color,
+      dangerous: item.dangerous,
+      children: [
+        hasIcon && /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: sxRem(size === "sm" ? 32 : 40) }, children: item.icon }),
+        /* @__PURE__ */ jsx(ListItemText, { primary: item.label }),
+        item.shortcut && /* @__PURE__ */ jsx(ShortcutText, { variant: "caption", children: item.shortcut })
+      ]
+    },
+    item.id
+  );
+};
+var buildTrigger = (children, onContextMenu, { disabled, triggerClassName, triggerStyle }) => {
+  const cursor = disabled ? "default" : "context-menu";
+  if (!isValidElement(children)) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        onContextMenu,
+        className: triggerClassName,
+        style: { ...triggerStyle, cursor },
+        children
+      }
+    );
+  }
+  const element = children;
+  return cloneElement(element, {
+    onContextMenu,
+    className: [
+      element.props.className,
+      triggerClassName,
+      !disabled ? "context-menu-trigger" : ""
+    ].filter(Boolean).join(" "),
+    style: { ...element.props.style, ...triggerStyle, cursor }
+  });
+};
+var ContextMenu = React.forwardRef(
+  ({
+    variant = "default",
+    items,
+    children,
+    disabled = false,
+    onOpen,
+    onClose,
+    size = "md",
+    triggerClassName,
+    triggerStyle,
+    ...menuProps
+  }, ref) => {
+    const [contextMenu, setContextMenu] = useState(null);
+    const handleContextMenu = (event) => {
+      if (disabled) return;
+      event.preventDefault();
+      setContextMenu(
+        contextMenu === null ? {
+          mouseX: event.clientX + 2,
+          mouseY: event.clientY - 6
+        } : null
+      );
+      onOpen?.(event);
+    };
+    const handleClose = () => {
+      setContextMenu(null);
+      onClose?.();
+    };
+    const handleItemClick = (item) => {
+      if (item.onClick) {
+        item.onClick();
+      }
+      handleClose();
+    };
+    const triggerElement = buildTrigger(children, handleContextMenu, {
+      disabled,
+      triggerClassName,
+      triggerStyle
+    });
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      triggerElement,
+      /* @__PURE__ */ jsx(
+        StyledMenu,
+        {
+          ref,
+          open: contextMenu !== null,
+          onClose: handleClose,
+          anchorReference: "anchorPosition",
+          anchorPosition: contextMenu !== null ? { top: contextMenu.mouseY, left: contextMenu.mouseX } : void 0,
+          customVariant: variant,
+          size,
+          ...menuProps,
+          children: items.map((item) => renderMenuItem(item, handleItemClick, size))
+        }
+      )
+    ] });
+  }
+);
+ContextMenu.displayName = "ContextMenu";
+
+export {
+  ContextMenu
+};
+//# sourceMappingURL=chunk-MJH5DWIA.js.map