feat: update theme provider and density styles, enhance typography and font mappings, and refactor showcase components

apps/web/src/apps/index.tsx

@@ -9,7 +9,7 @@ const ShowcaseView = lazy(() => import('./showcase/showcase-view'));
 
 export default function App() {
   const [colorScheme, setColorScheme] = useState<ColorSchemeType>('light');
-  const [density, setDensity] = useState<DensityType>('standard');
+  const [density, setDensity] = useState<DensityType>('compact');
 
   return (
     <ThemeProvider colorScheme={colorScheme} density={density}>

apps/web/src/apps/showcase/showcase-view.tsx

@@ -1,5 +1,24 @@
 import { ColorSchemeType, DensityType } from '@repo/ui/provider';
-import { Button, Card, Container, Select, Group, Stack, Text, Title, TextInput, Checkbox } from '@repo/ui/components';
+import {
+  Button,
+  Card,
+  Container,
+  Select,
+  Group,
+  Stack,
+  Text,
+  Title,
+  TextInput,
+  Checkbox,
+  PasswordInput,
+  NumberInput,
+  Textarea,
+  Switch,
+  Radio,
+  Table,
+  Badge,
+  Divider,
+} from '@repo/ui/components';
 
 interface ShowcaseViewProps {
   colorScheme: ColorSchemeType;
@@ -9,15 +28,24 @@ interface ShowcaseViewProps {
 }
 
 export default function ShowcaseView({ colorScheme, setColorScheme, density, setDensity }: ShowcaseViewProps) {
-  return (
-    <Container size="md" py="xl">
-      <Stack gap="xl">
-        <Title order={1}>UI Gateway Showcase</Title>
+  // Mock data for the table
+  const tableData = [
+    { id: 'ORD-001', customer: 'John Doe', status: 'Shipped', total: '$120.00' },
+    { id: 'ORD-002', customer: 'Jane Smith', status: 'Pending', total: '$85.50' },
+    { id: 'ORD-003', customer: 'Acme Corp', status: 'Delivered', total: '$1,250.00' },
+  ];
 
-        {/* Control Panel */}
+  return (
+    <Container size="lg" py="xl">
+      <Stack gap="xl">
+        <Title order={1}>Super App UI Showcase</Title>
+
+        {/* =========================================
+            CONTROL PANEL
+            ========================================= */}
         <Card withBorder shadow="sm" radius="md" p="md">
           <Title order={3} mb="md">
-            Control Panel
+            Theme Controls
           </Title>
           <Group grow align="flex-end">
             <Select
@@ -30,55 +58,152 @@ export default function ShowcaseView({ colorScheme, setColorScheme, density, set
               ]}
             />
             <Select
-              label="Density"
+              label="Density (Spacing & Sizing)"
               value={density}
               onChange={(val: string | null) => setDensity((val as DensityType) || 'standard')}
               data={[
-                { value: 'compact', label: 'Compact' },
-                { value: 'standard', label: 'Standard' },
-                { value: 'spacious', label: 'Spacious' },
+                { value: 'compact', label: 'Compact (ERP Mode)' },
+                { value: 'standard', label: 'Standard (UI Mode)' },
               ]}
             />
           </Group>
         </Card>
 
-        {/* Showcase Area */}
+        {/* =========================================
+            TAILWIND V4 BRIDGE TEST
+            ========================================= */}
+        <Card withBorder shadow="sm" radius="md" p="md">
+          <Title order={3} mb="md">
+            Tailwind v4 Synchronization
+          </Title>
+          {/* This div purely uses Tailwind classes to prove it inherits Mantine's variables */}
+          <div className="bg-brand-500 text-brand-50 p-md rounded-md shadow-md text-base">
+            <span className="font-bold">Tailwind works!</span> The padding (p-md), border-radius (rounded-md), text size
+            (text-base), and background color of this box are entirely controlled by the ThemeProvider's current state.
+          </div>
+        </Card>
+
+        {/* =========================================
+            TYPOGRAPHY & BUTTONS
+            ========================================= */}
         <Card withBorder shadow="sm" radius="md" p="md">
           <Stack gap="lg">
-            <div className="bg-brand-100">
-              <Title order={3} mb="sm">
-                Typography
+            <div>
+              <Title order={3} mb="xs">
+                Typography & Badges
               </Title>
               <Text size="sm" c="dimmed">
-                This is dimmed small text.
+                This is dimmed small text indicating a subtitle.
+              </Text>
+              <Text mb="md">
+                This is standard text describing the components below. Watch how the font changes when you switch
+                density.
               </Text>
-              <Text>This is standard text describing the components below.</Text>
-            </div>
-
-            <div>
-              <Title order={3} mb="sm">
-                Buttons
-              </Title>
               <Group>
-                <Button variant="filled">Filled Button</Button>
-                <Button variant="outline">Outline Button</Button>
-                <Button variant="light">Light Button</Button>
-                <Button variant="subtle">Subtle Button</Button>
+                <Badge color="brand">Brand Badge</Badge>
+                <Badge color="success" variant="light">
+                  Success Status
+                </Badge>
+                <Badge color="error" variant="outline">
+                  Error State
+                </Badge>
               </Group>
             </div>
 
+            <Divider />
+
             <div>
               <Title order={3} mb="md">
-                Form Elements
+                Buttons
               </Title>
-              <Group grow>
-                <TextInput label="First Name" placeholder="John" />
-                <TextInput label="Last Name" placeholder="Doe" />
+              <Group>
+                <Button variant="filled" color="brand">
+                  Filled Button
+                </Button>
+                <Button variant="outline" color="brand">
+                  Outline Button
+                </Button>
+                <Button variant="light" color="info">
+                  Light Info
+                </Button>
+                <Button variant="subtle" color="error">
+                  Cancel
+                </Button>
               </Group>
-              <Checkbox label="I agree to the terms and conditions" mt="md" defaultChecked />
             </div>
           </Stack>
         </Card>
+
+        {/* =========================================
+            COMPLEX FORMS (ERP STYLE)
+            ========================================= */}
+        <Card withBorder shadow="sm" radius="md" p="md">
+          <Title order={3} mb="md">
+            Form Elements
+          </Title>
+          <Stack gap="md">
+            <Group grow align="flex-start">
+              <TextInput label="First Name" placeholder="Enter your first name" withAsterisk />
+              <TextInput label="Last Name" placeholder="Enter your last name" />
+            </Group>
+
+            <Group grow align="flex-start">
+              <NumberInput label="Age" placeholder="25" min={0} max={100} />
+              <PasswordInput label="Password" placeholder="Your secret password" withAsterisk />
+            </Group>
+
+            <Textarea label="Bio" placeholder="Tell us about yourself" minRows={3} />
+
+            <Group mt="sm">
+              <Checkbox label="I agree to the terms and conditions" defaultChecked />
+              <Switch label="Enable notifications" defaultChecked />
+            </Group>
+
+            <Radio.Group name="favoriteFramework" label="Select your favorite framework" withAsterisk>
+              <Group mt="xs">
+                <Radio value="react" label="React" />
+                <Radio value="svelte" label="Svelte" />
+                <Radio value="vue" label="Vue" />
+              </Group>
+            </Radio.Group>
+          </Stack>
+        </Card>
+
+        {/* =========================================
+            DATA GRID / TABLE
+            ========================================= */}
+        <Card withBorder shadow="sm" radius="md" p="md">
+          <Title order={3} mb="md">
+            Data Grid
+          </Title>
+          <Table striped highlightOnHover withTableBorder withColumnBorders>
+            <Table.Thead>
+              <Table.Tr>
+                <Table.Th>Order ID</Table.Th>
+                <Table.Th>Customer</Table.Th>
+                <Table.Th>Status</Table.Th>
+                <Table.Th>Total Amount</Table.Th>
+              </Table.Tr>
+            </Table.Thead>
+            <Table.Tbody>
+              {tableData.map((row) => (
+                <Table.Tr key={row.id}>
+                  <Table.Td>{row.id}</Table.Td>
+                  <Table.Td>{row.customer}</Table.Td>
+                  <Table.Td>
+                    <Badge
+                      size="sm"
+                      color={row.status === 'Delivered' ? 'success' : row.status === 'Shipped' ? 'info' : 'warning'}
+                    >
+                      {row.status}
+                    </Badge>
+                  </Table.Td>
+                  <Table.Td>{row.total}</Table.Td>
+                </Table.Tr>
+              ))}
+            </Table.Tbody>
+          </Table>
+        </Card>
       </Stack>
     </Container>
   );