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

package/dist/catalog.cjs

@@ -1,5 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_themes = require("./themes-gd6tcmqS.cjs");
+const require_themes = require("./themes--4eci3M1.cjs");
+const require_getTooltipOrigins = require("./getTooltipOrigins-B_7XXtQq.cjs");
 let _soroush_tech_styled_system = require("@soroush.tech/styled-system");
 //#region ../docs-content/src/kebabCase.ts
 /** PascalCase or camelCase to kebab-case: `TextInput` -> `text-input`. */
@@ -23,6 +24,7 @@ const componentCategories = [
 	{
 		label: "Layout & surfaces",
 		items: [
+			component("ScrollArea"),
 			component("View"),
 			component("Flex"),
 			component("Grid"),
@@ -42,18 +44,25 @@ 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),
 			component("TextInput"),
 			component("Checkbox"),
 			component("Radio"),
+			component("Rating"),
+			component("NumberInput"),
+			component("RangeInput"),
+			component("TransferList"),
 			component("Switch"),
 			component("NativeSelect"),
 			component("Select"),
@@ -76,15 +85,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"),
@@ -96,6 +121,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",
@@ -147,17 +180,654 @@ const markdownComponents = [
 const allDocComponents = [...allComponents.flatMap((item) => [item, ...membersOf(item)]), ...markdownComponents];
 new Map(allDocComponents.map((item) => [item.slug, item]));
 //#endregion
-//#region src/catalog/defineCatalogEntry.ts
-/**
-* Types a component's catalog entry against its props: `defineCatalogEntry<ButtonProps>()({
-* ... })`. Curried, so the props are named and the entry is still inferred.
-*/
-const defineCatalogEntry = () => (entry) => entry;
-/** A nested node, for brevity: `node('MenuItem', { value: 'web' }, ['Web'])`. */
-const node = (component, props = {}, children = []) => ({
-	component,
-	props,
-	children
+//#region src/catalog/defineCatalogEntry.ts
+/**
+* Types a component's catalog entry against its props: `defineCatalogEntry<ButtonProps>()({
+* ... })`. Curried, so the props are named and the entry is still inferred.
+*/
+const defineCatalogEntry = () => (entry) => entry;
+/** A nested node, for brevity: `node('MenuItem', { value: 'web' }, ['Web'])`. */
+const node = (component, props = {}, children = []) => ({
+	component,
+	props,
+	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: require_getTooltipOrigins.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
@@ -233,7 +903,7 @@ const avatarVariantValues = [
 	"rounded",
 	"square"
 ];
-const variantLabels$16 = {
+const variantLabels$17 = {
 	circular: "Circular",
 	rounded: "Rounded",
 	square: "Square"
@@ -255,7 +925,7 @@ const avatarCatalog = defineCatalogEntry()({
 	},
 	variants: avatarVariantValues.map((variant) => ({
 		name: variant,
-		label: variantLabels$16[variant],
+		label: variantLabels$17[variant],
 		example: {
 			component: "Avatar",
 			props: {
@@ -412,7 +1082,7 @@ const buttonLoadingPositionValues = [
 	"end",
 	"center"
 ];
-const variantLabels$15 = {
+const variantLabels$16 = {
 	contained: "Contained",
 	outlined: "Outlined",
 	text: "Text"
@@ -427,7 +1097,7 @@ const buttonCatalog = defineCatalogEntry()({
 	},
 	variants: buttonVariantValues.map((variant) => ({
 		name: variant,
-		label: variantLabels$15[variant],
+		label: variantLabels$16[variant],
 		example: {
 			component: "Button",
 			props: { variant },
@@ -484,7 +1154,7 @@ const buttonGroupVariantValues = [
 	"text"
 ];
 const buttonGroupOrientationValues = ["horizontal", "vertical"];
-const variantLabels$14 = {
+const variantLabels$15 = {
 	contained: "Contained",
 	outlined: "Outlined",
 	text: "Text"
@@ -504,7 +1174,7 @@ const buttonGroupCatalog = defineCatalogEntry()({
 	},
 	variants: buttonGroupVariantValues.map((variant) => ({
 		name: variant,
-		label: variantLabels$14[variant],
+		label: variantLabels$15[variant],
 		example: {
 			component: "ButtonGroup",
 			props: {
@@ -553,7 +1223,7 @@ const cardVariantValues = [
 	"bracketBox",
 	"interactive"
 ];
-const variantLabels$13 = {
+const variantLabels$14 = {
 	paper: "Paper",
 	bracketBox: "Bracket box",
 	interactive: "Interactive"
@@ -573,7 +1243,7 @@ const cardCatalog = defineCatalogEntry()({
 	},
 	variants: cardVariantValues.map((variant) => ({
 		name: variant,
-		label: variantLabels$13[variant],
+		label: variantLabels$14[variant],
 		example: {
 			component: "Card",
 			props: {
@@ -677,6 +1347,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()({
@@ -729,6 +1540,7 @@ const contextMenuCatalog = defineCatalogEntry()({
 			],
 			default: 8
 		},
+		borderRadius: { scale: "radii" },
 		layer: { scale: "zOrder" },
 		marginThreshold: { scale: "space" }
 	},
@@ -750,11 +1562,11 @@ const circularProgressEasingValues = [
 	"ease-out",
 	"ease-in-out"
 ];
-const variantLabels$12 = {
+const variantLabels$13 = {
 	indeterminate: "Indeterminate",
 	determinate: "Determinate"
 };
-const variantProps$1 = {
+const variantProps$2 = {
 	indeterminate: { variant: "indeterminate" },
 	determinate: {
 		variant: "determinate",
@@ -775,11 +1587,11 @@ const circularProgressCatalog = defineCatalogEntry()({
 	},
 	variants: circularProgressVariantValues.map((variant) => ({
 		name: variant,
-		label: variantLabels$12[variant],
+		label: variantLabels$13[variant],
 		example: {
 			component: "CircularProgress",
 			props: {
-				...variantProps$1[variant],
+				...variantProps$2[variant],
 				color: "primary",
 				size: 40
 			},
@@ -1012,7 +1824,7 @@ const box = {
 	bg: "secondary",
 	borderRadius: "sm"
 };
-const items$1 = [
+const items$2 = [
 	"A",
 	"B",
 	"C"
@@ -1034,7 +1846,7 @@ const flexCatalog = defineCatalogEntry()({
 			...box,
 			flexDirection: "column"
 		},
-		children: items$1
+		children: items$2
 	},
 	variants: ["column", "row"].map((flexDirection) => ({
 		name: flexDirection,
@@ -1045,7 +1857,7 @@ const flexCatalog = defineCatalogEntry()({
 				...box,
 				flexDirection
 			},
-			children: items$1
+			children: items$2
 		}
 	})),
 	options: {
@@ -1419,30 +2231,146 @@ const imageCatalog = defineCatalogEntry()({
 	summary: "An image with an optional fallback source, sized and fitted through props.",
 	isPlaceable: true,
 	example: {
-		component: "Image",
+		component: "Image",
+		props: {
+			...picture,
+			objectFit: "contain"
+		},
+		children: []
+	},
+	variants: imageObjectFitValues.map((objectFit) => ({
+		name: objectFit,
+		label: fitLabels[objectFit],
+		example: {
+			component: "Image",
+			props: {
+				...picture,
+				objectFit
+			},
+			children: []
+		}
+	})),
+	options: {
+		objectFit: { values: imageObjectFitValues },
+		borderRadius: { scale: "radii" }
+	},
+	content: {}
+});
+//#endregion
+//#region src/RangeInput/RangeInput.catalog.ts
+const rangeInputTrackValues = ["normal", "inverted"];
+const rangeInputValueLabelValues = [
+	"off",
+	"auto",
+	"on"
+];
+const rangeInputOrientationValues = ["horizontal", "vertical"];
+const variantProps$1 = {
+	single: {
+		defaultValue: 40,
+		"aria-label": "Value"
+	},
+	range: { defaultValue: [20, 70] },
+	marks: {
+		defaultValue: 30,
+		step: 10,
+		marks: true,
+		"aria-label": "Value"
+	}
+};
+const variantLabels$12 = {
+	single: "One thumb",
+	range: "A range",
+	marks: "With marks"
+};
+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: "RangeInput",
 		props: {
-			...picture,
-			objectFit: "contain"
+			defaultValue: 40,
+			"aria-label": "Value"
 		},
 		children: []
 	},
-	variants: imageObjectFitValues.map((objectFit) => ({
-		name: objectFit,
-		label: fitLabels[objectFit],
+	variants: Object.keys(variantProps$1).map((name) => ({
+		name,
+		label: variantLabels$12[name],
 		example: {
-			component: "Image",
-			props: {
-				...picture,
-				objectFit
-			},
+			component: "RangeInput",
+			props: variantProps$1[name],
 			children: []
 		}
 	})),
 	options: {
-		objectFit: { values: imageObjectFitValues },
-		borderRadius: { scale: "radii" }
+		min: { values: [
+			0,
+			10,
+			-50
+		] },
+		max: { values: [
+			10,
+			100,
+			1e3
+		] },
+		step: {
+			values: [
+				1,
+				5,
+				10,
+				.1
+			],
+			default: 1
+		},
+		shiftStep: {
+			values: [10, 20],
+			default: 10
+		},
+		marks: {
+			values: [true, false],
+			default: false
+		},
+		orientation: {
+			values: rangeInputOrientationValues,
+			default: "horizontal"
+		},
+		track: {
+			values: rangeInputTrackValues,
+			default: "normal"
+		},
+		valueLabel: {
+			values: rangeInputValueLabelValues,
+			default: "off"
+		},
+		shouldSwapThumbs: {
+			values: [true, false],
+			default: true
+		},
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		color: {
+			scale: "palette",
+			default: "primary"
+		},
+		error: {
+			values: [true, false],
+			default: false
+		},
+		disabled: {
+			values: [true, false],
+			default: false
+		}
 	},
-	content: {}
+	content: {},
+	twoWay: {
+		prop: "value",
+		event: "onChange",
+		read: "argument"
+	},
+	domEvents: ["onChangeCommitted"]
 });
 //#endregion
 //#region src/LinearProgress/LinearProgress.catalog.ts
@@ -1640,6 +2568,7 @@ const menuCatalog = defineCatalogEntry()({
 			],
 			default: 8
 		},
+		borderRadius: { scale: "radii" },
 		layer: { scale: "zOrder" },
 		marginThreshold: { scale: "space" },
 		defaultOpen: {
@@ -1980,6 +2909,131 @@ const nativeSelectCatalog = defineCatalogEntry()({
 	preview: { width: 220 }
 });
 //#endregion
+//#region src/NumberInput/NumberInput.catalog.ts
+const numberInputSpinButtonsValues = [
+	"stacked",
+	"sides",
+	"none"
+];
+const numberInputVariantValues = [
+	"default",
+	"outlined",
+	"underline",
+	"text"
+];
+const spinLabels = {
+	stacked: "Stacked",
+	sides: "Either side",
+	none: "No buttons"
+};
+const example = {
+	defaultValue: 5,
+	min: 0,
+	max: 10,
+	incrementLabel: "Increase",
+	decrementLabel: "Decrease",
+	"aria-label": "Quantity"
+};
+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: "NumberInput",
+		props: {
+			...example,
+			variant: "outlined"
+		},
+		children: []
+	},
+	variants: numberInputSpinButtonsValues.map((spinButtons) => ({
+		name: spinButtons,
+		label: spinLabels[spinButtons],
+		example: {
+			component: "NumberInput",
+			props: {
+				...example,
+				variant: "outlined",
+				spinButtons
+			},
+			children: []
+		}
+	})),
+	options: {
+		min: { values: [
+			0,
+			1,
+			-10
+		] },
+		max: { values: [10, 100] },
+		step: {
+			values: [
+				1,
+				.5,
+				5
+			],
+			default: 1
+		},
+		spinButtons: {
+			values: numberInputSpinButtonsValues,
+			default: "stacked"
+		},
+		variant: {
+			values: numberInputVariantValues,
+			default: "default"
+		},
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		color: {
+			scale: "palette",
+			default: "primary"
+		},
+		textColor: {
+			scale: "text",
+			default: "primary"
+		},
+		shouldSnapOnStep: {
+			values: [true, false],
+			default: false
+		},
+		shouldScrubOnWheel: {
+			values: [true, false],
+			default: false
+		},
+		error: {
+			values: [true, false],
+			default: false
+		},
+		disabled: {
+			values: [true, false],
+			default: false
+		},
+		readOnly: {
+			values: [true, false],
+			default: false
+		},
+		required: {
+			values: [true, false],
+			default: false
+		},
+		fullWidth: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: {
+		startContent: "child",
+		endContent: "child"
+	},
+	twoWay: {
+		prop: "value",
+		event: "onChange",
+		read: "argument"
+	},
+	domEvents: ["onChangeCommitted"]
+});
+//#endregion
 //#region src/Pagination/Pagination.catalog.ts
 const paginationVariantValues = ["text", "outlined"];
 const paginationShapeValues = ["circular", "rounded"];
@@ -2371,6 +3425,92 @@ const radioCatalog = defineCatalogEntry()({
 	}
 });
 //#endregion
+//#region src/Rating/Rating.catalog.ts
+const ratingPrecisionValues = [1, .5];
+const sizes = {
+	sm: "Small",
+	md: "Medium",
+	lg: "Large"
+};
+const ratingCatalog = defineCatalogEntry()({
+	summary: "A row of icons the user sets as a rating, or a read-only display of one.",
+	isPlaceable: true,
+	example: {
+		component: "Rating",
+		props: {
+			defaultValue: 3,
+			"aria-label": "Rating",
+			emptyLabelText: "No rating"
+		},
+		children: []
+	},
+	variants: Object.keys(sizes).map((size) => ({
+		name: size,
+		label: sizes[size],
+		example: {
+			component: "Rating",
+			props: {
+				defaultValue: 3,
+				size,
+				"aria-label": "Rating"
+			},
+			children: []
+		}
+	})),
+	options: {
+		max: {
+			values: [
+				3,
+				5,
+				10
+			],
+			default: 5
+		},
+		precision: {
+			values: ratingPrecisionValues,
+			default: 1
+		},
+		highlightSelectedOnly: {
+			values: [true, false],
+			default: false
+		},
+		readOnly: {
+			values: [true, false],
+			default: false
+		},
+		disabled: {
+			values: [true, false],
+			default: false
+		},
+		required: {
+			values: [true, false],
+			default: false
+		},
+		error: {
+			values: [true, false],
+			default: false
+		},
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		color: {
+			scale: "palette",
+			default: "warning"
+		}
+	},
+	content: {
+		icon: "child",
+		emptyIcon: "child"
+	},
+	twoWay: {
+		prop: "value",
+		event: "onChange",
+		read: "argument"
+	},
+	domEvents: ["onChangeActive"]
+});
+//#endregion
 //#region src/Select/Select.catalog.ts
 const selectVariantValues = [
 	"default",
@@ -2478,7 +3618,7 @@ const variantLabels$7 = {
 	outlined: "Outlined",
 	plain: "Plain"
 };
-const items = [
+const items$1 = [
 	node("SidebarItem", {
 		icon: "folder",
 		label: "Directory",
@@ -2508,7 +3648,7 @@ const sidebarCatalog = defineCatalogEntry()({
 	example: {
 		component: "Sidebar",
 		props: content$1,
-		children: items
+		children: items$1
 	},
 	variants: sidebarVariantValues.map((variant) => ({
 		name: variant,
@@ -2519,7 +3659,7 @@ const sidebarCatalog = defineCatalogEntry()({
 				...content$1,
 				variant
 			},
-			children: items
+			children: items$1
 		}
 	})),
 	options: {
@@ -3665,6 +4805,120 @@ const toggleButtonGroupCatalog = defineCatalogEntry()({
 	}
 });
 //#endregion
+//#region src/TransferList/TransferList.catalog.ts
+const items = [
+	{
+		value: "apple",
+		label: "Apple"
+	},
+	{
+		value: "banana",
+		label: "Banana"
+	},
+	{
+		value: "cherry",
+		label: "Cherry"
+	},
+	{
+		value: "date",
+		label: "Date",
+		disabled: true
+	}
+];
+const names = {
+	leftLabel: "Choices",
+	rightLabel: "Chosen",
+	moveRightLabel: "Move right",
+	moveLeftLabel: "Move left"
+};
+const moveAllNames = {
+	moveAllRightLabel: "Move all right",
+	moveAllLeftLabel: "Move all left"
+};
+const transferListCatalog = defineCatalogEntry()({
+	summary: "Two lists and the buttons that move the checked items from one to the other.",
+	isPlaceable: true,
+	example: {
+		component: "TransferList",
+		props: {
+			items,
+			defaultValue: ["cherry"],
+			...names
+		},
+		children: []
+	},
+	variants: [
+		{
+			name: "basic",
+			label: "Basic",
+			example: {
+				component: "TransferList",
+				props: {
+					items,
+					...names
+				},
+				children: []
+			}
+		},
+		{
+			name: "move-all",
+			label: "With move all",
+			example: {
+				component: "TransferList",
+				props: {
+					items,
+					shouldShowMoveAll: true,
+					...names,
+					...moveAllNames
+				},
+				children: []
+			}
+		},
+		{
+			name: "select-all",
+			label: "With select all",
+			example: {
+				component: "TransferList",
+				props: {
+					items,
+					hasSelectAll: true,
+					...names
+				},
+				children: []
+			}
+		}
+	],
+	options: {
+		shouldShowMoveAll: {
+			values: [true, false],
+			default: false
+		},
+		hasSelectAll: {
+			values: [true, false],
+			default: false
+		},
+		disabled: {
+			values: [true, false],
+			default: false
+		},
+		error: {
+			values: [true, false],
+			default: false
+		},
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		color: { scale: "palette" }
+	},
+	content: {},
+	twoWay: {
+		prop: "value",
+		event: "onChange",
+		read: "argument"
+	}
+});
+//#endregion
 //#region src/Typography/Typography.catalog.ts
 const typographyAlignValues = [
 	"left",
@@ -3762,6 +5016,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"
@@ -3794,6 +5118,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",
@@ -3848,6 +5192,10 @@ const catalogSources = {
 		entry: imageCatalog,
 		folder: "Image"
 	},
+	RangeInput: {
+		entry: rangeInputCatalog,
+		folder: "RangeInput"
+	},
 	LinearProgress: {
 		entry: linearProgressCatalog,
 		folder: "LinearProgress"
@@ -3887,6 +5235,10 @@ const catalogSources = {
 		entry: nativeSelectCatalog,
 		folder: "NativeSelect"
 	},
+	NumberInput: {
+		entry: numberInputCatalog,
+		folder: "NumberInput"
+	},
 	Pagination: {
 		entry: paginationCatalog,
 		folder: "Pagination"
@@ -3920,6 +5272,10 @@ const catalogSources = {
 		entry: radioCatalog,
 		folder: "Radio"
 	},
+	Rating: {
+		entry: ratingCatalog,
+		folder: "Rating"
+	},
 	Select: {
 		entry: selectCatalog,
 		folder: "Select"
@@ -4037,6 +5393,10 @@ const catalogSources = {
 		folder: "ToggleButton",
 		family: "ToggleButton"
 	},
+	TransferList: {
+		entry: transferListCatalog,
+		folder: "TransferList"
+	},
 	Typography: {
 		entry: typographyCatalog,
 		folder: "Typography"