themelia-ui 3.0.0 → 3.2.0

package/docs/generated/components/base--typography.md

@@ -15,7 +15,6 @@ Rendering library-owned copy in a role — heading, body, label, link or sanitiz
 
 ```tsx fragment — import-only example
 import { DisplayLabel } from "themelia-ui/base/typography"
-import "themelia-ui/base/typography.css"
 ```
 
 ## Composition
@@ -95,6 +94,20 @@ script or event handlers into the page.
 ({ html, children, size, type, align, weight, lineHeight, tag, className, ...props }: RichTextProps) => import("react").JSX.Element | null
 ```
 
+### `richTextClassName`
+
+Kind: callable.
+
+RichText's prose surface and type for an element RichText cannot render: an editor's
+content-editable root, which its library creates. The leading defaults to `relaxed`, as on
+RichText, so a body reads the same while it is edited and once it is posted.
+
+  editor.root.className = richTextClassName()
+
+```text
+({ lineHeight, ...options }?: TextClassNameOptions) => string
+```
+
 ### `RichTextProps`
 
 Kind: interface.
@@ -138,6 +151,38 @@ Kind: type.
 "left" | "center" | "right"
 ```
 
+### `textClassName`
+
+Kind: callable.
+
+Text's classes for an element Text cannot wrap: a native control's value, a button's label,
+a table cell. One implementation of type, so a size or weight here is the same one Text
+renders.
+
+  <button className={cx(styles.trigger, textClassName({ size: "sm", weight: "medium" }))}>
+
+```text
+({ size, ...options }?: TextClassNameOptions) => string
+```
+
+### `TextClassNameOptions`
+
+Kind: interface.
+
+What `textClassName` takes: Text's props, without the element and the content.
+
+| member | required | type | description / documented default |
+| --- | :-: | --- | --- |
+| `size` | no | `TextSize \| "default"` | Step on the type scale; unset, the provider's default size. |
+| `weight` | no | `TextWeight` |  |
+| `lineHeight` | no | `TextLineHeight` |  |
+| `type` | no | `TextType` | Unset, no colour: the element keeps whatever colour its own rules give it. |
+| `numeric` | no | `boolean` |  |
+| `truncate` | no | `boolean` |  |
+| `mono` | no | `boolean` |  |
+| `heading` | no | `boolean` |  |
+| `caps` | no | `boolean` |  |
+
 ### `TextLineHeight`
 
 Kind: type.
@@ -174,12 +219,15 @@ Extends: `Omit<React.HTMLAttributes<HTMLElement>, "children">`, `Pick<Partial<Re
 | --- | :-: | --- | --- |
 | `content` | no | `string` | Text as a plain string. Equivalent to passing it as `children`. |
 | `type` | no | `TextType` | Semantic role, which selects the colour token. `main` for primary copy, `secondary`<br>for supporting copy (descriptions, captions, metadata). `inherit` selects none and takes<br>the parent's, for text inside a surface that already sets its own — a solid tab, a<br>tooltip, a coloured chip. Without it those places would drop Text and hand-roll a span,<br>which is how a kit ends up with two ways to set type. |
-| `size` | no | `TextSize` | Step on the type scale. Omit it on primary content so the provider default flows;<br>`UIProvider`'s `typography.defaultTextSize` changes it. Reserve `xs` for support text<br>and metadata. `xxs` renders as `xs`; use `xs`. @default "sm" |
+| `size` | no | `TextSize` | Step on the type scale. Omit it on primary content so the provider default flows;<br>`UIProvider`'s `typography.defaultTextSize` changes it. Reserve `xs` for support text<br>and metadata. @default "sm" |
 | `align` | no | `TextAlign` | Horizontal alignment. |
-| `lineHeight` | no | `TextLineHeight` | Leading, on the shared tier. Unset, each size step carries the leading paired with it<br>(`--text-<step>--line-height`); a value here overrides that. `tight` and `none` suit<br>dense rows and single-line values; `relaxed` suits prose. @default paired |
+| `lineHeight` | no | `TextLineHeight` | Leading. Unset, each size step carries the line box paired with it; a value here<br>overrides that. `tight` and `none` suit dense rows and single-line values; `relaxed`<br>suits prose. @default paired |
 | `numeric` | no | `boolean` | Tabular figures, so digits align in a column. Use for any value in a table. |
 | `truncate` | no | `boolean` | Ellipsises the text at one line rather than wrapping. Makes the element a block with<br>`min-width: 0`, for the same reason `align` does; every flex box between it and the<br>constrained width also needs `min-width: 0` (`Stack` and `Grid` set it; a hand-rolled<br>flex div does not). `Heading` and every `primitives` value take it too. |
 | `weight` | no | `TextWeight` | Font weight. |
+| `mono` | no | `boolean` | The monospaced face, for identifiers, codes and keys. |
+| `heading` | no | `boolean` | The heading face (`--font-heading`), for a title that is not a document heading: a<br>card's, a dialog's. A theme that sets a heading font reaches it here as in `Heading`. |
+| `caps` | no | `boolean` | Uppercase with open tracking, for an overline or a keyboard hint. |
 | `children` | no | `ReactNode` | Text content. Takes precedence over `content`. |
 | `tag` | no | `"div" \| "p" \| "span" \| "label"` | Element to render: `span` inline, `p` for prose, `div` when it wraps blocks, `label`<br>for a form label. For headings use `Heading`. |
 
@@ -196,7 +244,7 @@ Kind: type.
 Kind: type.
 
 ```text
-"normal" | "regular" | "medium" | "semibold" | "bold"
+"normal" | "medium" | "semibold" | "bold"
 ```
 
 ## Preview recipes
@@ -232,6 +280,191 @@ export default function MenusInContext() {
 }
 ```
 
+### Compose your own
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+import { ArrowUpIcon, CreditCardIcon } from "lucide-react"
+
+import { Badge } from "themelia-ui/base/badge"
+import { Card } from "themelia-ui/base/cards"
+import { Sparkline } from "themelia-ui/base/chart"
+import { IconBadge } from "themelia-ui/base/display"
+import { Stack } from "themelia-ui/base/structure"
+import { DisplayLabel, Text } from "themelia-ui/base/typography"
+import { Money } from "themelia-ui/primitives"
+
+export default function AnalyticsBlueprint() {
+	return (
+		<Card style={{ maxWidth: "20rem" }}>
+			<Stack gap="sm">
+				<Stack direction="horizontal" align="center" gap="sm">
+					<IconBadge icon={CreditCardIcon} tone="primary" />
+					<DisplayLabel>Revenue</DisplayLabel>
+				</Stack>
+				<Stack direction="horizontal" align="center" justify="between" gap="sm">
+					<Money amount={48200} currency="EUR" size="xl" weight="semibold" />
+					<Badge tone="success">
+						<ArrowUpIcon />
+						12.4%
+					</Badge>
+				</Stack>
+				<Sparkline data={[18, 22, 19, 27, 24, 31, 29, 38]} tone="success" label="Revenue rising over eight weeks" />
+				<Text size="xs" type="secondary">
+					Net of refunds, this quarter
+				</Text>
+			</Stack>
+		</Card>
+	)
+}
+```
+
+### Compose your own checklist
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+import { CheckIcon, CircleIcon } from "lucide-react"
+
+import { Accordion } from "themelia-ui/base/accordion"
+import { Button } from "themelia-ui/base/buttons"
+import { IconBadge } from "themelia-ui/base/display"
+import { Progress } from "themelia-ui/base/feedback"
+import { Stack } from "themelia-ui/base/structure"
+import { Text } from "themelia-ui/base/typography"
+
+export default function ChecklistBlueprint() {
+	return (
+		<Stack style={{ maxWidth: "34rem", width: "100%" }}>
+			<Progress value={1} max={3} label="1 of 3 steps complete" />
+			<Accordion
+				media="medallion"
+				defaultValue={["invite"]}
+				items={[
+					{
+						value: "profile",
+						title: "Complete your profile",
+						icon: <IconBadge icon={CheckIcon} tone="success" shape="circle" />,
+						content: <Text type="secondary">Name, avatar and time zone are set.</Text>,
+					},
+					{
+						value: "invite",
+						title: "Invite your team",
+						icon: <IconBadge icon={CircleIcon} shape="circle" />,
+						content: (
+							<Stack gap="sm" align="start">
+								<Text type="secondary">Teammates see the same projects and saved views.</Text>
+								<Button>Send invites</Button>
+							</Stack>
+						),
+					},
+					{
+						value: "connect",
+						title: "Connect a data source",
+						icon: <IconBadge icon={CircleIcon} shape="circle" />,
+						content: <Text type="secondary">Postgres, a CSV upload or the REST API.</Text>,
+					},
+				]}
+			/>
+		</Stack>
+	)
+}
+```
+
+### Compose your own permissions
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+import { CheckIcon } from "lucide-react"
+
+import { Badge } from "themelia-ui/base/badge"
+import { VisuallyHidden } from "themelia-ui/base/display"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "themelia-ui/base/table"
+import { Text } from "themelia-ui/base/typography"
+
+const ROLES = ["Owner", "Editor", "Viewer"] as const
+const PERMISSIONS: { name: string; granted: readonly boolean[] }[] = [
+	{ name: "Edit projects", granted: [true, true, false] },
+	{ name: "Manage billing", granted: [true, false, false] },
+	{ name: "Export data", granted: [true, true, true] },
+]
+
+export default function RolesBlueprint() {
+	return (
+		<Table>
+			<TableHeader>
+				<TableRow>
+					<TableHead>Permission</TableHead>
+					{ROLES.map((role) => (
+						<TableHead key={role} align="center">
+							{role}
+						</TableHead>
+					))}
+				</TableRow>
+			</TableHeader>
+			<TableBody>
+				{PERMISSIONS.map((permission) => (
+					<TableRow key={permission.name}>
+						<TableCell>{permission.name}</TableCell>
+						{permission.granted.map((granted, index) => (
+							<TableCell key={ROLES[index]} align="center">
+								{granted ? (
+									<Badge tone="success">
+										<CheckIcon aria-hidden />
+										<VisuallyHidden>Granted</VisuallyHidden>
+									</Badge>
+								) : (
+									<>
+										<Text tag="span" type="secondary" aria-hidden>
+											—
+										</Text>
+										<VisuallyHidden>Not granted</VisuallyHidden>
+									</>
+								)}
+							</TableCell>
+						))}
+					</TableRow>
+				))}
+			</TableBody>
+		</Table>
+	)
+}
+```
+
+### Website content reference
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+import { useState } from "react"
+import { Button } from "themelia-ui/base/buttons"
+import { Card } from "themelia-ui/base/cards"
+import { PillRadioGroup } from "themelia-ui/base/choice-inputs"
+import { FormField } from "themelia-ui/base/forms"
+import { Stack } from "themelia-ui/base/structure"
+import { Input } from "themelia-ui/base/text-inputs"
+import { RichText, Text } from "themelia-ui/base/typography"
+import { MediaLibraryDialog, type MediaLibraryItem } from "themelia-ui/features/media-library"
+import { RichTextEditor } from "themelia-ui/features/rich-text-editor"
+import { SAMPLE_MEDIA } from "../media-library/reference-data"
+
+export default function WebsiteContentReference() {
+	const [locale, setLocale] = useState("en")
+	const [drafts, setDrafts] = useState<Record<string, string>>({ en: "<p>Welcome to our workspace.</p>", ar: "<p>مرحباً بكم</p>" })
+	const [mediaOpen, setMediaOpen] = useState(false)
+	const [image, setImage] = useState<MediaLibraryItem>()
+	const [alt, setAlt] = useState("")
+	const [failed, setFailed] = useState(true)
+	const [pending, setPending] = useState(false)
+	const [message, setMessage] = useState("Drafts are local until saved")
+	return <Card title="Website content" description="Each locale owns a retained draft. Preview sanitizes HTML; the application also validates and sanitizes persisted content.">
+		<Stack>
+			<PillRadioGroup aria-label="Content locale" name="reference-content-locale" value={locale} onValueChange={value => value && setLocale(value)} options={[{ value: "en", label: "English" }, { value: "ar", label: "العربية" }]} />
+			<div dir={locale === "ar" ? "rtl" : "ltr"}><RichTextEditor value={drafts[locale] ?? ""} onValueChange={html => setDrafts(current => ({ ...current, [locale]: html }))} /></div>
+			<MediaLibraryDialog open={mediaOpen} trigger={<Button tone="neutral" appearance="outline">Choose hero media</Button>} onOpenChange={setMediaOpen} items={SAMPLE_MEDIA} selectionMode="single" confirmOnSelect allowUpload={false} onConfirm={items => { const item = items[0]; setImage(item); setAlt(item?.alt ?? ""); setMediaOpen(false) }} />
+			{image && <FormField label="Hero image alternative text" hint={image.name}><Input value={alt} onChange={event => setAlt(event.target.value)} /></FormField>}
+			<Stack direction="horizontal" wrap gap="sm"><Button disabled={pending} onClick={async () => { if (pending) return; setPending(true); await new Promise(resolve => setTimeout(resolve, 250)); setMessage(failed ? "Save failed. All locale drafts and image text remain here." : "Mock website save completed"); setPending(false) }}>Save website content</Button><Button tone="neutral" appearance="outline" onClick={() => setFailed(value => !value)}>Toggle save failure</Button></Stack>
+			<Text role="status">{message}</Text>
+			<RichText html={drafts[locale] ?? ""} />
+		</Stack>
+	</Card>
+}
+```
+
 ### The editor and what comes out
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
@@ -258,14 +491,14 @@ export default function Editor() {
 				maxLength={280}
 			/>
 
-			<Stack gap="xs">
+			<Stack gap="sm">
 				<DisplayLabel>Emitted HTML</DisplayLabel>
-				<Text size="xs" type="secondary" className={styles.source}>
+				<Text size="xs" type="secondary" mono className={styles.source}>
 					{body || "(empty)"}
 				</Text>
 			</Stack>
 
-			<Stack gap="xs">
+			<Stack gap="sm">
 				<DisplayLabel>Rendered through RichText</DisplayLabel>
 				<RichText html={body} />
 			</Stack>
@@ -312,7 +545,7 @@ export default function EditorCompact() {
 				},
 			]}
 			footerSlot={
-				<Stack direction="horizontal" align="center" justify="between" gap="md">
+				<Stack direction="horizontal" align="center" justify="between" gap="sm">
 					<Text size="xs" type="secondary">
 						Markdown is not parsed — use the toolbar.
 					</Text>
@@ -326,7 +559,34 @@ export default function EditorCompact() {
 }
 ```
 
-### Type can override the master factor
+### The factor
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+import { Stack } from "themelia-ui/base/structure"
+import { Text } from "themelia-ui/base/typography"
+import { UIProvider } from "themelia-ui/ui-provider"
+
+import { ControlRow } from "./_shared"
+
+const FACTORS = [0.75, 0.875, 1, 1.125, 1.25] as const
+
+export default function TheFactor() {
+	return (
+		<>
+			{FACTORS.map((scale) => (
+				<UIProvider key={scale} config={{ scale }}>
+					<Stack direction="horizontal" align="center">
+						<Text tag="span" size="xs" mono style={{ width: "4rem", flex: "none" }}>{scale}</Text>
+						<ControlRow />
+					</Stack>
+				</UIProvider>
+			))}
+		</>
+	)
+}
+```
+
+### Type has its own factor
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
 import { Button } from "themelia-ui/base/buttons"
@@ -337,11 +597,11 @@ import { UIProvider } from "themelia-ui/ui-provider"
 
 export default function TypeFactor() {
 	return (
-		<Stack gap="lg">
+		<Stack>
 			<Stack gap="sm">
 				<Text type="secondary" size="xs">typography.scale 0.875 — type shrinks, control geometry holds</Text>
 				<UIProvider config={{ typography: { scale: 0.875 } }}>
-					<Stack direction="horizontal" gap="md" align="center" wrap>
+					<Stack direction="horizontal" gap="sm" align="center" wrap>
 						<Text>Body copy at this factor.</Text>
 						<Button>Save</Button>
 						<Checkbox label="Check" defaultChecked />
@@ -351,7 +611,7 @@ export default function TypeFactor() {
 			<Stack gap="sm">
 				<Text type="secondary" size="xs">scale 0.875 + typography.scale 1 — geometry shrinks, type holds</Text>
 				<UIProvider config={{ scale: 0.875, typography: { scale: 1 } }}>
-					<Stack direction="horizontal" gap="md" align="center" wrap>
+					<Stack direction="horizontal" gap="sm" align="center" wrap>
 						<Text>Body copy at this factor.</Text>
 						<Button>Save</Button>
 						<Checkbox label="Check" defaultChecked />
@@ -363,37 +623,37 @@ export default function TypeFactor() {
 }
 ```
 
-### Two levels of control
+### A factor, or one variable
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
 import { Stack } from "themelia-ui/base/structure"
 import { Text } from "themelia-ui/base/typography"
-import { Scope } from "themelia-ui/ui-provider"
+import { Scope, UIProvider } from "themelia-ui/ui-provider"
 
 import { ControlRow } from "./_shared"
 
 export default function FactorChain() {
 	return (
-		<Stack gap="lg">
+		<Stack>
 			<Stack gap="sm">
 				<Text type="secondary" size="xs">default</Text>
 				<ControlRow />
 			</Stack>
 			<Stack gap="sm">
-				<Text type="secondary" size="xs">--density-scale: 0.8 — heights and rows tighten, gaps hold</Text>
-				<Scope vars={{ "--density-scale": 0.8 }}>
+				<Text type="secondary" size="xs">scale: 0.875 — every length and type step</Text>
+				<UIProvider config={{ scale: 0.875 }}>
 					<ControlRow />
-				</Scope>
+				</UIProvider>
 			</Stack>
 			<Stack gap="sm">
-				<Text type="secondary" size="xs">--density-scale: 1.4 — gaps open, control heights hold</Text>
-				<Scope vars={{ "--density-scale": 1.4 }}>
+				<Text type="secondary" size="xs">--control-height: 2.5rem — every control, nothing else</Text>
+				<Scope vars={{ "--control-height": "2.5rem" }}>
 					<ControlRow />
 				</Scope>
 			</Stack>
 			<Stack gap="sm">
-				<Text type="secondary" size="xs">--button-h: 2.75rem — one measurement</Text>
-				<Scope vars={{ "--button-h": "2.75rem" }}>
+				<Text type="secondary" size="xs">--radius-sm: 0 — every item corner</Text>
+				<Scope vars={{ "--radius-sm": "0" }}>
 					<ControlRow />
 				</Scope>
 			</Stack>
@@ -414,13 +674,13 @@ import { ControlRow } from "./_shared"
 export default function Nesting() {
 	return (
 		<UIProvider config={{ scale: 1.125 }}>
-			<Stack gap="lg">
+			<Stack>
 				<Text type="secondary" size="sm">
 					Outer scope — 1.125
 				</Text>
 				<ControlRow />
 				<UIProvider config={{ scale: 0.8 }}>
-					<Stack gap="md">
+					<Stack gap="sm">
 						<Text type="secondary" size="sm">
 							Nested scope — 0.8
 						</Text>
@@ -433,12 +693,37 @@ export default function Nesting() {
 }
 ```
 
+### Density presets
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+import { Stack } from "themelia-ui/base/structure"
+import { Text } from "themelia-ui/base/typography"
+import { UIProvider } from "themelia-ui/ui-provider"
+
+import { ControlRow } from "./_shared"
+
+export default function Density() {
+	return (
+		<>
+			{(["compact", "default", "comfortable"] as const).map((density) => (
+				<UIProvider key={density} config={{ density }}>
+					<Stack direction="horizontal" align="center">
+						<Text tag="span" size="xs" mono style={{ width: "7rem", flex: "none" }}>{density}</Text>
+						<ControlRow />
+					</Stack>
+				</UIProvider>
+			))}
+		</>
+	)
+}
+```
+
 ### Density
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
 import { Stack } from "themelia-ui/base/structure"
 import { Text } from "themelia-ui/base/typography"
-import { Scope } from "themelia-ui/ui-provider"
+import { UIScope } from "themelia-ui/ui-provider"
 
 import { InvoiceTable } from "./_shared"
 
@@ -448,16 +733,16 @@ export default function TableScale() {
 		 * Both, captioned. On its own the scoped table just looked like a table —
 		 * the section asserted a difference the page gave the reader no way to see.
 		 */
-		<Stack gap="lg" style={{ width: "100%" }}>
-			<Stack gap="xs" style={{ width: "100%" }}>
-				<Text size="xs" type="secondary">--density-scale: 1</Text>
+		<Stack style={{ width: "100%" }}>
+			<Stack gap="sm" style={{ width: "100%" }}>
+				<Text size="xs" type="secondary">density: default</Text>
 				<InvoiceTable />
 			</Stack>
-			<Stack gap="xs" style={{ width: "100%" }}>
-				<Text size="xs" type="secondary">--density-scale: 0.85</Text>
-				<Scope vars={{ "--density-scale": 0.85 }} style={{ width: "100%" }}>
+			<Stack gap="sm" style={{ width: "100%" }}>
+				<Text size="xs" type="secondary">density: compact</Text>
+				<UIScope config={{ density: "compact" }} style={{ width: "100%" }}>
 					<InvoiceTable />
-				</Scope>
+				</UIScope>
 			</Stack>
 		</Stack>
 	)

package/docs/generated/components/base--upload.md

@@ -15,12 +15,11 @@ The user contributes files — dropzone, avatar, image, or a tray with progress.
 
 ```tsx fragment — import-only example
 import { AvatarUpload } from "themelia-ui/base/upload"
-import "themelia-ui/base/upload.css"
 ```
 
 ## Composition
 
-This module composes `base/badge`, `base/buttons`, `base/display`, `base/feedback`.
+This module composes `base/badge`, `base/buttons`, `base/display`, `base/feedback`, `base/typography`.
 
 Application policy—routing, fetching, persistence, permissions, and translation—stays
 outside the package and arrives through the public props, callbacks, slots, or accessors below.
@@ -569,7 +568,7 @@ export default function FileUploadExample() {
 	const [rejected, setRejected] = useState<FileRejection[]>([])
 
 	return (
-		<Stack gap="xl" style={{ maxWidth: "34rem", width: "100%" }}>
+		<Stack style={{ maxWidth: "34rem", width: "100%" }}>
 			<FormField label="Attachments" helperText="Drag files in, or click to browse.">
 				<FileUpload
 					multiple
@@ -621,8 +620,8 @@ export default function MediaUpload() {
 	const [error, setError] = useState<string>()
 
 	return (
-		<Stack direction={{ base: "vertical", sm: "horizontal" }} gap="2xl" align="start" style={{ width: "100%" }}>
-			<Stack gap="xl" style={{ maxWidth: "26rem", width: "100%" }}>
+		<Stack direction={{ base: "vertical", sm: "horizontal" }} align="start" style={{ width: "100%" }}>
+			<Stack style={{ maxWidth: "26rem", width: "100%" }}>
 				<FormField label="Profile photo" helperText="Nothing stored yet.">
 					<AvatarUpload />
 				</FormField>
@@ -632,7 +631,7 @@ export default function MediaUpload() {
 						onValueChange={() => setError(undefined)} />
 				</FormField>
 			</Stack>
-			<Stack gap="xl" style={{ maxWidth: "26rem", width: "100%" }}>
+			<Stack style={{ maxWidth: "26rem", width: "100%" }}>
 				<FormField label="Profile photo" helperText="Your current profile photo.">
 					<AvatarUpload previewUrl={SAMPLE_IMAGE_URL} />
 				</FormField>
@@ -657,7 +656,7 @@ export default function UploadQueue() {
 	const items = QUEUE
 
 	return (
-		<Stack style={{ maxWidth: "34rem", width: "100%" }}>
+		<Stack gap="sm" style={{ maxWidth: "34rem", width: "100%" }}>
 			<UploadProgressList items={items} onRetry={() => {}} onRemove={() => {}} />
 		</Stack>
 	)
@@ -676,7 +675,7 @@ export default function UploadTrayExample() {
 	const items = QUEUE
 
 	return (
-		<Stack style={{ maxWidth: "34rem", width: "100%" }}>
+		<Stack gap="sm" style={{ maxWidth: "34rem", width: "100%" }}>
 			<UploadTray
 				items={items}
 				onAddFiles={() => {}}
@@ -703,7 +702,7 @@ export default function MediaGalleryExample() {
 	const [images, setImages] = useState<File[]>(SAMPLE_IMAGES)
 
 	return (
-		<Stack style={{ maxWidth: "34rem", width: "100%" }}>
+		<Stack gap="sm" style={{ maxWidth: "34rem", width: "100%" }}>
 			<MediaGallery value={images} onValueChange={setImages} maxFiles={6} />
 		</Stack>
 	)