@12-apps/ui 5.0.0 → 5.0.1

package/dist/utility/AnimatedIcon.js

@@ -0,0 +1,516 @@
+import {
+  withDefaults
+} from "../chunk-Y2JYDXL7.js";
+import "../chunk-PZ5AY32C.js";
+
+// src/components/utility/AnimatedIcon/AnimatedIcon.tsx
+import { Box, styled } from "@mui/material";
+
+// src/components/utility/AnimatedIcon/AnimatedIcon.styles.ts
+import { alpha } from "@mui/material";
+
+// src/components/utility/AnimatedIcon/AnimatedIcon.animations.ts
+import { keyframes } from "@mui/material";
+var rotateAnimation = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+var pulseAnimation = keyframes`
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 0.8;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+`;
+var translateAnimation = keyframes`
+  0% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-8px);
+  }
+  100% {
+    transform: translateY(0px);
+  }
+`;
+var glowPulseAnimation = keyframes`
+  0% {
+    box-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
+  }
+  50% {
+    box-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
+  }
+  100% {
+    box-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
+  }
+`;
+var bounceAnimation = keyframes`
+  0%, 20%, 50%, 80%, 100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-20px);
+  }
+  60% {
+    transform: translateY(-10px);
+  }
+`;
+var shakeAnimation = keyframes`
+  0%, 100% {
+    transform: translateX(0);
+  }
+  10%, 30%, 50%, 70%, 90% {
+    transform: translateX(-4px);
+  }
+  20%, 40%, 60%, 80% {
+    transform: translateX(4px);
+  }
+`;
+var flipAnimation = keyframes`
+  0% {
+    transform: perspective(400px) rotateY(0);
+  }
+  100% {
+    transform: perspective(400px) rotateY(360deg);
+  }
+`;
+var spinAnimation = keyframes`
+  0% {
+    transform: rotate(0deg) scale(1);
+  }
+  50% {
+    transform: rotate(180deg) scale(1.2);
+  }
+  100% {
+    transform: rotate(360deg) scale(1);
+  }
+`;
+var fadeInOutAnimation = keyframes`
+  0%, 100% {
+    opacity: 0.3;
+  }
+  50% {
+    opacity: 1;
+  }
+`;
+var heartbeatAnimation = keyframes`
+  0%, 100% {
+    transform: scale(1);
+  }
+  5% {
+    transform: scale(1.25);
+  }
+  10% {
+    transform: scale(1);
+  }
+  15% {
+    transform: scale(1.25);
+  }
+  20% {
+    transform: scale(1);
+  }
+`;
+var wobbleAnimation = keyframes`
+  0%, 100% {
+    transform: translateX(0) rotate(0deg);
+  }
+  15% {
+    transform: translateX(-10px) rotate(-5deg);
+  }
+  30% {
+    transform: translateX(8px) rotate(3deg);
+  }
+  45% {
+    transform: translateX(-6px) rotate(-3deg);
+  }
+  60% {
+    transform: translateX(4px) rotate(2deg);
+  }
+  75% {
+    transform: translateX(-2px) rotate(-1deg);
+  }
+`;
+var morphAnimation = keyframes`
+  0%, 100% {
+    border-radius: 50%;
+    transform: scale(1);
+  }
+  25% {
+    border-radius: 30%;
+    transform: scale(1.1);
+  }
+  50% {
+    border-radius: 20%;
+    transform: scale(0.95);
+  }
+  75% {
+    border-radius: 40%;
+    transform: scale(1.05);
+  }
+`;
+var swingAnimation = keyframes`
+  20% {
+    transform: rotate(15deg);
+  }
+  40% {
+    transform: rotate(-10deg);
+  }
+  60% {
+    transform: rotate(5deg);
+  }
+  80% {
+    transform: rotate(-5deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+`;
+var floatAnimation = keyframes`
+  0%, 100% {
+    transform: translateY(0) translateX(0);
+  }
+  33% {
+    transform: translateY(-10px) translateX(-5px);
+  }
+  66% {
+    transform: translateY(5px) translateX(5px);
+  }
+`;
+var jelloAnimation = keyframes`
+  0%, 100% {
+    transform: scale(1, 1);
+  }
+  25% {
+    transform: scale(0.9, 1.1);
+  }
+  50% {
+    transform: scale(1.1, 0.9);
+  }
+  75% {
+    transform: scale(0.95, 1.05);
+  }
+`;
+var rippleAnimation = keyframes`
+  0% {
+    transform: scale(0.8);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+`;
+var neonFlickerAnimation = keyframes`
+  0%, 100% {
+    opacity: 1;
+    filter: brightness(1) drop-shadow(0 0 10px currentColor);
+  }
+  10% {
+    opacity: 0.8;
+    filter: brightness(0.8) drop-shadow(0 0 5px currentColor);
+  }
+  20% {
+    opacity: 1;
+    filter: brightness(1.2) drop-shadow(0 0 15px currentColor);
+  }
+  30% {
+    opacity: 0.9;
+    filter: brightness(0.9) drop-shadow(0 0 8px currentColor);
+  }
+  40% {
+    opacity: 1;
+    filter: brightness(1.1) drop-shadow(0 0 12px currentColor);
+  }
+  50% {
+    opacity: 0.95;
+    filter: brightness(1) drop-shadow(0 0 10px currentColor);
+  }
+  60% {
+    opacity: 0.85;
+    filter: brightness(0.85) drop-shadow(0 0 6px currentColor);
+  }
+  70% {
+    opacity: 1;
+    filter: brightness(1.15) drop-shadow(0 0 14px currentColor);
+  }
+  80% {
+    opacity: 0.9;
+    filter: brightness(0.95) drop-shadow(0 0 9px currentColor);
+  }
+  90% {
+    opacity: 1;
+    filter: brightness(1.05) drop-shadow(0 0 11px currentColor);
+  }
+`;
+var breatheAnimation = keyframes`
+  0%, 100% {
+    transform: scale(1);
+    filter: brightness(1);
+  }
+  50% {
+    transform: scale(1.05);
+    filter: brightness(1.2);
+  }
+`;
+
+// src/components/utility/AnimatedIcon/AnimatedIcon.styles.ts
+var sizeConfigs = {
+  xs: { size: 12, fontSize: 10 },
+  sm: { size: 24, fontSize: 20 },
+  md: { size: 32, fontSize: 28 },
+  lg: { size: 48, fontSize: 44 },
+  xl: { size: 64, fontSize: 60 }
+};
+var ANIMATIONS = {
+  rotate: { keyframes: `${rotateAnimation}`, easing: "linear", scale: 1 },
+  pulse: { keyframes: `${pulseAnimation}`, easing: "ease-in-out", scale: 1 },
+  translate: { keyframes: `${translateAnimation}`, easing: "ease-in-out", scale: 1 },
+  bounce: { keyframes: `${bounceAnimation}`, easing: "ease-in-out", scale: 1 },
+  shake: { keyframes: `${shakeAnimation}`, easing: "ease-in-out", scale: 1 },
+  flip: { keyframes: `${flipAnimation}`, easing: "ease-in-out", scale: 1 },
+  spin: { keyframes: `${spinAnimation}`, easing: "ease-in-out", scale: 1 },
+  fadeInOut: { keyframes: `${fadeInOutAnimation}`, easing: "ease-in-out", scale: 1 },
+  heartbeat: { keyframes: `${heartbeatAnimation}`, easing: "ease-in-out", scale: 1 },
+  wobble: { keyframes: `${wobbleAnimation}`, easing: "ease-in-out", scale: 1 },
+  morph: { keyframes: `${morphAnimation}`, easing: "ease-in-out", scale: 1 },
+  swing: { keyframes: `${swingAnimation}`, easing: "ease-in-out", scale: 1 },
+  jello: { keyframes: `${jelloAnimation}`, easing: "ease-in-out", scale: 1 },
+  float: { keyframes: `${floatAnimation}`, easing: "ease-in-out", scale: 2 },
+  neonFlicker: { keyframes: `${neonFlickerAnimation}`, easing: "ease-in-out", scale: 2 },
+  breathe: { keyframes: `${breatheAnimation}`, easing: "ease-in-out", scale: 1.5 }
+};
+var animationFor = (variant, duration, delay, loop) => {
+  const spec = ANIMATIONS[variant];
+  if (!spec) return "none";
+  const iterationCount = loop ? "infinite" : "1";
+  return `${spec.keyframes} ${duration * spec.scale}s ${spec.easing} ${iterationCount} ${delay > 0 ? `${delay}s` : "0s"}`;
+};
+var SHADOWS = {
+  soft: (theme) => `0 4px 20px ${alpha(theme.palette.common.black, 0.15)}`,
+  hard: (theme) => `4px 4px 0px ${alpha(theme.palette.common.black, 0.25)}`,
+  elevated: (theme) => `0 10px 40px ${alpha(theme.palette.common.black, 0.2)}, 0 2px 10px ${alpha(theme.palette.common.black, 0.1)}`
+};
+var effectStyles = (theme, flags, animation, color) => {
+  const { $glass, $metallic, $gradient, $neon, $holographic } = flags;
+  return {
+    ...$glass && {
+      background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.2)}, ${alpha(theme.palette.background.paper, 0.1)})`,
+      backdropFilter: "blur(10px)",
+      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+      boxShadow: `inset 0 1px 1px ${alpha(theme.palette.common.white, 0.3)}, 0 8px 32px ${alpha(theme.palette.common.black, 0.1)}`
+    },
+    ...$metallic && {
+      background: `linear-gradient(145deg,
+      ${theme.palette.grey[300]} 0%,
+      ${theme.palette.grey[500]} 25%,
+      ${theme.palette.grey[400]} 50%,
+      ${theme.palette.grey[600]} 75%,
+      ${theme.palette.grey[400]} 100%)`,
+      backgroundSize: "200% 200%",
+      animation: `${animation}, ${breatheAnimation} 4s ease-in-out infinite`,
+      boxShadow: `inset 0 2px 4px ${alpha(theme.palette.common.white, 0.5)},
+                inset 0 -2px 4px ${alpha(theme.palette.common.black, 0.3)},
+                0 4px 8px ${alpha(theme.palette.common.black, 0.2)}`
+    },
+    ...$gradient && {
+      background: `linear-gradient(135deg,
+      ${theme.palette.primary.main} 0%,
+      ${theme.palette.secondary.main} 100%)`,
+      backgroundSize: "200% 200%",
+      animation: `${animation}, ${breatheAnimation} 3s ease-in-out infinite`
+    },
+    ...$neon && {
+      color,
+      textShadow: `0 0 10px ${color}, 0 0 20px ${color}, 0 0 30px ${color}`,
+      filter: `brightness(1.2) contrast(1.2)`,
+      animation: `${animation}, ${neonFlickerAnimation} 3s ease-in-out infinite`
+    },
+    ...$holographic && {
+      background: `linear-gradient(45deg,
+      ${theme.palette.primary.main} 0%,
+      ${theme.palette.secondary.main} 25%,
+      ${theme.palette.error.main} 50%,
+      ${theme.palette.warning.main} 75%,
+      ${theme.palette.primary.main} 100%)`,
+      backgroundSize: "400% 400%",
+      animation: `${animation}, ${floatAnimation} 6s ease-in-out infinite`,
+      backgroundClip: "text",
+      WebkitBackgroundClip: "text",
+      WebkitTextFillColor: "transparent",
+      filter: `hue-rotate(0deg)`,
+      "@keyframes hueRotate": {
+        "0%": { filter: "hue-rotate(0deg)" },
+        "100%": { filter: "hue-rotate(360deg)" }
+      },
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        inset: -2,
+        borderRadius: "50%",
+        background: "inherit",
+        filter: "blur(10px)",
+        opacity: 0.5,
+        zIndex: -1
+      }
+    }
+  };
+};
+var iconSx = (theme, flags) => {
+  const {
+    $size,
+    $fontSize,
+    $animationVariant,
+    $duration,
+    $delay,
+    $loop,
+    $glow,
+    $glowColor,
+    $customColor,
+    $shadow,
+    $ripple,
+    $neon
+  } = flags;
+  const color = $customColor || theme.palette.primary.main;
+  const glowColor = $glowColor || color;
+  const animation = animationFor($animationVariant, $duration, $delay, $loop);
+  const glyphSize = { fontSize: $fontSize, width: $fontSize, height: $fontSize };
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: $size,
+    height: $size,
+    color,
+    animation,
+    position: "relative",
+    cursor: "default",
+    borderRadius: "50%",
+    transition: "all 0.3s ease",
+    boxShadow: SHADOWS[$shadow ?? "none"]?.(theme) ?? "none",
+    ...$glow && {
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        inset: -8,
+        borderRadius: "50%",
+        background: `radial-gradient(circle, ${alpha(glowColor, 0.3)} 0%, transparent 70%)`,
+        animation: `${glowPulseAnimation} ${$duration * 1.2}s ease-in-out infinite`,
+        zIndex: -1
+      },
+      filter: `drop-shadow(0 0 8px ${alpha(glowColor, 0.5)})`
+    },
+    ...effectStyles(theme, flags, animation, color),
+    ...$ripple && {
+      "&::after": {
+        content: '""',
+        position: "absolute",
+        inset: 0,
+        borderRadius: "50%",
+        border: `2px solid ${color}`,
+        animation: `${rippleAnimation} ${$duration * 1.5}s ease-out infinite`
+      }
+    },
+    "& .MuiSvgIcon-root": glyphSize,
+    "& svg": glyphSize,
+    "&:hover": {
+      transform: "scale(1.05)",
+      filter: $neon ? `brightness(1.4) contrast(1.3)` : void 0
+    }
+  };
+};
+
+// src/components/utility/AnimatedIcon/AnimatedIcon.tsx
+import { jsx } from "react/jsx-runtime";
+var AnimationContainer = styled(Box)(({ theme, ...flags }) => ({
+  ...iconSx(theme, flags)
+}));
+var DEFAULTS = {
+  variant: "none",
+  size: "md",
+  duration: 2,
+  delay: 0,
+  loop: true,
+  glow: false,
+  glass: false,
+  metallic: false,
+  gradient: false,
+  shadow: "none",
+  ripple: false,
+  neon: false,
+  holographic: false
+};
+var AnimatedIcon = (props) => {
+  const {
+    children,
+    variant,
+    size,
+    color,
+    duration,
+    delay,
+    loop,
+    glow,
+    glass,
+    glowColor,
+    metallic,
+    gradient,
+    shadow,
+    ripple,
+    neon,
+    holographic,
+    className,
+    style,
+    "aria-label": ariaLabel,
+    onClick,
+    tabIndex,
+    onFocus,
+    onBlur,
+    dataTestId
+  } = withDefaults(props, DEFAULTS);
+  const config = sizeConfigs[size] ?? sizeConfigs.md;
+  return /* @__PURE__ */ jsx(
+    AnimationContainer,
+    {
+      $size: config.size,
+      $fontSize: config.fontSize,
+      $animationVariant: variant,
+      $duration: duration,
+      $delay: delay,
+      $loop: loop,
+      $glow: glow,
+      $glass: glass,
+      $glowColor: glowColor,
+      $customColor: color,
+      $metallic: metallic,
+      $gradient: gradient,
+      $shadow: shadow,
+      $ripple: ripple,
+      $neon: neon,
+      $holographic: holographic,
+      className,
+      style,
+      role: "img",
+      "aria-label": ariaLabel || `Animated ${variant} icon`,
+      onClick,
+      tabIndex,
+      onFocus,
+      onBlur,
+      "data-testid": dataTestId,
+      children
+    }
+  );
+};
+export {
+  AnimatedIcon
+};
+//# sourceMappingURL=AnimatedIcon.js.map

package/dist/utility/AnimatedIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/utility/AnimatedIcon/AnimatedIcon.tsx","../../src/components/utility/AnimatedIcon/AnimatedIcon.styles.ts","../../src/components/utility/AnimatedIcon/AnimatedIcon.animations.ts"],"sourcesContent":["import { Box, styled } from '@mui/material';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { withDefaults } from '../../../utils/withDefaults';\n\nimport { iconSx, sizeConfigs } from './AnimatedIcon.styles';\nimport type { IconStyleFlags } from './AnimatedIcon.styles';\nimport type { AnimatedIconProps } from './AnimatedIcon.types';\n\nconst AnimationContainer = styled(Box)<IconStyleFlags>(({ theme, ...flags }) => ({\n  ...iconSx(theme, flags),\n}));\n\nconst DEFAULTS = {\n  variant: 'none',\n  size: 'md',\n  duration: 2,\n  delay: 0,\n  loop: true,\n  glow: false,\n  glass: false,\n  metallic: false,\n  gradient: false,\n  shadow: 'none',\n  ripple: false,\n  neon: false,\n  holographic: false,\n} satisfies Partial<AnimatedIconProps>;\n\ntype ResolvedProps = AnimatedIconProps & Required<Pick<AnimatedIconProps, keyof typeof DEFAULTS>>;\n\nexport const AnimatedIcon: FC<AnimatedIconProps> = (props) => {\n  const {\n    children, variant, size, color, duration, delay, loop, glow, glass, glowColor,\n    metallic, gradient, shadow, ripple, neon, holographic, className, style,\n    'aria-label': ariaLabel, onClick, tabIndex, onFocus, onBlur, dataTestId,\n  } = withDefaults(props, DEFAULTS) as ResolvedProps;\n\n  const config = sizeConfigs[size] ?? sizeConfigs.md;\n\n  return (\n    <AnimationContainer\n      $size={config.size}\n      $fontSize={config.fontSize}\n      $animationVariant={variant}\n      $duration={duration}\n      $delay={delay}\n      $loop={loop}\n      $glow={glow}\n      $glass={glass}\n      $glowColor={glowColor}\n      $customColor={color}\n      $metallic={metallic}\n      $gradient={gradient}\n      $shadow={shadow}\n      $ripple={ripple}\n      $neon={neon}\n      $holographic={holographic}\n      className={className}\n      style={style}\n      role=\"img\"\n      aria-label={ariaLabel || `Animated ${variant} icon`}\n      onClick={onClick}\n      tabIndex={tabIndex}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      data-testid={dataTestId}\n    >\n      {children}\n    </AnimationContainer>\n  );\n};\n\nexport default AnimatedIcon;\n","import { alpha } from '@mui/material';\nimport type { CSSObject, Theme } from '@mui/material';\n\nimport {\n  bounceAnimation,\n  breatheAnimation,\n  fadeInOutAnimation,\n  flipAnimation,\n  floatAnimation,\n  glowPulseAnimation,\n  heartbeatAnimation,\n  jelloAnimation,\n  morphAnimation,\n  neonFlickerAnimation,\n  pulseAnimation,\n  rippleAnimation,\n  rotateAnimation,\n  shakeAnimation,\n  spinAnimation,\n  swingAnimation,\n  translateAnimation,\n  wobbleAnimation,\n} from './AnimatedIcon.animations';\nimport type { AnimationSize, AnimationVariant } from './AnimatedIcon.types';\n\nexport const sizeConfigs: Record<AnimationSize, { size: number; fontSize: number }> = {\n  xs: { size: 12, fontSize: 10 },\n  sm: { size: 24, fontSize: 20 },\n  md: { size: 32, fontSize: 28 },\n  lg: { size: 48, fontSize: 44 },\n  xl: { size: 64, fontSize: 60 },\n};\n\n/**\n * Every variant produces the same shorthand — keyframes, duration, easing,\n * iteration count, delay — so only the three things that actually differ are\n * tabulated. `scale` multiplies the caller's duration for the variants that\n * read as slower than the rest.\n */\nconst ANIMATIONS: Record<string, { keyframes: string; easing: string; scale: number }> = {\n  rotate: { keyframes: `${rotateAnimation}`, easing: 'linear', scale: 1 },\n  pulse: { keyframes: `${pulseAnimation}`, easing: 'ease-in-out', scale: 1 },\n  translate: { keyframes: `${translateAnimation}`, easing: 'ease-in-out', scale: 1 },\n  bounce: { keyframes: `${bounceAnimation}`, easing: 'ease-in-out', scale: 1 },\n  shake: { keyframes: `${shakeAnimation}`, easing: 'ease-in-out', scale: 1 },\n  flip: { keyframes: `${flipAnimation}`, easing: 'ease-in-out', scale: 1 },\n  spin: { keyframes: `${spinAnimation}`, easing: 'ease-in-out', scale: 1 },\n  fadeInOut: { keyframes: `${fadeInOutAnimation}`, easing: 'ease-in-out', scale: 1 },\n  heartbeat: { keyframes: `${heartbeatAnimation}`, easing: 'ease-in-out', scale: 1 },\n  wobble: { keyframes: `${wobbleAnimation}`, easing: 'ease-in-out', scale: 1 },\n  morph: { keyframes: `${morphAnimation}`, easing: 'ease-in-out', scale: 1 },\n  swing: { keyframes: `${swingAnimation}`, easing: 'ease-in-out', scale: 1 },\n  jello: { keyframes: `${jelloAnimation}`, easing: 'ease-in-out', scale: 1 },\n  float: { keyframes: `${floatAnimation}`, easing: 'ease-in-out', scale: 2 },\n  neonFlicker: { keyframes: `${neonFlickerAnimation}`, easing: 'ease-in-out', scale: 2 },\n  breathe: { keyframes: `${breatheAnimation}`, easing: 'ease-in-out', scale: 1.5 },\n};\n\nconst animationFor = (\n  variant: AnimationVariant,\n  duration: number,\n  delay: number,\n  loop: boolean,\n) => {\n  const spec = ANIMATIONS[variant];\n  if (!spec) return 'none';\n\n  const iterationCount = loop ? 'infinite' : '1';\n  return `${spec.keyframes} ${duration * spec.scale}s ${spec.easing} ${iterationCount} ${delay > 0 ? `${delay}s` : '0s'}`;\n};\n\nconst SHADOWS: Record<string, (theme: Theme) => string> = {\n  soft: (theme) => `0 4px 20px ${alpha(theme.palette.common.black, 0.15)}`,\n  hard: (theme) => `4px 4px 0px ${alpha(theme.palette.common.black, 0.25)}`,\n  elevated: (theme) =>\n    `0 10px 40px ${alpha(theme.palette.common.black, 0.2)}, 0 2px 10px ${alpha(theme.palette.common.black, 0.1)}`,\n};\n\nexport interface IconStyleFlags {\n  $size: number;\n  $fontSize: number;\n  $animationVariant: AnimationVariant;\n  $duration: number;\n  $delay: number;\n  $loop: boolean;\n  $glow: boolean;\n  $glass: boolean;\n  $glowColor?: string;\n  $customColor?: string;\n  $metallic?: boolean;\n  $gradient?: boolean;\n  $shadow?: 'soft' | 'hard' | 'elevated' | 'none';\n  $ripple?: boolean;\n  $neon?: boolean;\n  $holographic?: boolean;\n}\n\n/**\n * The four surface treatments that paint the icon themselves — metallic,\n * gradient, neon and holographic — each run a second animation alongside the\n * chosen one, so they all need the base animation string.\n */\nconst effectStyles = (\n  theme: Theme,\n  flags: IconStyleFlags,\n  animation: string,\n  color: string,\n): CSSObject => {\n  const { $glass, $metallic, $gradient, $neon, $holographic } = flags;\n\n  return {\n    ...($glass && {\n      background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.2)}, ${alpha(theme.palette.background.paper, 0.1)})`,\n      backdropFilter: 'blur(10px)',\n      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n      boxShadow: `inset 0 1px 1px ${alpha(theme.palette.common.white, 0.3)}, 0 8px 32px ${alpha(theme.palette.common.black, 0.1)}`,\n    }),\n    ...($metallic && {\n      background: `linear-gradient(145deg,\n      ${theme.palette.grey[300]} 0%,\n      ${theme.palette.grey[500]} 25%,\n      ${theme.palette.grey[400]} 50%,\n      ${theme.palette.grey[600]} 75%,\n      ${theme.palette.grey[400]} 100%)`,\n      backgroundSize: '200% 200%',\n      animation: `${animation}, ${breatheAnimation} 4s ease-in-out infinite`,\n      boxShadow: `inset 0 2px 4px ${alpha(theme.palette.common.white, 0.5)},\n                inset 0 -2px 4px ${alpha(theme.palette.common.black, 0.3)},\n                0 4px 8px ${alpha(theme.palette.common.black, 0.2)}`,\n    }),\n    ...($gradient && {\n      background: `linear-gradient(135deg,\n      ${theme.palette.primary.main} 0%,\n      ${theme.palette.secondary.main} 100%)`,\n      backgroundSize: '200% 200%',\n      animation: `${animation}, ${breatheAnimation} 3s ease-in-out infinite`,\n    }),\n    ...($neon && {\n      color,\n      textShadow: `0 0 10px ${color}, 0 0 20px ${color}, 0 0 30px ${color}`,\n      filter: `brightness(1.2) contrast(1.2)`,\n      animation: `${animation}, ${neonFlickerAnimation} 3s ease-in-out infinite`,\n    }),\n    ...($holographic && {\n      background: `linear-gradient(45deg,\n      ${theme.palette.primary.main} 0%,\n      ${theme.palette.secondary.main} 25%,\n      ${theme.palette.error.main} 50%,\n      ${theme.palette.warning.main} 75%,\n      ${theme.palette.primary.main} 100%)`,\n      backgroundSize: '400% 400%',\n      animation: `${animation}, ${floatAnimation} 6s ease-in-out infinite`,\n      backgroundClip: 'text',\n      WebkitBackgroundClip: 'text',\n      WebkitTextFillColor: 'transparent',\n      filter: `hue-rotate(0deg)`,\n      '@keyframes hueRotate': {\n        '0%': { filter: 'hue-rotate(0deg)' },\n        '100%': { filter: 'hue-rotate(360deg)' },\n      },\n      '&::before': {\n        content: '\"\"',\n        position: 'absolute' as const,\n        inset: -2,\n        borderRadius: '50%',\n        background: 'inherit',\n        filter: 'blur(10px)',\n        opacity: 0.5,\n        zIndex: -1,\n      },\n    }),\n  };\n};\n\nexport const iconSx = (theme: Theme, flags: IconStyleFlags): CSSObject => {\n  const {\n    $size, $fontSize, $animationVariant, $duration, $delay, $loop,\n    $glow, $glowColor, $customColor, $shadow, $ripple, $neon,\n  } = flags;\n\n  const color = $customColor || theme.palette.primary.main;\n  const glowColor = $glowColor || color;\n  const animation = animationFor($animationVariant, $duration, $delay, $loop);\n\n  // Both selectors size the same glyph — MUI icons render an MuiSvgIcon-root,\n  // a bare child renders an svg.\n  const glyphSize = { fontSize: $fontSize, width: $fontSize, height: $fontSize };\n\n  return {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: $size,\n    height: $size,\n    color,\n    animation,\n    position: 'relative' as const,\n    cursor: 'default',\n    borderRadius: '50%',\n    transition: 'all 0.3s ease',\n    boxShadow: SHADOWS[$shadow ?? 'none']?.(theme) ?? 'none',\n    ...($glow && {\n      '&::before': {\n        content: '\"\"',\n        position: 'absolute' as const,\n        inset: -8,\n        borderRadius: '50%',\n        background: `radial-gradient(circle, ${alpha(glowColor, 0.3)} 0%, transparent 70%)`,\n        animation: `${glowPulseAnimation} ${$duration * 1.2}s ease-in-out infinite`,\n        zIndex: -1,\n      },\n      filter: `drop-shadow(0 0 8px ${alpha(glowColor, 0.5)})`,\n    }),\n    ...effectStyles(theme, flags, animation, color),\n    ...($ripple && {\n      '&::after': {\n        content: '\"\"',\n        position: 'absolute' as const,\n        inset: 0,\n        borderRadius: '50%',\n        border: `2px solid ${color}`,\n        animation: `${rippleAnimation} ${$duration * 1.5}s ease-out infinite`,\n      },\n    }),\n    '& .MuiSvgIcon-root': glyphSize,\n    '& svg': glyphSize,\n    '&:hover': {\n      transform: 'scale(1.05)',\n      filter: $neon ? `brightness(1.4) contrast(1.3)` : undefined,\n    },\n  };\n};\n","import { keyframes } from '@mui/material';\n\nexport const rotateAnimation = keyframes`\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n`;\n\nexport const pulseAnimation = keyframes`\n  0% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  50% {\n    transform: scale(1.1);\n    opacity: 0.8;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n`;\n\nexport const translateAnimation = keyframes`\n  0% {\n    transform: translateY(0px);\n  }\n  50% {\n    transform: translateY(-8px);\n  }\n  100% {\n    transform: translateY(0px);\n  }\n`;\n\nexport const glowPulseAnimation = keyframes`\n  0% {\n    box-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;\n  }\n  50% {\n    box-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;\n  }\n  100% {\n    box-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;\n  }\n`;\n\n// New animation keyframes\nexport const bounceAnimation = keyframes`\n  0%, 20%, 50%, 80%, 100% {\n    transform: translateY(0);\n  }\n  40% {\n    transform: translateY(-20px);\n  }\n  60% {\n    transform: translateY(-10px);\n  }\n`;\n\nexport const shakeAnimation = keyframes`\n  0%, 100% {\n    transform: translateX(0);\n  }\n  10%, 30%, 50%, 70%, 90% {\n    transform: translateX(-4px);\n  }\n  20%, 40%, 60%, 80% {\n    transform: translateX(4px);\n  }\n`;\n\nexport const flipAnimation = keyframes`\n  0% {\n    transform: perspective(400px) rotateY(0);\n  }\n  100% {\n    transform: perspective(400px) rotateY(360deg);\n  }\n`;\n\nexport const spinAnimation = keyframes`\n  0% {\n    transform: rotate(0deg) scale(1);\n  }\n  50% {\n    transform: rotate(180deg) scale(1.2);\n  }\n  100% {\n    transform: rotate(360deg) scale(1);\n  }\n`;\n\nexport const fadeInOutAnimation = keyframes`\n  0%, 100% {\n    opacity: 0.3;\n  }\n  50% {\n    opacity: 1;\n  }\n`;\n\nexport const heartbeatAnimation = keyframes`\n  0%, 100% {\n    transform: scale(1);\n  }\n  5% {\n    transform: scale(1.25);\n  }\n  10% {\n    transform: scale(1);\n  }\n  15% {\n    transform: scale(1.25);\n  }\n  20% {\n    transform: scale(1);\n  }\n`;\n\nexport const wobbleAnimation = keyframes`\n  0%, 100% {\n    transform: translateX(0) rotate(0deg);\n  }\n  15% {\n    transform: translateX(-10px) rotate(-5deg);\n  }\n  30% {\n    transform: translateX(8px) rotate(3deg);\n  }\n  45% {\n    transform: translateX(-6px) rotate(-3deg);\n  }\n  60% {\n    transform: translateX(4px) rotate(2deg);\n  }\n  75% {\n    transform: translateX(-2px) rotate(-1deg);\n  }\n`;\n\nexport const morphAnimation = keyframes`\n  0%, 100% {\n    border-radius: 50%;\n    transform: scale(1);\n  }\n  25% {\n    border-radius: 30%;\n    transform: scale(1.1);\n  }\n  50% {\n    border-radius: 20%;\n    transform: scale(0.95);\n  }\n  75% {\n    border-radius: 40%;\n    transform: scale(1.05);\n  }\n`;\n\nexport const swingAnimation = keyframes`\n  20% {\n    transform: rotate(15deg);\n  }\n  40% {\n    transform: rotate(-10deg);\n  }\n  60% {\n    transform: rotate(5deg);\n  }\n  80% {\n    transform: rotate(-5deg);\n  }\n  100% {\n    transform: rotate(0deg);\n  }\n`;\n\nexport const floatAnimation = keyframes`\n  0%, 100% {\n    transform: translateY(0) translateX(0);\n  }\n  33% {\n    transform: translateY(-10px) translateX(-5px);\n  }\n  66% {\n    transform: translateY(5px) translateX(5px);\n  }\n`;\n\nexport const jelloAnimation = keyframes`\n  0%, 100% {\n    transform: scale(1, 1);\n  }\n  25% {\n    transform: scale(0.9, 1.1);\n  }\n  50% {\n    transform: scale(1.1, 0.9);\n  }\n  75% {\n    transform: scale(0.95, 1.05);\n  }\n`;\n\nexport const rippleAnimation = keyframes`\n  0% {\n    transform: scale(0.8);\n    opacity: 1;\n  }\n  100% {\n    transform: scale(2);\n    opacity: 0;\n  }\n`;\n\nexport const neonFlickerAnimation = keyframes`\n  0%, 100% {\n    opacity: 1;\n    filter: brightness(1) drop-shadow(0 0 10px currentColor);\n  }\n  10% {\n    opacity: 0.8;\n    filter: brightness(0.8) drop-shadow(0 0 5px currentColor);\n  }\n  20% {\n    opacity: 1;\n    filter: brightness(1.2) drop-shadow(0 0 15px currentColor);\n  }\n  30% {\n    opacity: 0.9;\n    filter: brightness(0.9) drop-shadow(0 0 8px currentColor);\n  }\n  40% {\n    opacity: 1;\n    filter: brightness(1.1) drop-shadow(0 0 12px currentColor);\n  }\n  50% {\n    opacity: 0.95;\n    filter: brightness(1) drop-shadow(0 0 10px currentColor);\n  }\n  60% {\n    opacity: 0.85;\n    filter: brightness(0.85) drop-shadow(0 0 6px currentColor);\n  }\n  70% {\n    opacity: 1;\n    filter: brightness(1.15) drop-shadow(0 0 14px currentColor);\n  }\n  80% {\n    opacity: 0.9;\n    filter: brightness(0.95) drop-shadow(0 0 9px currentColor);\n  }\n  90% {\n    opacity: 1;\n    filter: brightness(1.05) drop-shadow(0 0 11px currentColor);\n  }\n`;\n\nexport const breatheAnimation = keyframes`\n  0%, 100% {\n    transform: scale(1);\n    filter: brightness(1);\n  }\n  50% {\n    transform: scale(1.05);\n    filter: brightness(1.2);\n  }\n`;\n\n// Size configurations\n"],"mappings":"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","names":[]}

package/dist/utility/AspectRatio.js

@@ -0,0 +1,81 @@
+import "../chunk-PZ5AY32C.js";
+
+// src/components/utility/AspectRatio/AspectRatio.tsx
+import { Box } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+var AspectRatio = ({
+  children,
+  variant = "16:9",
+  ratio,
+  maxWidth,
+  maxHeight,
+  dataTestId,
+  sx,
+  ...props
+}) => {
+  const getAspectRatio = () => {
+    if (variant === "custom" && ratio) {
+      return ratio;
+    }
+    switch (variant) {
+      case "16:9":
+        return 16 / 9;
+      case "4:3":
+        return 4 / 3;
+      case "1:1":
+        return 1;
+      case "3:2":
+        return 3 / 2;
+      case "21:9":
+        return 21 / 9;
+      default:
+        return 16 / 9;
+    }
+  };
+  const aspectRatio = getAspectRatio();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      "data-testid": dataTestId,
+      sx: {
+        position: "relative",
+        width: "100%",
+        maxWidth,
+        maxHeight,
+        ...sx
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: {
+            width: "100%",
+            paddingTop: `${1 / aspectRatio * 100}%`,
+            position: "relative"
+          },
+          children: /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: "100%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                overflow: "hidden"
+              },
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+};
+export {
+  AspectRatio
+};
+//# sourceMappingURL=AspectRatio.js.map

package/dist/utility/AspectRatio.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/utility/AspectRatio/AspectRatio.tsx"],"sourcesContent":["import { Box } from '@mui/material';\nimport React from 'react';\n\nimport type { AspectRatioProps } from './AspectRatio.types';\n\nexport const AspectRatio: React.FC<AspectRatioProps> = ({\n  children,\n  variant = '16:9',\n  ratio,\n  maxWidth,\n  maxHeight,\n  dataTestId,\n  sx,\n  ...props\n}) => {\n  const getAspectRatio = () => {\n    if (variant === 'custom' && ratio) {\n      return ratio;\n    }\n\n    switch (variant) {\n      case '16:9':\n        return 16 / 9;\n      case '4:3':\n        return 4 / 3;\n      case '1:1':\n        return 1;\n      case '3:2':\n        return 3 / 2;\n      case '21:9':\n        return 21 / 9;\n      default:\n        return 16 / 9;\n    }\n  };\n\n  const aspectRatio = getAspectRatio();\n\n  return (\n    <Box\n      data-testid={dataTestId}\n      sx={{\n        position: 'relative',\n        width: '100%',\n        maxWidth,\n        maxHeight,\n        ...sx,\n      }}\n      {...props}\n    >\n      <Box\n        sx={{\n          width: '100%',\n          paddingTop: `${(1 / aspectRatio) * 100}%`,\n          position: 'relative',\n        }}\n      >\n        <Box\n          sx={{\n            position: 'absolute',\n            top: 0,\n            left: 0,\n            width: '100%',\n            height: '100%',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            overflow: 'hidden',\n          }}\n        >\n          {children}\n        </Box>\n      </Box>\n    </Box>\n  );\n};\n"],"mappings":";;;AAAA,SAAS,WAAW;AAyDZ;AApDD,IAAM,cAA0C,CAAC;AAAA,EACtD;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,iBAAiB,MAAM;AAC3B,QAAI,YAAY,YAAY,OAAO;AACjC,aAAO;AAAA,IACT;AAEA,YAAQ,SAAS;AAAA,MACf,KAAK;AACH,eAAO,KAAK;AAAA,MACd,KAAK;AACH,eAAO,IAAI;AAAA,MACb,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO,IAAI;AAAA,MACb,KAAK;AACH,eAAO,KAAK;AAAA,MACd;AACE,eAAO,KAAK;AAAA,IAChB;AAAA,EACF;AAEA,QAAM,cAAc,eAAe;AAEnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,IAAI;AAAA,QACF,UAAU;AAAA,QACV,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,YACF,OAAO;AAAA,YACP,YAAY,GAAI,IAAI,cAAe,GAAG;AAAA,YACtC,UAAU;AAAA,UACZ;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,gBACF,UAAU;AAAA,gBACV,KAAK;AAAA,gBACL,MAAM;AAAA,gBACN,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,SAAS;AAAA,gBACT,YAAY;AAAA,gBACZ,gBAAgB;AAAA,gBAChB,UAAU;AAAA,cACZ;AAAA,cAEC;AAAA;AAAA,UACH;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}