feat(ui): add Button, Modal, Spinner, Toast, and Tooltip components with styles

- Implemented Button component with various props for customization.
- Created Modal component with header, content, and footer subcomponents.
- Added Spinner component for loading indicators.
- Developed Toast component for displaying notifications.
- Introduced Tooltip component for contextual hints with keyboard shortcuts.
- Added corresponding CSS modules for styling each component.
- Updated index file to export new components.
- Configured TypeScript settings for the UI package.

packages/shared/src/components/auth/AuthLayout.tsx

@@ -0,0 +1,45 @@
+import styles from './AuthLayout.module.css';
+
+interface AuthLayoutProps {
+	children: React.ReactNode;
+}
+
+/**
+ * AuthLayout — frame for the login / register pages.
+ *
+ * Desktop: keeps the existing side-by-side "card" — purple branded
+ *   background, centred dialog with a logo column on the left and
+ *   the form on the right.
+ *
+ * Mobile (≤768px): collapses into a full-screen `--background-primary`
+ *   surface with the logo + wordmark stacked at the top of the form
+ *   column, matching the Fluxer mobile reference. The card chrome,
+ *   purple background, and pattern are all hidden via the media
+ *   query in `AuthLayout.module.css`.
+ */
+export function AuthLayout({ children }: AuthLayoutProps) {
+	return (
+		<div className={styles.container}>
+			<div className={styles.pattern} />
+			<div className={styles.cardContainer}>
+				<div className={styles.card}>
+					<div className={styles.logoSide}>
+						<div className={styles.logoIcon}>B</div>
+						<span className={styles.wordmark}>Brycord</span>
+					</div>
+					<div className={styles.formSide}>
+						{/* Mobile-only logo banner — appears above the form
+						    when the side column is hidden. The
+						    `data-mobile-logo` attribute is what the CSS
+						    media query targets to switch its display. */}
+						<div className={styles.mobileLogo} data-mobile-logo>
+							<div className={styles.mobileLogoIcon}>B</div>
+							<span className={styles.mobileWordmark}>Brycord</span>
+						</div>
+						{children}
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}