@12-apps/ui 6.19.1 → 6.21.0

package/dist/chunk-6Z4H2Y77.js

@@ -0,0 +1,270 @@
+import {
+  VARIANT_ICON
+} from "./chunk-N3QUEBNS.js";
+import {
+  ACTION_SLOT,
+  ALERT_EASING,
+  ALERT_PADDING_UNITS,
+  ALERT_TRANSITION_MS,
+  FADE_IN,
+  GLASS,
+  GLOW,
+  GRADIENT,
+  ICON_SLOT,
+  ICON_SPIN,
+  MESSAGE_BUTTON,
+  MESSAGE_FONT_SIZE,
+  MESSAGE_GAP_UNITS,
+  MESSAGE_LINE_HEIGHT,
+  NEUTRAL_GREY,
+  PULSE,
+  SEMANTIC_SURFACE,
+  SEMANTIC_VARIANTS,
+  seconds
+} from "./chunk-B2Y3BABA.js";
+import {
+  px
+} from "./chunk-NQN5Z36J.js";
+
+// src/components/data-display/Alert/Alert.styles.tsx
+import Error from "@mui/icons-material/Error";
+import Info from "@mui/icons-material/Info";
+import CheckCircle from "@mui/icons-material/CheckCircle";
+import Warning from "@mui/icons-material/Warning";
+import { alpha, darken, keyframes, lighten } from "@mui/material/styles/index.js";
+import { jsx } from "react/jsx-runtime";
+var pulseAnimation = keyframes`
+  0% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 1;
+  }
+  70% {
+    box-shadow: 0 0 0 ${PULSE.spread}px currentColor;
+    opacity: 0;
+  }
+  100% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 0;
+  }
+`;
+var shimmerAnimation = keyframes`
+  0% {
+    background-position: -${GRADIENT.shimmerTravel}px 0;
+  }
+  100% {
+    background-position: ${GRADIENT.shimmerTravel}px 0;
+  }
+`;
+var fadeInScale = keyframes`
+  from {
+    opacity: 0;
+    transform: scale(${FADE_IN.scale}) translateY(-${FADE_IN.lift}px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+`;
+var iconRotate = keyframes`
+  0% {
+    transform: rotate(0deg) scale(${ICON_SPIN.from});
+  }
+  50% {
+    transform: rotate(180deg) scale(${ICON_SPIN.mid});
+  }
+  100% {
+    transform: rotate(360deg) scale(1);
+  }
+`;
+var getColorFromTheme = (theme, variant) => {
+  const colorMap = {
+    info: theme.palette.info,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    danger: theme.palette.error,
+    primary: theme.palette.primary,
+    secondary: theme.palette.secondary,
+    neutral: {
+      main: theme.palette.grey[NEUTRAL_GREY.main] || "#9E9E9E",
+      light: theme.palette.grey[NEUTRAL_GREY.light] || "#E0E0E0",
+      dark: theme.palette.grey[NEUTRAL_GREY.dark] || "#616161"
+    }
+  };
+  return colorMap[variant] || theme.palette.info;
+};
+var VARIANT_ICONS = {
+  Info: /* @__PURE__ */ jsx(Info, {}),
+  CheckCircle: /* @__PURE__ */ jsx(CheckCircle, {}),
+  Warning: /* @__PURE__ */ jsx(Warning, {}),
+  Error: /* @__PURE__ */ jsx(Error, {})
+};
+var getVariantIcon = (variant) => {
+  const name = VARIANT_ICON[variant];
+  return name ? VARIANT_ICONS[name] : void 0;
+};
+var alertLayoutStyles = (theme, colorPalette, animate) => ({
+  // ROOM TO READ.
+  //
+  // MUI's `6px 16px` is sized for one line of text and nothing else. This Alert
+  // routinely carries three things stacked — a sentence, a smaller explanation,
+  // then a control — and at 6px they touched top and bottom and ran together
+  // vertically, so the whole card read as one dense block instead of as a
+  // message with parts. The generosity is what makes the structure legible; it
+  // is not decoration.
+  //
+  // Padding stays overridable by an `sx` (a full-bleed strip legitimately wants
+  // it tight), because this is a default rather than a rule.
+  padding: theme.spacing(ALERT_PADDING_UNITS.vertical, ALERT_PADDING_UNITS.horizontal),
+  ".MuiAlert-message": {
+    display: "flex",
+    flexDirection: "column",
+    // 0.5 put a title, its explanation and a button 4px apart, which reads as a
+    // spacing bug rather than as a group. 1 separates the lines; the extra
+    // margin below goes to whatever CONTROL sits at the end, because the gap
+    // between prose and a thing you press has to be bigger than the gap between
+    // two lines of prose or the button looks like part of the text.
+    gap: theme.spacing(MESSAGE_GAP_UNITS),
+    fontSize: px(MESSAGE_FONT_SIZE),
+    lineHeight: MESSAGE_LINE_HEIGHT,
+    // No padding of its own — the root's is now doing that job, and MUI's
+    // default `8px 0` on top of it would double the vertical space.
+    padding: 0,
+    // A CONTROL ON A TINTED PANEL NEEDS AN EDGE.
+    //
+    // `ghost` and `text` paint no background and no border — bare labels, which
+    // works on white where the surrounding page is obviously not clickable.
+    // Inside a coloured Alert it stops working: the label is one more coloured
+    // phrase among several, and a "Cancelar" beside two lines of prose reads as
+    // part of the prose.
+    //
+    // Only the BORDER is set, never the background or the colour, and that is
+    // what makes it safe to apply to every button rather than just the bare
+    // ones: a `solid` keeps its fill and its light label and gains a hairline
+    // in the same hue, while a `ghost` gains the whole affordance.
+    ".MuiButton-root": {
+      marginTop: theme.spacing(MESSAGE_BUTTON.marginTopUnits),
+      border: `1px solid ${alpha(colorPalette.main, MESSAGE_BUTTON.borderAlpha)}`
+    }
+  },
+  ".MuiAlert-icon": {
+    transition: `transform ${seconds(ALERT_TRANSITION_MS)} ${ALERT_EASING}`,
+    alignItems: "center",
+    // Clear of the words rather than nearly touching them, and aligned to the
+    // FIRST line instead of centred on the whole block — an icon floating
+    // halfway down a three-line message points at nothing.
+    alignSelf: "flex-start",
+    marginRight: theme.spacing(ICON_SLOT.marginRightUnits),
+    paddingTop: theme.spacing(ICON_SLOT.paddingTopUnits),
+    animation: animate ? `${iconRotate} ${seconds(ICON_SPIN.ms)} ease-out` : "none"
+  },
+  // The close button, kept off the text it sits beside.
+  ".MuiAlert-action": {
+    alignItems: "flex-start",
+    paddingLeft: theme.spacing(ACTION_SLOT.paddingLeftUnits)
+  }
+});
+var semanticSurface = (theme, colorPalette) => {
+  const dark = theme.palette.mode === "dark";
+  return {
+    backgroundColor: dark ? darken(colorPalette.main, SEMANTIC_SURFACE.tint.dark) : lighten(colorPalette.main, SEMANTIC_SURFACE.tint.light),
+    color: dark ? lighten(colorPalette.main, SEMANTIC_SURFACE.ink) : darken(colorPalette.main, SEMANTIC_SURFACE.ink),
+    border: `1px solid ${alpha(colorPalette.main, SEMANTIC_SURFACE.borderAlpha)}`,
+    ".MuiAlert-icon": {
+      color: colorPalette.main
+    }
+  };
+};
+var alertVariantStyles = (theme, customVariant, colorPalette) => ({
+  ...customVariant !== void 0 && SEMANTIC_VARIANTS.has(customVariant) && semanticSurface(theme, colorPalette),
+  ...customVariant === "glass" && {
+    // 85%, not 10%. This is the variant that is MEANT to be see-through, and it
+    // was the same mistake in a costume: at 0.1 the blur had almost nothing to
+    // sit on, so `glass` was not frosted, it was a window. A frosted pane has to
+    // be mostly pane — the backdrop should be legible AS texture behind the
+    // text, never as competition with it.
+    backgroundColor: alpha(theme.palette.background.paper, GLASS.backgroundAlpha),
+    backdropFilter: `blur(${GLASS.blur}px) saturate(${GLASS.saturatePercent}%)`,
+    WebkitBackdropFilter: `blur(${GLASS.blur}px) saturate(${GLASS.saturatePercent}%)`,
+    border: `1px solid ${alpha(theme.palette.divider, GLASS.borderAlpha)}`,
+    color: theme.palette.text.primary,
+    ".MuiAlert-icon": {
+      color: theme.palette.primary.main
+    },
+    // Safari before 18 and Firefox with the filter disabled paint the declared
+    // alpha with nothing blurred behind it — the see-through banner this is
+    // fixing. There is no degraded frost to fall back to, so it falls back to an
+    // opaque pane: less pretty, still readable.
+    "@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))": {
+      backgroundColor: theme.palette.background.paper
+    }
+  },
+  ...customVariant === "gradient" && {
+    background: `linear-gradient(${GRADIENT.angleDeg}deg, ${alpha(colorPalette.light || colorPalette.main, GRADIENT.stopAlpha)}, ${alpha(colorPalette.dark || colorPalette.main, GRADIENT.stopAlpha)})`,
+    color: theme.palette.getContrastText(colorPalette.main),
+    border: "none",
+    position: "relative",
+    overflow: "hidden",
+    ".MuiAlert-icon": {
+      color: theme.palette.getContrastText(colorPalette.main)
+    },
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: `-${GRADIENT.shimmerTravel}px`,
+      width: "100%",
+      height: "100%",
+      background: `linear-gradient(90deg, transparent, ${alpha(theme.palette.common.white, GRADIENT.shimmerAlpha)}, transparent)`,
+      animation: `${shimmerAnimation} ${seconds(GRADIENT.shimmerMs)} infinite`
+    },
+    "&:hover": {
+      filter: `brightness(${GRADIENT.hoverBrightness})`,
+      transform: `translateY(-${GRADIENT.hoverLift}px) scale(${GRADIENT.hoverScale})`
+    }
+  }
+});
+var glowStyles = (colorPalette) => ({
+  boxShadow: `0 0 ${GLOW.blur}px ${GLOW.spread}px ${alpha(colorPalette.main, GLOW.alpha)} !important`,
+  filter: `brightness(${GLOW.brightness})`
+});
+var pulseAfter = (colorPalette) => ({
+  content: '""',
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  borderRadius: "inherit",
+  backgroundColor: colorPalette.main,
+  opacity: PULSE.alpha,
+  animation: `${pulseAnimation} ${seconds(PULSE.ms)} infinite`,
+  pointerEvents: "none",
+  zIndex: -1
+});
+var alertEmphasisStyles = (colorPalette, glow, pulse) => ({
+  ...glow && !pulse && glowStyles(colorPalette),
+  // Pulse animation
+  ...pulse && !glow && {
+    position: "relative",
+    "&::after": pulseAfter(colorPalette)
+  },
+  // Both glow and pulse
+  ...glow && pulse && {
+    position: "relative",
+    ...glowStyles(colorPalette),
+    "&::after": pulseAfter(colorPalette)
+  }
+});
+
+export {
+  pulseAnimation,
+  shimmerAnimation,
+  fadeInScale,
+  iconRotate,
+  getColorFromTheme,
+  getVariantIcon,
+  alertLayoutStyles,
+  alertVariantStyles,
+  alertEmphasisStyles
+};
+//# sourceMappingURL=chunk-6Z4H2Y77.js.map

package/dist/chunk-736HP6BL.js

@@ -0,0 +1,64 @@
+import {
+  Text
+} from "./chunk-26Z7QWID.js";
+
+// src/components/data-display/DescriptionItem/DescriptionItem.tsx
+import Box from "@mui/material/Box/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FLEX_ALIGN = { start: "flex-start", center: "center", end: "flex-end" };
+var containerSx = (isHorizontal, align) => ({
+  display: "flex",
+  flexDirection: isHorizontal ? "row" : "column",
+  alignItems: isHorizontal ? "center" : FLEX_ALIGN[align],
+  gap: isHorizontal ? 1 : 0,
+  // `alignItems` places the two boxes; `textAlign` handles a label or value
+  // that WRAPS, whose second line would otherwise fall back to flush-left
+  // inside a box the alignment had already centred.
+  textAlign: align
+});
+var labelStyle = (isHorizontal) => ({
+  textTransform: "uppercase",
+  marginBottom: isHorizontal ? 0 : "0.25rem",
+  minWidth: isHorizontal ? "fit-content" : void 0,
+  flexShrink: isHorizontal ? 0 : void 0
+});
+var makeTestId = (dataTestId) => (suffix) => dataTestId ? `${dataTestId}-${suffix}` : `description-item-${suffix}`;
+var DescriptionItem = ({
+  label,
+  value,
+  orientation = "vertical",
+  align = "start",
+  className,
+  "data-testid": dataTestId
+}) => {
+  const isHorizontal = orientation === "horizontal";
+  const testId = makeTestId(dataTestId);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className,
+      sx: containerSx(isHorizontal, align),
+      "data-testid": dataTestId || "description-item",
+      children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            variant: "caption",
+            size: "xs",
+            color: "secondary",
+            style: labelStyle(isHorizontal),
+            "data-testid": testId("label"),
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx(Box, { "data-testid": testId("value"), children: typeof value === "string" || typeof value === "number" ? /* @__PURE__ */ jsx(Text, { variant: "body", size: "sm", weight: "semibold", children: value }) : value })
+      ]
+    }
+  );
+};
+DescriptionItem.displayName = "DescriptionItem";
+
+export {
+  DescriptionItem
+};
+//# sourceMappingURL=chunk-736HP6BL.js.map

package/dist/chunk-77F36LQQ.js

@@ -0,0 +1,80 @@
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Button
+} from "./chunk-BNNSO4MC.js";
+import {
+  Text
+} from "./chunk-26Z7QWID.js";
+
+// src/components/data-display/DataViews/data-views-empty.tsx
+import FilterAltOffRoundedIcon from "@mui/icons-material/FilterAltOffRounded";
+import InboxRoundedIcon from "@mui/icons-material/InboxRounded";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function DataViewsEmpty({
+  filtered,
+  onClearFilters,
+  emptyState,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  const Icon = filtered ? FilterAltOffRoundedIcon : InboxRoundedIcon;
+  return /* @__PURE__ */ jsxs(
+    default2,
+    {
+      "data-testid": `${testIdPrefix}-empty${filtered ? "-filtered" : ""}`,
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        textAlign: "center",
+        py: 8,
+        px: 2
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          default2,
+          {
+            sx: {
+              display: "inline-flex",
+              p: 2,
+              mb: 1.5,
+              borderRadius: "50%",
+              bgcolor: "action.hover",
+              color: "text.disabled"
+            },
+            children: /* @__PURE__ */ jsx(Icon, {})
+          }
+        ),
+        filtered ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Text, { variant: "body", as: "p", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { fontWeight: 600 }, children: copy.grid.emptyFilteredTitle }) }),
+          /* @__PURE__ */ jsx(Text, { variant: "caption", as: "p", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { display: "block", mt: 0.5, mb: 2, color: "text.secondary", maxWidth: 380 }, children: copy.grid.emptyFilteredHint }) }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              color: "secondary",
+              onClick: onClearFilters,
+              dataTestId: `${testIdPrefix}-empty-clear`,
+              children: copy.grid.emptyFilteredAction
+            }
+          )
+        ] }) : (
+          // The page's own words for "nothing here yet" — it knows what the
+          // entity is and how one comes to exist; this component does not.
+          emptyState
+        )
+      ]
+    }
+  );
+}
+
+export {
+  DataViewsEmpty
+};
+//# sourceMappingURL=chunk-77F36LQQ.js.map

package/dist/chunk-7FDU3FIN.js

@@ -0,0 +1,13 @@
+import {
+  resolveFieldEdge
+} from "./chunk-EPEJMTCQ.js";
+
+// src/tokens/field-edge.ts
+function fieldEdge(theme, surface) {
+  return resolveFieldEdge(theme.palette.divider, surface ?? theme.palette.background.paper);
+}
+
+export {
+  fieldEdge
+};
+//# sourceMappingURL=chunk-7FDU3FIN.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens/field-edge.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles/index.js';\n\nimport { resolveFieldEdge } from './field-edge.core';\n\n/**\n * THE EDGE THAT TELLS YOU WHERE A FIELD IS.\n *\n * Every outlined control in this package drew its resting border from\n * `alpha(theme.palette.divider, 0.23)` — or 0.2, or 0.18, or 0.42 for the\n * underline. On the MUI default theme that expression is harmless, and that is\n * exactly why it survived: MUI's own light `divider` is `rgba(0, 0, 0, 0.12)`,\n * and `alpha()` REPLACES the alpha channel rather than multiplying it, so\n * `alpha(divider, 0.23)` resolves to `rgba(0, 0, 0, 0.23)` — byte for byte the\n * border MUI's own `OutlinedInput` ships. The line reads like a restatement of\n * the default because, against the default, it is one.\n *\n * Give it a theme whose `divider` is an OPAQUE hex and the same expression\n * collapses. A themed divider is already a hairline — a pale warm cream, a pale\n * green-grey — chosen to separate two rows INSIDE a card. Fading that to 23%\n * over the card it sits on leaves a border the same colour as the card:\n *\n * | theme                          | resolved border | ratio |\n * |--------------------------------|-----------------|-------|\n * | MUI default (`rgba(0,0,0,.12)`)| `#C4C4C4`       | 1.74:1|\n * | a warm hairline `#EBD9C7`      | `#FAF6F2`       | 1.08:1|\n * | a cool hairline `#D7DDD5`      | `#EDF0EC`       | 1.06:1|\n *\n * 1.06:1 is not a faint border, it is no border: the field is invisible until\n * you click into it. Both failing rows are real adopter themes, and neither\n * adopter did anything wrong — they set `palette.divider`, which is what a theme\n * is for.\n *\n * **So the fault is using `divider` for this at all**, not the alpha on top of\n * it. Even at FULL strength those hairlines are 1.26:1 and 1.27:1 against their\n * own paper. A row separator and a control boundary are different jobs with\n * different floors, and only one of them has a number in the spec.\n *\n * ## The floor, and why it is measured rather than picked\n *\n * WCAG 2.1 SC 1.4.11 (Non-text Contrast) puts a control's own boundary at\n * {@link MIN_UI_CONTRAST}. A hex cannot satisfy that on its own, because the\n * ratio is a fact about a PAIR — the same border is fine on white and gone on a\n * dark card. So {@link fieldEdge} takes the theme's hairline as a SEED and walks\n * it away from the surface until it clears, which means:\n *\n *  - a theme whose divider already clears keeps its own colour, untouched;\n *  - one that does not gets the nearest tone of ITS OWN hairline that does, so\n *    the border still looks like the theme's, just visible;\n *  - dark mode needs no second table — the walk lightens on a dark surface for\n *    the same reason it darkens on a light one.\n *\n * This is the argument `readableInk` makes for text in `@12-apps/app-shell`,\n * applied to the boundary rather than the ink. It is not imported from there:\n * that package depends on THIS one, so the edge would be a cycle.\n *\n * ## What this does NOT touch\n *\n * Hover and focus, which every control already draws in `primary.main` — a\n * corrected brand colour that clears the floor by construction. The resting\n * state was the only one you could not see, and it is the one that matters,\n * because it is the state a field is in before anyone has found it.\n *\n * ## Where the walk itself lives\n *\n * `./field-edge.core.ts`, over two colour strings and this package's own\n * colour arithmetic. The native `Input` and `Select` draw the same border and\n * have neither a MUI `Theme` to pass nor `@mui/material/styles` to import, so\n * the algorithm sits one file below this one and both renderers call it. This\n * file is the MUI-typed door onto it, and the argument above.\n */\n\nexport { MIN_UI_CONTRAST } from './field-edge.core';\n\n/**\n * The resting boundary for a form control on `surface`.\n *\n * `surface` defaults to `background.paper` because that is what a field sits on\n * in the overwhelming majority of cases — a dialog, a card, a form panel. A\n * control on a deliberately different ground (a tinted strip, a glass pane over\n * a photo) should pass the ground it is actually on; the answer is only as good\n * as the pair it is given.\n */\nexport function fieldEdge(theme: Theme, surface?: string): string {\n  return resolveFieldEdge(theme.palette.divider, surface ?? theme.palette.background.paper);\n}\n"],"mappings":";;;;;AAkFO,SAAS,UAAU,OAAc,SAA0B;AAChE,SAAO,iBAAiB,MAAM,QAAQ,SAAS,WAAW,MAAM,QAAQ,WAAW,KAAK;AAC1F;","names":[]}