test(examples): add more tets

.changeset/yummy-poets-brush.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/plus": patch
+---
+
+Fix a css issue on Navigation

examples/vite/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@ultraviolet/icons": "workspace:*",
+    "@ultraviolet/plus": "workspace:*",
     "@ultraviolet/themes": "workspace:*",
     "@ultraviolet/ui": "workspace:*",
     "react": "19.2.3",

examples/vite/src/App.tsx

@@ -1,43 +1,58 @@
 import { PlusIcon } from '@ultraviolet/icons'
-import { consoleDarkTheme, consoleLightTheme } from '@ultraviolet/themes'
 import {
-  Alert,
-  Button,
-  Card,
-  Row,
-  Stack,
-  Text,
+  consoleDarkTheme,
+  consoleLightTheme,
   ThemeProvider,
-} from '@ultraviolet/ui'
+} from '@ultraviolet/themes'
+import { Alert, Button, Card, Row, Stack, Text } from '@ultraviolet/ui'
 import { useState } from 'react'
-import '@ultraviolet/ui/styles' // Import styles for the UI components
 import '@ultraviolet/themes/global'
+import '@ultraviolet/ui/styles' // Import styles for the UI components
+import '@ultraviolet/plus/styles' // Import styles for the Plus components
+import { Navigation } from './components/Navigation'
 
 export const App = () => {
   const [count, setCount] = useState(0)
   const [darkMode, setDarkMode] = useState(false)
 
   return (
     <ThemeProvider theme={darkMode ? consoleDarkTheme : consoleLightTheme}>
-      <Row gap="3" templateColumns="9fr 3fr">
-        <Card>
-          <Text as="h1" variant="headingSmall">
-            Classic
+      <Row gap="2" templateColumns="auto 9fr">
+        <Navigation />
+        <Stack direction="column" gap="4">
+          <Text
+            as="h1"
+            placement="center"
+            sentiment="neutral"
+            variant="headingStronger"
+          >
+            headingLargeStrong h1
           </Text>
-          <Stack direction="row" gap="2">
-            <Button onClick={() => setCount(prevCount => prevCount + 1)}>
-              <PlusIcon />
-            </Button>
-            <Button onClick={() => setCount(0)}>Reset</Button>
-            <Button onClick={() => setDarkMode(!darkMode)} sentiment="danger">
-              Switch Theme
-            </Button>
-          </Stack>
-          <Text as="p" variant="body">
-            Count:{count}
-          </Text>
-        </Card>
-        <Alert sentiment="info">Alert</Alert>
+          <Card>
+            <Text as="h2" variant="headingSmallStrong">
+              headingSmallStrong h2
+            </Text>
+            <Stack direction="column" gap="2">
+              <Stack direction="row" gap="2">
+                <Button onClick={() => setCount(prevCount => prevCount + 1)}>
+                  <PlusIcon />
+                </Button>
+                <Button onClick={() => setCount(0)}>Reset</Button>
+                <Button
+                  onClick={() => setDarkMode(!darkMode)}
+                  sentiment="danger"
+                >
+                  Switch Theme
+                </Button>
+              </Stack>
+
+              <Text as="p" variant="body">
+                Count:{count}
+              </Text>
+              <Alert sentiment="info">Alert</Alert>
+            </Stack>
+          </Card>
+        </Stack>
       </Row>
     </ThemeProvider>
   )