@zvoove/unity-ui 2.29.1 → 2.30.0

package/dist/llms.txt

@@ -30,7 +30,7 @@ Dark mode: add `data-theme="dark"` to a parent element.
 ## Responsive Props
 
 Many props accept `ResponsiveType<T>`, meaning either a direct value OR a breakpoint object.
-Breakpoints (from smallest to largest): `minimum` (0px), `mobile` (320px), `tablet` (768px), `laptop` (1024px), `desktop` (1440px).
+Breakpoints (from smallest to largest): `minimum` (0px), `mobile` (768px), `tablet` (1024px), `laptop` (1280px), `desktop` (1536px), `wide` (1920px), `ultrawide` (2560px).
 Values cascade upward — setting `mobile` applies to all larger breakpoints until overridden.
 
 ```tsx
@@ -39,7 +39,10 @@ Values cascade upward — setting `mobile` applies to all larger breakpoints unt
 
 // Responsive object — values cascade up from smallest to largest
 <Button size={{ mobile: 'sm', tablet: 'md', desktop: 'lg' }} />
-// mobile: sm → tablet: md → laptop: md (inherited) → desktop: lg
+// mobile: sm → tablet: md → laptop: md (inherited) → desktop: lg → wide: lg → ultrawide: lg
+
+// Use wide / ultrawide to fine-tune large displays beyond `desktop`
+<Grid columns={{ mobile: 1, tablet: 2, desktop: 3, wide: 4, ultrawide: 6 }} />
 
 // Common patterns:
 <Stack direction={{ mobile: 'column', tablet: 'row' }} />           // Stack vertically on mobile, horizontally on tablet+
@@ -65,7 +68,7 @@ import { Stack } from '@zvoove/unity-ui';
 
 <Stack
   direction="column"           // ResponsiveType<'row' | 'row-reverse' | 'column' | 'column-reverse'>
-  gap="md"                     // ResponsiveType<SpacingKeys> - none|xs2|xs|sm|md|lg|xl|xl2|xl3|xl4|xl5|xl6|xl7
+  gap="md"                     // ResponsiveType<Gap> where Gap = SpacingKeys | { row?: SpacingKeys; column?: SpacingKeys }
   align="center"               // ResponsiveType<AlignItems> - default: 'baseline' — set explicitly every time
   justify="space-between"      // ResponsiveType<JustifyContent>
   wrap="wrap"                  // ResponsiveType<FlexWrap>
@@ -84,14 +87,14 @@ Common patterns:
 // Row with icon + label — must set align="center" or they baseline-align
 <Stack direction="row" gap="sm" align="center">
   <Icon name="info" />
-  <Typography variant="body" size="medium">Label</Typography>
+  <Typography variant="body" size="md">Label</Typography>
 </Stack>
 
 // Divider spanning full width — Stack must have width="100%"
 <Stack direction="column" gap="md" width="100%">
-  <Typography variant="title" size="large">Title</Typography>
+  <Typography variant="title" size="lg">Title</Typography>
   <Divider />
-  <Typography variant="body" size="medium">Content</Typography>
+  <Typography variant="body" size="md">Content</Typography>
 </Stack>
 
 // Page layout — stacks vertically on mobile, horizontally on tablet+
@@ -109,7 +112,14 @@ Common patterns:
 // Centered content
 <Stack direction="column" align="center" justify="center" gap="md" height="100%">
   <Icon name="check-circle" size="2xl" />
-  <Typography variant="headline" size="medium">Success!</Typography>
+  <Typography variant="headline" size="md">Success!</Typography>
+</Stack>
+
+// Asymmetric row/column gap — wrap row with different vertical vs horizontal spacing
+<Stack direction="row" wrap="wrap" gap={{ row: 'lg', column: 'sm' }}>
+  <Chip>One</Chip>
+  <Chip>Two</Chip>
+  <Chip>Three</Chip>
 </Stack>
 ```
 
@@ -121,7 +131,7 @@ import { Grid } from '@zvoove/unity-ui';
 <Grid
   columns={3}                  // ResponsiveType<number | string> - default: 1
   rows={1}                     // ResponsiveType<number | string> - default: 1
-  gap="md"                     // ResponsiveType<SpacingKeys>
+  gap="md"                     // ResponsiveType<Gap> where Gap = SpacingKeys | { row?: SpacingKeys; column?: SpacingKeys }
   padding="none"               // ResponsiveType<Padding>
   margin="none"                // ResponsiveType<Margin>
   width="100%"                 // ResponsiveType<number | string>
@@ -132,6 +142,8 @@ import { Grid } from '@zvoove/unity-ui';
 </Grid>
 ```
 
+The `gap` prop accepts either a single `SpacingKeys` (applied to both axes) or an object with `row` / `column` keys to control each axis independently. Both forms are fully responsive — any per-breakpoint value can itself be a `SpacingKeys` or a `{ row, column }` object, so the two shapes can be mixed across breakpoints.
+
 Common patterns:
 ```tsx
 // Responsive card grid — 1 col on mobile, 2 on tablet, 3 on desktop
@@ -152,6 +164,29 @@ Common patterns:
   <Grid.Item colSpan={2}><Card>Main content</Card></Grid.Item>
   <Grid.Item colSpan={1}><Card>Sidebar</Card></Grid.Item>
 </Grid>
+
+// Asymmetric row vs column gap — large vertical breathing room, tight horizontal columns
+<Grid columns={3} gap={{ row: 'xl3', column: 'xs' }}>
+  <Card>1</Card>
+  <Card>2</Card>
+  <Card>3</Card>
+  <Card>4</Card>
+  <Card>5</Card>
+  <Card>6</Card>
+</Grid>
+
+// Responsive object gap — single key on minimum, per-axis on larger breakpoints
+<Grid
+  columns={{ minimum: 1, mobile: 2, tablet: 3, desktop: 4 }}
+  gap={{
+    minimum: 'xs2',
+    mobile: { row: 'md', column: 'xs' },
+    tablet: { row: 'lg', column: 'sm' },
+    desktop: { row: 'xl3', column: 'lg' },
+  }}
+>
+  {items.map((item) => <Card key={item.id}>{item.title}</Card>)}
+</Grid>
 ```
 
 ### Card
@@ -178,8 +213,8 @@ Common patterns:
 // Content card with internal layout using Stack (NOT Card for layout)
 <Card variant="outlined" padding="lg" elevation={1}>
   <Stack direction="column" gap="md">
-    <Typography variant="title" size="large">Profile</Typography>
-    <Typography variant="body" size="medium">User details here.</Typography>
+    <Typography variant="title" size="lg">Profile</Typography>
+    <Typography variant="body" size="md">User details here.</Typography>
   </Stack>
 </Card>
 
@@ -187,8 +222,8 @@ Common patterns:
 <Card variant="outlined" padding="none">
   <img src="/banner.jpg" style={{ width: '100%' }} />
   <Stack padding="md" gap="sm">
-    <Typography variant="title" size="medium">Article title</Typography>
-    <Typography variant="body" size="medium">Article excerpt...</Typography>
+    <Typography variant="title" size="md">Article title</Typography>
+    <Typography variant="body" size="md">Article excerpt...</Typography>
   </Stack>
 </Card>
 
@@ -242,7 +277,7 @@ import { Typography } from '@zvoove/unity-ui';
 
 <Typography
   variant="body"               // 'display' | 'headline' | 'title' | 'body' | 'label'
-  size="medium"                // 'small' | 'medium' | 'large'
+  size="md"                    // 'sm' | 'md' | 'lg' (responsive — accepts breakpoint object). 'small' | 'medium' | 'large' are accepted but deprecated; will be removed in v3.0.0
   as="p"                       // 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
   color="on-surface"           // ForegroundColors
   textAlign="left"             // 'left' | 'center' | 'right'
@@ -258,22 +293,22 @@ import { Typography } from '@zvoove/unity-ui';
 Variant guide:
 ```tsx
 // Page heading
-<Typography variant="display" size="large" as="h1">Page Title</Typography>
+<Typography variant="display" size="lg" as="h1">Page Title</Typography>
 
 // Section heading
-<Typography variant="headline" size="medium" as="h2">Section Title</Typography>
+<Typography variant="headline" size="md" as="h2">Section Title</Typography>
 
 // Card/dialog title
-<Typography variant="title" size="large">Card Title</Typography>
+<Typography variant="title" size="lg">Card Title</Typography>
 
 // Body text (default)
-<Typography variant="body" size="medium">Paragraph text goes here.</Typography>
+<Typography variant="body" size="md">Paragraph text goes here.</Typography>
 
 // Small labels, captions
-<Typography variant="label" size="small" color="on-surface-variant">Updated 2 hours ago</Typography>
+<Typography variant="label" size="sm" color="on-surface-variant">Updated 2 hours ago</Typography>
 
 // Truncate long text to 2 lines
-<Typography variant="body" size="medium" truncate={2}>Very long text that will be cut off...</Typography>
+<Typography variant="body" size="md" truncate={2}>Very long text that will be cut off...</Typography>
 ```
 
 ---
@@ -646,7 +681,7 @@ import { Tag } from '@zvoove/unity-ui';
   variant="solid"              // 'solid' | 'outlined' | 'ghost'
   color="green"                // 'green' | 'yellow' | 'pink' | 'steel-blue' | 'error' | 'primary' | 'neutral'
   tone="dark"                  // 'dark' | 'light' (only with variant='solid')
-  size="medium"                // 'large' | 'medium' | 'small'
+  size="md"                    // 'sm' | 'md' | 'lg' (responsive — accepts breakpoint object). 'small' | 'medium' | 'large' are accepted but deprecated; will be removed in v3.0.0
   icon="Check"                 // CommonIconNames
 />
 ```
@@ -677,7 +712,7 @@ User avatar display. When `image` is provided and `type` is omitted, type is aut
 import { Avatar, AvatarGroup } from '@zvoove/unity-ui';
 
 <Avatar
-  size="large"                 // ResponsiveType<'small' | 'medium' | 'large'>
+  size="md"                    // ResponsiveType<'sm' | 'md' | 'lg'>. 'small' | 'medium' | 'large' are accepted but deprecated; will be removed in v3.0.0
   type="initials"              // 'initials' | 'check' | 'avatar' | 'image' | 'zvoove' — auto-inferred as 'image' when image prop is set
   name="Max Mustermann"        // string
   image="/path/to/photo.jpg"   // string — when set, type defaults to 'image'
@@ -784,8 +819,8 @@ Common patterns:
       content: (
         <Stack direction="row" gap="sm" align="center">
           <Icon name="remark" size="xs" />
-          <Typography variant="body" size="medium">Inbox</Typography>
-          <div className="ml-auto"><Tag label="3" color="error" size="small" /></div>
+          <Typography variant="body" size="md">Inbox</Typography>
+          <div className="ml-auto"><Tag label="3" color="error" size="sm" /></div>
         </Stack>
       ),
     },
@@ -814,7 +849,7 @@ import { Link } from 'react-router-dom';
 <Card padding="none" width={320} variant="outlined">
   <Stack padding="md" direction="row" gap="sm" align="center">
     <Icon name="users" size="md" weight="light" />
-    <Typography variant="label" size="large">Team members</Typography>
+    <Typography variant="label" size="lg">Team members</Typography>
   </Stack>
   <Divider />
   <List items={[{ id: 'anna', content: 'Anna Mueller' }]} />
@@ -1006,7 +1041,7 @@ import { Dialog } from '@zvoove/unity-ui';
   padding="md"                 // CardProps['padding'] — use "none" for edge-to-edge content
   zIndex={20}                  // number
 >
-  <Typography variant="title" size="large">Dialog Title</Typography>
+  <Typography variant="title" size="lg">Dialog Title</Typography>
   <Typography>Dialog content goes here.</Typography>
   <Stack direction="row" gap="sm" justify="flex-end">
     <Button variant="outlined" onClick={handleClose}>Cancel</Button>
@@ -1024,7 +1059,7 @@ Common patterns:
   size={{ mobile: 'fullscreen', tablet: 'md' }}
 >
   <Stack direction="column" gap="lg">
-    <Typography variant="title" size="large">Edit Profile</Typography>
+    <Typography variant="title" size="lg">Edit Profile</Typography>
     <TextField label="Name" name="name" value={name} onChange={setName} />
     <TextField label="Email" name="email" value={email} onChange={setEmail} />
     <Stack direction="row" gap="sm" justify="flex-end">
@@ -1037,8 +1072,8 @@ Common patterns:
 // Confirmation dialog (small)
 <Dialog open={showConfirm} onClose={() => setShowConfirm(false)} size="sm">
   <Stack direction="column" gap="md">
-    <Typography variant="title" size="medium">Delete item?</Typography>
-    <Typography variant="body" size="medium">This action cannot be undone.</Typography>
+    <Typography variant="title" size="md">Delete item?</Typography>
+    <Typography variant="body" size="md">This action cannot be undone.</Typography>
     <Stack direction="row" gap="sm" justify="flex-end">
       <Button variant="outlined" onClick={() => setShowConfirm(false)}>Cancel</Button>
       <Button variant="negative" icon="delete" onClick={handleDelete}>Delete</Button>
@@ -1572,6 +1607,17 @@ file-empty, file-pdf, file-folder, file-image, file-video, file-video-2, file-au
 
 Use `getIconForFileExtension(extension)` to resolve a file extension (e.g., "pdf") to its icon name automatically.
 
+### Logos
+
+Brand and product logos. By default rendered in their duotone brand colors (auto-switching to white in dark mode). Pass a `color` prop to render a flat single-color version using `currentColor`:
+
+zvoove, zvoove-one, zvoove-recruit, zvoove-invoice-monitor, zvoove-go, zvoove-intelligence, zvoove-free, zvoove-work-expert, zvoove-elevate, zvoove-cashlink, zvoove-docs-ai.
+
+```tsx
+<Icon name="zvoove-one" size="xl" />
+<Icon name="zvoove-go" color="on-surface" />
+```
+
 ---
 
 ## EXAMPLE: Contact Form
@@ -1592,7 +1638,7 @@ function ContactForm() {
   return (
     <Card padding="xl" elevation={1} variant="outlined" maxWidth={600}>
       <Stack direction="column" gap="lg">
-        <Typography variant="headline" size="medium" as="h2">
+        <Typography variant="headline" size="md" as="h2">
           Contact Us
         </Typography>
 

package/dist/theme.css

@@ -36,11 +36,21 @@
   font-display: swap;
 }
 
+@font-face {
+  font-family: 'Overpass';
+  font-style: normal;
+  font-weight: 400;
+  src: url('https://dj4fauerr81yp.cloudfront.net/fonts/overpass-normal-variable.woff2')
+    format('woff2');
+  font-display: swap;
+}
+
 @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
 @custom-variant child (& > *);
 @theme {
   --font-*: initial;
   --font-body: 'Source Sans 3', sans-serif;
+  --font-tagline: 'Overpass', sans-serif;
 
   --text-*: initial;
   --text-display-large: 4rem;
@@ -388,6 +398,8 @@
   --breakpoint-tablet: 64rem; /* 1024px */
   --breakpoint-laptop: 80rem; /* 1280px */
   --breakpoint-desktop: 96rem; /* 1536px */
+  --breakpoint-wide: 120rem; /* 1920px */
+  --breakpoint-ultrawide: 160rem; /* 2560px */
 
   --container-*: initial;
   --container-minimum: 0rem; /* 0px */
@@ -395,6 +407,8 @@
   --container-tablet: 64rem; /* 1024px */
   --container-laptop: 80rem; /* 1280px */
   --container-desktop: 96rem; /* 1536px */
+  --container-wide: 120rem; /* 1920px */
+  --container-ultrawide: 160rem; /* 2560px */
 
   --chat-content-measure: 60%; /* max inline-size for bubbles & cards */