@omnitron-dev/prism 0.3.1 → 0.3.2

package/dist/{chunk-KQ67XB6T.js → chunk-RSWVYIXK.js}

@@ -1,8 +1,11 @@
-import { TableIcon } from './chunk-75FQ5IW3.js';
-import { generateColorScaleWithChannels, hexToRgbChannel, cssVarRgba, getContrastText, generatePaletteColorWithChannels, scrollbarStyles, varAlpha, generateColorScale, mixins } from './chunk-HOXFSQUV.js';
-import { RemoveIcon, AddIcon, SearchIcon, CloseIcon, DownloadIcon, FilterIcon, ArrowDownIcon, ArrowUpIcon, MoreIcon, ChevronRightIcon, ChevronLeftIcon, LastPageIcon, FirstPageIcon, ChevronDownIcon, StarEmptyIcon, StarIcon, ErrorIcon, WarningIcon, InfoIcon, SuccessIcon, RadioCheckedIcon, RadioIcon } from './chunk-PGHEP4JD.js';
-import { createPrismIcon } from './chunk-BJE2AKD4.js';
+import { TableIcon } from './chunk-TZHWYT34.js';
+import { semanticSurfaceStyles } from './chunk-TZWHELY4.js';
+import { generateColorScaleWithChannels, hexToRgbChannel, cssVarRgba, getContrastText, generatePaletteColorWithChannels, scrollbarStyles, varAlpha, generateColorScale, mixins } from './chunk-IRYU3NTG.js';
+import { RemoveIcon, AddIcon, SearchIcon, CloseIcon, DownloadIcon, FilterIcon, ArrowDownIcon, ArrowUpIcon, MoreIcon, ChevronRightIcon, ChevronLeftIcon, LastPageIcon, FirstPageIcon, ChevronDownIcon, StarEmptyIcon, StarIcon, ErrorIcon, WarningIcon, InfoIcon, SuccessIcon, RadioCheckedIcon, RadioIcon } from './chunk-VQVVHMPG.js';
+import { createPrismIcon } from './chunk-D5J3KW6Q.js';
 import { buttonClasses } from '@mui/material/Button';
+import { createTheme, responsiveFontSizes, darken, lighten, getContrastRatio } from '@mui/material/styles';
+import { colorChannel, hslToRgb } from '@mui/system';
 import { iconButtonClasses } from '@mui/material/IconButton';
 import { accordionClasses } from '@mui/material/Accordion';
 import { accordionSummaryClasses } from '@mui/material/AccordionSummary';
@@ -27,8 +30,6 @@ import { jsx } from 'react/jsx-runtime';
 import { tabClasses } from '@mui/material/Tab';
 import { autocompleteClasses } from '@mui/material/Autocomplete';
 import '@mui/x-data-grid/themeAugmentation';
-import { createTheme, responsiveFontSizes, darken, lighten, getContrastRatio } from '@mui/material/styles';
-import { colorChannel, hslToRgb } from '@mui/system';
 import { forwardRef } from 'react';
 import * as locales from '@mui/material/locale';
 
@@ -322,16 +323,83 @@ var defaultDarkPalette = buildPalette({
   grey,
   mode: "dark"
 });
+var isRecord = (value) => !!value && typeof value === "object" && !Array.isArray(value);
+var owns = (value, key) => Object.prototype.hasOwnProperty.call(value, key);
+var roles = ["primary", "secondary", "success", "info", "warning", "error"];
+var shades = ["light", "dark", "lighter", "darker", "contrastText"];
+var colourKeys = /* @__PURE__ */ new Set(["main", ...shades, "primary", "secondary", "disabled", "default", "paper", "neutral", "divider", "active", "selected", "hover", "focus", "disabledBackground", "background", "onBackground", "black", "white"]);
+function staticChannel(value) {
+  if (!/^(#[\da-f]{3,8}$|rgba?\(|hsla?\()/i.test(value)) return void 0;
+  if (/^rgba?\(/i.test(value) && value.includes("%")) return void 0;
+  try {
+    const channel = colorChannel(/^hsl/i.test(value) ? hslToRgb(value) : value);
+    const components = channel.split(" ");
+    return components.length === 3 && components.every((part) => part !== "" && Number.isFinite(Number(part))) ? channel : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function channelFor(value) {
+  return staticChannel(value) ?? `from ${value} r g b`;
+}
+function reconcileChannels(merged, supplied) {
+  const result = { ...merged };
+  for (const [key, value] of Object.entries(supplied)) {
+    if (isRecord(value) && isRecord(result[key])) {
+      result[key] = reconcileChannels(result[key], value);
+    } else if (typeof value === "string" && !key.endsWith("Channel") && !owns(supplied, `${key}Channel`)) {
+      const channel = staticChannel(value);
+      if (channel !== void 0 || owns(merged, `${key}Channel`) || colourKeys.has(key)) {
+        result[`${key}Channel`] = channel ?? channelFor(value);
+      }
+    }
+  }
+  return result;
+}
+function reconcilePaletteOverrides(merged, supplied, { nativeColor = false, cssVarPrefix = "prism" } = {}) {
+  if (!supplied) return merged;
+  const result = reconcileChannels(merged, supplied);
+  for (const name of roles) {
+    const input = supplied[name];
+    if (!isRecord(input) || typeof input.main !== "string") continue;
+    const role = { ...result[name] };
+    const numeric = staticChannel(input.main) !== void 0;
+    for (const shade of shades) {
+      if (!owns(input, shade)) {
+        delete role[shade];
+        if (!owns(input, `${shade}Channel`)) delete role[`${shade}Channel`];
+      }
+    }
+    if (!nativeColor && !numeric && ["light", "dark", "contrastText"].some((shade) => typeof role[shade] !== "string" || !role[shade])) {
+      throw new Error(`Prism: palette.${name}.main cannot be resolved in JavaScript. Enable overrides.cssVariables.nativeColor or supply light, dark and contrastText explicitly.`);
+    }
+    const dark = result.mode === "dark";
+    const mix = (colour, amount) => `color-mix(in oklch, ${input.main}, ${colour} ${amount * 100}%)`;
+    role.lighter ??= numeric && !nativeColor ? dark ? darken(input.main, 0.75) : lighten(input.main, 0.9) : dark ? mix("#000", 0.75) : mix("#fff", 0.9);
+    role.darker ??= numeric && !nativeColor ? dark ? lighten(input.main, 0.85) : darken(input.main, 0.7) : dark ? mix("#fff", 0.85) : mix("#000", 0.7);
+    if (numeric && !nativeColor) {
+      role.contrastText ??= getContrastRatio(input.main, "#fff") >= getContrastRatio(input.main, "#000") ? "#fff" : "#000";
+    }
+    for (const shade of shades) {
+      if (owns(input, `${shade}Channel`)) continue;
+      if (typeof role[shade] === "string") {
+        role[`${shade}Channel`] = channelFor(role[shade]);
+      } else if (nativeColor) {
+        const prefix = cssVarPrefix ? `${cssVarPrefix}-` : "";
+        role[`${shade}Channel`] = `from var(--${prefix}palette-${name}-${shade}) r g b`;
+      }
+    }
+    result[name] = role;
+  }
+  return result;
+}
 
 // src/theme/components/theme-utils.ts
 function getGreyChannel(theme, shade = "500") {
   const channelKey = `${shade}Channel`;
   const vars = theme.vars?.palette.grey;
-  const fallbacks = {
-    "500": "145 158 171",
-    "900": "0 0 0"
-  };
-  return vars?.[channelKey] ?? fallbacks[shade];
+  const palette = theme.palette.grey;
+  return vars?.[channelKey] ?? palette[channelKey] ?? channelFor(palette[shade]);
 }
 function paletteVar(theme, path) {
   const segments = path.split(".");
@@ -349,14 +417,8 @@ function paletteVar(theme, path) {
 }
 function getColorChannel(theme, color) {
   const vars = theme.vars?.palette[color];
-  const fallbacks = {
-    primary: "51 133 240",
-    success: "9 159 105",
-    error: "208 34 65",
-    warning: "246 141 42",
-    info: "13 166 214"
-  };
-  return vars?.mainChannel ?? fallbacks[color];
+  const palette = theme.palette[color];
+  return vars?.mainChannel ?? palette.mainChannel ?? channelFor(palette.main);
 }
 function getDensityMultiplier(density) {
   switch (density) {
@@ -588,10 +650,7 @@ var chipColors = ["primary", "secondary", "info", "success", "warning", "error"]
 var softVariants2 = [
   ...chipColors.map((color) => ({
     props: (props) => props.variant === "soft" && props.color === color,
-    style: ({ theme }) => ({
-      backgroundColor: `rgba(var(--prism-${color}-main-channel, 51 133 240) / 0.16)`,
-      color: theme.vars?.palette[color]?.dark || theme.palette[color].dark
-    })
+    style: ({ theme }) => semanticSurfaceStyles(theme, color)
   })),
   // Neutral soft variant
   {
@@ -873,7 +932,8 @@ var outlinedInputStyles = {
     // Align fieldset font-size with InputLabel (14px) so the legend
     // notch width (0.75em) matches the visually-scaled label exactly.
     fontSize: theme.typography.pxToRem(14),
-    "& legend > span": { paddingInline: 3 }
+    // MUI uses an aria-hidden zero-width spacer when the field has no label.
+    "& legend > span:not([aria-hidden])": { paddingInline: 3 }
   })
 };
 var outlinedInputVariants = {
@@ -1388,8 +1448,8 @@ function createDialogOverrides(config) {
                   margin: 0,
                   width: "100%",
                   maxWidth: "none",
-                  maxHeight: "none",
-                  height: "100%",
+                  maxHeight: "100dvh",
+                  height: "100dvh",
                   borderRadius: 0
                 }
               }
@@ -1398,6 +1458,7 @@ function createDialogOverrides(config) {
               props: (props) => !props.fullScreen,
               style: {
                 borderRadius: borderRadius * 2,
+                [theme.breakpoints.down("sm")]: { borderRadius: 0 },
                 [theme.breakpoints.up("sm")]: {
                   margin: theme.spacing(2)
                 }
@@ -1413,14 +1474,18 @@ function createDialogOverrides(config) {
           padding: `${20 * dm}px ${24 * dm}px`,
           fontSize: theme.typography.pxToRem(18),
           fontWeight: 600,
-          lineHeight: 28 / 18
+          lineHeight: 28 / 18,
+          overflowWrap: "anywhere"
         })
       }
     },
     MuiDialogContent: {
       styleOverrides: {
         root: {
-          padding: `${16 * dm}px ${24 * dm}px`
+          padding: `${16 * dm}px ${24 * dm}px`,
+          minWidth: 0,
+          overflowWrap: "anywhere",
+          ".MuiDialogTitle-root + &": { paddingTop: 16 * dm }
         }
       }
     },
@@ -1428,7 +1493,9 @@ function createDialogOverrides(config) {
       styleOverrides: {
         root: {
           padding: `${16 * dm}px ${24 * dm}px`,
-          gap: 8
+          gap: 8,
+          flexWrap: "wrap",
+          "& > :not(style) ~ :not(style)": { marginLeft: 0 }
         }
       }
     }
@@ -1910,7 +1977,20 @@ function componentOverrides(config) {
       styleOverrides: {
         root: ({ theme }) => ({
           padding: `${8 * dm}px ${16 * dm}px ${16 * dm}px`,
-          borderTop: `1px solid ${paletteVar(theme, "divider")}`
+          borderTop: `1px solid ${paletteVar(theme, "divider")}`,
+          containerType: "inline-size",
+          containerName: "prism-pagination",
+          "@container prism-pagination (max-width: 420px)": {
+            "& .MuiTablePagination-toolbar": {
+              display: "grid",
+              gridTemplateColumns: "1fr auto",
+              gap: "0 8px",
+              padding: "4px 8px"
+            },
+            "& .MuiTablePagination-spacer": { display: "none" },
+            "& .MuiTablePagination-selectLabel, & .MuiTablePagination-displayedRows": { margin: "4px 0" },
+            "& .MuiTablePagination-input, & .MuiTablePagination-actions": { margin: 0, justifySelf: "end" }
+          }
         })
       }
     },
@@ -2119,7 +2199,20 @@ function componentOverrides(config) {
       },
       styleOverrides: {
         root: ({ theme }) => ({
-          borderTop: `1px solid ${paletteVar(theme, "divider")}`
+          borderTop: `1px solid ${paletteVar(theme, "divider")}`,
+          containerType: "inline-size",
+          containerName: "prism-pagination",
+          "@container prism-pagination (max-width: 420px)": {
+            "& .MuiTablePagination-toolbar": {
+              display: "grid",
+              gridTemplateColumns: "1fr auto",
+              gap: "0 8px",
+              padding: "4px 8px"
+            },
+            "& .MuiTablePagination-spacer": { display: "none" },
+            "& .MuiTablePagination-selectLabel, & .MuiTablePagination-displayedRows": { margin: "4px 0" },
+            "& .MuiTablePagination-input, & .MuiTablePagination-actions": { margin: 0, justifySelf: "end" }
+          }
         }),
         toolbar: {
           minHeight: 44 * dm,
@@ -2157,11 +2250,11 @@ function componentOverrides(config) {
       styleOverrides: {
         root: ({ theme }) => ({
           borderRadius,
-          variants: ["success", "error", "warning", "info"].map((severity) => ({
-            props: { severity, variant: "standard" },
+          variants: ["success", "error", "warning", "info"].map((color) => ({
+            props: (props) => props.variant === "standard" && (props.color || props.severity) === color,
             style: {
-              backgroundColor: `rgba(${getColorChannel(theme, severity)} / 0.08)`,
-              color: theme.vars?.palette[severity].dark || theme.palette[severity].dark
+              ...semanticSurfaceStyles(theme, color, 0.08),
+              "& .MuiAlert-icon": { color: "inherit" }
             }
           }))
         })
@@ -2321,7 +2414,13 @@ function componentOverrides(config) {
       styleOverrides: {
         root: {
           paddingTop: density === "compact" ? 4 : 8,
-          paddingBottom: density === "compact" ? 4 : 8
+          paddingBottom: density === "compact" ? 4 : 8,
+          // MenuList renders a MuiList root; it does not consume a separate
+          // MuiMenuList style override. Cover standalone and Select menus too.
+          '&[role="menu"], &[role="listbox"]': {
+            padding: 4,
+            "& > .MuiDivider-root": { margin: "8px 6px" }
+          }
         }
       }
     },
@@ -2377,17 +2476,19 @@ function componentOverrides(config) {
         paper: ({ theme }) => ({
           borderRadius,
           marginTop: 4,
+          scrollPaddingBlock: 6,
+          maxWidth: "calc(100vw - 32px)",
           boxShadow: `0 0 2px 0 rgba(${getGreyChannel(theme)} / 0.24), -20px 20px 40px -4px rgba(${getGreyChannel(theme)} / 0.24)`
-        }),
-        list: {
-          padding: 4
-        }
+        })
       }
     },
     MuiMenuItem: {
       styleOverrides: {
         root: ({ theme }) => ({
           ...theme.typography.body2,
+          minWidth: 0,
+          whiteSpace: "normal",
+          overflowWrap: "anywhere",
           borderRadius: borderRadius - 2,
           margin: 2,
           padding: `${8 * dm}px ${12 * dm}px`,
@@ -2411,6 +2512,11 @@ function componentOverrides(config) {
     },
     MuiPopover: {
       styleOverrides: {
+        root: ({ ownerState }) => ({
+          // MUI keeps the modal root mounted during Grow's exit. Once closed,
+          // it must stop swallowing the next click on the surrounding UI.
+          pointerEvents: ownerState.open ? void 0 : "none"
+        }),
         paper: ({ theme }) => ({
           borderRadius,
           boxShadow: `0 0 2px 0 rgba(${getGreyChannel(theme)} / 0.24), -20px 20px 40px -4px rgba(${getGreyChannel(theme)} / 0.24)`
@@ -2436,8 +2542,9 @@ function componentOverrides(config) {
     },
     MuiBackdrop: {
       styleOverrides: {
-        root: ({ theme }) => ({
-          backgroundColor: `rgba(${getGreyChannel(theme, "900")} / 0.5)`
+        root: ({ theme, ownerState }) => ({
+          // Menus/popovers use an invisible click-away layer; only modals dim the page.
+          backgroundColor: ownerState.invisible ? "transparent" : `rgba(${getGreyChannel(theme, "900")} / 0.5)`
         })
       }
     },
@@ -3182,76 +3289,6 @@ var arcticPreset = {
     main: "#1E88E5"
   }
 };
-var isRecord = (value) => !!value && typeof value === "object" && !Array.isArray(value);
-var owns = (value, key) => Object.prototype.hasOwnProperty.call(value, key);
-var roles = ["primary", "secondary", "success", "info", "warning", "error"];
-var shades = ["light", "dark", "lighter", "darker", "contrastText"];
-var colourKeys = /* @__PURE__ */ new Set(["main", ...shades, "primary", "secondary", "disabled", "default", "paper", "neutral", "divider", "active", "selected", "hover", "focus", "disabledBackground", "background", "onBackground", "black", "white"]);
-function staticChannel(value) {
-  if (!/^(#[\da-f]{3,8}$|rgba?\(|hsla?\()/i.test(value)) return void 0;
-  if (/^rgba?\(/i.test(value) && value.includes("%")) return void 0;
-  try {
-    const channel = colorChannel(/^hsl/i.test(value) ? hslToRgb(value) : value);
-    const components = channel.split(" ");
-    return components.length === 3 && components.every((part) => part !== "" && Number.isFinite(Number(part))) ? channel : void 0;
-  } catch {
-    return void 0;
-  }
-}
-function channelFor(value) {
-  return staticChannel(value) ?? `from ${value} r g b`;
-}
-function reconcileChannels(merged, supplied) {
-  const result = { ...merged };
-  for (const [key, value] of Object.entries(supplied)) {
-    if (isRecord(value) && isRecord(result[key])) {
-      result[key] = reconcileChannels(result[key], value);
-    } else if (typeof value === "string" && !key.endsWith("Channel") && !owns(supplied, `${key}Channel`)) {
-      const channel = staticChannel(value);
-      if (channel !== void 0 || owns(merged, `${key}Channel`) || colourKeys.has(key)) {
-        result[`${key}Channel`] = channel ?? channelFor(value);
-      }
-    }
-  }
-  return result;
-}
-function reconcilePaletteOverrides(merged, supplied, { nativeColor = false, cssVarPrefix = "prism" } = {}) {
-  if (!supplied) return merged;
-  const result = reconcileChannels(merged, supplied);
-  for (const name of roles) {
-    const input = supplied[name];
-    if (!isRecord(input) || typeof input.main !== "string") continue;
-    const role = { ...result[name] };
-    const numeric = staticChannel(input.main) !== void 0;
-    for (const shade of shades) {
-      if (!owns(input, shade)) {
-        delete role[shade];
-        if (!owns(input, `${shade}Channel`)) delete role[`${shade}Channel`];
-      }
-    }
-    if (!nativeColor && !numeric && ["light", "dark", "contrastText"].some((shade) => typeof role[shade] !== "string" || !role[shade])) {
-      throw new Error(`Prism: palette.${name}.main cannot be resolved in JavaScript. Enable overrides.cssVariables.nativeColor or supply light, dark and contrastText explicitly.`);
-    }
-    const dark = result.mode === "dark";
-    const mix = (colour, amount) => `color-mix(in oklch, ${input.main}, ${colour} ${amount * 100}%)`;
-    role.lighter ??= numeric && !nativeColor ? dark ? darken(input.main, 0.75) : lighten(input.main, 0.9) : dark ? mix("#000", 0.75) : mix("#fff", 0.9);
-    role.darker ??= numeric && !nativeColor ? dark ? lighten(input.main, 0.85) : darken(input.main, 0.7) : dark ? mix("#fff", 0.85) : mix("#000", 0.7);
-    if (numeric && !nativeColor) {
-      role.contrastText ??= getContrastRatio(input.main, "#fff") >= getContrastRatio(input.main, "#000") ? "#fff" : "#000";
-    }
-    for (const shade of shades) {
-      if (owns(input, `${shade}Channel`)) continue;
-      if (typeof role[shade] === "string") {
-        role[`${shade}Channel`] = channelFor(role[shade]);
-      } else if (nativeColor) {
-        const prefix = cssVarPrefix ? `${cssVarPrefix}-` : "";
-        role[`${shade}Channel`] = `from var(--${prefix}palette-${name}-${shade}) r g b`;
-      }
-    }
-    result[name] = role;
-  }
-  return result;
-}
 function gridIcon(Icon) {
   return forwardRef(function GridIcon({ color, ...props }, ref) {
     const palette = color === "action" || color === "disabled" || color === "error" || color === "info" || color === "inherit" || color === "primary" || color === "secondary" || color === "success" || color === "warning";
@@ -4136,5 +4173,5 @@ function getPresetDisplayName(preset) {
 }
 
 export { COLOR_GROUPS, PRESET_DISPLAY_NAMES, PRESET_INHERENT_MODE, PRESET_NAMES, arcticPreset, baseColors, basic, blue, buildAction, buildBackground, buildChartColors, buildPalette, buildPaletteColor, buildText, buildVibrant, componentOverrides, createButtonBaseOverrides, createButtonGroupOverrides, createButtonOverrides, createPrismTheme, createShadows, createTypography, darkShadow, defaultDarkPalette, defaultLightPalette, draculaPreset, emberPreset, getPresetDisplayName, green, grey, lightBlue, luxuryColors, luxuryError, luxuryInfo, luxuryNeutral, luxuryPrimary, luxurySecondary, luxurySuccess, luxuryWarning, midnightPreset, minimalPreset, orange, purple, red, retroPreset, shadows, typography };
-//# sourceMappingURL=chunk-KQ67XB6T.js.map
-//# sourceMappingURL=chunk-KQ67XB6T.js.map
+//# sourceMappingURL=chunk-RSWVYIXK.js.map
+//# sourceMappingURL=chunk-RSWVYIXK.js.map