@omnitron-dev/prism 0.2.0 → 0.3.1

package/dist/chunk-HOXFSQUV.js

@@ -0,0 +1,573 @@
+// src/theme/utils/color.ts
+function hexToRgb(hex) {
+  const h = hex.replace("#", "");
+  const expanded = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
+  const bigint = parseInt(expanded, 16);
+  const r = bigint >> 16 & 255;
+  const g = bigint >> 8 & 255;
+  const b = bigint & 255;
+  return [r, g, b];
+}
+function hexToRgbChannel(hex) {
+  const [r, g, b] = hexToRgb(hex);
+  return `${r} ${g} ${b}`;
+}
+function rgbToHex(r, g, b) {
+  const to2 = (n) => Math.round(n).toString(16).padStart(2, "0");
+  return `#${to2(r)}${to2(g)}${to2(b)}`.toUpperCase();
+}
+function hexToHsl(hex) {
+  const [r, g, b] = hexToRgb(hex);
+  const r1 = r / 255;
+  const g1 = g / 255;
+  const b1 = b / 255;
+  const max = Math.max(r1, g1, b1);
+  const min = Math.min(r1, g1, b1);
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+  const d = max - min;
+  if (d !== 0) {
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r1:
+        h = (g1 - b1) / d + (g1 < b1 ? 6 : 0);
+        break;
+      case g1:
+        h = (b1 - r1) / d + 2;
+        break;
+      default:
+        h = (r1 - g1) / d + 4;
+    }
+    h /= 6;
+  }
+  return { h: h * 360, s: s * 100, l: l * 100 };
+}
+function hslToHex(h, s, l) {
+  const s1 = s / 100;
+  const l1 = l / 100;
+  const c = (1 - Math.abs(2 * l1 - 1)) * s1;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = l1 - c / 2;
+  let r1;
+  let g1;
+  let b1;
+  if (h >= 0 && h < 60) {
+    [r1, g1, b1] = [c, x, 0];
+  } else if (h >= 60 && h < 120) {
+    [r1, g1, b1] = [x, c, 0];
+  } else if (h >= 120 && h < 180) {
+    [r1, g1, b1] = [0, c, x];
+  } else if (h >= 180 && h < 240) {
+    [r1, g1, b1] = [0, x, c];
+  } else if (h >= 240 && h < 300) {
+    [r1, g1, b1] = [x, 0, c];
+  } else {
+    [r1, g1, b1] = [c, 0, x];
+  }
+  return rgbToHex(Math.round((r1 + m) * 255), Math.round((g1 + m) * 255), Math.round((b1 + m) * 255));
+}
+function rgba(color, alpha) {
+  const [r, g, b] = hexToRgb(color);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function cssVarRgba(channel, alpha) {
+  return `rgba(${channel} / ${alpha})`;
+}
+function generatePaletteColorWithChannels(color) {
+  return {
+    ...color,
+    lighterChannel: hexToRgbChannel(color.lighter),
+    lightChannel: hexToRgbChannel(color.light),
+    mainChannel: hexToRgbChannel(color.main),
+    darkChannel: hexToRgbChannel(color.dark),
+    darkerChannel: hexToRgbChannel(color.darker),
+    contrastTextChannel: hexToRgbChannel(color.contrastText)
+  };
+}
+function generateColorScaleWithChannels(scale) {
+  const shadeKeys = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+  const channels = {};
+  for (const key of shadeKeys) {
+    const channelKey = `${key}Channel`;
+    channels[channelKey] = hexToRgbChannel(scale[key]);
+  }
+  return { ...scale, ...channels };
+}
+function clamp(n, min, max) {
+  return Math.max(min, Math.min(max, n));
+}
+function generateColorScale(baseColor) {
+  const base = hexToHsl(baseColor);
+  const tones = [
+    { key: 50, lDelta: 40 },
+    { key: 100, lDelta: 32 },
+    { key: 200, lDelta: 24 },
+    { key: 300, lDelta: 16 },
+    { key: 400, lDelta: 8 },
+    { key: 500, lDelta: 0 },
+    { key: 600, lDelta: -8 },
+    { key: 700, lDelta: -16 },
+    { key: 800, lDelta: -24 },
+    { key: 900, lDelta: -32 },
+    { key: 950, lDelta: -40 }
+  ];
+  const scale = {};
+  for (const { key, lDelta } of tones) {
+    const l = clamp(base.l + lDelta, 5, 95);
+    scale[key] = hslToHex(base.h, base.s, l);
+  }
+  return scale;
+}
+function createPaletteColorFromScale(scale, mode = "light") {
+  const mainColor = mode === "dark" ? scale[400] : scale[500];
+  const contrastText = getContrastText(mainColor, "#FFFFFF", "#212121");
+  if (mode === "dark") {
+    return {
+      lighter: scale[950],
+      light: scale[700],
+      main: mainColor,
+      dark: scale[300],
+      darker: scale[100],
+      contrastText
+    };
+  }
+  return {
+    lighter: scale[50],
+    light: scale[400],
+    main: mainColor,
+    dark: scale[600],
+    darker: scale[900],
+    contrastText
+  };
+}
+function invertColorScale(scale) {
+  return {
+    50: scale[950],
+    100: scale[800],
+    200: scale[700],
+    300: scale[600],
+    400: scale[500],
+    500: scale[400],
+    600: scale[300],
+    700: scale[200],
+    800: scale[100],
+    900: scale[50],
+    950: "#FFFFFF"
+  };
+}
+function getLuminance(hex) {
+  const [r, g, b] = hexToRgb(hex).map((c) => {
+    const sRgb = c / 255;
+    return sRgb <= 0.03928 ? sRgb / 12.92 : Math.pow((sRgb + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function getContrastRatio(color1, color2) {
+  const l1 = getLuminance(color1);
+  const l2 = getLuminance(color2);
+  const lighter = Math.max(l1, l2);
+  const darker = Math.min(l1, l2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+function isLightColor(hex) {
+  return getLuminance(hex) > 0.5;
+}
+function getContrastText(background, lightText = "#FFFFFF", darkText = "#000000") {
+  return getContrastRatio(background, lightText) >= getContrastRatio(background, darkText) ? lightText : darkText;
+}
+function lighten(hex, amount) {
+  const hsl = hexToHsl(hex);
+  const newL = clamp(hsl.l + amount, 0, 100);
+  return hslToHex(hsl.h, hsl.s, newL);
+}
+function darken(hex, amount) {
+  const hsl = hexToHsl(hex);
+  const newL = clamp(hsl.l - amount, 0, 100);
+  return hslToHex(hsl.h, hsl.s, newL);
+}
+function mix(color1, color2, weight = 0.5) {
+  const [r1, g1, b1] = hexToRgb(color1);
+  const [r2, g2, b2] = hexToRgb(color2);
+  const w = clamp(weight, 0, 1);
+  const newR = Math.round(r1 * w + r2 * (1 - w));
+  const newG = Math.round(g1 * w + g2 * (1 - w));
+  const newB = Math.round(b1 * w + b2 * (1 - w));
+  return rgbToHex(newR, newG, newB);
+}
+function validateOpacity(opacity, color) {
+  const isCSSVar = (val) => val.includes("var(--");
+  const isPercentage = (val) => val.trim().endsWith("%");
+  const errors = {
+    invalid: `[varAlpha]: Invalid opacity "${opacity}" for "${color}".`,
+    range: "Must be a number between 0 and 1 (e.g., 0.48).",
+    format: 'Must be a percentage (e.g., "48%") or CSS variable (e.g., "var(--opacity)").'
+  };
+  if (typeof opacity === "string") {
+    if (isPercentage(opacity)) return opacity;
+    if (isCSSVar(opacity)) return `calc(${opacity} * 100%)`;
+    const parsed = parseFloat(opacity.trim());
+    if (!isNaN(parsed) && parsed >= 0 && parsed <= 1) {
+      return `${Number((parsed * 100).toFixed(2))}%`;
+    }
+    throw new Error(`${errors.invalid} ${errors.format}`);
+  }
+  if (typeof opacity === "number") {
+    if (opacity >= 0 && opacity <= 1) {
+      return `${Number((opacity * 100).toFixed(2))}%`;
+    }
+    throw new Error(`${errors.invalid} ${errors.range}`);
+  }
+  throw new Error(`${errors.invalid}`);
+}
+function varAlpha(color, opacity = 1) {
+  if (!color?.trim()) {
+    throw new Error("[varAlpha]: Color is undefined or empty!");
+  }
+  const isUnsupported = color.startsWith("#") || color.startsWith("rgb(") || color.startsWith("rgba(") || !color.includes("var") && color.includes("Channel");
+  if (isUnsupported) {
+    throw new Error(
+      [
+        `[varAlpha]: Unsupported color format "${color}"`,
+        "\u2705 Supported formats:",
+        '  - RGB channels: "0 184 217"',
+        '  - CSS variables: "var(--palette-primary-mainChannel)"',
+        "  - currentColor",
+        "\u274C Unsupported formats:",
+        '  - Hex: "#00B8D9"',
+        '  - RGB: "rgb(0, 184, 217)"',
+        '  - RGBA: "rgba(0, 184, 217, 1)"'
+      ].join("\n")
+    );
+  }
+  const alpha = validateOpacity(opacity, color);
+  if (color.toLowerCase() === "currentcolor") {
+    return `color-mix(in srgb, currentColor ${alpha}, transparent)`;
+  }
+  return `rgba(${color} / ${alpha})`;
+}
+
+// src/theme/mixins.ts
+function getHoverStyles(hoverOption, hoverBase) {
+  if (!hoverOption) return {};
+  return {
+    "&:hover": {
+      ...hoverBase,
+      ...typeof hoverOption === "object" ? hoverOption : {}
+    }
+  };
+}
+function filledStyles(theme, colorKey, options) {
+  if (!colorKey) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn("[Prism filledStyles] Missing colorKey parameter.");
+    }
+    return {};
+  }
+  const palette = theme.vars?.palette || theme.palette;
+  const grey = palette.grey;
+  if (colorKey === "default") {
+    const base2 = {
+      color: grey[800],
+      backgroundColor: grey[300]
+    };
+    const hover2 = getHoverStyles(options?.hover, {
+      backgroundColor: grey[400]
+    });
+    return { ...base2, ...hover2 };
+  }
+  if (colorKey === "inherit") {
+    const base2 = {
+      color: palette.common.white,
+      backgroundColor: grey[800]
+    };
+    const hover2 = getHoverStyles(options?.hover, {
+      backgroundColor: grey[700]
+    });
+    return { ...base2, ...hover2 };
+  }
+  if (colorKey === "white" || colorKey === "black") {
+    const oppositeColor = colorKey === "white" ? "black" : "white";
+    const base2 = {
+      color: palette.common[oppositeColor],
+      backgroundColor: palette.common[colorKey]
+    };
+    const hover2 = getHoverStyles(options?.hover, {
+      opacity: 0.8
+    });
+    return { ...base2, ...hover2 };
+  }
+  const paletteColor = palette[colorKey];
+  const base = {
+    color: paletteColor.contrastText,
+    backgroundColor: paletteColor.main
+  };
+  const hover = getHoverStyles(options?.hover, {
+    backgroundColor: paletteColor.dark
+  });
+  return { ...base, ...hover };
+}
+function softStyles(theme, colorKey, options) {
+  if (!colorKey) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn("[Prism softStyles] Missing colorKey parameter.");
+    }
+    return {};
+  }
+  const palette = theme.vars?.palette || theme.palette;
+  const grey = palette.grey;
+  if (colorKey === "default") {
+    return {
+      ...filledStyles(theme, "default", options),
+      boxShadow: "none"
+    };
+  }
+  if (colorKey === "inherit") {
+    const greyChannel = grey["500Channel"] || "145, 158, 171";
+    const base2 = {
+      boxShadow: "none",
+      backgroundColor: varAlpha(greyChannel, 0.16)
+    };
+    const hover2 = getHoverStyles(options?.hover, {
+      backgroundColor: varAlpha(greyChannel, 0.32)
+    });
+    return { ...base2, ...hover2 };
+  }
+  if (colorKey === "white" || colorKey === "black") {
+    const base2 = {
+      boxShadow: "none",
+      color: palette.common[colorKey],
+      backgroundColor: varAlpha("currentColor", 0.08)
+    };
+    const hover2 = getHoverStyles(options?.hover, {
+      backgroundColor: varAlpha("currentColor", 0.16)
+    });
+    return { ...base2, ...hover2 };
+  }
+  const paletteColor = palette[colorKey];
+  const mainChannel = paletteColor.mainChannel || palette.primary.mainChannel || "51, 133, 240";
+  const base = {
+    boxShadow: "none",
+    color: paletteColor.dark,
+    backgroundColor: varAlpha(mainChannel, 0.16)
+  };
+  const hover = getHoverStyles(options?.hover, {
+    backgroundColor: varAlpha(mainChannel, 0.32)
+  });
+  return { ...base, ...hover };
+}
+function bgGradient(options) {
+  const { images, sizes, positions, colors, direction = "to bottom" } = options;
+  if (colors && colors.length > 0) {
+    return {
+      background: `linear-gradient(${direction}, ${colors.join(", ")})`
+    };
+  }
+  if (images && images.length > 0) {
+    return {
+      backgroundImage: images.join(", "),
+      backgroundSize: sizes?.join(", ") || "cover",
+      backgroundPosition: positions?.join(", ") || "center",
+      backgroundRepeat: "no-repeat"
+    };
+  }
+  return {};
+}
+function bgBlur(options) {
+  const { blur = 20, color = "rgba(255, 255, 255, 0.8)" } = options;
+  return {
+    backdropFilter: `blur(${blur}px)`,
+    WebkitBackdropFilter: `blur(${blur}px)`,
+    backgroundColor: color
+  };
+}
+function paperStyles(theme, options) {
+  const { blur = 20, color, dropdown } = options ?? {};
+  const palette = theme.vars?.palette || theme.palette;
+  const baseStyles = {
+    backdropFilter: `blur(${blur}px)`,
+    WebkitBackdropFilter: `blur(${blur}px)`,
+    backgroundColor: color ?? varAlpha("255, 255, 255", 0.9)
+  };
+  if (dropdown) {
+    const customShadows = theme.customShadows;
+    const greyChannel = palette.grey["500Channel"] || "145, 158, 171";
+    return {
+      ...baseStyles,
+      padding: theme.spacing(0.5),
+      boxShadow: customShadows?.dropdown || `0 0 2px 0 rgba(${greyChannel}, 0.24), -20px 20px 40px -4px rgba(${greyChannel}, 0.24)`,
+      borderRadius: `${Number(theme.shape.borderRadius) * 1.25}px`
+    };
+  }
+  return baseStyles;
+}
+function menuItemStyles(theme) {
+  const palette = theme.vars?.palette || theme.palette;
+  return {
+    ...theme.typography.body2,
+    padding: theme.spacing(0.75, 1),
+    borderRadius: Number(theme.shape.borderRadius) * 0.75,
+    // `:not(:last-child)` is the universal sibling-position selector
+    // that works regardless of element type. `:last-of-type` only
+    // matches the last sibling of the SAME tag, so a fragment-rendered
+    // <Divider /> next to <MenuItem /> can fool it (Divider becomes
+    // the last-of-type MenuItem too, so the previous MenuItem keeps
+    // its margin instead of dropping it). Switching to :last-child
+    // also satisfies MUI v9's lint-against-of-type-selectors guidance.
+    "&:not(:last-child)": {
+      marginBottom: 4
+    },
+    "&.Mui-selected": {
+      fontWeight: theme.typography.fontWeightMedium,
+      backgroundColor: palette.action.selected,
+      "&:hover": { backgroundColor: palette.action.hover }
+    }
+  };
+}
+function maxLine(options) {
+  const { lines, lineHeight = 1.5 } = options;
+  return {
+    overflow: "hidden",
+    display: "-webkit-box",
+    WebkitBoxOrient: "vertical",
+    WebkitLineClamp: lines,
+    textOverflow: "ellipsis",
+    ...lineHeight && { lineHeight }
+  };
+}
+function textGradient(direction, ...colors) {
+  return {
+    background: `linear-gradient(${direction}, ${colors.join(", ")})`,
+    WebkitBackgroundClip: "text",
+    WebkitTextFillColor: "transparent",
+    backgroundClip: "text",
+    textFillColor: "transparent",
+    display: "inline-block"
+  };
+}
+function borderGradient(options) {
+  const { color = "linear-gradient(135deg, #FF5630, #00AB55)", borderWidth = 2, borderRadius = 0 } = options;
+  return {
+    position: "relative",
+    border: "none",
+    borderRadius,
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      inset: 0,
+      borderRadius: "inherit",
+      padding: borderWidth,
+      background: color,
+      WebkitMask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+      WebkitMaskComposite: "xor",
+      maskComposite: "exclude",
+      pointerEvents: "none"
+    }
+  };
+}
+function scrollbarStyles(theme, { autoHide = true } = {}) {
+  const palette = theme.vars?.palette || theme.palette;
+  const greyChannel = palette.grey["500Channel"] || "145, 158, 171";
+  return {
+    scrollbarWidth: "thin",
+    scrollbarColor: `${varAlpha(greyChannel, 0.4)} transparent`,
+    "&::-webkit-scrollbar": { width: 6, height: 6 },
+    "&::-webkit-scrollbar-track": { backgroundColor: "transparent" },
+    "&::-webkit-scrollbar-thumb": { backgroundColor: varAlpha(greyChannel, 0.4), borderRadius: 3 },
+    "&::-webkit-scrollbar-thumb:hover": { backgroundColor: varAlpha(greyChannel, 0.65) },
+    "&::-webkit-scrollbar-corner": { backgroundColor: "transparent" },
+    // Change colour only: revealing a thumb must not change the scrollport's
+    // geometry. Touch and high-contrast interfaces retain native discoverability.
+    "@media (hover: hover) and (pointer: fine) and (forced-colors: none)": {
+      scrollbarColor: autoHide ? "transparent transparent" : `${varAlpha(greyChannel, 0.4)} transparent`,
+      "&::-webkit-scrollbar-thumb": {
+        backgroundColor: autoHide ? "transparent" : varAlpha(greyChannel, 0.4)
+      },
+      "&:hover, &:focus-within": {
+        scrollbarColor: `${varAlpha(greyChannel, 0.4)} transparent`,
+        "&::-webkit-scrollbar-thumb": { backgroundColor: varAlpha(greyChannel, 0.4) },
+        "&::-webkit-scrollbar-thumb:hover": { backgroundColor: varAlpha(greyChannel, 0.65) }
+      }
+    },
+    "@media (forced-colors: active)": {
+      scrollbarColor: "auto",
+      scrollbarWidth: "auto",
+      "&::-webkit-scrollbar-thumb": { backgroundColor: "CanvasText" }
+    }
+  };
+}
+var mixins = {
+  toolbar: {
+    minHeight: 56,
+    "@media (min-width:0px)": {
+      "@media (orientation: landscape)": {
+        minHeight: 48
+      }
+    },
+    "@media (min-width:600px)": {
+      minHeight: 64
+    }
+  },
+  // Extended mixins
+  hideScrollX: {
+    msOverflowStyle: "none",
+    scrollbarWidth: "none",
+    overflowX: "auto",
+    "&::-webkit-scrollbar": { display: "none" }
+  },
+  hideScrollY: {
+    msOverflowStyle: "none",
+    scrollbarWidth: "none",
+    overflowY: "auto",
+    "&::-webkit-scrollbar": { display: "none" }
+  },
+  // Style functions (attached at theme creation)
+  bgBlur,
+  bgGradient,
+  maxLine,
+  softStyles,
+  filledStyles,
+  paperStyles,
+  menuItemStyles,
+  varAlpha,
+  textGradient,
+  borderGradient,
+  scrollbarStyles
+};
+var hideScrollbarMixin = {
+  scrollbarWidth: "none",
+  msOverflowStyle: "none",
+  "&::-webkit-scrollbar": {
+    display: "none"
+  }
+};
+function customScrollbarMixin(theme) {
+  return scrollbarStyles(theme);
+}
+var textEllipsisMixin = {
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+function multiLineEllipsisMixin(lines) {
+  return {
+    overflow: "hidden",
+    display: "-webkit-box",
+    WebkitBoxOrient: "vertical",
+    WebkitLineClamp: lines
+  };
+}
+var focusRingMixin = {
+  "&:focus-visible": {
+    outline: "none",
+    boxShadow: "0 0 0 2px var(--prism-background, #FFF), 0 0 0 4px var(--prism-primary, #3385F0)"
+  }
+};
+var glassMixin = {
+  backdropFilter: "blur(20px)",
+  backgroundColor: "var(--prism-vibrant-overlay, rgba(255, 255, 255, 0.7))"
+};
+
+export { createPaletteColorFromScale, cssVarRgba, customScrollbarMixin, darken, focusRingMixin, generateColorScale, generateColorScaleWithChannels, generatePaletteColorWithChannels, getContrastRatio, getContrastText, getLuminance, glassMixin, hexToHsl, hexToRgb, hexToRgbChannel, hideScrollbarMixin, hslToHex, invertColorScale, isLightColor, lighten, mix, mixins, multiLineEllipsisMixin, rgbToHex, rgba, scrollbarStyles, textEllipsisMixin, varAlpha };
+//# sourceMappingURL=chunk-HOXFSQUV.js.map
+//# sourceMappingURL=chunk-HOXFSQUV.js.map