@12-apps/ui 1.4.0 → 1.4.1

package/src/components/feedback/Modal/Modal.styles.ts

@@ -0,0 +1,126 @@
+import { alpha, keyframes } from '@mui/material';
+import type { CSSObject, Theme } from '@mui/material';
+
+import type { ModalProps } from './Modal.types';
+
+type Variant = NonNullable<ModalProps['variant']>;
+type Size = NonNullable<ModalProps['size']>;
+type Radius = NonNullable<ModalProps['borderRadius']>;
+
+const pulseAnimation = keyframes`
+  0% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 1;
+  }
+  70% {
+    box-shadow: 0 0 0 20px currentColor;
+    opacity: 0;
+  }
+  100% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 0;
+  }
+`;
+
+const RADII: Record<Radius, (theme: Theme) => number | string> = {
+  none: () => 0,
+  sm: (theme) => theme.spacing(0.5),
+  md: (theme) => theme.spacing(1),
+  lg: (theme) => theme.spacing(2),
+  xl: (theme) => theme.spacing(3),
+};
+
+/** Every preset is capped at 90vw so the panel never overflows a small screen. */
+const WIDTHS: Record<Size, number> = { xs: 320, sm: 480, md: 640, lg: 800, xl: 960 };
+
+/**
+ * Where the panel sits. Top and bottom are the same layout anchored to opposite
+ * edges; centre is the only one that offsets on both axes.
+ */
+const PLACEMENTS: Record<string, CSSObject> = {
+  top: { top: '10%', left: '50%', transform: 'translateX(-50%)', maxHeight: '80vh' },
+  bottom: { bottom: '10%', left: '50%', transform: 'translateX(-50%)', maxHeight: '80vh' },
+  center: {
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    maxHeight: '90vh',
+  },
+};
+
+interface ModalStyleFlags {
+  variant: Variant;
+  size: Size;
+  borderRadius: Radius;
+  glass: boolean;
+  gradient: boolean;
+  glow: boolean;
+  pulse: boolean;
+}
+
+/** The ring that expands out of the panel while `pulse` is set. */
+const pulseRing = (theme: Theme): CSSObject => ({
+  content: '""',
+  position: 'absolute' as const,
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  borderRadius: 'inherit',
+  backgroundColor: theme.palette.primary.main,
+  opacity: 0.3,
+  animation: `${pulseAnimation} 2s infinite`,
+  pointerEvents: 'none' as const,
+  zIndex: -1,
+});
+
+/** The surface: its fill, its blur and the shadow that lifts it off the backdrop. */
+const surface = (theme: Theme, flags: ModalStyleFlags): CSSObject => {
+  const { variant, glass, gradient, glow } = flags;
+  // The glass variant is the glass flag by another name, so either turns it on.
+  const isGlass = glass || variant === 'glass';
+
+  const boxShadow = glow
+    ? `0 0 40px ${alpha(theme.palette.primary.main, 0.3)}`
+    : isGlass
+      ? `0 8px 32px ${alpha(theme.palette.common.black, 0.1)}`
+      : theme.shadows[8];
+
+  return {
+    backgroundColor: isGlass
+      ? alpha(theme.palette.background.paper, 0.1)
+      : theme.palette.background.paper,
+    backdropFilter: isGlass ? 'blur(20px)' : gradient ? 'blur(10px)' : 'none',
+    border: isGlass ? `1px solid ${alpha(theme.palette.primary.main, 0.2)}` : 'none',
+    boxShadow,
+    ...(gradient && {
+      background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)}, ${alpha(theme.palette.secondary.main, 0.1)})`,
+    }),
+  };
+};
+
+export const panelSx = (theme: Theme, flags: ModalStyleFlags): CSSObject => {
+  const { variant, size, borderRadius, pulse } = flags;
+
+  return {
+    // A pulsing panel positions its own ring, so it becomes the containing block.
+    position: pulse ? ('relative' as const) : ('absolute' as const),
+    width: WIDTHS[size] ?? WIDTHS.md,
+    maxWidth: '90vw',
+    borderRadius: (RADII[borderRadius] ?? RADII.lg)(theme),
+    outline: 0,
+    overflowY: 'auto',
+    transition: theme.transitions.create(
+      ['box-shadow', 'background-color', 'backdrop-filter', 'transform'],
+      { duration: theme.transitions.duration.standard },
+    ),
+    ...(PLACEMENTS[variant] ?? PLACEMENTS.center),
+    ...surface(theme, flags),
+    ...(pulse && { '&::after': pulseRing(theme) }),
+  };
+};
+
+export const backdropSx = (theme: Theme, isGlass: boolean): CSSObject => ({
+  backgroundColor: alpha(theme.palette.common.black, isGlass ? 0.2 : 0.5),
+  backdropFilter: isGlass ? 'blur(8px)' : 'none',
+});

package/src/components/feedback/Modal/Modal.transitions.tsx

@@ -0,0 +1,40 @@
+import { Fade, Slide } from '@mui/material';
+import React from 'react';
+
+export interface TransitionProps {
+  children?: React.ReactElement;
+  in?: boolean;
+  timeout?: number;
+}
+
+/**
+ * A slide from one edge, as its own component type.
+ *
+ * These are built once at module scope rather than per render: a component
+ * created inside a render is a new type on every pass, so React unmounts the
+ * modal's whole subtree and remounts it — which also restarts the transition it
+ * was in the middle of.
+ */
+const slideFrom = (direction: 'up' | 'down', displayName: string) => {
+  const Transition = React.forwardRef<HTMLElement, TransitionProps>(({ children, ...rest }, ref) =>
+    children ? (
+      <Slide direction={direction} ref={ref} {...rest}>
+        {children}
+      </Slide>
+    ) : null,
+  );
+  Transition.displayName = displayName;
+  return Transition;
+};
+
+const SlideDown = slideFrom('down', 'SlideDown');
+const SlideUp = slideFrom('up', 'SlideUp');
+
+/** A top modal drops in, a bottom one rises; the rest fade. */
+export const TRANSITIONS: Record<string, React.ElementType> = {
+  top: SlideDown,
+  bottom: SlideUp,
+};
+
+export const transitionFor = (variant: string): React.ElementType =>
+  TRANSITIONS[variant] ?? Fade;

package/src/components/feedback/Modal/Modal.tsx

@@ -1,247 +1,45 @@
-import {
-  alpha,
-  Backdrop,
-  Box,
-  Fade,
-  keyframes,
-  Modal as MuiModal,
-  Slide,
-  useTheme,
-} from '@mui/material';
+import { Backdrop, Box, Modal as MuiModal, useTheme } from '@mui/material';
 import React from 'react';
 
-import type { ModalContentProps,ModalProps } from './Modal.types';
+import { withDefaults } from '../../../utils/withDefaults';
+
+import { backdropSx, panelSx } from './Modal.styles';
+import { transitionFor } from './Modal.transitions';
+import type { ModalContentProps, ModalProps } from './Modal.types';
+
+const DEFAULTS = {
+  variant: 'center',
+  size: 'md',
+  backdrop: true,
+  persistent: false,
+  glass: false,
+  gradient: false,
+  glow: false,
+  pulse: false,
+  borderRadius: 'lg',
+} satisfies Partial<ModalProps>;
+
+type ResolvedProps = ModalProps & Required<Pick<ModalProps, keyof typeof DEFAULTS>>;
+
+export const Modal: React.FC<ModalProps> = (props) => {
+  const {
+    children, variant, size, backdrop, persistent, glass, gradient, glow, pulse,
+    borderRadius, onClose, open, dataTestId,
+    ...rest
+  } = withDefaults(props, DEFAULTS) as ResolvedProps;
 
-// Define transition component props interface
-interface TransitionProps {
-  children?: React.ReactElement;
-  in?: boolean;
-  timeout?: number;
-}
-
-// Define pulse animation
-const pulseAnimation = keyframes`
-  0% {
-    box-shadow: 0 0 0 0 currentColor;
-    opacity: 1;
-  }
-  70% {
-    box-shadow: 0 0 0 20px currentColor;
-    opacity: 0;
-  }
-  100% {
-    box-shadow: 0 0 0 0 currentColor;
-    opacity: 0;
-  }
-`;
-
-export const Modal: React.FC<ModalProps> = ({
-  children,
-  variant = 'center',
-  size = 'md',
-  backdrop = true,
-  persistent = false,
-  glass = false,
-  gradient = false,
-  glow = false,
-  pulse = false,
-  borderRadius = 'lg',
-  onClose,
-  open,
-  dataTestId,
-  ...props
-}) => {
   const theme = useTheme();
+  const isGlass = glass || variant === 'glass';
 
-  const getBorderRadius = () => {
-    switch (borderRadius) {
-      case 'none':
-        return 0;
-      case 'sm':
-        return theme.spacing(0.5);
-      case 'md':
-        return theme.spacing(1);
-      case 'lg':
-        return theme.spacing(2);
-      case 'xl':
-        return theme.spacing(3);
-      default:
-        return theme.spacing(2);
-    }
-  };
-
-  const getSize = () => {
-    switch (size) {
-      case 'xs':
-        return { width: 320, maxWidth: '90vw' };
-      case 'sm':
-        return { width: 480, maxWidth: '90vw' };
-      case 'md':
-        return { width: 640, maxWidth: '90vw' };
-      case 'lg':
-        return { width: 800, maxWidth: '90vw' };
-      case 'xl':
-        return { width: 960, maxWidth: '90vw' };
-      default:
-        return { width: 640, maxWidth: '90vw' };
-    }
-  };
-
-  const getPositionStyles = () => {
-    const sizeStyles = getSize();
-
-    const baseStyles = {
-      position: 'absolute' as const,
-      ...sizeStyles,
-      borderRadius: getBorderRadius(),
-      outline: 0,
-      transition: theme.transitions.create(
-        ['box-shadow', 'background-color', 'backdrop-filter', 'transform'],
-        {
-          duration: theme.transitions.duration.standard,
-        },
-      ),
-    };
-
-    switch (variant) {
-      case 'top':
-        return {
-          ...baseStyles,
-          top: '10%',
-          left: '50%',
-          transform: 'translateX(-50%)',
-          maxHeight: '80vh',
-          overflowY: 'auto',
-        };
-
-      case 'bottom':
-        return {
-          ...baseStyles,
-          bottom: '10%',
-          left: '50%',
-          transform: 'translateX(-50%)',
-          maxHeight: '80vh',
-          overflowY: 'auto',
-        };
-
-      case 'glass':
-      case 'center':
-      default:
-        return {
-          ...baseStyles,
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
-          maxHeight: '90vh',
-          overflowY: 'auto',
-        };
-    }
-  };
-
-  const getVariantStyles = () => {
-    const positionStyles = getPositionStyles();
-
-    const baseStyles = {
-      ...positionStyles,
-      position: pulse ? ('relative' as const) : positionStyles.position,
-    };
-
-    if (pulse) {
-      Object.assign(baseStyles, {
-        '&::after': {
-          content: '""',
-          position: 'absolute' as const,
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          borderRadius: 'inherit',
-          backgroundColor: theme.palette.primary.main,
-          opacity: 0.3,
-          animation: `${pulseAnimation} 2s infinite`,
-          pointerEvents: 'none' as const,
-          zIndex: -1,
-        },
-      });
-    }
-
-    switch (variant) {
-      case 'glass':
-        return {
-          ...baseStyles,
-          backgroundColor: alpha(theme.palette.background.paper, 0.1),
-          backdropFilter: 'blur(20px)',
-          border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,
-          boxShadow: glow
-            ? `0 0 40px ${alpha(theme.palette.primary.main, 0.3)}`
-            : `0 8px 32px ${alpha(theme.palette.common.black, 0.1)}`,
-        };
-
-      default: {
-        const styles = {
-          ...baseStyles,
-          backgroundColor: glass
-            ? alpha(theme.palette.background.paper, 0.1)
-            : theme.palette.background.paper,
-          backdropFilter: glass ? 'blur(20px)' : gradient ? 'blur(10px)' : 'none',
-          border: glass ? `1px solid ${alpha(theme.palette.primary.main, 0.2)}` : 'none',
-          boxShadow: glow
-            ? `0 0 40px ${alpha(theme.palette.primary.main, 0.3)}`
-            : glass
-              ? `0 8px 32px ${alpha(theme.palette.common.black, 0.1)}`
-              : theme.shadows[8],
-        };
-
-        if (gradient) {
-          Object.assign(styles, {
-            background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)}, ${alpha(theme.palette.secondary.main, 0.1)})`,
-          });
-        }
-
-        return styles;
-      }
-    }
-  };
-
-  const handleClose = (event: object, reason: 'backdropClick' | 'escapeKeyDown') => {
+  /** A persistent modal ignores the two dismissals it did not ask for. */
+  const handleClose = (_event: object, reason: 'backdropClick' | 'escapeKeyDown') => {
     if (persistent && (reason === 'backdropClick' || reason === 'escapeKeyDown')) {
       return;
     }
     onClose?.();
   };
 
-  const getTransitionComponent = () => {
-    switch (variant) {
-      case 'top': {
-        const SlideDown = React.forwardRef<HTMLElement, TransitionProps>((props, ref) => {
-          const { children, ...rest } = props;
-          return children ? (
-            <Slide direction="down" ref={ref} {...rest}>
-              {children}
-            </Slide>
-          ) : null;
-        });
-        SlideDown.displayName = 'SlideDown';
-        return SlideDown;
-      }
-      case 'bottom': {
-        const SlideUp = React.forwardRef<HTMLElement, TransitionProps>((props, ref) => {
-          const { children, ...rest } = props;
-          return children ? (
-            <Slide direction="up" ref={ref} {...rest}>
-              {children}
-            </Slide>
-          ) : null;
-        });
-        SlideUp.displayName = 'SlideUp';
-        return SlideUp;
-      }
-      default:
-        return Fade;
-    }
-  };
-
-  const TransitionComponent = getTransitionComponent();
+  const TransitionComponent = transitionFor(variant);
 
   return (
     <MuiModal
@@ -251,20 +49,17 @@ export const Modal: React.FC<ModalProps> = ({
       BackdropComponent={backdrop ? Backdrop : undefined}
       BackdropProps={{
         timeout: 500,
-        sx: {
-          backgroundColor:
-            glass || variant === 'glass'
-              ? alpha(theme.palette.common.black, 0.2)
-              : alpha(theme.palette.common.black, 0.5),
-          backdropFilter: glass || variant === 'glass' ? 'blur(8px)' : 'none',
-        },
+        sx: backdropSx(theme, isGlass),
         // @ts-expect-error - data-testid is not part of BackdropProps type but is valid HTML
         'data-testid': dataTestId ? `${dataTestId}-backdrop` : 'modal-backdrop',
       }}
-      {...props}
+      {...rest}
     >
       <TransitionComponent in={open} timeout={500}>
-        <Box sx={getVariantStyles()} data-testid={dataTestId || 'modal'}>
+        <Box
+          sx={panelSx(theme, { variant, size, borderRadius, glass, gradient, glow, pulse })}
+          data-testid={dataTestId || 'modal'}
+        >
           {children}
         </Box>
       </TransitionComponent>

package/src/components/form/InputOTP/InputOTP.hooks.ts

@@ -0,0 +1,104 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+
+/**
+ * What each variant accepts. `masked` constrains nothing — it only changes what
+ * is drawn — so it has no pattern here.
+ */
+const PATTERNS: Record<string, RegExp> = {
+  numeric: /^\d*$/,
+  alphanumeric: /^[a-zA-Z0-9]*$/,
+};
+
+/** Whether `text` is something this variant will take. */
+const isAllowed = (variant: string, text: string) => (PATTERNS[variant] ?? /.*/).test(text);
+
+/** The digit array is always `length` long, blank-padded on the right. */
+const padTo = (digits: string[], length: number) =>
+  Array.from({ length }, (_, i) => digits[i] ?? '');
+
+interface OtpInput {
+  variant: string;
+  length: number;
+  value: string;
+  onChange?: (value: string) => void;
+  onComplete?: (value: string) => void;
+}
+
+/**
+ * The digits, and the three ways they change: typing, the keys that move
+ * between slots, and a paste into the first one.
+ *
+ * Focus moves as a consequence of entry, so the input refs live here with the
+ * state that drives them.
+ */
+export const useOtpDigits = ({ variant, length, value, onChange, onComplete }: OtpInput) => {
+  const [digits, setDigits] = useState<string[]>(() => padTo([], length));
+  const inputRefs = useRef<(globalThis.HTMLInputElement | null)[]>([]);
+
+  useEffect(() => {
+    setDigits(padTo(value.split('').slice(0, length), length));
+  }, [value, length]);
+
+  const focusSlot = useCallback((index: number) => {
+    inputRefs.current[index]?.focus();
+  }, []);
+
+  /** Publishes the joined value, and reports completion when every slot is full. */
+  const publish = useCallback(
+    (next: string) => {
+      onChange?.(next);
+      if (next.length === length) {
+        onComplete?.(next);
+      }
+    },
+    [length, onChange, onComplete],
+  );
+
+  const handleInputChange = useCallback(
+    (index: number, inputValue: string) => {
+      if (!isAllowed(variant, inputValue)) return;
+
+      const next = [...digits];
+      next[index] = inputValue.slice(-1); // one character per slot
+      setDigits(next);
+      publish(next.join(''));
+
+      if (inputValue && index < length - 1) {
+        focusSlot(index + 1);
+      }
+    },
+    [variant, digits, length, publish, focusSlot],
+  );
+
+  const handleKeyDown = useCallback(
+    (index: number, e: React.KeyboardEvent) => {
+      // Backspace in an already-empty slot steps back rather than deleting.
+      const back =
+        (e.key === 'Backspace' && !digits[index]) || e.key === 'ArrowLeft';
+
+      if (back && index > 0) {
+        focusSlot(index - 1);
+      } else if (e.key === 'ArrowRight' && index < length - 1) {
+        focusSlot(index + 1);
+      }
+    },
+    [digits, length, focusSlot],
+  );
+
+  const handlePaste = useCallback(
+    (e: React.ClipboardEvent) => {
+      e.preventDefault();
+      const pasted = e.clipboardData.getData('text').slice(0, length);
+
+      // An empty paste is not a rejection, but it is nothing to apply either.
+      if (!pasted || !isAllowed(variant, pasted)) return;
+
+      setDigits(padTo(pasted.split(''), length));
+      publish(pasted);
+    },
+    [variant, length, publish],
+  );
+
+  return { digits, inputRefs, handleInputChange, handleKeyDown, handlePaste };
+};

package/src/components/form/InputOTP/InputOTP.styles.ts

@@ -0,0 +1,97 @@
+import { alpha } from '@mui/material';
+import type { CSSObject, Theme } from '@mui/material';
+
+interface ColorPalette {
+  main: string;
+  dark?: string;
+  light?: string;
+  contrastText?: string;
+}
+
+/** `neutral` is not a MUI palette entry, so it is built from the grey ramp. */
+const neutralPalette = (theme: Theme): ColorPalette => ({
+  main: theme.palette.grey[700],
+  dark: theme.palette.grey[800],
+  light: theme.palette.grey[500],
+  contrastText: '#fff',
+});
+
+/** `danger` is this component's name for the error palette. */
+const namedPalette = (theme: Theme, color: string): ColorPalette => {
+  const colorMap: Record<string, ColorPalette> = {
+    primary: theme.palette.primary,
+    secondary: theme.palette.secondary,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    danger: theme.palette.error,
+  };
+
+  return colorMap[color] || theme.palette.primary;
+};
+
+const getColorFromTheme = (theme: Theme, color: string): ColorPalette => {
+  if (color === 'neutral') {
+    return neutralPalette(theme);
+  }
+
+  const palette = namedPalette(theme, color);
+  const { primary } = theme.palette;
+
+  return {
+    main: palette.main || primary.main,
+    dark: palette.dark || palette.main || primary.dark,
+    light: palette.light || palette.main || primary.light,
+    contrastText: palette.contrastText || '#fff',
+  };
+};
+
+type SizeKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+/** Each slot is a square, so width and height always match. */
+const SIZES: Record<SizeKey, { side: string; fontSize: string }> = {
+  xs: { side: '32px', fontSize: '0.75rem' },
+  sm: { side: '40px', fontSize: '0.875rem' },
+  md: { side: '48px', fontSize: '1rem' },
+  lg: { side: '56px', fontSize: '1.125rem' },
+  xl: { side: '64px', fontSize: '1.25rem' },
+};
+
+export interface OtpSlotFlags {
+  customColor?: string;
+  customSize?: string;
+  glass?: boolean;
+  gradient?: boolean;
+}
+
+export const otpSlotSx = (theme: Theme, flags: OtpSlotFlags): CSSObject => {
+  const { customColor = 'primary', customSize = 'md', glass, gradient } = flags;
+  const palette = getColorFromTheme(theme, customColor);
+  const { side, fontSize } = SIZES[customSize as SizeKey] ?? SIZES.md;
+
+  return {
+    width: side,
+    height: side,
+    '& .MuiOutlinedInput-root': {
+      width: side,
+      height: side,
+      fontSize,
+      fontWeight: 600,
+      textAlign: 'center',
+      borderRadius: theme.spacing(1),
+      ...(glass && {
+        backgroundColor: alpha(theme.palette.background.paper, 0.1),
+        backdropFilter: 'blur(20px)',
+        '& fieldset': { border: `1px solid ${alpha(theme.palette.divider, 0.2)}` },
+      }),
+      ...(gradient && {
+        '&.Mui-focused fieldset': {
+          background: `linear-gradient(135deg, ${palette.main}, ${palette.light})`,
+          borderWidth: '2px',
+        },
+      }),
+      '& input': { textAlign: 'center', padding: 0, fontWeight: 'inherit' },
+      '&:hover fieldset': { borderColor: palette.main },
+      '&.Mui-focused fieldset': { borderColor: palette.main, borderWidth: '2px' },
+    },
+  };
+};