@12-apps/ui 6.37.0 → 6.39.0

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

@@ -23,15 +23,15 @@ import {
 } from './AnimatedIcon.animations';
 import type { AnimationSize, AnimationVariant } from './AnimatedIcon.types';
 import { neutralTones, shadowInk, sheen } from '../../../tokens/ink';
-import { rem } from '../../../tokens/relative';
+import { rem, rems } from '../../../tokens/relative';
 
 /** Per size: the ring's edge and the glyph's edge (its font size, width and height), in design px. */
-export const sizeConfigs: Record<AnimationSize, { size: number; glyph: number }> = {
-  xs: { size: 12, glyph: 10 },
-  sm: { size: 24, glyph: 20 },
-  md: { size: 32, glyph: 28 },
-  lg: { size: 48, glyph: 44 },
-  xl: { size: 64, glyph: 60 },
+export const sizeConfigs: Record<AnimationSize, { ring: number; glyph: number }> = {
+  xs: { ring: 12, glyph: 10 },
+  sm: { ring: 24, glyph: 20 },
+  md: { ring: 32, glyph: 28 },
+  lg: { ring: 48, glyph: 44 },
+  xl: { ring: 64, glyph: 60 },
 };
 
 /**
@@ -40,26 +40,27 @@ export const sizeConfigs: Record<AnimationSize, { size: number; glyph: number }>
  * tabulated. `scale` multiplies the caller's duration for the variants that
  * read as slower than the rest.
  */
-const ANIMATIONS: Record<string, { keyframes: string; easing: string; scale: number }> = {
-  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 },
+const ANIMATIONS: Record<string, { keyframes: (theme: Theme) => string; easing: string; scale: number }> = {
+  rotate: { keyframes: () => `${rotateAnimation}`, easing: 'linear', scale: 1 },
+  pulse: { keyframes: () => `${pulseAnimation}`, easing: 'ease-in-out', scale: 1 },
+  translate: { keyframes: (theme) => `${translateAnimation(theme)}`, easing: 'ease-in-out', scale: 1 },
+  bounce: { keyframes: (theme) => `${bounceAnimation(theme)}`, easing: 'ease-in-out', scale: 1 },
+  shake: { keyframes: (theme) => `${shakeAnimation(theme)}`, easing: 'ease-in-out', scale: 1 },
+  flip: { keyframes: (theme) => `${flipAnimation(theme)}`, 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: (theme) => `${wobbleAnimation(theme)}`, 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: (theme) => `${floatAnimation(theme)}`, easing: 'ease-in-out', scale: 2 },
+  neonFlicker: { keyframes: (theme) => `${neonFlickerAnimation(theme)}`, easing: 'ease-in-out', scale: 2 },
+  breathe: { keyframes: () => `${breatheAnimation}`, easing: 'ease-in-out', scale: 1.5 },
 };
 
 const animationFor = (
+  theme: Theme,
   variant: AnimationVariant,
   duration: number,
   delay: number,
@@ -69,14 +70,14 @@ const animationFor = (
   if (!spec) return 'none';
 
   const iterationCount = loop ? 'infinite' : '1';
-  return `${spec.keyframes} ${duration * spec.scale}s ${spec.easing} ${iterationCount} ${delay > 0 ? `${delay}s` : '0s'}`;
+  return `${spec.keyframes(theme)} ${duration * spec.scale}s ${spec.easing} ${iterationCount} ${delay > 0 ? `${delay}s` : '0s'}`;
 };
 
 const SHADOWS: Record<string, (theme: Theme) => string> = {
-  soft: (theme) => `0 4px 20px ${shadowInk(theme, 0.15)}`,
-  hard: (theme) => `4px 4px 0px ${shadowInk(theme, 0.25)}`,
+  soft: (theme) => `0 ${rems(theme, 4, 20)} ${shadowInk(theme, 0.15)}`,
+  hard: (theme) => `${rems(theme, 4, 4)} 0px ${shadowInk(theme, 0.25)}`,
   elevated: (theme) =>
-    `0 10px 40px ${shadowInk(theme, 0.2)}, 0 2px 10px ${shadowInk(theme, 0.1)}`,
+    `0 ${rems(theme, 10, 40)} ${shadowInk(theme, 0.2)}, 0 ${rems(theme, 2, 10)} ${shadowInk(theme, 0.1)}`,
 };
 
 export interface IconStyleFlags {
@@ -114,9 +115,9 @@ const effectStyles = (
   return {
     ...($glass && {
       background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.2)}, ${alpha(theme.palette.background.paper, 0.1)})`,
-      backdropFilter: 'blur(10px)',
+      backdropFilter: `blur(${rem(theme, 10)})`,
       border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
-      boxShadow: `inset 0 1px 1px ${sheen(theme, 0.3)}, 0 8px 32px ${shadowInk(theme, 0.1)}`,
+      boxShadow: `inset 0 ${rems(theme, 1, 1)} ${sheen(theme, 0.3)}, 0 ${rems(theme, 8, 32)} ${shadowInk(theme, 0.1)}`,
     }),
     ...($metallic && {
       background: `linear-gradient(145deg,
@@ -127,9 +128,9 @@ const effectStyles = (
       ${neutralTones(theme).subtle} 100%)`,
       backgroundSize: '200% 200%',
       animation: `${animation}, ${breatheAnimation} 4s ease-in-out infinite`,
-      boxShadow: `inset 0 2px 4px ${sheen(theme, 0.5)},
-                inset 0 -2px 4px ${shadowInk(theme, 0.3)},
-                0 4px 8px ${shadowInk(theme, 0.2)}`,
+      boxShadow: `inset 0 ${rems(theme, 2, 4)} ${sheen(theme, 0.5)},
+                inset 0 ${rems(theme, -2, 4)} ${shadowInk(theme, 0.3)},
+                0 ${rems(theme, 4, 8)} ${shadowInk(theme, 0.2)}`,
     }),
     ...($gradient && {
       background: `linear-gradient(135deg,
@@ -140,9 +141,9 @@ const effectStyles = (
     }),
     ...($neon && {
       color,
-      textShadow: `0 0 10px ${color}, 0 0 20px ${color}, 0 0 30px ${color}`,
+      textShadow: `0 0 ${rem(theme, 10)} ${color}, 0 0 ${rem(theme, 20)} ${color}, 0 0 ${rem(theme, 30)} ${color}`,
       filter: `brightness(1.2) contrast(1.2)`,
-      animation: `${animation}, ${neonFlickerAnimation} 3s ease-in-out infinite`,
+      animation: `${animation}, ${neonFlickerAnimation(theme)} 3s ease-in-out infinite`,
     }),
     ...($holographic && {
       background: `linear-gradient(45deg,
@@ -152,7 +153,7 @@ const effectStyles = (
       ${theme.palette.warning.main} 75%,
       ${theme.palette.primary.main} 100%)`,
       backgroundSize: '400% 400%',
-      animation: `${animation}, ${floatAnimation} 6s ease-in-out infinite`,
+      animation: `${animation}, ${floatAnimation(theme)} 6s ease-in-out infinite`,
       backgroundClip: 'text',
       WebkitBackgroundClip: 'text',
       WebkitTextFillColor: 'transparent',
@@ -164,10 +165,10 @@ const effectStyles = (
       '&::before': {
         content: '""',
         position: 'absolute' as const,
-        inset: -2,
+        inset: rem(theme, -2),
         borderRadius: '50%',
         background: 'inherit',
-        filter: 'blur(10px)',
+        filter: `blur(${rem(theme, 10)})`,
         opacity: 0.5,
         zIndex: -1,
       },
@@ -183,18 +184,22 @@ export const iconSx = (theme: Theme, flags: IconStyleFlags): CSSObject => {
 
   const color = $customColor || theme.palette.primary.main;
   const glowColor = $glowColor || color;
-  const animation = animationFor($animationVariant, $duration, $delay, $loop);
+  const animation = animationFor(theme, $animationVariant, $duration, $delay, $loop);
 
   // Both selectors size the same glyph — MUI icons render an MuiSvgIcon-root,
   // a bare child renders an svg.
-  const glyphSize = { fontSize: rem(theme, $fontSize), width: $fontSize, height: $fontSize };
+  const glyphSize = {
+    fontSize: rem(theme, $fontSize),
+    width: rem(theme, $fontSize),
+    height: rem(theme, $fontSize),
+  };
 
   return {
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
-    width: $size,
-    height: $size,
+    width: rem(theme, $size),
+    height: rem(theme, $size),
     color,
     animation,
     position: 'relative' as const,
@@ -206,13 +211,13 @@ export const iconSx = (theme: Theme, flags: IconStyleFlags): CSSObject => {
       '&::before': {
         content: '""',
         position: 'absolute' as const,
-        inset: -8,
+        inset: rem(theme, -8),
         borderRadius: '50%',
         background: `radial-gradient(circle, ${alpha(glowColor, 0.3)} 0%, transparent 70%)`,
-        animation: `${glowPulseAnimation} ${$duration * 1.2}s ease-in-out infinite`,
+        animation: `${glowPulseAnimation(theme)} ${$duration * 1.2}s ease-in-out infinite`,
         zIndex: -1,
       },
-      filter: `drop-shadow(0 0 8px ${alpha(glowColor, 0.5)})`,
+      filter: `drop-shadow(0 0 ${rem(theme, 8)} ${alpha(glowColor, 0.5)})`,
     }),
     ...effectStyles(theme, flags, animation, color),
     ...($ripple && {
@@ -221,7 +226,7 @@ export const iconSx = (theme: Theme, flags: IconStyleFlags): CSSObject => {
         position: 'absolute' as const,
         inset: 0,
         borderRadius: '50%',
-        border: `2px solid ${color}`,
+        border: `${rem(theme, 2)} solid ${color}`,
         animation: `${rippleAnimation} ${$duration * 1.5}s ease-out infinite`,
       },
     }),

package/src/components/utility/AnimatedIcon/AnimatedIcon.tsx

@@ -42,7 +42,7 @@ export const AnimatedIcon: FC<AnimatedIconProps> = (props) => {
 
   return (
     <AnimationContainer
-      $size={config.size}
+      $size={config.ring}
       $fontSize={config.glyph}
       $animationVariant={variant}
       $duration={duration}

package/src/components/utility/AspectRatio/AspectRatio.tsx

@@ -1,7 +1,18 @@
 import Box from '@mui/material/Box/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import type { AspectRatioProps } from './AspectRatio.types';
+import { rem } from '../../../tokens/relative';
+
+/**
+ * A caller's cap for `sx`: a string as given, a number as design px — except
+ * `≤ 1`, which `sx` has always read as a fraction of the parent.
+ */
+const sxCap = (value: number | string | undefined): string | undefined | ((theme: Theme) => string) =>
+  typeof value === 'number'
+    ? (theme) => (value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value))
+    : value;
 
 export const AspectRatio: React.FC<AspectRatioProps> = ({
   children,
@@ -42,8 +53,8 @@ export const AspectRatio: React.FC<AspectRatioProps> = ({
       sx={{
         position: 'relative',
         width: '100%',
-        maxWidth,
-        maxHeight,
+        maxWidth: sxCap(maxWidth),
+        maxHeight: sxCap(maxHeight),
         ...sx,
       }}
       {...props}

package/src/components/utility/InfiniteScroll/InfiniteScroll.hooks.ts

@@ -19,7 +19,8 @@ const resolveScrollable = (scrollableTarget: ScrollableTarget): Element | null =
 
 interface ObserverArgs {
   testMode: boolean;
-  threshold: number;
+  /** The observer's `rootMargin` — px, which is all `IntersectionObserver` takes. */
+  rootMargin: string;
   scrollableTarget: ScrollableTarget;
 }
 
@@ -28,7 +29,7 @@ interface ObserverArgs {
  * it fire before the sentinel is actually on screen, so the next page is already
  * loading by the time the user reaches the bottom.
  */
-export const useSentinel = ({ testMode, threshold, scrollableTarget }: ObserverArgs) => {
+export const useSentinel = ({ testMode, rootMargin, scrollableTarget }: ObserverArgs) => {
   const sentinelRef = useRef<HTMLDivElement>(null);
   const [isIntersecting, setIsIntersecting] = useState(false);
 
@@ -43,7 +44,7 @@ export const useSentinel = ({ testMode, threshold, scrollableTarget }: ObserverA
       },
       {
         root: resolveScrollable(scrollableTarget) || undefined,
-        rootMargin: `${threshold}px`,
+        rootMargin,
         threshold: 0,
       },
     );
@@ -51,7 +52,7 @@ export const useSentinel = ({ testMode, threshold, scrollableTarget }: ObserverA
     observer.observe(sentinelRef.current);
 
     return () => observer.disconnect();
-  }, [testMode, threshold, scrollableTarget]);
+  }, [testMode, rootMargin, scrollableTarget]);
 
   return { sentinelRef, isIntersecting };
 };

package/src/components/utility/InfiniteScroll/InfiniteScroll.parts.tsx

@@ -2,27 +2,33 @@ import Alert from '@mui/material/Alert/index.js';
 import Box from '@mui/material/Box/index.js';
 import CircularProgress from '@mui/material/CircularProgress/index.js';
 import Typography from '@mui/material/Typography/index.js';
+import { useTheme, type SxProps, type Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
+import { rem } from '../../../tokens/relative';
+
 import type { InfiniteScrollProps } from './InfiniteScroll.types';
 
 type Variant = NonNullable<InfiniteScrollProps['variant']>;
 
-const CENTERED = {
+const CENTERED: SxProps<Theme> = {
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   p: 2,
-} as const;
+};
 
-export const DefaultLoader: React.FC<{ loadingText: string }> = ({ loadingText }) => (
-  <Box sx={CENTERED}>
-    <CircularProgress size={24} />
-    <Typography variant="body2" sx={{ ml: 1 }}>
-      {loadingText}
-    </Typography>
-  </Box>
-);
+export const DefaultLoader: React.FC<{ loadingText: string }> = ({ loadingText }) => {
+  const theme = useTheme();
+  return (
+    <Box sx={CENTERED}>
+      <CircularProgress size={rem(theme, 24)} />
+      <Typography variant="body2" sx={{ ml: 1 }}>
+        {loadingText}
+      </Typography>
+    </Box>
+  );
+};
 
 export const DefaultEndMessage: React.FC<{ endText: string }> = ({ endText }) => (
   <Box sx={CENTERED}>
@@ -38,14 +44,25 @@ export const DefaultError: React.FC<{ error: Error }> = ({ error }) => (
   </Alert>
 );
 
+/**
+ * The horizontal variant's `width` as CSS: a number of 1 or less stays the
+ * fraction `sx` reads it as, a larger one is design px, a string is as given;
+ * unset (or 0) fills the parent.
+ */
+const horizontalWidth = (theme: Theme, width: number | string | undefined): string => {
+  if (!width) return '100%';
+  if (typeof width !== 'number') return width;
+  return width <= 1 ? `${width * 100}%` : rem(theme, width);
+};
+
 /**
  * `horizontal` scrolls along a row; `reverse` stacks bottom-up, for a chat log
  * that loads older messages as you scroll away from the newest.
  */
-export const containerStyles = (variant: Variant, width?: number | string) => {
+export const containerStyles = (theme: Theme, variant: Variant, width?: number | string) => {
   const horizontal = variant === 'horizontal';
   const base = {
-    width: horizontal ? width || '100%' : '100%',
+    width: horizontal ? horizontalWidth(theme, width) : '100%',
     height: horizontal ? '100%' : 'auto',
     overflowX: horizontal ? 'auto' : 'hidden',
     overflowY: horizontal ? 'hidden' : 'visible',

package/src/components/utility/InfiniteScroll/InfiniteScroll.tsx

@@ -1,6 +1,9 @@
 import Box from '@mui/material/Box/index.js';
+import { useTheme } from '@mui/material/styles/index.js';
 import React from 'react';
 
+import { rem, remPx } from '../../../tokens/relative';
+
 import { useLoadMore, useSentinel } from './InfiniteScroll.hooks';
 import {
   containerStyles,
@@ -15,7 +18,7 @@ export const InfiniteScroll: React.FC<InfiniteScrollProps> = ({
   variant = 'default',
   hasMore,
   loading,
-  threshold = 150,
+  threshold,
   loadMore,
   loader,
   loadingText,
@@ -31,7 +34,10 @@ export const InfiniteScroll: React.FC<InfiniteScrollProps> = ({
   testMode = false,
   testTriggerRef,
 }) => {
-  const { sentinelRef, isIntersecting } = useSentinel({ testMode, threshold, scrollableTarget });
+  const theme = useTheme();
+  // 150 design px unless the caller says; `rootMargin` only takes px.
+  const rootMargin = `${remPx(theme, threshold ?? 150)}px`;
+  const { sentinelRef, isIntersecting } = useSentinel({ testMode, rootMargin, scrollableTarget });
 
   useLoadMore({
     hasMore,
@@ -56,8 +62,8 @@ export const InfiniteScroll: React.FC<InfiniteScrollProps> = ({
         ref={sentinelRef}
         data-testid="infinite-scroll-sentinel"
         style={{
-          height: variant === 'horizontal' ? '100%' : '1px',
-          width: variant === 'horizontal' ? '1px' : '100%',
+          height: variant === 'horizontal' ? '100%' : rem(theme, 1),
+          width: variant === 'horizontal' ? rem(theme, 1) : '100%',
         }}
       />
     );
@@ -67,7 +73,7 @@ export const InfiniteScroll: React.FC<InfiniteScrollProps> = ({
     <Box
       className={className}
       sx={{
-        ...containerStyles(variant, width),
+        ...containerStyles(theme, variant, width),
         ...style,
       }}
     >

package/src/components/utility/InfiniteScroll/InfiniteScroll.types.ts

@@ -13,7 +13,11 @@ export interface InfiniteScrollProps {
   variant?: InfiniteScrollVariant;
   hasMore: boolean;
   loading: boolean;
-  threshold?: number; // Distance from bottom/edge to trigger loading
+  /**
+   * How far before the end the next page is requested (default 150) — design
+   * px, scaled with the theme's type scale.
+   */
+  threshold?: number;
   loadMore: () => void | Promise<void>;
   loader?: ReactNode;
   endMessage?: ReactNode;
@@ -22,7 +26,11 @@ export interface InfiniteScrollProps {
   onError?: (error: Error) => void;
   className?: string;
   style?: React.CSSProperties;
-  // Horizontal specific
+  /**
+   * The `horizontal` variant's width. A number of 1 or less is a fraction of
+   * the parent (as in `sx`); a larger number is design px, scaled with the
+   * theme's type scale; a string is used as given.
+   */
   width?: number | string;
   scrollableTarget?: string | HTMLElement; // For custom scroll containers
   /**