@soroush.tech/design-system 2.0.0-rc.3 → 2.0.0-rc.4

package/dist/catalog.mjs

@@ -1,4 +1,5 @@
-import { n as baseTheme } from "./themes-L-dE7_ck.mjs";
+import { n as baseTheme } from "./themes-BwEsdVox.mjs";
+import { r as tooltipPlacementValues } from "./getTooltipOrigins-CyyIMCF1.mjs";
 import { background, border, color, flexbox, grid, layout, position, shadow, space, typography } from "@soroush.tech/styled-system";
 //#region ../docs-content/src/kebabCase.ts
 /** PascalCase or camelCase to kebab-case: `TextInput` -> `text-input`. */
@@ -22,6 +23,7 @@ const componentCategories = [
 	{
 		label: "Layout & surfaces",
 		items: [
+			component("ScrollArea"),
 			component("View"),
 			component("Flex"),
 			component("Grid"),
@@ -41,12 +43,15 @@ const componentCategories = [
 			component("Icon"),
 			component("Image"),
 			component("Avatar"),
-			component("Table", true)
+			component("Table", true),
+			component("Accordion", true)
 		]
 	},
 	{
 		label: "Inputs & forms",
 		items: [
+			component("Autocomplete"),
+			component("Fab"),
 			component("Button"),
 			component("ButtonGroup"),
 			component("ToggleButton", true),
@@ -54,8 +59,8 @@ const componentCategories = [
 			component("Checkbox"),
 			component("Radio"),
 			component("Rating"),
-			component("NumberField"),
-			component("InputRange"),
+			component("NumberInput"),
+			component("RangeInput"),
 			component("TransferList"),
 			component("Switch"),
 			component("NativeSelect"),
@@ -79,15 +84,31 @@ const componentCategories = [
 	{
 		label: "Feedback",
 		items: [
+			component("FabMenu", true),
+			component("Snackbar"),
+			component("Alert", true),
+			component("Badge"),
+			component("Chip"),
 			component("CircularProgress"),
 			component("LinearProgress"),
 			component("Skeleton"),
 			component("Backdrop")
 		]
 	},
+	{
+		label: "Transitions",
+		items: [
+			component("Collapse"),
+			component("Fade"),
+			component("Grow"),
+			component("Slide"),
+			component("Zoom")
+		]
+	},
 	{
 		label: "Overlay & behavior",
 		items: [
+			component("Tooltip"),
 			component("Portal"),
 			component("FocusTrap"),
 			component("Modal"),
@@ -99,6 +120,14 @@ const componentCategories = [
 const allComponents = componentCategories.flatMap((category) => category.items);
 /** Every family member, in its family's order. */
 const memberComponents = Object.entries({
+	FabMenu: ["FabMenuItem"],
+	Alert: ["AlertTitle"],
+	Accordion: [
+		"AccordionActions",
+		"AccordionDetails",
+		"AccordionGroup",
+		"AccordionSummary"
+	],
 	Menu: [
 		"ContextMenu",
 		"MenuDivider",
@@ -163,6 +192,643 @@ const node = (component, props = {}, children = []) => ({
 	children
 });
 //#endregion
+//#region src/Accordion/AccordionActions/AccordionActions.catalog.ts
+const accordionActionsCatalog = defineCatalogEntry()({
+	summary: "The foot of an accordion's region: its buttons, at the end of a row.",
+	isPlaceable: false,
+	example: {
+		component: "AccordionActions",
+		props: {},
+		children: [node("Button", { variant: "text" }, ["Save"])]
+	},
+	variants: [],
+	options: {},
+	content: { children: "children" }
+});
+//#endregion
+//#region src/Accordion/Accordion/Accordion.catalog.ts
+const accordionCatalog = defineCatalogEntry()({
+	summary: "A heading that opens and closes a region of content.",
+	isPlaceable: true,
+	example: {
+		component: "Accordion",
+		props: {},
+		children: [node("AccordionSummary", {}, ["Title"]), node("AccordionDetails", {}, ["Content that opens and closes."])]
+	},
+	variants: [],
+	options: {
+		defaultExpanded: {
+			values: [true, false],
+			default: false
+		},
+		disabled: {
+			values: [true, false],
+			default: false
+		},
+		hasGutters: {
+			values: [true, false],
+			default: true
+		},
+		borderRadius: { scale: "radii" },
+		bg: {
+			scale: "background",
+			default: "paper"
+		},
+		textColor: {
+			scale: "text",
+			default: "initial"
+		}
+	},
+	content: { children: "children" },
+	twoWay: {
+		prop: "isExpanded",
+		event: "onChange",
+		read: "argument"
+	}
+});
+//#endregion
+//#region src/Accordion/AccordionDetails/AccordionDetails.catalog.ts
+const accordionDetailsCatalog = defineCatalogEntry()({
+	summary: "What an accordion opens: the padded body of its region.",
+	isPlaceable: false,
+	example: {
+		component: "AccordionDetails",
+		props: {},
+		children: ["Content that opens and closes."]
+	},
+	variants: [],
+	options: {},
+	content: { children: "children" }
+});
+//#endregion
+//#region src/Accordion/AccordionGroup/AccordionGroup.catalog.ts
+const accordionGroupCatalog = defineCatalogEntry()({
+	summary: "A column of accordions that move by the keys, and may keep one open at a time.",
+	isPlaceable: true,
+	example: {
+		component: "AccordionGroup",
+		props: {},
+		children: [node("Accordion", {}, [node("AccordionSummary", {}, ["First"]), node("AccordionDetails", {}, ["The first content."])]), node("Accordion", {}, [node("AccordionSummary", {}, ["Second"]), node("AccordionDetails", {}, ["The second content."])])]
+	},
+	variants: [],
+	options: {
+		isExclusive: {
+			values: [true, false],
+			default: false
+		},
+		variant: {
+			values: ["separated", "attached"],
+			default: "separated"
+		}
+	},
+	content: { children: "children" }
+});
+const accordionSummaryCatalog = defineCatalogEntry()({
+	summary: "The header of an accordion: a button in a heading that opens and closes it.",
+	isPlaceable: false,
+	example: {
+		component: "AccordionSummary",
+		props: {},
+		children: ["Title"]
+	},
+	variants: [],
+	options: { headingLevel: {
+		values: [
+			1,
+			2,
+			3,
+			4,
+			5,
+			6
+		],
+		default: 3
+	} },
+	content: {
+		children: "children",
+		expandIcon: "child"
+	}
+});
+//#endregion
+//#region src/Chip/Chip.catalog.ts
+const chipVariantValues = [
+	"contained",
+	"outlined",
+	"text"
+];
+const variantLabels$18 = {
+	contained: "Filled",
+	outlined: "Outlined",
+	text: "Text"
+};
+const chipCatalog = defineCatalogEntry()({
+	summary: "A compact tag: a label, an icon or an avatar, and optionally a click and a delete.",
+	isPlaceable: true,
+	example: {
+		component: "Chip",
+		props: { label: "Tag" },
+		children: []
+	},
+	variants: chipVariantValues.map((variant) => ({
+		name: variant,
+		label: variantLabels$18[variant],
+		example: {
+			component: "Chip",
+			props: {
+				label: "Tag",
+				variant
+			},
+			children: []
+		}
+	})),
+	options: {
+		variant: {
+			values: chipVariantValues,
+			default: "contained"
+		},
+		color: {
+			scale: "palette",
+			default: "default"
+		},
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		shape: {
+			values: [
+				"square",
+				"rounded",
+				"pill"
+			],
+			default: "pill"
+		},
+		borderRadius: { scale: "radii" },
+		disabled: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: {
+		label: "text",
+		icon: "child",
+		avatar: "child"
+	}
+});
+const badgeCatalog = defineCatalogEntry()({
+	summary: "A count or a dot anchored over another element.",
+	isPlaceable: true,
+	example: {
+		component: "Badge",
+		props: { badgeContent: 4 },
+		children: [node("Icon", { name: "star" })]
+	},
+	variants: [{
+		name: "dot",
+		label: "Dot",
+		example: {
+			component: "Badge",
+			props: { variant: "dot" },
+			children: [node("Icon", { name: "star" })]
+		}
+	}],
+	options: {
+		max: {
+			values: [
+				9,
+				99,
+				999
+			],
+			default: 99
+		},
+		variant: {
+			values: ["standard", "dot"],
+			default: "standard"
+		},
+		color: {
+			scale: "palette",
+			default: "error"
+		},
+		isHidden: {
+			values: [true, false],
+			default: false
+		},
+		shouldShowZero: {
+			values: [true, false],
+			default: false
+		},
+		overlap: {
+			values: ["rectangular", "circular"],
+			default: "rectangular"
+		}
+	},
+	content: {
+		children: "children",
+		badgeContent: "text"
+	}
+});
+//#endregion
+//#region src/Alert/Alert/Alert.catalog.ts
+const alertSeverityValues = [
+	"success",
+	"info",
+	"warning",
+	"error"
+];
+const alertCatalog = defineCatalogEntry()({
+	summary: "An inline message with a severity, an icon, a title and an action.",
+	isPlaceable: true,
+	example: {
+		component: "Alert",
+		props: { severity: "info" },
+		children: [node("AlertTitle", {}, ["Heads up"]), "Your changes were saved."]
+	},
+	variants: alertSeverityValues.map((severity) => ({
+		name: severity,
+		label: severity[0].toUpperCase() + severity.slice(1),
+		example: {
+			component: "Alert",
+			props: { severity },
+			children: ["Your changes were saved."]
+		}
+	})),
+	options: {
+		severity: {
+			values: alertSeverityValues,
+			default: "info"
+		},
+		variant: {
+			values: [
+				"standard",
+				"contained",
+				"outlined"
+			],
+			default: "standard"
+		},
+		role: {
+			values: ["alert", "status"],
+			default: "alert"
+		},
+		borderRadius: { scale: "radii" }
+	},
+	content: {
+		children: "children",
+		icon: "child",
+		action: "child"
+	}
+});
+//#endregion
+//#region src/Alert/AlertTitle/AlertTitle.catalog.ts
+const alertTitleCatalog = defineCatalogEntry()({
+	summary: "The title of an alert: its first line, in a heavier weight.",
+	isPlaceable: false,
+	example: {
+		component: "AlertTitle",
+		props: {},
+		children: ["Heads up"]
+	},
+	variants: [],
+	options: {},
+	content: { children: "children" }
+});
+const fabCatalog = defineCatalogEntry()({
+	summary: "A floating action button: the one main action of a page, circular or extended.",
+	isPlaceable: true,
+	example: {
+		component: "Fab",
+		props: { "aria-label": "Add" },
+		children: [node("Icon", { name: "add" })]
+	},
+	variants: [{
+		name: "extended",
+		label: "Extended",
+		example: {
+			component: "Fab",
+			props: { variant: "extended" },
+			children: ["Create"]
+		}
+	}],
+	options: {
+		variant: {
+			values: ["circular", "extended"],
+			default: "circular"
+		},
+		color: {
+			scale: "palette",
+			default: "primary"
+		},
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		isCollapsed: {
+			values: [true, false],
+			default: false
+		},
+		disabled: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: {
+		children: "children",
+		startIcon: "child"
+	}
+});
+//#endregion
+//#region src/Snackbar/Snackbar.catalog.ts
+const snackbarCatalog = defineCatalogEntry()({
+	summary: "A transient message in a corner of the window, with auto-hide and an action.",
+	isPlaceable: true,
+	example: {
+		component: "Snackbar",
+		props: {
+			isOpen: true,
+			message: "Saved",
+			autoHideDuration: 4e3
+		},
+		children: []
+	},
+	variants: [],
+	options: {
+		isOpen: {
+			values: [true, false],
+			default: false
+		},
+		autoHideDuration: { values: [
+			2e3,
+			4e3,
+			8e3
+		] },
+		layer: {
+			scale: "zOrder",
+			default: "snackbar"
+		},
+		shape: {
+			values: [
+				"square",
+				"rounded",
+				"pill"
+			],
+			default: "rounded"
+		},
+		borderRadius: { scale: "radii" },
+		bg: {
+			scale: "background",
+			default: "modal"
+		},
+		textColor: {
+			scale: "text",
+			default: "initial"
+		}
+	},
+	content: {
+		message: "text",
+		action: "child",
+		children: "children"
+	}
+});
+//#endregion
+//#region src/Tooltip/Tooltip.catalog.ts
+const tooltipCatalog = defineCatalogEntry()({
+	summary: "A short description of one element, shown on hover, keyboard focus and a long touch.",
+	isPlaceable: true,
+	example: {
+		component: "Tooltip",
+		props: { title: "Save the page" },
+		children: [node("Button", { variant: "outlined" }, ["Save"])]
+	},
+	variants: [],
+	options: {
+		placement: {
+			values: tooltipPlacementValues,
+			default: "top"
+		},
+		hasArrow: {
+			values: [true, false],
+			default: false
+		},
+		enterDelay: {
+			values: [
+				0,
+				100,
+				500
+			],
+			default: 100
+		},
+		leaveDelay: {
+			values: [
+				0,
+				200,
+				500
+			],
+			default: 0
+		},
+		shouldDescribeChild: {
+			values: [true, false],
+			default: false
+		},
+		shouldOpenOnHover: {
+			values: [true, false],
+			default: true
+		},
+		shouldOpenOnFocus: {
+			values: [true, false],
+			default: true
+		},
+		shouldOpenOnTouch: {
+			values: [true, false],
+			default: true
+		},
+		layer: {
+			scale: "zOrder",
+			default: "tooltip"
+		},
+		borderRadius: { scale: "radii" },
+		bg: {
+			scale: "background",
+			default: "modal"
+		},
+		textColor: {
+			scale: "text",
+			default: "initial"
+		}
+	},
+	content: {
+		title: "text",
+		children: "child"
+	}
+});
+const autocompleteCatalog = defineCatalogEntry()({
+	summary: "A field whose text finds an option in a list - one choice, several as chips, or free text.",
+	isPlaceable: true,
+	example: {
+		component: "Autocomplete",
+		props: {
+			options: [
+				"Berlin",
+				"Lisbon",
+				"Oslo",
+				"Rome"
+			],
+			variant: "outlined",
+			"aria-label": "City",
+			noOptionsText: "No city matches"
+		},
+		children: []
+	},
+	variants: [],
+	options: {
+		multiple: {
+			values: [true, false],
+			default: false
+		},
+		shouldAllowFreeText: {
+			values: [true, false],
+			default: false
+		},
+		isLoading: {
+			values: [true, false],
+			default: false
+		},
+		variant: {
+			values: [
+				"default",
+				"outlined",
+				"underline",
+				"text"
+			],
+			default: "default"
+		},
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		color: {
+			scale: "palette",
+			default: "primary"
+		},
+		error: {
+			values: [true, false],
+			default: false
+		},
+		disabled: {
+			values: [true, false],
+			default: false
+		},
+		required: {
+			values: [true, false],
+			default: false
+		},
+		fullWidth: {
+			values: [true, false],
+			default: false
+		},
+		layer: {
+			scale: "zOrder",
+			default: "modal"
+		},
+		borderRadius: { scale: "radii" },
+		bg: {
+			scale: "background",
+			default: "modal"
+		},
+		textColor: {
+			scale: "text",
+			default: "primary"
+		}
+	},
+	content: {}
+});
+const scrollAreaCatalog = defineCatalogEntry()({
+	summary: "A scrolling area whose scrollbars are drawn over its content, and show while it is hovered.",
+	isPlaceable: true,
+	example: {
+		component: "ScrollArea",
+		props: {
+			maxHeight: 120,
+			"aria-label": "Notes",
+			tabIndex: 0
+		},
+		children: ["A long list of notes, taller than the area that holds it, so the thumb shows on hover."]
+	},
+	variants: [],
+	options: {
+		axes: {
+			values: [
+				"y",
+				"x",
+				"both"
+			],
+			default: "y"
+		},
+		maxHeight: { values: [120, 240] }
+	},
+	content: { children: "children" }
+});
+const fabMenuCatalog = defineCatalogEntry()({
+	summary: "A fab that opens a stack of actions - extended pills - from the corner of a page.",
+	isPlaceable: true,
+	example: {
+		component: "FabMenu",
+		props: { "aria-label": "Create" },
+		children: [node("FabMenuItem", {}, [node("Icon", { name: "add" }), "Document"]), node("FabMenuItem", {}, ["Folder"])]
+	},
+	variants: [],
+	options: {
+		direction: {
+			values: [
+				"up",
+				"down",
+				"left",
+				"right"
+			],
+			default: "up"
+		},
+		align: {
+			values: ["end", "start"],
+			default: "end"
+		},
+		color: {
+			scale: "palette",
+			default: "primary"
+		},
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		isOpen: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: { children: "children" }
+});
+//#endregion
+//#region src/FabMenu/FabMenuItem/FabMenuItem.catalog.ts
+const fabMenuItemCatalog = defineCatalogEntry()({
+	summary: "One action of a FabMenu: an extended fab with an icon and a label.",
+	isPlaceable: false,
+	example: {
+		component: "FabMenuItem",
+		props: {},
+		children: ["Document"]
+	},
+	variants: [],
+	options: {
+		color: {
+			scale: "palette",
+			default: "secondary"
+		},
+		disabled: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: {
+		children: "text",
+		icon: "child"
+	}
+});
+//#endregion
 //#region src/AppBar/AppBar.catalog.ts
 const appBarPositionValues = [
 	"static",
@@ -680,6 +1346,147 @@ const checkboxCatalog = defineCatalogEntry()({
 		read: "target.checked"
 	}
 });
+/** What every transition around one child offers a picker. */
+const transitionOptions = {
+	isShown: {
+		values: [true, false],
+		default: false
+	},
+	shouldAppear: {
+		values: [true, false],
+		default: true
+	},
+	shouldMountOnEnter: {
+		values: [true, false],
+		default: false
+	},
+	shouldUnmountOnExit: {
+		values: [true, false],
+		default: false
+	},
+	timeout: {
+		values: [
+			150,
+			250,
+			375
+		],
+		default: 250
+	},
+	easing: {
+		values: [
+			"standard",
+			"enter",
+			"exit"
+		],
+		default: "standard"
+	}
+};
+/** The child a freshly placed transition holds. */
+const transitionExampleChild = {
+	component: "Paper",
+	props: {
+		p: 3,
+		width: "12rem"
+	},
+	children: ["Content that moves"]
+};
+//#endregion
+//#region src/Collapse/Collapse.catalog.ts
+const collapseOrientationValues = ["vertical", "horizontal"];
+const collapseCatalog = defineCatalogEntry()({
+	summary: "Opens and closes its content by its height, or its width.",
+	isPlaceable: true,
+	example: {
+		component: "Collapse",
+		props: { isShown: true },
+		children: ["Content that opens and closes"]
+	},
+	variants: [],
+	options: {
+		...transitionOptions,
+		orientation: {
+			values: collapseOrientationValues,
+			default: "vertical"
+		},
+		collapsedSize: {
+			values: [
+				0,
+				24,
+				48
+			],
+			default: 0
+		}
+	},
+	content: { children: "children" }
+});
+//#endregion
+//#region src/Fade/Fade.catalog.ts
+const fadeCatalog = defineCatalogEntry()({
+	summary: "Fades one child in and out by its opacity.",
+	isPlaceable: true,
+	example: {
+		component: "Fade",
+		props: { isShown: true },
+		children: [transitionExampleChild]
+	},
+	variants: [],
+	options: { ...transitionOptions },
+	content: { children: "child" }
+});
+//#endregion
+//#region src/Grow/Grow.catalog.ts
+const growCatalog = defineCatalogEntry()({
+	summary: "Grows one child in from a little smaller, fading as it does, and shrinks it out.",
+	isPlaceable: true,
+	example: {
+		component: "Grow",
+		props: { isShown: true },
+		children: [transitionExampleChild]
+	},
+	variants: [],
+	options: { ...transitionOptions },
+	content: { children: "child" }
+});
+//#endregion
+//#region src/Slide/Slide.catalog.ts
+const slideDirectionValues = [
+	"up",
+	"down",
+	"left",
+	"right"
+];
+const slideCatalog = defineCatalogEntry()({
+	summary: "Slides one child in from an edge of the window and back out.",
+	isPlaceable: true,
+	example: {
+		component: "Slide",
+		props: { isShown: true },
+		children: [transitionExampleChild]
+	},
+	variants: [],
+	options: {
+		...transitionOptions,
+		direction: {
+			values: slideDirectionValues,
+			default: "down"
+		}
+	},
+	content: { children: "child" }
+});
+//#endregion
+//#region src/Zoom/Zoom.catalog.ts
+const zoomCatalog = defineCatalogEntry()({
+	summary: "Zooms one child in from nothing and out to nothing.",
+	isPlaceable: true,
+	example: {
+		component: "Zoom",
+		props: { isShown: true },
+		children: [transitionExampleChild]
+	},
+	variants: [],
+	options: { ...transitionOptions },
+	content: { children: "child" }
+});
 //#endregion
 //#region src/Menu/ContextMenu/ContextMenu.catalog.ts
 const contextMenuCatalog = defineCatalogEntry()({
@@ -732,6 +1539,7 @@ const contextMenuCatalog = defineCatalogEntry()({
 			],
 			default: 8
 		},
+		borderRadius: { scale: "radii" },
 		layer: { scale: "zOrder" },
 		marginThreshold: { scale: "space" }
 	},
@@ -1448,14 +2256,14 @@ const imageCatalog = defineCatalogEntry()({
 	content: {}
 });
 //#endregion
-//#region src/InputRange/InputRange.catalog.ts
-const inputRangeTrackValues = ["normal", "inverted"];
-const inputRangeValueLabelValues = [
+//#region src/RangeInput/RangeInput.catalog.ts
+const rangeInputTrackValues = ["normal", "inverted"];
+const rangeInputValueLabelValues = [
 	"off",
 	"auto",
 	"on"
 ];
-const inputRangeOrientationValues = ["horizontal", "vertical"];
+const rangeInputOrientationValues = ["horizontal", "vertical"];
 const variantProps$1 = {
 	single: {
 		defaultValue: 40,
@@ -1474,11 +2282,11 @@ const variantLabels$12 = {
 	range: "A range",
 	marks: "With marks"
 };
-const inputRangeCatalog = defineCatalogEntry()({
+const rangeInputCatalog = defineCatalogEntry()({
 	summary: "A slider: one value on a range, or two or more thumbs for a range of values.",
 	isPlaceable: true,
 	example: {
-		component: "InputRange",
+		component: "RangeInput",
 		props: {
 			defaultValue: 40,
 			"aria-label": "Value"
@@ -1489,7 +2297,7 @@ const inputRangeCatalog = defineCatalogEntry()({
 		name,
 		label: variantLabels$12[name],
 		example: {
-			component: "InputRange",
+			component: "RangeInput",
 			props: variantProps$1[name],
 			children: []
 		}
@@ -1523,15 +2331,15 @@ const inputRangeCatalog = defineCatalogEntry()({
 			default: false
 		},
 		orientation: {
-			values: inputRangeOrientationValues,
+			values: rangeInputOrientationValues,
 			default: "horizontal"
 		},
 		track: {
-			values: inputRangeTrackValues,
+			values: rangeInputTrackValues,
 			default: "normal"
 		},
 		valueLabel: {
-			values: inputRangeValueLabelValues,
+			values: rangeInputValueLabelValues,
 			default: "off"
 		},
 		shouldSwapThumbs: {
@@ -1759,6 +2567,7 @@ const menuCatalog = defineCatalogEntry()({
 			],
 			default: 8
 		},
+		borderRadius: { scale: "radii" },
 		layer: { scale: "zOrder" },
 		marginThreshold: { scale: "space" },
 		defaultOpen: {
@@ -2099,13 +2908,13 @@ const nativeSelectCatalog = defineCatalogEntry()({
 	preview: { width: 220 }
 });
 //#endregion
-//#region src/NumberField/NumberField.catalog.ts
-const numberFieldSpinButtonsValues = [
+//#region src/NumberInput/NumberInput.catalog.ts
+const numberInputSpinButtonsValues = [
 	"stacked",
 	"sides",
 	"none"
 ];
-const numberFieldVariantValues = [
+const numberInputVariantValues = [
 	"default",
 	"outlined",
 	"underline",
@@ -2124,22 +2933,22 @@ const example = {
 	decrementLabel: "Decrease",
 	"aria-label": "Quantity"
 };
-const numberFieldCatalog = defineCatalogEntry()({
+const numberInputCatalog = defineCatalogEntry()({
 	summary: "A field for a number, read in its locale and clamped to a range, stepped by keys or buttons.",
 	isPlaceable: true,
 	example: {
-		component: "NumberField",
+		component: "NumberInput",
 		props: {
 			...example,
 			variant: "outlined"
 		},
 		children: []
 	},
-	variants: numberFieldSpinButtonsValues.map((spinButtons) => ({
+	variants: numberInputSpinButtonsValues.map((spinButtons) => ({
 		name: spinButtons,
 		label: spinLabels[spinButtons],
 		example: {
-			component: "NumberField",
+			component: "NumberInput",
 			props: {
 				...example,
 				variant: "outlined",
@@ -2164,11 +2973,11 @@ const numberFieldCatalog = defineCatalogEntry()({
 			default: 1
 		},
 		spinButtons: {
-			values: numberFieldSpinButtonsValues,
+			values: numberInputSpinButtonsValues,
 			default: "stacked"
 		},
 		variant: {
-			values: numberFieldVariantValues,
+			values: numberInputVariantValues,
 			default: "default"
 		},
 		size: {
@@ -2212,7 +3021,10 @@ const numberFieldCatalog = defineCatalogEntry()({
 			default: false
 		}
 	},
-	content: {},
+	content: {
+		startContent: "child",
+		endContent: "child"
+	},
 	twoWay: {
 		prop: "value",
 		event: "onChange",
@@ -4203,6 +5015,76 @@ const viewCatalog = defineCatalogEntry()({
 //#region src/catalog/sources.ts
 /** Every component, keyed by its export name. */
 const catalogSources = {
+	Accordion: {
+		entry: accordionCatalog,
+		folder: "Accordion"
+	},
+	AccordionActions: {
+		entry: accordionActionsCatalog,
+		folder: "Accordion",
+		family: "Accordion"
+	},
+	AccordionDetails: {
+		entry: accordionDetailsCatalog,
+		folder: "Accordion",
+		family: "Accordion"
+	},
+	AccordionGroup: {
+		entry: accordionGroupCatalog,
+		folder: "Accordion",
+		family: "Accordion"
+	},
+	AccordionSummary: {
+		entry: accordionSummaryCatalog,
+		folder: "Accordion",
+		family: "Accordion"
+	},
+	Chip: {
+		entry: chipCatalog,
+		folder: "Chip"
+	},
+	Badge: {
+		entry: badgeCatalog,
+		folder: "Badge"
+	},
+	Alert: {
+		entry: alertCatalog,
+		folder: "Alert"
+	},
+	AlertTitle: {
+		entry: alertTitleCatalog,
+		folder: "Alert",
+		family: "Alert"
+	},
+	Fab: {
+		entry: fabCatalog,
+		folder: "Fab"
+	},
+	Snackbar: {
+		entry: snackbarCatalog,
+		folder: "Snackbar"
+	},
+	Tooltip: {
+		entry: tooltipCatalog,
+		folder: "Tooltip"
+	},
+	Autocomplete: {
+		entry: autocompleteCatalog,
+		folder: "Autocomplete"
+	},
+	ScrollArea: {
+		entry: scrollAreaCatalog,
+		folder: "ScrollArea"
+	},
+	FabMenu: {
+		entry: fabMenuCatalog,
+		folder: "FabMenu"
+	},
+	FabMenuItem: {
+		entry: fabMenuItemCatalog,
+		folder: "FabMenu",
+		family: "FabMenu"
+	},
 	AppBar: {
 		entry: appBarCatalog,
 		folder: "AppBar"
@@ -4235,6 +5117,26 @@ const catalogSources = {
 		entry: checkboxCatalog,
 		folder: "Checkbox"
 	},
+	Collapse: {
+		entry: collapseCatalog,
+		folder: "Collapse"
+	},
+	Fade: {
+		entry: fadeCatalog,
+		folder: "Fade"
+	},
+	Grow: {
+		entry: growCatalog,
+		folder: "Grow"
+	},
+	Slide: {
+		entry: slideCatalog,
+		folder: "Slide"
+	},
+	Zoom: {
+		entry: zoomCatalog,
+		folder: "Zoom"
+	},
 	ContextMenu: {
 		entry: contextMenuCatalog,
 		folder: "Menu",
@@ -4289,9 +5191,9 @@ const catalogSources = {
 		entry: imageCatalog,
 		folder: "Image"
 	},
-	InputRange: {
-		entry: inputRangeCatalog,
-		folder: "InputRange"
+	RangeInput: {
+		entry: rangeInputCatalog,
+		folder: "RangeInput"
 	},
 	LinearProgress: {
 		entry: linearProgressCatalog,
@@ -4332,9 +5234,9 @@ const catalogSources = {
 		entry: nativeSelectCatalog,
 		folder: "NativeSelect"
 	},
-	NumberField: {
-		entry: numberFieldCatalog,
-		folder: "NumberField"
+	NumberInput: {
+		entry: numberInputCatalog,
+		folder: "NumberInput"
 	},
 	Pagination: {
 		entry: paginationCatalog,