@12-apps/ui 6.11.0 → 6.11.1

package/dist/navigation/AppHeader.js

@@ -1,642 +1,39 @@
+import "../chunk-5CUKSNWG.js";
 import {
-  Sheet
-} from "../chunk-LGB6Z34C.js";
+  AppHeader,
+  AppHeader_default
+} from "../chunk-OYKAYMD5.js";
 import {
-  Dialog
-} from "../chunk-GSEAUMCS.js";
+  AppHeaderIdentity,
+  AppHeaderStatus
+} from "../chunk-O2CYLVPM.js";
 import {
-  Button
-} from "../chunk-ANNZ3PLI.js";
-import "../chunk-TSPG6TWK.js";
+  AppHeaderDetails
+} from "../chunk-QXMBYYNG.js";
 import {
-  withDefaults
-} from "../chunk-Y2JYDXL7.js";
+  AppHeaderBrand
+} from "../chunk-MZ7XU5HB.js";
 import {
-  accentFor
-} from "../chunk-OZCEKQIX.js";
+  brandGradient,
+  highlightOf,
+  initialsOf
+} from "../chunk-UAVVI7IP.js";
+import "../chunk-AH54NYFW.js";
+import "../chunk-MFE3GSKU.js";
+import "../chunk-CRN4KKNI.js";
+import "../chunk-WTR74VUV.js";
+import "../chunk-EYQA66UV.js";
+import "../chunk-NY4QY5U3.js";
+import "../chunk-GVBSCGFZ.js";
+import "../chunk-ZZVL523U.js";
+import "../chunk-NZD2WISW.js";
+import "../chunk-GD7HXHOT.js";
+import "../chunk-RB4ZAXNU.js";
+import "../chunk-AUYC5K5K.js";
+import "../chunk-IHS3GDPZ.js";
+import "../chunk-HPK33ACY.js";
+import "../chunk-OZCEKQIX.js";
 import "../chunk-PZ5AY32C.js";
-
-// src/components/navigation/AppHeader/AppHeader.tsx
-import { Box } from "@mui/material";
-import React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var BAR_MIN_HEIGHT = { regular: 64, dense: 52 };
-var HEADER_DEFAULTS = {
-  position: "sticky",
-  offsetTop: 0,
-  maxWidth: 1200,
-  divider: true,
-  elevateOnScroll: false,
-  dense: false,
-  disableSpacer: false,
-  dataTestId: "app-header"
-};
-function useScrolled(enabled) {
-  const [scrolled, setScrolled] = React.useState(false);
-  React.useEffect(() => {
-    if (!enabled) return void 0;
-    const onScroll = () => setScrolled(window.scrollY > 0);
-    onScroll();
-    window.addEventListener("scroll", onScroll, { passive: true });
-    return () => window.removeEventListener("scroll", onScroll);
-  }, [enabled]);
-  return enabled && scrolled;
-}
-function useMeasuredHeight(enabled) {
-  const ref = React.useRef(null);
-  const [height, setHeight] = React.useState(0);
-  React.useEffect(() => {
-    const node = ref.current;
-    if (!enabled || !node) return void 0;
-    const measure = () => setHeight(node.getBoundingClientRect().height);
-    measure();
-    if (typeof ResizeObserver === "undefined") return void 0;
-    const observer = new ResizeObserver(measure);
-    observer.observe(node);
-    return () => observer.disconnect();
-  }, [enabled]);
-  return [ref, height];
-}
-function surfaceSx({
-  position,
-  offsetTop,
-  divider,
-  scrolled
-}) {
-  return {
-    position,
-    ...position === "static" ? {} : { top: offsetTop, zIndex: "appBar" },
-    ...position === "fixed" ? { left: 0, right: 0 } : {},
-    backgroundColor: "background.paper",
-    borderBottom: divider ? 1 : 0,
-    borderColor: "divider",
-    boxShadow: scrolled ? 2 : 0,
-    transition: "box-shadow 150ms ease"
-  };
-}
-var HeaderTrailing = ({ meta, actions }) => {
-  if (!meta && !actions) return null;
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      sx: {
-        flex: "0 0 auto",
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "flex-end",
-        gap: 0.5
-      },
-      children: [
-        meta && /* @__PURE__ */ jsx(
-          Box,
-          {
-            "data-testid": "app-header-meta",
-            sx: {
-              fontSize: 11,
-              fontWeight: 700,
-              letterSpacing: "0.08em",
-              textTransform: "uppercase",
-              color: "text.disabled",
-              lineHeight: 1
-            },
-            children: meta
-          }
-        ),
-        actions && /* @__PURE__ */ jsx(
-          Box,
-          {
-            component: "nav",
-            "data-testid": "app-header-actions",
-            sx: { display: "flex", alignItems: "center", gap: 1 },
-            children: actions
-          }
-        )
-      ]
-    }
-  );
-};
-var AppHeader = (props) => {
-  const {
-    leading,
-    children,
-    actions,
-    meta,
-    below,
-    position,
-    offsetTop,
-    maxWidth,
-    divider,
-    elevateOnScroll,
-    dense,
-    disableSpacer,
-    className,
-    dataTestId
-    // True by construction — `withDefaults` fills exactly these keys — but not
-    // something TS can follow through a `Partial<T>` table.
-  } = withDefaults(props, HEADER_DEFAULTS);
-  const scrolled = useScrolled(elevateOnScroll);
-  const needsSpacer = position === "fixed" && !disableSpacer;
-  const [ref, height] = useMeasuredHeight(needsSpacer);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        ref,
-        component: "header",
-        className,
-        "data-testid": dataTestId,
-        sx: surfaceSx({ position, offsetTop, divider, scrolled }),
-        children: /* @__PURE__ */ jsxs(Box, { sx: { maxWidth, mx: "auto", px: { xs: 2, md: 3 } }, children: [
-          /* @__PURE__ */ jsxs(
-            Box,
-            {
-              sx: {
-                display: "flex",
-                alignItems: "center",
-                gap: { xs: 1, md: 2 },
-                minHeight: dense ? BAR_MIN_HEIGHT.dense : BAR_MIN_HEIGHT.regular,
-                py: 1
-              },
-              children: [
-                leading,
-                /* @__PURE__ */ jsx(Box, { sx: { flex: "1 1 auto", minWidth: 0 }, children }),
-                /* @__PURE__ */ jsx(HeaderTrailing, { meta, actions })
-              ]
-            }
-          ),
-          below && /* @__PURE__ */ jsx(Box, { "data-testid": `${dataTestId}-below`, sx: { pb: 1.5 }, children: below })
-        ] })
-      }
-    ),
-    needsSpacer && /* @__PURE__ */ jsx(Box, { "aria-hidden": true, "data-testid": `${dataTestId}-spacer`, sx: { height } })
-  ] });
-};
-AppHeader.displayName = "AppHeader";
-var AppHeader_default = AppHeader;
-
-// src/components/navigation/AppHeader/AppHeader.brand.tsx
-import { Box as Box2, useTheme } from "@mui/material";
-import React2 from "react";
-
-// src/components/navigation/AppHeader/AppHeader.colors.ts
-import { decomposeColor } from "@mui/material";
-var HIGHLIGHT_HUE_SHIFT = 42;
-var HIGHLIGHT_LIGHTEN = 0.12;
-var HUELESS = 0.08;
-var GRADIENT_ANGLE = "135deg";
-function toRgb(color) {
-  try {
-    const { values } = decomposeColor(color);
-    const [r, g, b] = values;
-    if (r === void 0 || g === void 0 || b === void 0) return null;
-    return [r, g, b];
-  } catch {
-    return null;
-  }
-}
-function rgbToHsl([r255, g255, b255]) {
-  const [r, g, b] = [r255 / 255, g255 / 255, b255 / 255];
-  const max = Math.max(r, g, b);
-  const min = Math.min(r, g, b);
-  const l = (max + min) / 2;
-  const delta = max - min;
-  if (delta === 0) return { h: 0, s: 0, l };
-  const s = delta / (1 - Math.abs(2 * l - 1));
-  return { h: hueOf(r, g, b, max, delta), s, l };
-}
-function hueOf(r, g, b, max, delta) {
-  let h;
-  if (max === r) h = 60 * ((g - b) / delta % 6);
-  else if (max === g) h = 60 * ((b - r) / delta + 2);
-  else h = 60 * ((r - g) / delta + 4);
-  return (h + 360) % 360;
-}
-function hslToHex({ h, s, l }) {
-  const a = s * Math.min(l, 1 - l);
-  const channel = (n) => {
-    const k = (n + h / 30) % 12;
-    const value = l - a * Math.max(-1, Math.min(k - 3, Math.min(9 - k, 1)));
-    return Math.round(value * 255).toString(16).padStart(2, "0");
-  };
-  return `#${channel(0)}${channel(8)}${channel(4)}`;
-}
-var clamp01 = (value) => Math.min(1, Math.max(0, value));
-function highlightOf(seed) {
-  const rgb = toRgb(seed);
-  if (!rgb) return seed;
-  const { h, s, l } = rgbToHsl(rgb);
-  const lightened = clamp01(l + HIGHLIGHT_LIGHTEN);
-  if (s < HUELESS) return hslToHex({ h, s, l: lightened });
-  return hslToHex({ h: (h + HIGHLIGHT_HUE_SHIFT) % 360, s, l: lightened });
-}
-function brandGradient(seed) {
-  return `linear-gradient(${GRADIENT_ANGLE}, ${seed} 0%, ${highlightOf(seed)} 100%)`;
-}
-function initialsOf(name) {
-  const parts = name.trim().split(/\s+/u).filter(Boolean);
-  if (parts.length === 0) return "\xB7";
-  const first = parts[0]?.[0] ?? "";
-  const last = parts.length > 1 ? parts[parts.length - 1]?.[0] ?? "" : "";
-  return (first + last).toUpperCase();
-}
-
-// src/components/navigation/AppHeader/AppHeader.brand.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var MARK_PX = { xs: 24, sm: 32, md: 40, lg: 48, xl: 56 };
-var INITIALS_RATIO = 0.4;
-function markSx(theme, { edge, round, showLogo, seed }) {
-  return {
-    width: edge,
-    height: edge,
-    flex: "0 0 auto",
-    overflow: "hidden",
-    borderRadius: round ? "50%" : "30%",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    // Only the initials need the gradient; a logo covers it entirely, and
-    // painting it underneath would show at the corners of a transparent PNG.
-    backgroundImage: showLogo ? "none" : brandGradient(seed),
-    backgroundColor: showLogo ? theme.palette.action.hover : "transparent",
-    color: theme.palette.getContrastText(seed),
-    fontSize: Math.round(edge * INITIALS_RATIO),
-    fontWeight: 700,
-    lineHeight: 1,
-    letterSpacing: "0.02em",
-    userSelect: "none"
-  };
-}
-var AppHeaderBrand = ({
-  name,
-  logoUrl,
-  seedColor,
-  size = "md",
-  shape = "rounded",
-  className,
-  dataTestId = "app-header-brand"
-}) => {
-  const theme = useTheme();
-  const [broken, setBroken] = React2.useState(false);
-  React2.useEffect(() => setBroken(false), [logoUrl]);
-  const edge = MARK_PX[size];
-  const seed = seedColor || theme.palette.primary.main;
-  const showLogo = Boolean(logoUrl) && !broken;
-  return /* @__PURE__ */ jsx2(
-    Box2,
-    {
-      className,
-      "data-testid": dataTestId,
-      role: "img",
-      "aria-label": name,
-      sx: markSx(theme, { edge, round: shape === "circle", showLogo, seed }),
-      children: showLogo ? /* @__PURE__ */ jsx2(
-        Box2,
-        {
-          component: "img",
-          src: logoUrl ?? void 0,
-          alt: "",
-          onError: () => setBroken(true),
-          "data-testid": `${dataTestId}-logo`,
-          sx: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
-        }
-      ) : /* @__PURE__ */ jsx2(Box2, { component: "span", "aria-hidden": true, "data-testid": `${dataTestId}-initials`, children: initialsOf(name) })
-    }
-  );
-};
-AppHeaderBrand.displayName = "AppHeaderBrand";
-
-// src/components/navigation/AppHeader/AppHeader.details.tsx
-import { Box as Box3, Typography, useMediaQuery, useTheme as useTheme2 } from "@mui/material";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var DIALOG_WIDTH = 460;
-var XXS_MAX_WIDTH = 360;
-function sheetHeight(xxs) {
-  return { height: "auto", maxHeight: xxs ? "100dvh" : "90dvh" };
-}
-function usesSheet(presentation, compact) {
-  if (presentation === "sheet") return true;
-  if (presentation === "dialog") return false;
-  return compact;
-}
-var DetailRow = ({
-  row,
-  last,
-  dataTestId
-}) => {
-  const theme = useTheme2();
-  return /* @__PURE__ */ jsxs2(
-    Box3,
-    {
-      "data-testid": `${dataTestId}-row`,
-      "data-row": row.id ?? row.label,
-      sx: {
-        display: "flex",
-        alignItems: "flex-start",
-        justifyContent: "space-between",
-        gap: 2,
-        py: 1.5,
-        borderBottom: last ? "none" : `1px solid ${theme.palette.divider}`
-      },
-      children: [
-        /* @__PURE__ */ jsx3(Typography, { variant: "body1", color: "text.secondary", component: "span", sx: { flex: "0 0 auto" }, children: row.label }),
-        /* @__PURE__ */ jsx3(
-          Typography,
-          {
-            variant: "body1",
-            component: "span",
-            sx: {
-              minWidth: 0,
-              textAlign: "right",
-              fontWeight: row.tone ? 700 : 500,
-              color: row.tone ? accentFor(theme, row.tone).main : "text.primary",
-              // Newlines in a value are meaningful — an address is two lines.
-              whiteSpace: "pre-line"
-            },
-            children: row.value
-          }
-        )
-      ]
-    }
-  );
-};
-var DetailsBody = ({ rows, children, dataTestId }) => /* @__PURE__ */ jsxs2(Box3, { "data-testid": `${dataTestId}-body`, children: [
-  (rows ?? []).map((row, index) => /* @__PURE__ */ jsx3(
-    DetailRow,
-    {
-      row,
-      last: index === (rows?.length ?? 0) - 1 && !children,
-      dataTestId
-    },
-    row.id ?? row.label
-  )),
-  children
-] });
-var DetailsAction = ({ action, dataTestId, padded = false }) => action ? /* @__PURE__ */ jsx3(Box3, { sx: padded ? { pt: 2 } : void 0, children: /* @__PURE__ */ jsx3(
-  Button,
-  {
-    variant: "solid",
-    color: action.color ?? "primary",
-    size: "lg",
-    fullWidth: true,
-    disabled: action.disabled,
-    onClick: action.onClick,
-    dataTestId: action.dataTestId ?? `${dataTestId}-action`,
-    children: action.label
-  }
-) }) : null;
-var AppHeaderDetails = ({
-  open,
-  onClose,
-  title,
-  subtitle,
-  rows,
-  children,
-  action,
-  presentation = "auto",
-  breakpoint = "sm",
-  className,
-  dataTestId = "app-header-details"
-}) => {
-  const theme = useTheme2();
-  const asSheet = usesSheet(presentation, useMediaQuery(theme.breakpoints.down(breakpoint)));
-  const xxs = useMediaQuery(`(max-width:${XXS_MAX_WIDTH - 0.05}px)`);
-  const description = typeof subtitle === "string" ? subtitle : void 0;
-  const richSubtitle = description === void 0 ? subtitle : null;
-  const body = /* @__PURE__ */ jsx3(DetailsBody, { rows, dataTestId, children });
-  const footer = /* @__PURE__ */ jsx3(DetailsAction, { action, dataTestId });
-  if (asSheet) {
-    return /* @__PURE__ */ jsxs2(
-      Sheet,
-      {
-        open,
-        onClose,
-        onOpenChange: (next) => !next && onClose(),
-        position: "bottom",
-        size: "md",
-        style: sheetHeight(xxs),
-        className,
-        title,
-        description,
-        showCloseButton: true,
-        rounded: true,
-        footer,
-        dataTestId,
-        children: [
-          richSubtitle,
-          body
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs2(
-    Dialog,
-    {
-      open,
-      onClose,
-      title,
-      description,
-      showCloseButton: true,
-      fullWidth: true,
-      className,
-      dataTestId,
-      PaperProps: { sx: { maxWidth: DIALOG_WIDTH, borderRadius: 3 } },
-      children: [
-        richSubtitle,
-        body,
-        /* @__PURE__ */ jsx3(DetailsAction, { action, dataTestId, padded: true })
-      ]
-    }
-  );
-};
-AppHeaderDetails.displayName = "AppHeaderDetails";
-
-// src/components/navigation/AppHeader/AppHeader.identity.tsx
-import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
-import { Box as Box4, Skeleton, Typography as Typography2, useTheme as useTheme3 } from "@mui/material";
-import React3 from "react";
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var TITLE_PX = { xs: 14, sm: 15, md: 17, lg: 20, xl: 24 };
-var ONE_LINE = {
-  minWidth: 0,
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap"
-};
-var AppHeaderStatus = ({
-  tone,
-  items,
-  separator = "\xB7",
-  className,
-  dataTestId = "app-header-status"
-}) => {
-  const theme = useTheme3();
-  const visible = items.filter((item) => item !== null && item !== void 0 && item !== "");
-  if (visible.length === 0) return null;
-  return /* @__PURE__ */ jsxs3(
-    Box4,
-    {
-      className,
-      "data-testid": dataTestId,
-      sx: { display: "flex", alignItems: "center", gap: 0.75, ...ONE_LINE },
-      children: [
-        tone && /* @__PURE__ */ jsx4(
-          Box4,
-          {
-            "aria-hidden": true,
-            "data-testid": `${dataTestId}-dot`,
-            sx: {
-              width: 8,
-              height: 8,
-              flex: "0 0 auto",
-              borderRadius: "50%",
-              backgroundColor: accentFor(theme, tone).main
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx4(Typography2, { variant: "body2", color: "text.secondary", component: "span", sx: ONE_LINE, children: visible.map((item, index) => (
-          // Index keys: the segments are positional presentation, and nothing
-          // here reorders or is keyed on identity elsewhere.
-          /* @__PURE__ */ jsxs3(React3.Fragment, { children: [
-            index > 0 && /* @__PURE__ */ jsxs3(Fragment2, { children: [
-              " ",
-              /* @__PURE__ */ jsx4(Box4, { component: "span", "aria-hidden": true, children: separator }),
-              " "
-            ] }),
-            item
-          ] }, index)
-        )) })
-      ]
-    }
-  );
-};
-AppHeaderStatus.displayName = "AppHeaderStatus";
-var IdentityText = ({ title, subtitle, status, size = "md", interactive, disclosed, dataTestId }) => /* @__PURE__ */ jsxs3(Box4, { sx: { minWidth: 0, display: "flex", flexDirection: "column", gap: 0.25 }, children: [
-  /* @__PURE__ */ jsxs3(Box4, { sx: { display: "flex", alignItems: "center", gap: 0.25, minWidth: 0 }, children: [
-    /* @__PURE__ */ jsx4(
-      Typography2,
-      {
-        component: "span",
-        "data-testid": `${dataTestId}-title`,
-        sx: { fontSize: TITLE_PX[size], fontWeight: 700, lineHeight: 1.2, ...ONE_LINE },
-        children: title
-      }
-    ),
-    interactive && /* @__PURE__ */ jsx4(
-      KeyboardArrowDown,
-      {
-        "aria-hidden": true,
-        "data-testid": `${dataTestId}-chevron`,
-        sx: {
-          flex: "0 0 auto",
-          fontSize: 20,
-          opacity: 0.7,
-          transition: "transform 150ms ease",
-          transform: disclosed ? "rotate(180deg)" : "none"
-        }
-      }
-    )
-  ] }),
-  subtitle && /* @__PURE__ */ jsx4(Typography2, { variant: "body2", color: "text.secondary", component: "span", sx: ONE_LINE, children: subtitle }),
-  status
-] });
-var IdentitySkeleton = ({
-  size,
-  dataTestId
-}) => /* @__PURE__ */ jsxs3(
-  Box4,
-  {
-    "data-testid": `${dataTestId}-loading`,
-    sx: { display: "flex", alignItems: "center", gap: 1.25, minWidth: 0 },
-    children: [
-      /* @__PURE__ */ jsx4(Skeleton, { variant: "rounded", width: 40, height: 40, sx: { flex: "0 0 auto" } }),
-      /* @__PURE__ */ jsxs3(Box4, { sx: { minWidth: 0, flex: 1 }, children: [
-        /* @__PURE__ */ jsx4(Skeleton, { variant: "text", width: 140, height: TITLE_PX[size] * 1.4 }),
-        /* @__PURE__ */ jsx4(Skeleton, { variant: "text", width: 180, height: 16 })
-      ] })
-    ]
-  }
-);
-var rowSx = {
-  display: "flex",
-  alignItems: "center",
-  gap: 1.25,
-  width: "100%",
-  minWidth: 0,
-  textAlign: "left"
-};
-var AppHeaderIdentity = ({
-  title,
-  subtitle,
-  status,
-  mark,
-  logoUrl,
-  seedColor,
-  onDisclose,
-  disclosed = false,
-  discloseLabel,
-  loading = false,
-  size = "md",
-  className,
-  dataTestId = "app-header-identity"
-}) => {
-  if (loading) return /* @__PURE__ */ jsx4(IdentitySkeleton, { size, dataTestId });
-  const body = /* @__PURE__ */ jsxs3(Fragment2, { children: [
-    mark ?? /* @__PURE__ */ jsx4(
-      AppHeaderBrand,
-      {
-        name: title,
-        logoUrl,
-        seedColor,
-        size,
-        dataTestId: `${dataTestId}-brand`
-      }
-    ),
-    /* @__PURE__ */ jsx4(
-      IdentityText,
-      {
-        title,
-        subtitle,
-        status,
-        size,
-        interactive: Boolean(onDisclose),
-        disclosed,
-        dataTestId
-      }
-    )
-  ] });
-  if (!onDisclose) {
-    return /* @__PURE__ */ jsx4(Box4, { className, "data-testid": dataTestId, sx: rowSx, children: body });
-  }
-  return /* @__PURE__ */ jsx4(
-    Box4,
-    {
-      component: "button",
-      type: "button",
-      className,
-      "data-testid": dataTestId,
-      onClick: onDisclose,
-      "aria-haspopup": "dialog",
-      "aria-expanded": disclosed,
-      "aria-label": discloseLabel ?? `Detalhes de ${title}`,
-      sx: {
-        ...rowSx,
-        appearance: "none",
-        p: 0.5,
-        ml: -0.5,
-        border: "none",
-        borderRadius: 1.5,
-        background: "none",
-        color: "inherit",
-        font: "inherit",
-        cursor: "pointer",
-        "&:hover": { backgroundColor: "action.hover" },
-        "&:focus-visible": { outline: "2px solid", outlineColor: "primary.main", outlineOffset: 2 }
-      },
-      children: body
-    }
-  );
-};
-AppHeaderIdentity.displayName = "AppHeaderIdentity";
 export {
   AppHeader,
   AppHeaderBrand,