themelia-ui 3.0.0 → 3.2.0

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

@@ -15,12 +15,11 @@ A field holds a variable-length list the user adds to, reorders or removes from.
 
 ```tsx fragment — import-only example
 import { KeyValueEditor } from "themelia-ui/base/repeaters"
-import "themelia-ui/base/repeaters.css"
 ```
 
 ## Composition
 
-This module composes `base/buttons`, `base/choice-inputs`, `base/display`, `base/forms`, `base/structure`, `base/text-inputs`.
+This module composes `base/buttons`, `base/choice-inputs`, `base/display`, `base/forms`, `base/structure`, `base/text-inputs`, `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.
@@ -421,7 +420,7 @@ export default function RepeaterExample() {
 		})
 
 	return (
-		<Stack style={{ maxWidth: "34rem", width: "100%" }}>
+		<Stack gap="sm" style={{ maxWidth: "34rem", width: "100%" }}>
 			<FormField htmlFor={false} label="Contacts" helperText="Drag a handle, or focus it and press ↑ / ↓.">
 				<Repeater
 					items={contacts}
@@ -438,7 +437,7 @@ export default function RepeaterExample() {
 					onMove={move}
 				>
 					{(contact, { index }) => (
-						<Stack direction="horizontal" gap="md" style={{ width: "100%" }}>
+						<Stack direction="horizontal" gap="sm" style={{ width: "100%" }}>
 							<Input
 								value={contact.name}
 								aria-label="Name"
@@ -486,7 +485,7 @@ export default function StringRepeaterExample() {
 	const [domains, setDomains] = useState(["acme.com", "acme.dev"])
 
 	return (
-		<Stack gap="xl" style={{ maxWidth: "26rem", width: "100%" }}>
+		<Stack style={{ maxWidth: "26rem", width: "100%" }}>
 			<FormField htmlFor={false} label="Allowed domains" helperText="Drag the handle, or focus it and press ↑ / ↓.">
 				<StringRepeater
 					value={domains}
@@ -521,7 +520,7 @@ export default function KeyValue() {
 	])
 
 	return (
-		<Stack style={{ maxWidth: "34rem", width: "100%" }}>
+		<Stack gap="sm" style={{ maxWidth: "34rem", width: "100%" }}>
 			<FormField htmlFor={false} label="Request headers" helperText="Try entering the same key twice.">
 				<KeyValueEditor value={headers} onValueChange={setHeaders} sortable />
 			</FormField>
@@ -549,7 +548,7 @@ export default function Localized() {
 	const [name, setName] = useState<LocalizedValue>({ en: "Invoice", nl: "Factuur" })
 
 	return (
-		<Stack style={{ maxWidth: "26rem", width: "100%" }}>
+		<Stack gap="sm" style={{ maxWidth: "26rem", width: "100%" }}>
 			<FormField htmlFor={false} label="Display name" helperText="Switch locale — the value follows.">
 				<LocalizedStringField locales={LOCALES} value={name} onValueChange={setName} />
 			</FormField>

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

@@ -15,7 +15,6 @@ The user sets the split between panes and the size should persist.
 
 ```tsx fragment — import-only example
 import { ResizableHandle } from "themelia-ui/base/resizable"
-import "themelia-ui/base/resizable.css"
 ```
 
 ## Composition
@@ -109,13 +108,13 @@ export default function Resizable() {
 		<div style={FRAME}>
 			<ResizablePanelGroup orientation="horizontal">
 				<ResizablePanel defaultSize="65%">
-					<div style={{ padding: "var(--space-lg)" }}>
+					<div style={{ padding: "var(--padding)" }}>
 						<Text size="sm" type="secondary">The document</Text>
 					</div>
 				</ResizablePanel>
 				<ResizableHandle withHandle />
 				<ResizablePanel defaultSize="35%">
-					<div style={{ padding: "var(--space-lg)" }}>
+					<div style={{ padding: "var(--padding)" }}>
 						<Text size="sm" type="secondary">The inspector</Text>
 					</div>
 				</ResizablePanel>

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

@@ -15,7 +15,6 @@ Documenting the sheet anatomy, or inside base where features/overlays cannot be
 
 ```tsx fragment — import-only example
 import { SheetContent } from "themelia-ui/base/sheet"
-import "themelia-ui/base/sheet.css"
 ```
 
 ## Composition
@@ -33,7 +32,7 @@ Kind: callable.
 
 OverlayContent at an edge. `side` is OverlayContent's `placement` minus centre — logical,
 so it follows the writing mode — and the sheet adds a default shape: `side="inline-end"`,
-`size="md"`, `length="full"` and `inset={false}`. `UIProvider`'s `defaults.sheet` takes
+`size="default"`, `length="full"` and `inset={false}`. `UIProvider`'s `defaults.sheet` takes
 the same four, for a product that decides the shape once.
 
 `modality`, `surface`, `dismissal`, `initialFocusRef` and `showCloseButton` pass through
@@ -83,9 +82,9 @@ import { Input } from "themelia-ui/base/text-inputs"
 
 export default function Sheet() {
 	return (
-		<Stack direction="horizontal">
+		<Stack gap="sm" direction="horizontal">
 			<Overlay>
-				<OverlayTrigger render={<Button tone="neutral" buttonStyle="outline" />}>
+				<OverlayTrigger render={<Button tone="neutral" appearance="outline" />}>
 					Open sheet
 				</OverlayTrigger>
 				<SheetContent side="inline-end">
@@ -94,7 +93,7 @@ export default function Sheet() {
 						<OverlayDescription>Native top layer — the list behind stays in view and cannot clip it.</OverlayDescription>
 					</OverlayHeader>
 					<OverlayBody>
-						<Stack gap="md">
+						<Stack gap="sm">
 							<FormField label="Venue">
 								<Input defaultValue="Marlow Hall" />
 							</FormField>
@@ -104,7 +103,7 @@ export default function Sheet() {
 						</Stack>
 					</OverlayBody>
 					<OverlayFooter>
-						<OverlayClose render={<Button tone="neutral" buttonStyle="outline" />}>
+						<OverlayClose render={<Button tone="neutral" appearance="outline" />}>
 							Cancel
 						</OverlayClose>
 						<OverlayClose render={<Button />}>
@@ -131,9 +130,9 @@ import { Text } from "themelia-ui/base/typography"
 
 export default function SheetShape() {
 	return (
-		<Stack direction="horizontal" gap="lg" wrap align="center">
+		<Stack direction="horizontal" wrap align="center">
 			<Overlay>
-				<OverlayTrigger render={<Button tone="neutral" buttonStyle="outline" />}>
+				<OverlayTrigger render={<Button tone="neutral" appearance="outline" />}>
 					Flush, size=&quot;sm&quot;
 				</OverlayTrigger>
 				<SheetContent side="inline-end" size="sm">
@@ -148,7 +147,7 @@ export default function SheetShape() {
 			</Overlay>
 
 			<Overlay>
-				<OverlayTrigger render={<Button tone="neutral" buttonStyle="outline" />}>
+				<OverlayTrigger render={<Button tone="neutral" appearance="outline" />}>
 					Inset
 				</OverlayTrigger>
 				<SheetContent side="inline-end" size="28rem" inset>
@@ -167,7 +166,7 @@ export default function SheetShape() {
 			</Overlay>
 
 			<Overlay>
-				<OverlayTrigger render={<Button tone="neutral" buttonStyle="outline" />}>
+				<OverlayTrigger render={<Button tone="neutral" appearance="outline" />}>
 					Inset from block-end
 				</OverlayTrigger>
 				<SheetContent side="block-end" size="60%" length="70%" inset="1.5rem">
@@ -205,9 +204,9 @@ import { UIProvider } from "themelia-ui/ui-provider"
 
 export default function SheetProvider() {
 	return (
-		<Stack direction="horizontal" gap="lg" wrap align="center">
+		<Stack direction="horizontal" wrap align="center">
 			<Overlay>
-				<OverlayTrigger render={<Button tone="neutral" buttonStyle="outline" />}>
+				<OverlayTrigger render={<Button tone="neutral" appearance="outline" />}>
 					Kit default
 				</OverlayTrigger>
 				<SheetContent>
@@ -223,7 +222,7 @@ export default function SheetProvider() {
 
 			<UIProvider config={{ defaults: { sheet: { size: "26rem", inset: true } } }}>
 				<Overlay>
-					<OverlayTrigger render={<Button tone="neutral" buttonStyle="outline" />}>
+					<OverlayTrigger render={<Button tone="neutral" appearance="outline" />}>
 						Under a provider
 					</OverlayTrigger>
 					<SheetContent>

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

@@ -15,7 +15,6 @@ Composing a collapsible sidebar from its parts, including the mobile presentatio
 
 ```tsx fragment — import-only example
 import { Sidebar } from "themelia-ui/base/sidebar"
-import "themelia-ui/base/sidebar.css"
 ```
 
 ## Composition
@@ -222,7 +221,7 @@ Kind: callable.
 The row's control: a button, or through `render` a router link.
 
 ```text
-({ size, active, variant, render, closeOnSelectMobile, tooltip, className, children, onClick, ...props }: SidebarMenuButtonProps) => React.JSX.Element
+({ size, active, appearance, render, closeOnSelectMobile, tooltip, className, children, onClick, ...props }: SidebarMenuButtonProps) => React.JSX.Element
 ```
 
 ### `SidebarMenuButtonProps`
@@ -233,9 +232,9 @@ Extends: `Omit<ComponentProps<"button">, "size">`.
 
 | member | required | type | description / documented default |
 | --- | :-: | --- | --- |
-| `size` | no | `SidebarMenuButtonSize` | The row's height, as a shape rather than a density: `lg` is the workspace switcher, `sm`<br>a secondary row. A size prop here, because a navigation row is not on the control<br>ladder that density scales. |
+| `size` | no | `SidebarMenuButtonSize` | The row's height: a control's by default, the small control's for a secondary row<br>(`sm`), with its label a type step smaller. |
 | `active` | no | `boolean` | Marks the row as the current page. |
-| `variant` | no | `"default" \| "outline"` | `outline` gives the row its own frame — for a switcher that must read as a control. |
+| `appearance` | no | `"default" \| "outline"` | `outline` gives the row its own frame — for a switcher that must read as a control. |
 | `render` | no | `React.ReactElement` | The element this row becomes instead of a `button` — usually a router link, so the row<br>navigates the app's own way. `children` stays the row's content. |
 | `closeOnSelectMobile` | no | `boolean` | Dismisses the mobile sheet when the row is activated. Turn it off for a row that opens<br>something else (a switcher, a submenu toggle). |
 | `tooltip` | no | `React.ReactNode` | The row's name, shown beside it while the sidebar is collapsed to its icon rail, where<br>the label is clipped away. Ignored while expanded and on phones. |
@@ -244,11 +243,10 @@ Extends: `Omit<ComponentProps<"button">, "size">`.
 
 Kind: type.
 
-Row shape, not density: `lg` is an account or workspace switcher (avatar over two lines),
-`sm` a secondary row.
+The row's height: `default`, or `sm` for a secondary row.
 
 ```text
-"sm" | "md" | "lg"
+"default" | "sm"
 ```
 
 ### `SidebarMenuItem`
@@ -311,7 +309,7 @@ Extends: `ComponentProps<"a">`.
 
 | member | required | type | description / documented default |
 | --- | :-: | --- | --- |
-| `size` | no | `"sm" \| "md"` | The nested row's height. |
+| `size` | no | `"default" \| "sm"` | The nested row's height: `default`, or `sm` for a denser list. |
 | `active` | no | `boolean` | Marks the row as the current page. |
 | `closeOnSelectMobile` | no | `boolean` | Dismisses the mobile sheet when the row is activated. See SidebarMenuButton. |
 | `render` | no | `React.ReactElement` | The element this row becomes instead of an `a` or `button` — usually a router link, so<br>the row navigates the app's own way. `children` stays the row's content. |
@@ -416,7 +414,7 @@ The button that toggles the panel. It reads the provider, so it works from anywh
 inside it; pair it with the rail, which does the same job from the panel's edge.
 
 ```text
-({ className, onClick, tone, buttonStyle, iconOnly, ...props }: ComponentProps<typeof Button>) => React.JSX.Element
+({ className, onClick, tone, appearance, iconOnly, ...props }: ComponentProps<typeof Button>) => React.JSX.Element
 ```
 
 ### `SidebarVariant`
@@ -474,7 +472,7 @@ export default function SidebarControlled() {
 	const [open, setOpen] = useState(true)
 
 	return (
-		<Stack gap="md">
+		<Stack gap="sm">
 			<Text size="xs" type="secondary">
 				open: {String(open)}
 			</Text>
@@ -508,7 +506,7 @@ export default function SidebarControlled() {
 					</Sidebar>
 					{/* embedded in a docs page, so the page's own <main> stays the only one */}
 					<SidebarInset render={<div />}>
-						<Stack style={{ padding: "var(--space-xl)" }}>
+						<Stack gap="sm" style={{ padding: "var(--padding)" }}>
 							<SidebarTrigger />
 						</Stack>
 					</SidebarInset>

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

@@ -15,12 +15,11 @@ A placeholder should hold the eventual layout's shape while data loads.
 
 ```tsx fragment — import-only example
 import { ContentSkeleton } from "themelia-ui/base/skeleton"
-import "themelia-ui/base/skeleton.css"
 ```
 
 ## Composition
 
-This module composes `base/display`.
+This module composes `base/display`, `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.
@@ -183,20 +182,20 @@ import { Text } from "themelia-ui/base/typography"
 
 export default function Composed() {
 	return (
-		<Stack gap="2xl" style={{ width: "100%" }}>
-			<Stack gap="xs">
+		<Stack style={{ width: "100%" }}>
+			<Stack gap="sm">
 				<Text size="xs" type="secondary">ContentSkeleton</Text>
 				<ContentSkeleton lines={3} />
 			</Stack>
-			<Stack gap="xs">
+			<Stack gap="sm">
 				<Text size="xs" type="secondary">TableSkeleton</Text>
 				<TableSkeleton rows={4} columns={3} />
 			</Stack>
-			<Stack gap="xs">
+			<Stack gap="sm">
 				<Text size="xs" type="secondary">PageSkeleton</Text>
 				<PageSkeleton blocks={2} />
 			</Stack>
-			<Stack gap="xs">
+			<Stack gap="sm">
 				<Text size="xs" type="secondary">TwoColumnPageSkeleton</Text>
 				<TwoColumnPageSkeleton />
 			</Stack>

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

@@ -49,7 +49,7 @@ import { Text } from "themelia-ui/base/typography"
 
 export default function DirectionSlot() {
 	return (
-		<Stack gap="lg">
+		<Stack>
 			<DirectionProvider direction="rtl">
 				<div dir="rtl">
 					<ContentBlock surface="card" title="اتجاه من اليمين إلى اليسار">

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

@@ -15,7 +15,6 @@ A wait is short and has no layout to preview.
 
 ```tsx fragment — import-only example
 import { Spinner } from "themelia-ui/base/spinner"
-import "themelia-ui/base/spinner.css"
 ```
 
 ## Composition
@@ -43,7 +42,7 @@ Extends: `Omit<React.ComponentProps<"span">, "children">`.
 
 | member | required | type | description / documented default |
 | --- | :-: | --- | --- |
-| `size` | no | `ComponentScale` | The ring's size: `sm`, `md` or `lg`. The one place a size prop survives: a spinner has<br>no content to scale with. |
+| `size` | no | `ComponentScale` | The ring's size: `default`, or `sm` inside a dense row. A spinner keeps a size prop: it<br>has no content to scale with. |
 | `tone` | no | `SemanticTone` | Borrows the button tone contract, so a spinner inside or beside an action matches it<br>rather than sitting on it in the primary hue. |
 | `label` | no | `React.ReactNode` | Visible label beside the ring, and the announced status. Without one the spinner is<br>decorative and hidden from assistive technology. |
 
@@ -61,7 +60,7 @@ import { Demo } from "./_shared"
 
 export default function SpinnerExample() {
 	return (
-		<Stack direction="horizontal" gap="2xl" align="end">
+		<Stack direction="horizontal" align="end">
 			<Demo caption='label="Saving…"'>
 				<Spinner label="Saving…" />
 			</Demo>
@@ -83,10 +82,9 @@ import { Demo } from "./_shared"
 
 export default function SpinnerSize() {
 	return (
-		<Stack direction="horizontal" gap="2xl" align="end">
+		<Stack direction="horizontal" align="end">
 			<Demo caption='size="sm"'><Spinner size="sm" /></Demo>
-			<Demo caption='size="md" — default'><Spinner size="md" /></Demo>
-			<Demo caption='size="lg"'><Spinner size="lg" /></Demo>
+			<Demo caption="default"><Spinner /></Demo>
 		</Stack>
 	)
 }
@@ -102,7 +100,7 @@ import { Demo } from "./_shared"
 
 export default function SpinnerTone() {
 	return (
-		<Stack direction="horizontal" gap="2xl" align="end">
+		<Stack direction="horizontal" align="end">
 			<Demo caption='tone="primary" — default'><Spinner /></Demo>
 			<Demo caption='tone="neutral"'><Spinner tone="neutral" /></Demo>
 			<Demo caption='tone="success"'><Spinner tone="success" /></Demo>