feat: integrate Universal Design System with Web, Print, and Presentation examples

packages/ui/src/components/universal/Box.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { View } from '@react-pdf/renderer';
+import { motion, HTMLMotionProps } from 'framer-motion';
+import { useEnvironment } from '../context/EnvironmentContext';
+
+export interface BoxProps extends HTMLMotionProps<"div"> {
+  children?: React.ReactNode;
+  pdfStyle?: any; // Specifically for PDF if Tailwind mapping is not enough
+}
+
+export const Box: React.FC<BoxProps> = ({ children, className, style, pdfStyle, ...props }) => {
+  const env = useEnvironment();
+
+  if (env === 'print') {
+    return <View style={pdfStyle || style}>{children}</View>;
+  }
+
+  // Web and Presentation get Framer Motion by default
+  return (
+    <motion.div className={className} style={style} {...props}>
+      {children}
+    </motion.div>
+  );
+};

packages/ui/src/components/universal/Text.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Text as PdfText } from '@react-pdf/renderer';
+import { motion, HTMLMotionProps } from 'framer-motion';
+import { useEnvironment } from '../context/EnvironmentContext';
+
+export interface TextProps extends HTMLMotionProps<"span"> {
+  children?: React.ReactNode;
+  pdfStyle?: any;
+}
+
+export const Text: React.FC<TextProps> = ({ children, className, style, pdfStyle, ...props }) => {
+  const env = useEnvironment();
+
+  if (env === 'print') {
+    return <PdfText style={pdfStyle || style}>{children}</PdfText>;
+  }
+
+  return (
+    <motion.span className={className} style={style} {...props}>
+      {children}
+    </motion.span>
+  );
+};