@stealthscale/component-actions 0.1.0 → 0.2.2

package/dist/index.js

@@ -1,32 +1,997 @@
-import { t as recipe } from "./recipe-19HSwhAG.js";
-import "react";
-import { createRecipeContext } from "@stealthscale/theme";
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
+import { n as recipe$1, r as recipe, t as recipe$2 } from "./recipe-BhcK7PNL.js";
+import { createElement, useId } from "react";
+import { createRecipeContext, createSlotRecipeContext } from "@stealthscale/theme";
+import { c } from "react/compiler-runtime";
+import * as clipboard from "@zag-js/clipboard";
+import { mergeProps, normalizeProps, useMachine } from "@zag-js/react";
+import { createSplitProps } from "@zag-js/utils";
+import { createRequiredContext, omitUndefined, splitEnumerable, usePresence } from "@stealthscale/hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useColorMode } from "@stealthscale/provider-color-mode";
+import { downloadFile } from "@zag-js/file-utils";
+import * as toggle from "@zag-js/toggle-group";
+import { Group } from "@stealthscale/component-layout";
 //#region src/button/context.ts
 /**
-* Binds the button's recipe to the elements that draw it.
+* Binds the button recipe to the elements that render it.
 *
 * @remarks
-*   Apart from the recipe, because an application's compiler reads the recipe at build time and
-*   the binding needs the runtime. A recipe file that also bound one would put the runtime behind
-*   every compiler configuration that reads it.
+*   The binding is kept out of `recipe.ts` because an application's style compiler imports the
+*   recipe at build time, and a binding there would pull the React runtime into that import.
 */
 /**
-* Binds the recipe once, for the button, for the square that holds one glyph, and for whatever
-* sets their variants from above.
+* Supplies the element factory `Button` and `IconButton` are built from, and the provider an
+* ancestor sets their variants through.
 */
-const { PropsProvider, withContext } = createRecipeContext(recipe);
+const { PropsProvider, withContext: withContext$2 } = createRecipeContext(recipe);
 //#endregion
 //#region src/button/button.ts
 /**
-* Draws a button in a look, a size and a status, square where it holds one glyph.
+* Renders a `button` element styled by the button recipe.
+*
+* @remarks
+*   The native element provides focus, activation with Space and Enter, and an accessible name from
+*   its content. The recipe supplies every style, so a theme that extends the recipe restyles every
+*   button. Pass `as` to render another element, such as an anchor.
+*/
+/**
+* Renders an element with the button recipe's classes.
+*/
+const Bound$1 = withContext$2("button");
+/**
+* Renders a `button` element with `type` defaulting to `button`, so a button inside a form does not
+* submit it.
+*
+* @remarks
+*   An element that `as` names takes a `type` only from the caller, because an `a` reads `type` as
+*   the media type of the page it opens.
+* @param props - The recipe's variants and the props of the element.
+* @returns The element with the button's classes.
+*/
+function Button(props) {
+	return createElement(Bound$1, {
+		type: props.as === void 0 ? "button" : void 0,
+		...props
+	});
+}
+//#endregion
+//#region src/button/icon-button.ts
+/**
+* Renders a square button that contains one icon and requires an accessible name.
+*
+* @remarks
+*   It binds the button recipe with `shape` defaulting to `square`, so a theme that restyles the
+*   button restyles it too. An icon provides no text, so the props type requires `aria-label` or
+*   `aria-labelledby`. The union makes an unnamed icon button a type error, where a lint rule would
+*   only warn.
+*/
+/**
+* Renders an element with the button recipe's classes and `shape` defaulting to `square`.
+*/
+const Bound = withContext$2("button", { defaultProps: { shape: "square" } });
+/**
+* Renders a square `button` element with `type` defaulting to `button`.
+*
+* @remarks
+*   An element that `as` names takes a `type` only from the caller, because an `a` reads `type` as
+*   the media type of the page it opens.
+* @param props - The recipe's variants and the props of the element.
+* @returns The element with the button's classes.
+*/
+function Square(props) {
+	return createElement(Bound, {
+		type: props.as === void 0 ? "button" : void 0,
+		...props
+	});
+}
+/**
+* Renders a square button around one icon, named by `aria-label` or `aria-labelledby`.
+*/
+const IconButton = Square;
+//#endregion
+//#region src/clipboard/machine.ts
+/**
+* Connects the Zag clipboard machine and provides its API to the parts.
+*
+* @remarks
+*   The root starts one machine, and every part reads the API from context, so the input, the
+*   trigger and the indicator report the same state. The machine derives the label and input IDs
+*   from `id`, so a caller's ID appears in the label's `for` attribute.
+*/
+/**
+* Context through which the root provides the connected API to its parts.
+*
+* @remarks
+*   `useClipboard` throws when no `Clipboard.Root` is mounted above the calling part.
+*/
+const [ApiProvider$1, useClipboard] = createRequiredContext("Clipboard");
+/**
+* Starts the clipboard machine and returns its connected API.
+*
+* @param options - Machine settings split from the root's props. A generated ID is used when `id`
+*   is absent.
+*/
+function useClipboardMachine(options) {
+	const $ = c(5);
+	const generated = useId();
+	let t0;
+	if ($[0] !== options) {
+		t0 = omitUndefined(options);
+		$[0] = options;
+		$[1] = t0;
+	} else t0 = $[1];
+	const t1 = options.id ?? generated;
+	let t2;
+	if ($[2] !== t0 || $[3] !== t1) {
+		t2 = {
+			...t0,
+			id: t1
+		};
+		$[2] = t0;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return clipboard.connect(useMachine(clipboard.machine, t2), normalizeProps);
+}
+/**
+* Splits the root's props into machine settings and element props.
+*
+* @remarks
+*   The key list is `clipboard.props` without `translations`, so it follows the installed machine
+*   version. The machine's own splitter types `id` as required, and the root generates the ID after
+*   splitting, so the splitter is rebuilt over `ClipboardOptions` with `createSplitProps`.
+*/
+const splitClipboardProps = splitEnumerable(createSplitProps(clipboard.props.filter((key) => key !== "translations")));
+//#endregion
+//#region src/clipboard/consumer.ts
+/**
+* Calls the render function with the API of the nearest root.
+*
+* @param props - The render function, as `children`.
+* @returns The tree the render function returns.
+*/
+function Consumer(t0) {
+	const $ = c(3);
+	const { children } = t0;
+	const t1 = useClipboard();
+	let t2;
+	if ($[0] !== children || $[1] !== t1) {
+		t2 = children(t1);
+		$[0] = children;
+		$[1] = t1;
+		$[2] = t2;
+	} else t2 = $[2];
+	return t2;
+}
+//#endregion
+//#region src/clipboard/context.ts
+/**
+* Binds the clipboard slot recipe to the React context its parts share.
+*
+* @remarks
+*   The binding lives outside `recipe.ts`, because the style compiler of an application imports
+*   the recipe at build time and must not load React. It lives outside `machine.ts`, because the
+*   styles and the behaviour change independently.
+*/
+/**
+* Factories that bind an element to a slot: `withProvider` for the root, which provides the
+* variants, and `withContext` for every other part, which reads them.
+*/
+const { withContext: withContext$1, withProvider: withProvider$1 } = createSlotRecipeContext(recipe$1);
+//#endregion
+//#region src/clipboard/control.tsx
+/**
+* `div` bound to the control slot.
+*/
+const Styled$6 = withContext$1("div", "control");
+/**
+* Renders the row with the caller's props merged over the machine's.
+*
+* @param props - Props of the styled `div`.
+* @returns The row, with the `data-copied` attribute the machine sets after a copy.
+*/
+function Control(props) {
+	const $ = c(5);
+	const api = useClipboard();
+	let t0;
+	if ($[0] !== api || $[1] !== props) {
+		t0 = mergeProps(api.getControlProps(), props);
+		$[0] = api;
+		$[1] = props;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Styled$6, { ...t0 });
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+//#endregion
+//#region src/clipboard/indicator.tsx
+/**
+* `span` bound to the indicator slot.
+*/
+const Styled$5 = withContext$1("span", "indicator");
+/**
+* Renders `children` in the idle state and `copied` in the copied state.
+*
+* @param props - The two marks and the props of the styled `span`.
+* @returns The span, hidden from assistive technology unless the caller overrides `aria-hidden`.
+*/
+function Indicator$1(t0) {
+	const $ = c(4);
+	const { children, copied, ...rest } = t0;
+	const api = useClipboard();
+	const T0 = Styled$5;
+	const t1 = mergeProps({ "aria-hidden": true }, api.getIndicatorProps({ copied: api.copied }), rest);
+	const t2 = api.copied ? copied : children;
+	let t3;
+	if ($[0] !== T0 || $[1] !== t1 || $[2] !== t2) {
+		t3 = /* @__PURE__ */ jsx(T0, {
+			...t1,
+			children: t2
+		});
+		$[0] = T0;
+		$[1] = t1;
+		$[2] = t2;
+		$[3] = t3;
+	} else t3 = $[3];
+	return t3;
+}
+//#endregion
+//#region src/clipboard/input.tsx
+/**
+* `input` bound to the input slot.
+*/
+const Styled$4 = withContext$1("input", "input");
+/**
+* Renders the field with the caller's props merged over the machine's.
+*
+* @param props - Props of the styled `input`.
+* @returns The read-only field that holds the machine's value.
+*/
+function Input(props) {
+	const $ = c(5);
+	const api = useClipboard();
+	let t0;
+	if ($[0] !== api || $[1] !== props) {
+		t0 = mergeProps(api.getInputProps(), props);
+		$[0] = api;
+		$[1] = props;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Styled$4, { ...t0 });
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+//#endregion
+//#region src/clipboard/label.tsx
+/**
+* `label` bound to the label slot.
+*/
+const Styled$3 = withContext$1("label", "label");
+/**
+* Renders the label with the caller's props merged over the machine's.
+*
+* @param props - Props of the styled `label`.
+* @returns The label, whose `for` attribute points at the field.
+*/
+function Label(props) {
+	const $ = c(5);
+	const api = useClipboard();
+	let t0;
+	if ($[0] !== api || $[1] !== props) {
+		t0 = mergeProps(api.getLabelProps(), props);
+		$[0] = api;
+		$[1] = props;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Styled$3, { ...t0 });
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+//#endregion
+//#region src/clipboard/root.tsx
+/**
+* `div` bound to the root slot, which provides the recipe's variants to the parts.
+*/
+const Styled$2 = withProvider$1("div", "root");
+/**
+* Starts a clipboard machine and renders the container its parts read from.
+*
+* @param props - Machine settings, recipe variants and `div` props.
+* @returns The container, with the connected API in context.
+*/
+function Root$2(props) {
+	const $ = c(10);
+	let t0;
+	if ($[0] !== props) {
+		t0 = splitClipboardProps(props);
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	const [options, rest] = t0;
+	const api = useClipboardMachine(options);
+	let t1;
+	if ($[2] !== api) {
+		t1 = api.getRootProps();
+		$[2] = api;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== rest || $[5] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Styled$2, {
+			...rest,
+			...t1
+		});
+		$[4] = rest;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== api || $[8] !== t2) {
+		t3 = /* @__PURE__ */ jsx(ApiProvider$1, {
+			value: api,
+			children: t2
+		});
+		$[7] = api;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	return t3;
+}
+//#endregion
+//#region src/clipboard/trigger.tsx
+/**
+* `button` bound to the trigger slot.
+*/
+const Styled$1 = withContext$1("button", "trigger");
+/**
+* Default accessible name in the idle state.
+*/
+const LABEL = "Copy to clipboard";
+/**
+* Default accessible name in the copied state.
+*/
+const COPIED_LABEL = "Copied to clipboard";
+/**
+* Renders the button with the caller's props merged over the machine's.
+*
+* @remarks
+*   An `aria-label` the caller passes takes precedence over both names.
+* @param props - The two accessible names and the props of the styled `button`.
+* @returns The button, wired to the machine's copy handler.
+*/
+function Trigger(t0) {
+	const $ = c(3);
+	const { copiedLabel: t1, label: t2, ...rest } = t0;
+	const copiedLabel = t1 === void 0 ? COPIED_LABEL : t1;
+	const label = t2 === void 0 ? LABEL : t2;
+	const api = useClipboard();
+	const named = { "aria-label": api.copied ? copiedLabel : label };
+	const T0 = Styled$1;
+	const t3 = mergeProps(api.getTriggerProps(), named, rest);
+	let t4;
+	if ($[0] !== T0 || $[1] !== t3) {
+		t4 = /* @__PURE__ */ jsx(T0, { ...t3 });
+		$[0] = T0;
+		$[1] = t3;
+		$[2] = t4;
+	} else t4 = $[2];
+	return t4;
+}
+//#endregion
+//#region src/clipboard/value-text.tsx
+/**
+* `span` bound to the valueText slot.
+*/
+const Styled = withContext$1("span", "valueText");
+/**
+* Renders the caller's children, or the machine's value when there are none.
+*
+* @param props - Props of the styled `span`.
+* @returns The span with the children or the value.
+*/
+function ValueText(t0) {
+	const $ = c(6);
+	let children;
+	let rest;
+	if ($[0] !== t0) {
+		({children, ...rest} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = rest;
+	} else {
+		children = $[1];
+		rest = $[2];
+	}
+	const api = useClipboard();
+	const t1 = children ?? api.value;
+	let t2;
+	if ($[3] !== rest || $[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Styled, {
+			...rest,
+			children: t1
+		});
+		$[3] = rest;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+}
+//#endregion
+//#region src/clipboard/index.ts
+var clipboard_exports = /* @__PURE__ */ __exportAll({
+	Consumer: () => Consumer,
+	Control: () => Control,
+	Indicator: () => Indicator$1,
+	Input: () => Input,
+	Label: () => Label,
+	Root: () => Root$2,
+	Trigger: () => Trigger,
+	ValueText: () => ValueText
+});
+//#endregion
+//#region src/swap/context.ts
+/**
+* Binds the swap's recipe to its parts.
+*
+* @remarks
+*   The binding is apart from the recipe, because a compiler reads the recipe at build time and the
+*   binding imports the runtime.
+*/
+/**
+* Binds the recipe once. The root provides the variants and each indicator reads them.
+*/
+const { withContext, withProvider } = createSlotRecipeContext(recipe$2);
+//#endregion
+//#region src/swap/state.ts
+/**
+* Provides the swap's state from the root to its indicators.
+*/
+/**
+* Creates the context through which the root provides the state to its indicators.
+*
+* @remarks
+*   `useSwapState` throws when no `Swap.Root` is mounted above the calling indicator.
+*/
+const [StateProvider, useSwapState] = createRequiredContext("Swap");
+//#endregion
+//#region src/swap/indicator.tsx
+/**
+* Renders the `span` with the swap's indicator class.
+*/
+const Drawn = withContext("span", "indicator");
+/**
+* Renders the mark with its presence's `data-state` and `inert`, and `data-hidden` in place of
+* `hidden`, under the caller's props.
+*
+* @param props - Which mark this is and the props of a `span`.
+* @returns The `span` element, or nothing while the presence renders nothing.
+*/
+function Indicator(t0) {
+	const $ = c(16);
+	let props;
+	let type;
+	if ($[0] !== t0) {
+		({type, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = type;
+	} else {
+		props = $[1];
+		type = $[2];
+	}
+	const { lazyMount, swap, unmountOnExit } = useSwapState();
+	const t1 = type === "on" ? swap : !swap;
+	let t2;
+	if ($[3] !== lazyMount || $[4] !== t1 || $[5] !== unmountOnExit) {
+		t2 = {
+			lazyMount,
+			present: t1,
+			skipAnimationOnMount: true,
+			unmountOnExit
+		};
+		$[3] = lazyMount;
+		$[4] = t1;
+		$[5] = unmountOnExit;
+		$[6] = t2;
+	} else t2 = $[6];
+	const { props: t3, setNode, unmounted } = usePresence(t2);
+	let hidden;
+	let presented;
+	if ($[7] !== t3) {
+		({hidden, ...presented} = t3);
+		$[7] = t3;
+		$[8] = hidden;
+		$[9] = presented;
+	} else {
+		hidden = $[8];
+		presented = $[9];
+	}
+	if (unmounted) return null;
+	const t4 = hidden ? "" : void 0;
+	let t5;
+	if ($[10] !== presented || $[11] !== props || $[12] !== setNode || $[13] !== t4 || $[14] !== type) {
+		t5 = /* @__PURE__ */ jsx(Drawn, {
+			...presented,
+			"data-hidden": t4,
+			...props,
+			"data-type": type,
+			ref: setNode
+		});
+		$[10] = presented;
+		$[11] = props;
+		$[12] = setNode;
+		$[13] = t4;
+		$[14] = type;
+		$[15] = t5;
+	} else t5 = $[15];
+	return t5;
+}
+//#endregion
+//#region src/swap/root.tsx
+/**
+* Renders the `span` with the swap's root class.
+*/
+const Framed = withProvider("span", "root");
+/**
+* Renders the root and provides which mark shows to the indicators.
+*
+* @param props - Which mark shows, how the marks render while hidden, the motion and the props of a
+*   `span`.
+* @returns The `span` element inside the state's provider.
+*/
+function Root$1(t0) {
+	const $ = c(15);
+	let props;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] !== t0) {
+		({lazyMount: t1, swap: t2, unmountOnExit: t3, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = t1;
+		$[3] = t2;
+		$[4] = t3;
+	} else {
+		props = $[1];
+		t1 = $[2];
+		t2 = $[3];
+		t3 = $[4];
+	}
+	const lazyMount = t1 === void 0 ? false : t1;
+	const swap = t2 === void 0 ? false : t2;
+	const unmountOnExit = t3 === void 0 ? false : t3;
+	let t4;
+	if ($[5] !== lazyMount || $[6] !== swap || $[7] !== unmountOnExit) {
+		t4 = {
+			lazyMount,
+			swap,
+			unmountOnExit
+		};
+		$[5] = lazyMount;
+		$[6] = swap;
+		$[7] = unmountOnExit;
+		$[8] = t4;
+	} else t4 = $[8];
+	const t5 = swap ? "on" : "off";
+	let t6;
+	if ($[9] !== props || $[10] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Framed, {
+			"data-swap": t5,
+			...props
+		});
+		$[9] = props;
+		$[10] = t5;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== t4 || $[13] !== t6) {
+		t7 = /* @__PURE__ */ jsx(StateProvider, {
+			value: t4,
+			children: t6
+		});
+		$[12] = t4;
+		$[13] = t6;
+		$[14] = t7;
+	} else t7 = $[14];
+	return t7;
+}
+//#endregion
+//#region src/swap/index.ts
+var swap_exports = /* @__PURE__ */ __exportAll({
+	Indicator: () => Indicator,
+	Root: () => Root$1
+});
+//#endregion
+//#region src/color-mode-toggle/color-mode-toggle.tsx
+/**
+* Renders the actions `Button` as a ghost, neutral square that sets the other color mode on a press
+* the caller did not cancel.
+*
+* @param props - The two glyphs, the name and the props of a `Button`.
+* @returns The `button` element.
+*/
+function ColorModeToggle(t0) {
+	const $ = c(24);
+	let dark;
+	let light;
+	let onClick;
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({dark, label: t1, light, onClick, ...props} = t0);
+		$[0] = t0;
+		$[1] = dark;
+		$[2] = light;
+		$[3] = onClick;
+		$[4] = props;
+		$[5] = t1;
+	} else {
+		dark = $[1];
+		light = $[2];
+		onClick = $[3];
+		props = $[4];
+		t1 = $[5];
+	}
+	const label = t1 === void 0 ? "Dark mode" : t1;
+	const { colorMode, setColorMode } = useColorMode();
+	const darkened = colorMode === "dark";
+	let t2;
+	if ($[6] !== darkened || $[7] !== onClick || $[8] !== setColorMode) {
+		t2 = (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) setColorMode(darkened ? "light" : "dark");
+		};
+		$[6] = darkened;
+		$[7] = onClick;
+		$[8] = setColorMode;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== dark) {
+		t3 = /* @__PURE__ */ jsx(Indicator, {
+			type: "on",
+			children: dark
+		});
+		$[10] = dark;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] !== light) {
+		t4 = /* @__PURE__ */ jsx(Indicator, {
+			type: "off",
+			children: light
+		});
+		$[12] = light;
+		$[13] = t4;
+	} else t4 = $[13];
+	let t5;
+	if ($[14] !== darkened || $[15] !== t3 || $[16] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Root$1, {
+			swap: darkened,
+			children: [t3, t4]
+		});
+		$[14] = darkened;
+		$[15] = t3;
+		$[16] = t4;
+		$[17] = t5;
+	} else t5 = $[17];
+	let t6;
+	if ($[18] !== darkened || $[19] !== label || $[20] !== props || $[21] !== t2 || $[22] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Button, {
+			palette: "neutral",
+			shape: "square",
+			variant: "ghost",
+			...props,
+			"aria-label": label,
+			"aria-pressed": darkened,
+			onClick: t2,
+			children: t5
+		});
+		$[18] = darkened;
+		$[19] = label;
+		$[20] = props;
+		$[21] = t2;
+		$[22] = t5;
+		$[23] = t6;
+	} else t6 = $[23];
+	return t6;
+}
+//#endregion
+//#region src/download-trigger/download.ts
+/**
+* Saves data built in the page to a file on the reader's device.
+*
+* @remarks
+*   Zag's `downloadFile` hands the browser an object URL through an anchor with a `download`
+*   attribute and revokes the URL once the anchor is pressed. Nothing is fetched and no server is
+*   involved. A menu row, or any control other than `DownloadTrigger`, calls `download` from its
+*   own handler.
+*/
+/**
+* Resolves the data and hands it to the browser as a file.
+*
+* @returns A promise that settles once the browser has the file, and rejects when the data
+*   function throws or its promise rejects.
+*/
+async function download({ data, fileName, mimeType = "" }) {
+	const file = typeof data === "function" ? await data() : data;
+	downloadFile({
+		file,
+		name: fileName,
+		type: mimeType
+	});
+}
+//#endregion
+//#region src/download-trigger/download-trigger.tsx
+/**
+* Renders a button that downloads `data` as `fileName` when pressed.
+*
+* @remarks
+*   `onClick` runs first. A handler that calls `preventDefault` cancels the download.
+*/
+function DownloadTrigger(t0) {
+	const $ = c(14);
+	let data;
+	let fileName;
+	let mimeType;
+	let onClick;
+	let rest;
+	if ($[0] !== t0) {
+		({data, fileName, mimeType, onClick, ...rest} = t0);
+		$[0] = t0;
+		$[1] = data;
+		$[2] = fileName;
+		$[3] = mimeType;
+		$[4] = onClick;
+		$[5] = rest;
+	} else {
+		data = $[1];
+		fileName = $[2];
+		mimeType = $[3];
+		onClick = $[4];
+		rest = $[5];
+	}
+	let t1;
+	if ($[6] !== data || $[7] !== fileName || $[8] !== mimeType || $[9] !== onClick) {
+		t1 = function pressed(event) {
+			onClick?.(event);
+			if (!event.defaultPrevented) download({
+				data,
+				fileName,
+				mimeType
+			});
+		};
+		$[6] = data;
+		$[7] = fileName;
+		$[8] = mimeType;
+		$[9] = onClick;
+		$[10] = t1;
+	} else t1 = $[10];
+	const pressed = t1;
+	let t2;
+	if ($[11] !== pressed || $[12] !== rest) {
+		t2 = /* @__PURE__ */ jsx(Button, {
+			...rest,
+			onClick: pressed
+		});
+		$[11] = pressed;
+		$[12] = rest;
+		$[13] = t2;
+	} else t2 = $[13];
+	return t2;
+}
+//#endregion
+//#region src/toggle-group/machine.ts
+/**
+* Runs the toggle group machine and provides its api to the items.
+*
+* @remarks
+*   The root starts one machine and every item reads the api from context, so the items report one
+*   value. A single-select group is a `radiogroup` of radios, and a multiple-select group is a
+*   `group` of buttons that report `aria-pressed`. The machine moves focus between the items with
+*   the arrow keys, Home and End, and the browser's own button toggles an item on Space and Enter.
+*/
+/**
+* Provides the connected api to the items, and reads it back.
+*
+* @remarks
+*   `useToggleGroup` throws for an item rendered outside `ToggleGroup.Root`.
 */
-const Button = withContext("button", { defaultProps: { type: "button" } });
+const [ApiProvider, useToggleGroup] = createRequiredContext("ToggleGroup");
 /**
-* Draws a square button in a look, a size and a status, named in words for the glyph it holds.
+* Starts the toggle group machine and returns its connected api.
+*
+* @remarks
+*   The ID of an item percent-encodes its value, so an ID never contains a space. An ID the caller
+*   passes in `ids` replaces it.
+* @param options - The machine options split from the root's props. React generates `id` when the
+*   caller states none.
+* @returns The connected api.
 */
-const IconButton = withContext("button", { defaultProps: {
-	shape: "square",
-	type: "button"
-} });
+function useToggleGroupMachine(options) {
+	const $ = c(11);
+	const generated = useId();
+	const id = options.id ?? generated;
+	let t0;
+	if ($[0] !== options) {
+		t0 = omitUndefined(options);
+		$[0] = options;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== id) {
+		t1 = (value) => `toggle-group-${id}-item-${encodeURIComponent(value)}`;
+		$[2] = id;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== options.ids || $[5] !== t1) {
+		t2 = {
+			item: t1,
+			...options.ids
+		};
+		$[4] = options.ids;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== id || $[8] !== t0 || $[9] !== t2) {
+		t3 = {
+			...t0,
+			id,
+			ids: t2
+		};
+		$[7] = id;
+		$[8] = t0;
+		$[9] = t2;
+		$[10] = t3;
+	} else t3 = $[10];
+	return toggle.connect(useMachine(toggle.machine, t3), normalizeProps);
+}
+/**
+* Splits the root's props into the machine's options and the element's props.
+*
+* @remarks
+*   The key list comes from the machine's own `splitProps`, so it follows the installed machine.
+*/
+const splitToggleGroupProps = splitEnumerable(toggle.splitProps);
+/**
+* Splits an item's props into its options and the element's props.
+*/
+const splitItemProps = splitEnumerable(toggle.splitItemProps);
+//#endregion
+//#region src/toggle-group/item.tsx
+/**
+* Scrolls the item that took focus into view by the least distance.
+*/
+function revealed(event) {
+	event.currentTarget.scrollIntoView({
+		block: "nearest",
+		inline: "nearest"
+	});
+}
+/**
+* Renders the item as a button with the machine's item props.
+*
+* @param props - The item's options and the props of the button.
+* @returns The `button` element.
+*/
+function Item(props) {
+	const $ = c(9);
+	const api = useToggleGroup();
+	let T0;
+	let pressed;
+	let t0;
+	if ($[0] !== api || $[1] !== props) {
+		const [options, rest] = splitItemProps(props);
+		({pressed} = api.getItemState(options));
+		T0 = Button;
+		t0 = mergeProps(api.getItemProps(options), { onFocus: revealed }, rest);
+		$[0] = api;
+		$[1] = props;
+		$[2] = T0;
+		$[3] = pressed;
+		$[4] = t0;
+	} else {
+		T0 = $[2];
+		pressed = $[3];
+		t0 = $[4];
+	}
+	const t1 = pressed ? "" : void 0;
+	let t2;
+	if ($[5] !== T0 || $[6] !== t0 || $[7] !== t1) {
+		t2 = /* @__PURE__ */ jsx(T0, {
+			...t0,
+			"data-pressed": t1
+		});
+		$[5] = T0;
+		$[6] = t0;
+		$[7] = t1;
+		$[8] = t2;
+	} else t2 = $[8];
+	return t2;
+}
+//#endregion
+//#region src/toggle-group/root.tsx
+/**
+* Renders the group and provides the machine's api and the items' variants.
+*
+* @param props - The machine's options, the group's props and the items' variants.
+* @returns The `div` element that contains the items.
+*/
+function Root(props) {
+	const $ = c(13);
+	const [options, rest] = splitToggleGroupProps(props);
+	const { attached: t0, palette, size, variant, ...attributes } = rest;
+	const attached = t0 === void 0 ? true : t0;
+	const api = useToggleGroupMachine(options);
+	const T0 = ApiProvider;
+	const T1 = PropsProvider;
+	const t1 = omitUndefined({
+		palette,
+		size,
+		variant
+	});
+	const T2 = Group;
+	const t2 = options.orientation ?? "horizontal";
+	const t3 = mergeProps(api.getRootProps(), attributes);
+	let t4;
+	if ($[0] !== T2 || $[1] !== attached || $[2] !== t2 || $[3] !== t3) {
+		t4 = /* @__PURE__ */ jsx(T2, {
+			attached,
+			orientation: t2,
+			...t3
+		});
+		$[0] = T2;
+		$[1] = attached;
+		$[2] = t2;
+		$[3] = t3;
+		$[4] = t4;
+	} else t4 = $[4];
+	let t5;
+	if ($[5] !== T1 || $[6] !== t1 || $[7] !== t4) {
+		t5 = /* @__PURE__ */ jsx(T1, {
+			value: t1,
+			children: t4
+		});
+		$[5] = T1;
+		$[6] = t1;
+		$[7] = t4;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== T0 || $[10] !== api || $[11] !== t5) {
+		t6 = /* @__PURE__ */ jsx(T0, {
+			value: api,
+			children: t5
+		});
+		$[9] = T0;
+		$[10] = api;
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	return t6;
+}
+//#endregion
+//#region src/toggle-group/index.ts
+var toggle_group_exports = /* @__PURE__ */ __exportAll({
+	Item: () => Item,
+	Root: () => Root
+});
 //#endregion
-export { Button, PropsProvider as ButtonPropsProvider, IconButton };
+export { Button, PropsProvider as ButtonPropsProvider, clipboard_exports as Clipboard, ColorModeToggle, DownloadTrigger, IconButton, swap_exports as Swap, toggle_group_exports as ToggleGroup, download };