@stealthscale/component-disclosure 0.1.0 → 0.2.3

package/dist/recipe-BdO9ZFWU.js

@@ -1,708 +0,0 @@
-import { below, controlSizes, defineSlotRecipe, divider, highlightVariants, iconSizes, insetSizes, interactive, justifyVariants, motion, onSlot, onSlots, row, sizeVariants, textSizes, truncate } from "@stealthscale/theme/authoring";
-//#region src/collapsible/recipe.ts
-/**
-* States what a collapsible is: a control that shows and hides the block beneath it.
-*
-* @remarks
-*   Four parts. The root frames the pair, the trigger is what a person presses, the content is what
-*   appears, and the indicator is the mark that turns as it does.
-*   The trigger fills the width it is given and pushes its indicator to the end, because a
-*   disclosure is read as a row and a mark floating beside the words reads as part of them. It
-*   reads the control scale, so a collapsible lines up with a button of the same name beside it.
-*   The content animates from the height the machine measures. Both motions are animation styles
-*   the theme owns, so a reader who asked for less motion is answered in the theme rather than
-*   here, and the height the animation runs to is a custom property the machine sets.
-*/
-/**
-* Draws an unframed collapsible at the middle size, sliding open, until a caller says otherwise.
-*/
-const recipe$4 = defineSlotRecipe({
-	base: {
-		content: { overflow: "hidden" },
-		indicator: {
-			_motionReduce: { transitionDuration: "none" },
-			_open: { rotate: "180deg" },
-			alignItems: "center",
-			display: "inline-flex",
-			flexShrink: "0",
-			justifyContent: "center",
-			transitionDuration: "fast",
-			transitionProperty: "transform",
-			transitionTimingFunction: "out"
-		},
-		root: { width: "full" },
-		trigger: {
-			...interactive(),
-			alignItems: "center",
-			display: "flex",
-			justifyContent: "space-between",
-			textAlign: "start",
-			width: "full"
-		}
-	},
-	className: "collapsible",
-	defaultVariants: {
-		motion: "slide",
-		size: "md",
-		variant: "plain"
-	},
-	jsx: [/^Collapsible(\.\w+)?$/u],
-	slots: [
-		"root",
-		"trigger",
-		"content",
-		"indicator"
-	],
-	variants: {
-		/**
-		* How the block appears and goes.
-		*/
-		motion: {
-			fade: { content: {
-				_closed: { animationStyle: "fade.out" },
-				_open: { animationStyle: "fade.in" }
-			} },
-			none: { content: { animation: "none" } },
-			slide: { content: {
-				_closed: { animationStyle: "collapse.out" },
-				_open: { animationStyle: "collapse.in" }
-			} }
-		},
-		/**
-		* How much room the pair takes, which the trigger, the block and the mark step together.
-		*/
-		size: onSlots({
-			content: insetSizes(),
-			indicator: iconSizes(),
-			trigger: controlSizes()
-		}),
-		/**
-		* How the pair is set off from the page around it.
-		*/
-		variant: {
-			outline: {
-				root: {
-					borderColor: "border",
-					borderRadius: "l2",
-					borderWidth: "sm"
-				},
-				trigger: { _open: {
-					borderBlockEndColor: "border",
-					borderBlockEndWidth: "sm"
-				} }
-			},
-			plain: { root: { borderWidth: "0" } },
-			subtle: {
-				root: {
-					background: "bg.muted",
-					borderRadius: "l2"
-				},
-				trigger: { _hover: { background: "bg.emphasized" } }
-			},
-			surface: {
-				root: {
-					background: "bg.panel",
-					borderColor: "border",
-					borderRadius: "l2",
-					borderWidth: "sm"
-				},
-				trigger: { _open: {
-					borderBlockEndColor: "border",
-					borderBlockEndWidth: "sm"
-				} }
-			}
-		}
-	}
-});
-//#endregion
-//#region src/menu/recipe.ts
-/**
-* States what a menu is: a list of things a reader chooses from, opened from a control and closed
-* by choosing.
-*
-* @remarks
-*   The machine names no root, because a menu is a control and a panel that floats beside it rather
-*   than a thing that frames the two. This recipe adds one anyway, drawn with `display: contents`
-*   so it takes part in no layout, because the control and the panel are siblings and a slot recipe
-*   hands its variants down from an element above them both. The same root carries a submenu, whose
-*   control sits among the rows of the menu above it.
-*   The panel is placed by the machine, which writes its position as inline styles beside four
-*   custom properties the positioner is measured into. The panel reads one of them for its height,
-*   so a menu opened near the edge of a window scrolls inside itself rather than running off the
-*   page. It states no width: the machine sets `max-content`, so the panel is as wide as its widest
-*   row, and a caller wanting the control's width asks the machine for it.
-*   The panel enters from the side it was placed on rather than always from the top, which is what
-*   the `slide-fade` motion reads off the placement the machine writes.
-*   A row that carries a mark leaves room for one in a gutter the size axis measures, and every row
-*   of a menu that offers marks leaves the same gutter, so a list of options does not step sideways
-*   as the marks appear.
-*/
-/**
-* Lists the three steps a menu is offered at, which is what a list of rows needs and no more.
-*/
-const SIZES = [
-	"sm",
-	"md",
-	"lg"
-];
-/**
-* Fixes the property the gutter for a row's mark is measured into, which the size axis writes and
-* the inset axis and every marked row read.
-*/
-const GUTTER = "--menu-gutter";
-/**
-* Fixes the property the panel's fill is stated in, which the arrow reads so it is drawn in the
-* same fill as the panel it points away from.
-*/
-const SURFACE = "var(--menu-surface)";
-/**
-* Measures the gutter one step leaves for a mark: the room at the panel's edge, the mark itself,
-* and the gap between the mark and the words beside it.
-*/
-function gutter(size) {
-	return `calc({spacing.inset.${size}} + {sizes.icon.${size}} + {spacing.gap.${size}})`;
-}
-/**
-* Draws a surfaced menu at the middle size, tinting the row the reader is on, until a caller says
-* otherwise.
-*/
-const recipe$3 = defineSlotRecipe({
-	base: {
-		arrow: {
-			"--arrow-background": SURFACE,
-			"--arrow-size": "sizes.icon.sm"
-		},
-		arrowTip: {
-			borderInlineStartWidth: "sm",
-			borderTopWidth: "sm"
-		},
-		content: {
-			...motion("slide-fade.in", "slide-fade.out"),
-			_focusVisible: { focusVisibleRing: "outside" },
-			display: "flex",
-			flexDirection: "column",
-			maxBlockSize: "var(--available-height)",
-			outline: "0",
-			overflowY: "auto",
-			overscrollBehavior: "contain",
-			zIndex: "dropdown"
-		},
-		contextTrigger: { cursor: "menuitem" },
-		indicator: {
-			_open: { rotate: "180deg" },
-			transitionDuration: "fast"
-		},
-		item: {
-			...row(),
-			"&[data-tone=critical]": {
-				color: "colorPalette.fg",
-				colorPalette: "error"
-			},
-			[`&[data-type]`]: { paddingInlineStart: `var(${GUTTER})` },
-			colorPalette: "neutral"
-		},
-		itemGroup: {
-			display: "flex",
-			flexDirection: "column"
-		},
-		itemGroupLabel: {
-			color: "fg.muted",
-			fontWeight: "semibold"
-		},
-		itemIndicator: {
-			alignItems: "center",
-			display: "inline-flex",
-			insetBlockStart: "50%",
-			justifyContent: "center",
-			position: "absolute",
-			translate: "0 -50%"
-		},
-		itemText: {
-			...truncate(),
-			flex: "1"
-		},
-		positioner: { position: "relative" },
-		root: { display: "contents" },
-		separator: {
-			...divider(),
-			borderColor: "border.muted"
-		},
-		trigger: { ...interactive() },
-		triggerItem: {
-			...row(),
-			colorPalette: "neutral"
-		}
-	},
-	className: "menu",
-	defaultVariants: {
-		highlight: "tint",
-		size: "md",
-		variant: "surface"
-	},
-	jsx: [/^Menu(\.\w+)?$/u],
-	slots: [
-		"root",
-		"trigger",
-		"contextTrigger",
-		"triggerItem",
-		"indicator",
-		"positioner",
-		"content",
-		"itemGroup",
-		"itemGroupLabel",
-		"item",
-		"itemText",
-		"itemIndicator",
-		"separator",
-		"arrow",
-		"arrowTip"
-	],
-	variants: {
-		/**
-		* How the row the reader is on is marked.
-		*/
-		highlight: onSlots({
-			item: highlightVariants(),
-			triggerItem: highlightVariants()
-		}),
-		/**
-		* Whether every row leaves the gutter a mark sits in, for a menu whose rows lead with an icon.
-		*/
-		inset: { true: {
-			item: { paddingInlineStart: `var(${GUTTER})` },
-			triggerItem: { paddingInlineStart: `var(${GUTTER})` }
-		} },
-		/**
-		* How much room a row takes, and how loud its words are.
-		*/
-		size: onSlots({
-			content: sizeVariants((size) => ({
-				padding: `gap.${below(size)}`,
-				scrollPadding: `gap.${below(size)}`
-			}), SIZES),
-			item: sizeVariants((size) => ({
-				gap: `gap.${below(size)}`,
-				[GUTTER]: gutter(below(size)),
-				minBlockSize: `control.${below(size)}`,
-				paddingInline: `inset.${below(size)}`,
-				textStyle: `label.${below(size)}`
-			}), SIZES),
-			itemGroupLabel: sizeVariants((size) => ({
-				paddingBlock: `gap.${below(below(size))}`,
-				paddingInline: `inset.${below(size)}`,
-				textStyle: `label.${below(below(size))}`
-			}), SIZES),
-			itemIndicator: sizeVariants((size) => ({
-				boxSize: `icon.${below(size)}`,
-				insetInlineStart: `inset.${below(size)}`
-			}), SIZES),
-			separator: sizeVariants((size) => ({ marginBlock: `gap.${below(size)}` }), SIZES),
-			triggerItem: sizeVariants((size) => ({
-				gap: `gap.${below(size)}`,
-				[GUTTER]: gutter(below(size)),
-				minBlockSize: `control.${below(size)}`,
-				paddingInline: `inset.${below(size)}`,
-				textStyle: `label.${below(size)}`
-			}), SIZES)
-		}),
-		/**
-		* How the panel is set off from the page behind it.
-		*/
-		variant: {
-			elevated: {
-				arrowTip: { borderColor: SURFACE },
-				content: {
-					"--menu-surface": "colors.bg.panel",
-					background: SURFACE,
-					borderRadius: "l3",
-					boxShadow: "xl"
-				}
-			},
-			glass: {
-				arrowTip: { borderColor: "border" },
-				content: {
-					"--menu-surface": "colors.bg.popover",
-					borderRadius: "l3",
-					layerStyle: "glass"
-				}
-			},
-			surface: {
-				arrowTip: { borderColor: "border" },
-				content: {
-					"--menu-surface": "colors.bg.popover",
-					background: SURFACE,
-					borderColor: "border",
-					borderRadius: "l3",
-					borderWidth: "sm",
-					boxShadow: "lg"
-				}
-			}
-		}
-	}
-});
-//#endregion
-//#region src/popover/recipe.ts
-/**
-* States what a popover is: a panel that opens beside a control and holds more than a few words.
-*
-* @remarks
-*   The machine names no root, because a popover is a control and a panel that floats beside it
-*   rather than a thing that frames the two. This recipe adds one anyway, drawn with
-*   `display: contents` so it takes part in no layout, because the control and the panel are
-*   siblings and a slot recipe hands its variants down from an element above them both.
-*   The positioner is placed by the machine, which measures the control and writes the panel's
-*   position as inline styles, so this recipe states nothing about where the panel goes. It grows
-*   from whichever corner the machine placed it against, which is a custom property the machine
-*   sets.
-*   A popover is louder than a tooltip. It holds a heading, a paragraph and often a control, so it
-*   reads at body text and takes the room a panel needs.
-*/
-/**
-* Draws a surfaced popover at the middle size until a caller says otherwise.
-*/
-const recipe$2 = defineSlotRecipe({
-	base: {
-		arrow: {
-			"--arrow-background": "var(--popover-surface)",
-			"--arrow-size": "sizes.icon.sm"
-		},
-		arrowTip: {
-			borderInlineStartWidth: "sm",
-			borderTopWidth: "sm"
-		},
-		closeTrigger: {
-			...interactive(),
-			_hover: { color: "fg" },
-			alignItems: "center",
-			borderRadius: "l1",
-			color: "fg.muted",
-			display: "inline-flex",
-			insetBlockStart: "0",
-			insetInlineEnd: "0",
-			justifyContent: "center",
-			position: "absolute"
-		},
-		content: {
-			...motion("scale-fade.in", "scale-fade.out"),
-			_focusVisible: { focusVisibleRing: "outside" },
-			display: "flex",
-			flexDirection: "column",
-			gap: "gap.sm",
-			position: "relative",
-			transformOrigin: "var(--transform-origin)",
-			zIndex: "popover"
-		},
-		description: { color: "fg.muted" },
-		indicator: {
-			_open: { rotate: "180deg" },
-			transitionDuration: "fast"
-		},
-		positioner: { position: "relative" },
-		root: { display: "contents" },
-		title: { fontWeight: "semibold" }
-	},
-	className: "popover",
-	defaultVariants: {
-		size: "md",
-		variant: "surface"
-	},
-	jsx: [/^Popover(\.\w+)?$/u],
-	slots: [
-		"root",
-		"anchor",
-		"trigger",
-		"indicator",
-		"positioner",
-		"content",
-		"title",
-		"description",
-		"closeTrigger",
-		"arrow",
-		"arrowTip"
-	],
-	variants: {
-		/**
-		* How much room the panel takes, and how loud its heading is.
-		*/
-		size: onSlots({
-			content: insetSizes(),
-			description: textSizes("body"),
-			title: textSizes("heading")
-		}),
-		/**
-		* How the panel is set off from the page behind it.
-		*/
-		variant: {
-			elevated: {
-				arrowTip: { borderColor: "var(--popover-surface)" },
-				content: {
-					"--popover-surface": "colors.bg.panel",
-					background: "var(--popover-surface)",
-					borderRadius: "l3",
-					boxShadow: "xl"
-				}
-			},
-			glass: {
-				arrowTip: { borderColor: "border" },
-				content: {
-					"--popover-surface": "colors.bg.popover",
-					borderRadius: "l3",
-					layerStyle: "glass"
-				}
-			},
-			surface: {
-				arrowTip: { borderColor: "border" },
-				content: {
-					"--popover-surface": "colors.bg.popover",
-					background: "var(--popover-surface)",
-					borderColor: "border",
-					borderRadius: "l3",
-					borderWidth: "sm",
-					boxShadow: "lg"
-				}
-			}
-		}
-	}
-});
-//#endregion
-//#region src/tabs/recipe.ts
-/**
-* States what a set of tabs is: one strip of controls, and the panel each of them shows.
-*
-* @remarks
-*   Five parts. The root frames the whole, the list is the strip, a trigger is one tab, the content
-*   is a panel, and the indicator is the bar that slides under the tab in force.
-*   Which way the set runs is the machine's, not an axis of its own. It writes the orientation onto
-*   every part, and the compiler ships a condition that reads it, so the strip turns into a column
-*   and the indicator moves to its inline edge without a caller stating anything twice.
-*   The indicator is positioned from custom properties the machine measures, so the recipe states
-*   its thickness and its colour and never its place.
-*/
-/**
-* Draws a line of tabs at the middle size until a caller says otherwise.
-*/
-const recipe$1 = defineSlotRecipe({
-	base: {
-		content: {
-			_focusVisible: { focusVisibleRing: "outside" },
-			outline: "none"
-		},
-		indicator: {
-			borderRadius: "l1",
-			zIndex: "1"
-		},
-		list: {
-			_horizontal: { flexDirection: "row" },
-			_vertical: { flexDirection: "column" },
-			display: "flex",
-			position: "relative"
-		},
-		root: {
-			_horizontal: { flexDirection: "column" },
-			_vertical: { flexDirection: "row" },
-			display: "flex",
-			width: "full"
-		},
-		trigger: {
-			...interactive(),
-			_disabled: { cursor: "disabled" },
-			alignItems: "center",
-			display: "inline-flex",
-			justifyContent: "center",
-			position: "relative",
-			whiteSpace: "nowrap"
-		}
-	},
-	className: "tabs",
-	defaultVariants: {
-		size: "md",
-		variant: "line"
-	},
-	jsx: [/^Tabs(\.\w+)?$/u],
-	slots: [
-		"root",
-		"list",
-		"trigger",
-		"content",
-		"indicator"
-	],
-	variants: {
-		/**
-		* Whether the controls share the strip's width between them.
-		*/
-		fitted: { true: { trigger: { flex: "1" } } },
-		/**
-		* Where the controls sit when they do not fill the strip.
-		*/
-		justify: onSlot("list", justifyVariants()),
-		/**
-		* How much room the strip and the panel take.
-		*/
-		size: onSlots({
-			content: insetSizes(),
-			trigger: controlSizes()
-		}),
-		/**
-		* How the strip is drawn, and what marks the tab in force.
-		*/
-		variant: {
-			enclosed: {
-				indicator: {
-					background: "bg.panel",
-					borderColor: "border",
-					borderWidth: "sm"
-				},
-				list: {
-					background: "bg.muted",
-					borderRadius: "l2",
-					padding: "inset.xs"
-				},
-				trigger: {
-					_selected: { color: "fg" },
-					borderRadius: "l1",
-					color: "fg.muted"
-				}
-			},
-			line: {
-				indicator: {
-					_horizontal: {
-						bottom: "0",
-						height: "{borderWidths.md}",
-						width: "var(--width)"
-					},
-					_vertical: {
-						height: "var(--height)",
-						insetInlineStart: "0",
-						width: "{borderWidths.md}"
-					},
-					background: "colorPalette.solid"
-				},
-				list: {
-					_horizontal: {
-						borderBlockEndColor: "border",
-						borderBlockEndWidth: "sm"
-					},
-					_vertical: {
-						borderInlineEndColor: "border",
-						borderInlineEndWidth: "sm"
-					}
-				},
-				trigger: {
-					_hover: { color: "fg" },
-					_selected: { color: "colorPalette.fg" },
-					color: "fg.muted"
-				}
-			},
-			plain: {
-				indicator: { display: "none" },
-				trigger: {
-					_selected: { color: "fg" },
-					color: "fg.muted"
-				}
-			},
-			subtle: {
-				indicator: {
-					background: "colorPalette.subtle",
-					borderRadius: "l1"
-				},
-				trigger: {
-					_selected: { color: "colorPalette.fg" },
-					color: "fg.muted"
-				}
-			}
-		}
-	}
-});
-//#endregion
-//#region src/tooltip/recipe.ts
-/**
-* States what a tooltip is: a short label that appears beside what a pointer rests on.
-*
-* @remarks
-*   The machine names no root, because a tooltip is a control and a box that floats beside it
-*   rather than a thing that frames the two. This recipe adds one anyway, drawn with
-*   `display: contents` so it takes part in no layout, because the control and the box are
-*   siblings and a slot recipe hands its variants down from an element above them both.
-*   The positioner is placed by the machine, which measures the trigger and writes the box's
-*   position as inline styles, so this recipe states nothing about where the box goes. It states
-*   what the box looks like, and it grows from whichever corner the machine placed it against,
-*   which is a custom property the machine sets.
-*   Both looks name their surface once as a custom property, because the arrow has to be filled in
-*   the same colour as the box and reads it from there rather than restating it.
-*   A tooltip is quieter than a popover. It holds a few words, so it reads at a label rather than
-*   at body text, and it is capped narrow so a long hint wraps rather than running the width of the
-*   page.
-*/
-/**
-* Draws an inverted tooltip at the middle size until a caller says otherwise.
-*/
-const recipe = defineSlotRecipe({
-	base: {
-		arrow: {
-			"--arrow-background": "var(--tooltip-surface)",
-			"--arrow-size": "sizes.icon.xs"
-		},
-		arrowTip: {
-			borderInlineStartWidth: "sm",
-			borderTopWidth: "sm"
-		},
-		content: {
-			...motion("scale-fade.in", "scale-fade.out"),
-			background: "var(--tooltip-surface)",
-			borderRadius: "l2",
-			boxShadow: "md",
-			fontWeight: "medium",
-			maxWidth: "xs",
-			textWrap: "pretty",
-			transformOrigin: "var(--transform-origin)"
-		},
-		positioner: { position: "relative" },
-		root: { display: "contents" }
-	},
-	className: "tooltip",
-	defaultVariants: {
-		size: "md",
-		variant: "inverted"
-	},
-	jsx: [/^Tooltip(\.\w+)?$/u],
-	slots: [
-		"root",
-		"trigger",
-		"positioner",
-		"content",
-		"arrow",
-		"arrowTip"
-	],
-	variants: {
-		/**
-		* How much room the box takes, and how loud its words are.
-		*/
-		size: onSlot("content", sizeVariants((size) => ({
-			padding: `inset.${size}`,
-			textStyle: `label.${size}`
-		}))),
-		/**
-		* How the box is set off from the page behind it.
-		*/
-		variant: {
-			inverted: {
-				arrowTip: { borderColor: "var(--tooltip-surface)" },
-				content: {
-					"--tooltip-surface": "colors.bg.inverted",
-					color: "fg.inverted"
-				}
-			},
-			surface: {
-				arrowTip: { borderColor: "border" },
-				content: {
-					"--tooltip-surface": "colors.bg.popover",
-					borderColor: "border",
-					borderWidth: "sm",
-					color: "fg"
-				}
-			}
-		}
-	}
-});
-//#endregion
-export { recipe$4 as a, recipe$3 as i, recipe$1 as n, recipe$2 as r, recipe as t };