@12-apps/ui 6.19.1 → 6.21.0

package/dist/chunk-7FOOLP5H.js

@@ -0,0 +1,304 @@
+import {
+  navItemButtonStyles,
+  pulseGlow
+} from "./chunk-FYLCSCMR.js";
+import {
+  useMenuItemState
+} from "./chunk-3L5OZCGA.js";
+
+// src/components/navigation/NavigationMenu/NavigationMenuItem.tsx
+import ChevronRight from "@mui/icons-material/ChevronRight";
+import ExpandMore from "@mui/icons-material/ExpandMore";
+import Box from "@mui/material/Box/index.js";
+import Collapse from "@mui/material/Collapse/index.js";
+import Fade from "@mui/material/Fade/index.js";
+import Grow from "@mui/material/Grow/index.js";
+import List from "@mui/material/List/index.js";
+import ListItem from "@mui/material/ListItem/index.js";
+import ListItemButton from "@mui/material/ListItemButton/index.js";
+import ListItemIcon from "@mui/material/ListItemIcon/index.js";
+import ListItemText from "@mui/material/ListItemText/index.js";
+import Popover from "@mui/material/Popover/index.js";
+import { alpha, styled } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StyledListItem = styled(ListItem, {
+  shouldForwardProp: (prop) => !["variant", "active", "size", "level"].includes(prop)
+})(
+  ({ theme, variant, level = 0 }) => ({
+    padding: 0,
+    ...variant === "horizontal" && {
+      width: "auto"
+    },
+    ...level > 0 && {
+      paddingLeft: theme.spacing(2 * level)
+    }
+  })
+);
+var StyledListItemButton = styled(ListItemButton, {
+  shouldForwardProp: (prop) => !["variant", "active", "size", "collapsed", "minimal"].includes(prop)
+})(
+  ({ theme, variant, active, size, collapsed, minimal }) => ({
+    ...navItemButtonStyles({ theme, variant, active, size, collapsed, minimal })
+  })
+);
+var MenuItemPopover = ({ anchorEl, item, size, minimal, onClose, onMouseEnter, onMouseLeave, onItemClick }) => /* @__PURE__ */ jsx(
+  Popover,
+  {
+    open: Boolean(anchorEl),
+    anchorEl,
+    onClose,
+    anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "left"
+    },
+    transformOrigin: {
+      vertical: "top",
+      horizontal: "left"
+    },
+    disableRestoreFocus: true,
+    sx: {
+      pointerEvents: "none"
+    },
+    slotProps: {
+      paper: {
+        onMouseEnter,
+        onMouseLeave,
+        sx: {
+          pointerEvents: "auto",
+          mt: 0.5,
+          borderRadius: 2,
+          boxShadow: (theme) => `0 12px 40px ${alpha(theme.palette.common.black, 0.15)}`,
+          border: (theme) => `1px solid ${alpha(theme.palette.divider, 0.1)}`,
+          background: (theme) => `linear-gradient(145deg, ${theme.palette.background.paper} 0%, ${alpha(theme.palette.background.default, 0.95)} 100%)`,
+          backdropFilter: "blur(10px)",
+          minWidth: 200
+        }
+      }
+    },
+    children: /* @__PURE__ */ jsx(List, { sx: { p: 1 }, children: item.children?.map((child) => {
+      const childHasChildren = child.children && child.children.length > 0;
+      if (childHasChildren) {
+        return renderMenuItem(child, "vertical", size, false, minimal, 0, onItemClick);
+      }
+      return /* @__PURE__ */ jsx(
+        Box,
+        {
+          onClick: onClose,
+          children: renderMenuItem(child, "vertical", size, false, minimal, 0, onItemClick)
+        },
+        child.id
+      );
+    }) })
+  }
+);
+var MenuItemLabel = ({ item, collapsed, open, hasChildren, size, variant }) => /* @__PURE__ */ jsx(Fade, { in: !collapsed, timeout: 400, children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", width: "100%", gap: 1 }, children: [
+  /* @__PURE__ */ jsx(
+    ListItemText,
+    {
+      primary: item.label,
+      secondary: item.description,
+      sx: {
+        flex: 1,
+        minWidth: 0
+        // Allows text truncation if needed
+      },
+      slotProps: {
+        primary: {
+          variant: size === "sm" ? "body2" : size === "lg" ? "h6" : "body1",
+          sx: {
+            fontWeight: item.active ? 600 : 400,
+            transition: "all 0.3s ease"
+          }
+        },
+        secondary: {
+          sx: {
+            opacity: 0.7,
+            transition: "all 0.3s ease"
+          }
+        }
+      }
+    }
+  ),
+  item.badge && /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "span",
+      sx: {
+        flexShrink: 0,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        minWidth: 20,
+        height: 20,
+        px: 0.75,
+        borderRadius: "10px",
+        fontSize: "0.75rem",
+        fontWeight: 600,
+        color: "#fff",
+        background: "linear-gradient(135deg, #ff5252 0%, #ff1744 100%)",
+        boxShadow: "0 2px 8px rgba(255, 23, 68, 0.4)",
+        animation: typeof item.badge === "number" && item.badge > 0 ? `${pulseGlow} 2s infinite` : "none"
+      },
+      children: item.badge
+    }
+  ),
+  hasChildren && /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        flexShrink: 0,
+        // Prevents expand icon from shrinking
+        transition: "transform 0.3s ease",
+        transform: open ? "rotate(180deg)" : "rotate(0deg)"
+      },
+      children: variant === "horizontal" ? /* @__PURE__ */ jsx(ChevronRight, { fontSize: "small" }) : /* @__PURE__ */ jsx(ExpandMore, {})
+    }
+  )
+] }) });
+var MenuItemContent = ({
+  item,
+  variant,
+  size,
+  active: _active,
+  collapsed,
+  minimal,
+  level,
+  open,
+  hasChildren,
+  onClick,
+  onMouseEnter,
+  onMouseLeave
+}) => /* @__PURE__ */ jsx(StyledListItem, { variant, active: item.active, size, level, children: /* @__PURE__ */ jsxs(
+  StyledListItemButton,
+  {
+    variant,
+    active: item.active,
+    size,
+    collapsed,
+    minimal,
+    disabled: item.disabled,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    ...item.href && !hasChildren ? {
+      component: "a",
+      href: item.href,
+      target: item.target
+    } : {},
+    children: [
+      item.icon && /* @__PURE__ */ jsx(
+        ListItemIcon,
+        {
+          sx: {
+            minWidth: collapsed ? 0 : 40,
+            justifyContent: "center",
+            transition: "all 0.3s ease",
+            "& svg": {
+              filter: item.active ? "drop-shadow(0 2px 8px rgba(0,0,0,0.15))" : "none",
+              transition: "all 0.3s ease"
+            }
+          },
+          children: /* @__PURE__ */ jsx(Grow, { in: true, timeout: 600, children: /* @__PURE__ */ jsx(Box, { children: item.icon }) })
+        }
+      ),
+      !collapsed && /* @__PURE__ */ jsx(
+        MenuItemLabel,
+        {
+          item,
+          collapsed,
+          minimal,
+          open,
+          hasChildren,
+          size,
+          variant
+        }
+      )
+    ]
+  }
+) }, item.id);
+var MenuItemRenderer = ({
+  item,
+  variant,
+  size,
+  collapsed,
+  minimal,
+  level,
+  onItemClick
+}) => {
+  const {
+    open,
+    anchorEl,
+    hasChildren,
+    handleClick,
+    handleMouseEnter,
+    handleMouseLeave,
+    handlePopoverMouseEnter,
+    handlePopoverMouseLeave,
+    closePopover
+  } = useMenuItemState({ item, variant, onItemClick });
+  const itemContent = /* @__PURE__ */ jsx(
+    MenuItemContent,
+    {
+      item,
+      variant,
+      size,
+      active: item.active,
+      collapsed,
+      minimal,
+      level,
+      open,
+      hasChildren,
+      onClick: handleClick,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave
+    }
+  );
+  if (hasChildren && variant === "horizontal") {
+    return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      itemContent,
+      /* @__PURE__ */ jsx(
+        MenuItemPopover,
+        {
+          anchorEl,
+          item,
+          size,
+          minimal,
+          onClose: closePopover,
+          onMouseEnter: handlePopoverMouseEnter,
+          onMouseLeave: handlePopoverMouseLeave,
+          onItemClick
+        }
+      )
+    ] }, item.id);
+  }
+  if (hasChildren && variant !== "horizontal") {
+    return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      itemContent,
+      !collapsed && /* @__PURE__ */ jsx(Collapse, { in: open, timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ jsx(List, { component: "div", disablePadding: true, children: item.children?.map(
+        (child) => renderMenuItem(child, variant, size, collapsed, minimal, level + 1, onItemClick)
+      ) }) })
+    ] }, item.id);
+  }
+  return itemContent;
+};
+var renderMenuItem = (item, variant = "vertical", size = "md", collapsed = false, minimal = false, level = 0, onItemClick) => /* @__PURE__ */ jsx(
+  MenuItemRenderer,
+  {
+    item,
+    variant,
+    size,
+    collapsed,
+    minimal,
+    level,
+    onItemClick
+  },
+  item.id
+);
+
+export {
+  renderMenuItem
+};
+//# sourceMappingURL=chunk-7FOOLP5H.js.map

package/dist/chunk-7KTU6YMQ.js

@@ -0,0 +1,38 @@
+import {
+  AddressFallbackField
+} from "./chunk-HKKSZ7HG.js";
+import {
+  AddressAutocompleteField
+} from "./chunk-THZ2NAA4.js";
+import {
+  useAddressAutocomplete
+} from "./chunk-ZOUWHGV3.js";
+import {
+  resolveAddressProps
+} from "./chunk-MTGEJRE4.js";
+
+// src/components/form/AddressAutocomplete/AddressAutocomplete.tsx
+import LocationIcon from "@mui/icons-material/LocationOn";
+import { jsx } from "react/jsx-runtime";
+var AddressAutocomplete = (componentProps) => {
+  const resolved = resolveAddressProps(componentProps);
+  const { defaultValue, googleMapsApiKey, restrictions, onSelect, icon = /* @__PURE__ */ jsx(LocationIcon, {}) } = resolved;
+  const fieldProps = { ...resolved, icon };
+  const state = useAddressAutocomplete({
+    defaultValue,
+    googleMapsApiKey,
+    restrictions,
+    onSelect
+  });
+  if (!state.isLoaded || state.mapsError) {
+    return /* @__PURE__ */ jsx(AddressFallbackField, { ...fieldProps, mapsError: state.mapsError });
+  }
+  return /* @__PURE__ */ jsx(AddressAutocompleteField, { ...fieldProps, ...state });
+};
+var AddressAutocomplete_default = AddressAutocomplete;
+
+export {
+  AddressAutocomplete,
+  AddressAutocomplete_default
+};
+//# sourceMappingURL=chunk-7KTU6YMQ.js.map

package/dist/chunk-7MAOQIWA.js

@@ -0,0 +1,58 @@
+import {
+  resolveBoxLayout,
+  splitBoxProps
+} from "./chunk-7V6ZRQYW.js";
+import {
+  useUiTheme
+} from "./chunk-KLREH4X6.js";
+import {
+  resolveTestId
+} from "./chunk-6F5IKY32.js";
+
+// src/components/layout/Box/Box.tsx
+import MuiBox from "@mui/material/Box/index.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var PX_KEYS = /* @__PURE__ */ new Set([
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "marginTop",
+  "marginRight",
+  "marginBottom",
+  "marginLeft",
+  "gap",
+  "borderRadius",
+  "borderWidth",
+  "width",
+  "height"
+]);
+function layoutToSx(layout) {
+  return Object.fromEntries(
+    Object.entries(layout).map(([key, value]) => [
+      key,
+      typeof value === "number" && PX_KEYS.has(key) ? `${value}px` : value
+    ])
+  );
+}
+var Box = React.forwardRef(
+  ({ children, sx, ...props }, ref) => {
+    const theme = useUiTheme();
+    const { layout, rest } = splitBoxProps(props);
+    const resolved = layoutToSx(resolveBoxLayout(layout, theme));
+    const testId = resolveTestId(layout);
+    const merged = [
+      resolved,
+      ...Array.isArray(sx) ? sx : sx === void 0 ? [] : [sx]
+    ];
+    return /* @__PURE__ */ jsx(MuiBox, { ref, sx: merged, "data-testid": testId, ...rest, children });
+  }
+);
+Box.displayName = "Box";
+
+export {
+  layoutToSx,
+  Box
+};
+//# sourceMappingURL=chunk-7MAOQIWA.js.map

package/dist/chunk-7WDPC46N.js

@@ -0,0 +1,21 @@
+// src/components/layout/Skeleton/Skeleton.helpers.ts
+var SKELETON_DEFAULTS = {
+  variant: "text",
+  animation: "pulse",
+  count: 1,
+  spacing: 1,
+  intensity: "medium",
+  glassmorphism: false,
+  shimmer: false
+};
+var definedProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, value]) => value !== void 0)
+);
+var resolveSkeletonProps = (props) => ({ ...SKELETON_DEFAULTS, ...definedProps(props) });
+var skeletonInstanceTestId = (base, index) => base ? `${base}-${index}` : void 0;
+
+export {
+  resolveSkeletonProps,
+  skeletonInstanceTestId
+};
+//# sourceMappingURL=chunk-7WDPC46N.js.map

package/dist/chunk-7WDPC46N.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Skeleton/Skeleton.helpers.ts"],"sourcesContent":["import type { SkeletonBaseProps } from './Skeleton.base';\n\ntype SkeletonDefaultedKeys =\n  | 'variant'\n  | 'animation'\n  | 'count'\n  | 'spacing'\n  | 'intensity'\n  | 'glassmorphism'\n  | 'shimmer';\n\n/**\n * Generic over the renderer's own props: the web and the native `Skeleton`\n * carry different extras (`className`/`style` against a `View`'s props), and\n * both come back out untouched.\n */\ntype ResolvedSkeletonProps<P extends SkeletonBaseProps> = P &\n  Required<Pick<SkeletonBaseProps, SkeletonDefaultedKeys>>;\n\nconst SKELETON_DEFAULTS: Required<Pick<SkeletonBaseProps, SkeletonDefaultedKeys>> = {\n  variant: 'text',\n  animation: 'pulse',\n  count: 1,\n  spacing: 1,\n  intensity: 'medium',\n  glassmorphism: false,\n  shimmer: false,\n};\n\n// Strips explicitly-undefined props before the merge, so `count={undefined}` still\n// falls back to the default exactly as a destructuring default would.\nconst definedProps = <P extends SkeletonBaseProps>(props: P): Partial<P> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<P>;\n\nexport const resolveSkeletonProps = <P extends SkeletonBaseProps>(\n  props: P,\n): ResolvedSkeletonProps<P> =>\n  ({ ...SKELETON_DEFAULTS, ...definedProps(props) }) as ResolvedSkeletonProps<P>;\n\n/**\n * The id of instance `index` when a caller asked for several. Unnamed\n * skeletons stay unnamed — the web has always cloned `undefined` there.\n */\nexport const skeletonInstanceTestId = (\n  base: string | undefined,\n  index: number,\n): string | undefined => (base ? `${base}-${index}` : undefined);\n"],"mappings":";AAmBA,IAAM,oBAA8E;AAAA,EAClF,SAAS;AAAA,EACT,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,eAAe;AAAA,EACf,SAAS;AACX;AAIA,IAAM,eAAe,CAA8B,UACjD,OAAO;AAAA,EACL,OAAO,QAAQ,KAAK,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK,MAAM,UAAU,MAAS;AACjE;AAEK,IAAM,uBAAuB,CAClC,WAEC,EAAE,GAAG,mBAAmB,GAAG,aAAa,KAAK,EAAE;AAM3C,IAAM,yBAAyB,CACpC,MACA,UACwB,OAAO,GAAG,IAAI,IAAI,KAAK,KAAK;","names":[]}

package/dist/chunk-7ZH7ZB33.js

@@ -0,0 +1,181 @@
+import {
+  DeleteViewDialog
+} from "./chunk-2QFTAGDH.js";
+import {
+  DataViewsGrid
+} from "./chunk-3UOHKHOT.js";
+import {
+  viewStateKey
+} from "./chunk-ZOLAYP2D.js";
+import {
+  ViewDialogs,
+  ViewMutationErrorAlert
+} from "./chunk-BEH4DN63.js";
+import {
+  useSavedViewsController
+} from "./chunk-HR7YTBR7.js";
+
+// src/components/data-display/DataViews/DataViewsTableBase.tsx
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function useUrlSyncState(server, initialState) {
+  const isServerMode = server !== void 0;
+  return useMemo(
+    () => isServerMode && initialState ? {
+      search: initialState.search,
+      pills: initialState.pills,
+      ranges: initialState.ranges,
+      sortBy: initialState.sortBy,
+      // The scope belongs in the URL-driven slice alongside them: a
+      // `?view=recusados`-style deep link and browser back/forward must
+      // move the tab strip, and they must do it WITHOUT resetting the
+      // user's hidden columns — which is the whole reason this is a
+      // merging `syncState` and not a replacing `appliedState`.
+      scope: initialState.scope
+    } : void 0,
+    [isServerMode, initialState]
+  );
+}
+function resolveInitialView(views, requestedId) {
+  const requested = requestedId ? views.find((view) => view.id === requestedId) : void 0;
+  return requested ?? views.find((view) => view.isDefault);
+}
+function buildDisplayView({
+  ctl,
+  views,
+  activeView,
+  dirty,
+  onRequestDelete
+}) {
+  return {
+    activeViewName: ctl.activeViewName,
+    dirty,
+    onReset: () => activeView ? ctl.applyView(activeView) : ctl.selectMain(),
+    // Only offer "Atualizar" when there IS a view to update — otherwise the
+    // single footer button is a plain "Salvar visão".
+    onUpdate: activeView ? () => ctl.openEdit(activeView) : void 0,
+    onSaveAs: ctl.openCreate,
+    // The views themselves, not a dropdown: the panel renders them in its own
+    // body (see `data-views-view-nav`), so there is no second popover to clip
+    // the row actions.
+    nav: {
+      views,
+      activeViewId: activeView?.id ?? null,
+      onSelectView: (id) => {
+        const next = id === null ? null : views.find((view) => view.id === id);
+        if (next) ctl.applyView(next);
+        else ctl.selectMain();
+      },
+      onEditView: ctl.openEdit,
+      onPatchView: (view, changes) => void ctl.patchView(view, changes),
+      onDeleteView: onRequestDelete
+    }
+  };
+}
+function useDirtyTracking(ctl) {
+  const [dirty, setDirty] = useState(false);
+  const [savedAt, setSavedAt] = useState(0);
+  const baseline = useRef(null);
+  const appliedKey = JSON.stringify(ctl.applied ?? null);
+  useEffect(() => {
+    baseline.current = null;
+    setDirty(false);
+  }, [appliedKey, savedAt]);
+  return {
+    dirty,
+    noteState: (state) => {
+      ctl.currentRef.current = state;
+      const key = viewStateKey(state);
+      if (baseline.current === null) {
+        baseline.current = key;
+        setDirty(false);
+        return;
+      }
+      const next = key !== baseline.current;
+      setDirty((prev) => prev === next ? prev : next);
+    },
+    markSaved: () => setSavedAt((tick) => tick + 1)
+  };
+}
+function DataViewsTableBase(props) {
+  const {
+    initialViewId = null,
+    persistence,
+    router,
+    columns,
+    fields,
+    testIdPrefix = "table",
+    views,
+    server,
+    initialState
+  } = props;
+  const initialView = resolveInitialView(views, initialViewId);
+  const columnIds = columns.map((col) => col.id);
+  const ctl = useSavedViewsController(persistence, router, columnIds, views, initialView, initialState);
+  const { dirty, noteState, markSaved } = useDirtyTracking(ctl);
+  const [pendingDelete, setPendingDelete] = useState(null);
+  const activeView = views.find((view) => view.name === ctl.activeViewName);
+  const displayView = buildDisplayView({
+    ctl,
+    views,
+    activeView,
+    dirty,
+    onRequestDelete: setPendingDelete
+  });
+  const syncState = useUrlSyncState(server, initialState);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ViewMutationErrorAlert, { error: ctl.mutationError, onClose: ctl.clearMutationError, testIdPrefix }),
+    /* @__PURE__ */ jsx(
+      DataViewsGrid,
+      {
+        ...props,
+        testIdPrefix,
+        appliedState: ctl.applied,
+        syncState,
+        onStateChange: noteState,
+        displayView
+      }
+    ),
+    renderViewDialogs(ctl, fields, columns, views, testIdPrefix, markSaved),
+    /* @__PURE__ */ jsx(
+      DeleteViewDialog,
+      {
+        view: pendingDelete,
+        onClose: () => setPendingDelete(null),
+        onConfirm: (view) => {
+          void ctl.handleDelete(view);
+          setPendingDelete(null);
+        },
+        testIdPrefix
+      }
+    )
+  ] });
+}
+function renderViewDialogs(ctl, fields, columns, views, testIdPrefix, onSaved) {
+  return /* @__PURE__ */ jsx(
+    ViewDialogs,
+    {
+      saveOpen: ctl.saveOpen,
+      onCloseSave: ctl.closeSave,
+      currentState: ctl.editing ? ctl.editing.state : ctl.currentRef.current,
+      fields,
+      columns,
+      editing: ctl.editing,
+      onSave: async (payload) => {
+        await ctl.handleSave(payload);
+        onSaved();
+      },
+      manageOpen: ctl.manageOpen,
+      onCloseManage: () => ctl.setManageOpen(false),
+      views,
+      onEditFromManage: ctl.editFromManage,
+      onDelete: (view) => void ctl.handleDelete(view),
+      testIdPrefix
+    }
+  );
+}
+
+export {
+  DataViewsTableBase
+};
+//# sourceMappingURL=chunk-7ZH7ZB33.js.map