@12-apps/ui 5.0.0 → 5.1.0

package/dist/navigation/AppHeader.js

@@ -0,0 +1,651 @@
+import {
+  Sheet
+} from "../chunk-LGB6Z34C.js";
+import {
+  Dialog
+} from "../chunk-U3J55YPN.js";
+import {
+  Button
+} from "../chunk-ANNZ3PLI.js";
+import "../chunk-TSPG6TWK.js";
+import {
+  withDefaults
+} from "../chunk-Y2JYDXL7.js";
+import {
+  accentFor
+} from "../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,
+  AppHeaderDetails,
+  AppHeaderIdentity,
+  AppHeaderStatus,
+  brandGradient,
+  AppHeader_default as default,
+  highlightOf,
+  initialsOf
+};
+//# sourceMappingURL=AppHeader.js.map