@12-apps/ui 1.3.1 → 1.4.1

package/src/components/typography/Heading/Heading.styles.ts

@@ -0,0 +1,101 @@
+import type { CSSObject, Theme } from '@mui/material';
+
+import type { HeadingProps } from './Heading.types';
+
+type Level = NonNullable<HeadingProps['level']>;
+type Weight = NonNullable<HeadingProps['weight']>;
+
+const getColorFromTheme = (theme: Theme, color: string): string => {
+  if (color === 'neutral') {
+    return theme.palette.text.primary;
+  }
+
+  const colorMap: Record<string, string> = {
+    primary: theme.palette.primary.main,
+    secondary: theme.palette.secondary.main,
+    success: theme.palette.success.main,
+    warning: theme.palette.warning.main,
+    danger: theme.palette.error.main,
+  };
+
+  return colorMap[color] || theme.palette.text.primary;
+};
+
+const WEIGHTS: Record<Weight, number> = {
+  light: 300,
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+};
+
+/**
+ * Each level's metrics, plus the weight it uses when the caller asks for
+ * `normal`. A heading's "normal" is not body text's 400 — it is the weight that
+ * level is meant to carry, which gets heavier as the level gets larger.
+ */
+const LEVELS: Record<Level, CSSObject & { normalWeight: number }> = {
+  display: { fontSize: '4rem', lineHeight: 0.95, letterSpacing: '-0.03em', normalWeight: 800 },
+  h1: { fontSize: '3rem', lineHeight: 1.1, letterSpacing: '-0.02em', normalWeight: 700 },
+  h2: { fontSize: '2.5rem', lineHeight: 1.2, letterSpacing: '-0.015em', normalWeight: 700 },
+  h3: { fontSize: '2rem', lineHeight: 1.25, letterSpacing: '-0.01em', normalWeight: 600 },
+  h4: { fontSize: '1.5rem', lineHeight: 1.3, letterSpacing: '-0.005em', normalWeight: 600 },
+  h5: { fontSize: '1.25rem', lineHeight: 1.4, normalWeight: 600 },
+  h6: { fontSize: '1.125rem', lineHeight: 1.4, normalWeight: 600 },
+};
+
+/** The two-stop gradient each colour paints its glyphs with. */
+const PRIMARY_STOPS = (theme: Theme): [string, string] => [
+  theme.palette.primary.main,
+  theme.palette.secondary.main,
+];
+
+const GRADIENT_STOPS: Record<string, (theme: Theme) => [string, string]> = {
+  primary: PRIMARY_STOPS,
+  secondary: (theme) => [theme.palette.secondary.main, theme.palette.primary.main],
+  success: (theme) => [theme.palette.success.light, theme.palette.success.dark],
+  warning: (theme) => [theme.palette.warning.light, theme.palette.warning.dark],
+  danger: (theme) => [theme.palette.error.light, theme.palette.error.dark],
+};
+
+const gradientFor = (theme: Theme, color: string) => {
+  const [from, to] = (GRADIENT_STOPS[color] ?? PRIMARY_STOPS)(theme);
+  return `linear-gradient(135deg, ${from} 0%, ${to} 100%)`;
+};
+
+export interface HeadingFlags {
+  customLevel?: string;
+  customColor?: string;
+  customWeight?: string;
+  gradient?: boolean;
+}
+
+export const headingSx = (theme: Theme, flags: HeadingFlags): CSSObject => {
+  const { customLevel = 'h2', customColor = 'neutral', customWeight = 'bold', gradient } = flags;
+  const { normalWeight, ...metrics } = LEVELS[customLevel as Level] ?? LEVELS.h2;
+
+  const base: CSSObject = {
+    fontFamily: theme.typography.h1.fontFamily,
+    margin: 0,
+    transition: 'all 0.2s ease',
+    ...metrics,
+    fontWeight:
+      customWeight === 'normal' ? normalWeight : (WEIGHTS[customWeight as Weight] ?? WEIGHTS.bold),
+  };
+
+  if (!gradient) {
+    return { ...base, color: getColorFromTheme(theme, customColor) };
+  }
+
+  // The gradient paints the glyphs themselves, so the text must draw no fill of
+  // its own for it to show through.
+  return {
+    ...base,
+    background: gradientFor(theme, customColor),
+    backgroundClip: 'text',
+    WebkitBackgroundClip: 'text',
+    WebkitTextFillColor: 'transparent',
+    MozBackgroundClip: 'text',
+    MozTextFillColor: 'transparent',
+  };
+};

package/src/components/typography/Heading/Heading.tsx

@@ -1,177 +1,61 @@
-import type { Theme } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import React from 'react';
 
+import { headingSx } from './Heading.styles';
+import type { HeadingFlags } from './Heading.styles';
 import type { HeadingProps } from './Heading.types';
 
-const getColorFromTheme = (theme: Theme, color: string) => {
-  if (color === 'neutral') {
-    return theme.palette.text.primary;
-  }
-
-  const colorMap: Record<string, string> = {
-    primary: theme.palette.primary.main,
-    secondary: theme.palette.secondary.main,
-    success: theme.palette.success.main,
-    warning: theme.palette.warning.main,
-    danger: theme.palette.error.main,
-  };
-
-  return colorMap[color] || theme.palette.text.primary;
-};
-
-// Create styled versions of each heading element
-const createStyledHeading = () =>
+const styledHeading = () =>
   styled('h1', {
     shouldForwardProp: (prop) =>
       !['customLevel', 'customColor', 'customWeight', 'gradient'].includes(prop as string),
-  })<{
-    customLevel?: string;
-    customColor?: string;
-    customWeight?: string;
-    gradient?: boolean;
-  }>(({ theme, customLevel = 'h2', customColor = 'neutral', customWeight = 'bold', gradient }) => {
-    const textColor = getColorFromTheme(theme, customColor);
-
-    // Weight mapping
-    const weightMap = {
-      light: 300,
-      normal: 400,
-      medium: 500,
-      semibold: 600,
-      bold: 700,
-    };
-
-    // Level-specific styles
-    const levelStyles = {
-      h1: {
-        fontSize: '3rem',
-        lineHeight: 1.1,
-        letterSpacing: '-0.02em',
-        fontWeight:
-          customWeight === 'normal' ? 700 : weightMap[customWeight as keyof typeof weightMap],
-      },
-      h2: {
-        fontSize: '2.5rem',
-        lineHeight: 1.2,
-        letterSpacing: '-0.015em',
-        fontWeight:
-          customWeight === 'normal' ? 700 : weightMap[customWeight as keyof typeof weightMap],
-      },
-      h3: {
-        fontSize: '2rem',
-        lineHeight: 1.25,
-        letterSpacing: '-0.01em',
-        fontWeight:
-          customWeight === 'normal' ? 600 : weightMap[customWeight as keyof typeof weightMap],
-      },
-      h4: {
-        fontSize: '1.5rem',
-        lineHeight: 1.3,
-        letterSpacing: '-0.005em',
-        fontWeight:
-          customWeight === 'normal' ? 600 : weightMap[customWeight as keyof typeof weightMap],
-      },
-      h5: {
-        fontSize: '1.25rem',
-        lineHeight: 1.4,
-        fontWeight:
-          customWeight === 'normal' ? 600 : weightMap[customWeight as keyof typeof weightMap],
-      },
-      h6: {
-        fontSize: '1.125rem',
-        lineHeight: 1.4,
-        fontWeight:
-          customWeight === 'normal' ? 600 : weightMap[customWeight as keyof typeof weightMap],
-      },
-      display: {
-        fontSize: '4rem',
-        lineHeight: 0.95,
-        letterSpacing: '-0.03em',
-        fontWeight:
-          customWeight === 'normal' ? 800 : weightMap[customWeight as keyof typeof weightMap],
-      },
-    };
-
-    const baseStyles = {
-      fontFamily: theme.typography.h1.fontFamily,
-      margin: 0,
-      transition: 'all 0.2s ease',
-      ...levelStyles[customLevel as keyof typeof levelStyles],
-    };
-
-    // Gradient text effect
-    if (gradient) {
-      const gradientColor =
-        customColor === 'primary'
-          ? `linear-gradient(135deg, ${theme.palette.primary.main} 0%, ${theme.palette.secondary.main} 100%)`
-          : customColor === 'secondary'
-            ? `linear-gradient(135deg, ${theme.palette.secondary.main} 0%, ${theme.palette.primary.main} 100%)`
-            : customColor === 'success'
-              ? `linear-gradient(135deg, ${theme.palette.success.light} 0%, ${theme.palette.success.dark} 100%)`
-              : customColor === 'warning'
-                ? `linear-gradient(135deg, ${theme.palette.warning.light} 0%, ${theme.palette.warning.dark} 100%)`
-                : customColor === 'danger'
-                  ? `linear-gradient(135deg, ${theme.palette.error.light} 0%, ${theme.palette.error.dark} 100%)`
-                  : `linear-gradient(135deg, ${theme.palette.primary.main} 0%, ${theme.palette.secondary.main} 100%)`;
-
-      return {
-        ...baseStyles,
-        background: gradientColor,
-        backgroundClip: 'text',
-        WebkitBackgroundClip: 'text',
-        WebkitTextFillColor: 'transparent',
-        MozBackgroundClip: 'text',
-        MozTextFillColor: 'transparent',
-      };
-    }
-
-    return {
-      ...baseStyles,
-      color: textColor,
-    };
-  });
-
-// Create styled components for each heading level
-const StyledH1 = createStyledHeading().withComponent('h1');
-const StyledH2 = createStyledHeading().withComponent('h2');
-const StyledH3 = createStyledHeading().withComponent('h3');
-const StyledH4 = createStyledHeading().withComponent('h4');
-const StyledH5 = createStyledHeading().withComponent('h5');
-const StyledH6 = createStyledHeading().withComponent('h6');
+  })<HeadingFlags>(({ theme, ...flags }) => ({ ...headingSx(theme, flags) }));
+
+/**
+ * One styled component per tag. They share a style function but must be
+ * separate components, since `withComponent` fixes the element at definition
+ * time — a single component switching tags per render would remount the text.
+ */
+const STYLED_BY_TAG = {
+  h1: styledHeading().withComponent('h1'),
+  h2: styledHeading().withComponent('h2'),
+  h3: styledHeading().withComponent('h3'),
+  h4: styledHeading().withComponent('h4'),
+  h5: styledHeading().withComponent('h5'),
+  h6: styledHeading().withComponent('h6'),
+} as const;
+
+/**
+ * Which tag each level renders. `display` is a size, not a rank, so it uses the
+ * h1 element — the document still gets one level-one heading rather than an
+ * unnamed tag outside the outline.
+ */
+const TAG_FOR_LEVEL: Record<string, keyof typeof STYLED_BY_TAG> = {
+  display: 'h1',
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
+  h6: 'h6',
+};
 
 export const Heading = React.forwardRef<globalThis.HTMLHeadingElement, HeadingProps>(
-  (
-    { level = 'h2', color = 'neutral', weight = 'bold', gradient = false, children, ...props },
-    ref,
-  ) => {
-    const commonProps = {
-      ref,
-      customLevel: level,
-      customColor: color,
-      customWeight: weight,
-      gradient,
-      ...props,
-    };
-
-    // Return the appropriate styled heading component based on level
-    switch (level) {
-      case 'h1':
-      case 'display':
-        return <StyledH1 {...commonProps}>{children}</StyledH1>;
-      case 'h2':
-        return <StyledH2 {...commonProps}>{children}</StyledH2>;
-      case 'h3':
-        return <StyledH3 {...commonProps}>{children}</StyledH3>;
-      case 'h4':
-        return <StyledH4 {...commonProps}>{children}</StyledH4>;
-      case 'h5':
-        return <StyledH5 {...commonProps}>{children}</StyledH5>;
-      case 'h6':
-        return <StyledH6 {...commonProps}>{children}</StyledH6>;
-      default:
-        return <StyledH2 {...commonProps}>{children}</StyledH2>;
-    }
+  ({ level = 'h2', color = 'neutral', weight = 'bold', gradient = false, children, ...props }, ref) => {
+    const Styled = STYLED_BY_TAG[TAG_FOR_LEVEL[level] ?? 'h2'];
+
+    return (
+      <Styled
+        ref={ref}
+        customLevel={level}
+        customColor={color}
+        customWeight={weight}
+        gradient={gradient}
+        {...props}
+      >
+        {children}
+      </Styled>
+    );
   },
 );
 

package/src/components/utility/AnimatedIcon/AnimatedIcon.animations.ts

@@ -0,0 +1,274 @@
+import { keyframes } from '@mui/material';
+
+export const rotateAnimation = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+
+export const pulseAnimation = keyframes`
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 0.8;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+`;
+
+export const translateAnimation = keyframes`
+  0% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-8px);
+  }
+  100% {
+    transform: translateY(0px);
+  }
+`;
+
+export const 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;
+  }
+`;
+
+// New animation keyframes
+export const bounceAnimation = keyframes`
+  0%, 20%, 50%, 80%, 100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-20px);
+  }
+  60% {
+    transform: translateY(-10px);
+  }
+`;
+
+export const shakeAnimation = keyframes`
+  0%, 100% {
+    transform: translateX(0);
+  }
+  10%, 30%, 50%, 70%, 90% {
+    transform: translateX(-4px);
+  }
+  20%, 40%, 60%, 80% {
+    transform: translateX(4px);
+  }
+`;
+
+export const flipAnimation = keyframes`
+  0% {
+    transform: perspective(400px) rotateY(0);
+  }
+  100% {
+    transform: perspective(400px) rotateY(360deg);
+  }
+`;
+
+export const spinAnimation = keyframes`
+  0% {
+    transform: rotate(0deg) scale(1);
+  }
+  50% {
+    transform: rotate(180deg) scale(1.2);
+  }
+  100% {
+    transform: rotate(360deg) scale(1);
+  }
+`;
+
+export const fadeInOutAnimation = keyframes`
+  0%, 100% {
+    opacity: 0.3;
+  }
+  50% {
+    opacity: 1;
+  }
+`;
+
+export const 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);
+  }
+`;
+
+export const 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);
+  }
+`;
+
+export const 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);
+  }
+`;
+
+export const swingAnimation = keyframes`
+  20% {
+    transform: rotate(15deg);
+  }
+  40% {
+    transform: rotate(-10deg);
+  }
+  60% {
+    transform: rotate(5deg);
+  }
+  80% {
+    transform: rotate(-5deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+`;
+
+export const floatAnimation = keyframes`
+  0%, 100% {
+    transform: translateY(0) translateX(0);
+  }
+  33% {
+    transform: translateY(-10px) translateX(-5px);
+  }
+  66% {
+    transform: translateY(5px) translateX(5px);
+  }
+`;
+
+export const 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);
+  }
+`;
+
+export const rippleAnimation = keyframes`
+  0% {
+    transform: scale(0.8);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+`;
+
+export const 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);
+  }
+`;
+
+export const breatheAnimation = keyframes`
+  0%, 100% {
+    transform: scale(1);
+    filter: brightness(1);
+  }
+  50% {
+    transform: scale(1.05);
+    filter: brightness(1.2);
+  }
+`;
+
+// Size configurations