@stealthscale/component-disclosure 0.2.2 → 0.2.4

package/dist/pages/tabs/tabs.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"CloseTriggerProps": {"conditions": 284, "foreign": 1041}, "ContentProps": {"conditions": 284, "foreign": 1041}, "IndicatorProps": {"conditions": 284, "foreign": 1041}, "ListProps": {"conditions": 284, "foreign": 1041}, "RootProps": {"conditions": 284, "foreign": 1037}, "TriggerProps": {"conditions": 284, "foreign": 1049}};
+export const parts = {"CloseTriggerProps": [{"accepts": "string", "fallback": "", "kind": "option", "name": "label", "refers": [], "required": false, "says": "Title a pointer shows over the control. Defaults to \"Close\"."}], "ContentProps": [{"accepts": "string", "fallback": "", "kind": "option", "name": "value", "refers": [], "required": true, "says": "Value of the tab that shows the panel."}], "IndicatorProps": [], "ListProps": [], "RootProps": [{"accepts": "\"automatic\" | \"manual\"", "fallback": "\"automatic\"", "kind": "option", "name": "activationMode", "refers": [], "required": false, "says": "The activation mode of the tabs. Can be `manual` or `automatic` - `manual`: Tabs are activated when clicked or press `enter` key. - `automatic`: Tabs are activated when receiving focus"}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "composite", "refers": [], "required": false, "says": "Whether the tab is composite"}, {"accepts": "string | null", "fallback": "", "kind": "option", "name": "defaultValue", "refers": [], "required": false, "says": "The initial selected tab value when rendered. Use when you don't need to control the selected tab value."}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "deselectable", "refers": [], "required": false, "says": "Whether the active tab can be deselected when clicking on it."}, {"accepts": "\"ltr\" | \"rtl\"", "fallback": "\"ltr\"", "kind": "option", "name": "dir", "refers": [], "required": false, "says": "The document's text/writing direction."}, {"accepts": "boolean", "fallback": "", "kind": "variant", "name": "fitted", "refers": [], "required": false, "says": "Whether the tabs share the list's width equally."}, {"accepts": "(() => Document | Node | ShadowRoot)", "fallback": "", "kind": "option", "name": "getRootNode", "refers": [], "required": false, "says": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "id", "refers": [], "required": false, "says": "The unique identifier of the machine."}, {"accepts": "ElementIds", "fallback": "", "kind": "option", "name": "ids", "refers": ["tabs.ElementIds"], "required": false, "says": "The ids of the elements in the tabs. Useful for composition."}, {"accepts": "Justify", "fallback": "", "kind": "variant", "name": "justify", "refers": ["kit.Justify"], "required": false, "says": "Distribution of the tabs in a list wider than they are."}, {"accepts": "boolean", "fallback": "true", "kind": "option", "name": "loopFocus", "refers": [], "required": false, "says": "Whether the keyboard navigation will loop from last tab to first, and vice versa."}, {"accepts": "((details: NavigateDetails) => void) | null", "fallback": "", "kind": "option", "name": "navigate", "refers": ["tabs.NavigateDetails"], "required": false, "says": "Function to navigate to the selected tab when clicking on it. Useful if tab triggers are anchor elements."}, {"accepts": "((details: CloseDetails) => void)", "fallback": "", "kind": "option", "name": "onClose", "refers": ["kit.CloseDetails"], "required": false, "says": "Called with the value of a closable tab that a person closes, after the selection has moved off it. The caller removes the tab and its panel."}, {"accepts": "((details: FocusChangeDetails) => void)", "fallback": "", "kind": "option", "name": "onFocusChange", "refers": ["tabs.FocusChangeDetails"], "required": false, "says": "Callback to be called when the focused tab changes"}, {"accepts": "((details: ValueChangeDetails) => void)", "fallback": "", "kind": "option", "name": "onValueChange", "refers": ["tabs.ValueChangeDetails"], "required": false, "says": "Callback to be called when the selected/active tab changes"}, {"accepts": "\"horizontal\" | \"vertical\"", "fallback": "\"horizontal\"", "kind": "option", "name": "orientation", "refers": [], "required": false, "says": "The orientation of the tabs. Can be `horizontal` or `vertical` - `horizontal`: only left and right arrow key navigation will work. - `vertical`: only up and down arrow key navigation will work."}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "Palette of the line indicator, the subtle indicator and the selected tab's text, set on the root."}, {"accepts": "Scale", "fallback": "", "kind": "variant", "name": "size", "refers": ["kit.Scale"], "required": false, "says": "Size of the tabs on the control scale and the panel's padding on the inset scale."}, {"accepts": "string | null", "fallback": "", "kind": "option", "name": "value", "refers": [], "required": false, "says": "The controlled selected tab value"}, {"accepts": "\"enclosed\" | \"line\" | \"plain\" | \"subtle\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": "Look of the list and the indicator of the selected tab."}], "TriggerProps": [{"accepts": "boolean", "fallback": "", "kind": "option", "name": "closable", "refers": [], "required": false, "says": "Whether a person can close the tab: Delete while it has focus, a middle click, or a press on its `Tabs.CloseTrigger`. The root's `onClose` receives the tab's value."}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "disabled", "refers": [], "required": false, "says": "Whether the tab is disabled."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "value", "refers": [], "required": true, "says": "Value of the panel the tab shows."}]};
+export const shapes = {"kit.CloseDetails": [{"accepts": "string", "name": "value", "says": "Value of the closed tab."}], "kit.Justify": [{"accepts": "", "name": "\"around\"", "says": ""}, {"accepts": "", "name": "\"between\"", "says": ""}, {"accepts": "", "name": "\"center\"", "says": ""}, {"accepts": "", "name": "\"end\"", "says": ""}, {"accepts": "", "name": "\"evenly\"", "says": ""}, {"accepts": "", "name": "\"start\"", "says": ""}], "kit.Scale": [{"accepts": "", "name": "\"2xl\"", "says": ""}, {"accepts": "", "name": "\"3xl\"", "says": ""}, {"accepts": "", "name": "\"4xl\"", "says": ""}, {"accepts": "", "name": "\"lg\"", "says": ""}, {"accepts": "", "name": "\"md\"", "says": ""}, {"accepts": "", "name": "\"sm\"", "says": ""}, {"accepts": "", "name": "\"xl\"", "says": ""}, {"accepts": "", "name": "\"xs\"", "says": ""}], "tabs.ElementIds": [{"accepts": "string", "name": "root", "says": ""}, {"accepts": "((value: string) => string)", "name": "trigger", "says": ""}, {"accepts": "string", "name": "list", "says": ""}, {"accepts": "((value: string) => string)", "name": "content", "says": ""}, {"accepts": "string", "name": "indicator", "says": ""}], "tabs.ValueChangeDetails": [{"accepts": "string", "name": "value", "says": ""}], "tabs.FocusChangeDetails": [{"accepts": "string", "name": "focusedValue", "says": ""}], "tabs.NavigateDetails": [{"accepts": "string", "name": "value", "says": ""}, {"accepts": "HTMLAnchorElement", "name": "node", "says": ""}, {"accepts": "string", "name": "href", "says": ""}]};

package/dist/pages/toggle-tip/toggle-tip.js

@@ -0,0 +1,344 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { r as recipe } from "../../recipes-95yCB2V3.js";
+import { d as Root, f as Positioner, h as ArrowTip, m as Arrow, p as Content, u as Trigger } from "../../shared-Cfsikh3X.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Portal } from "@stealthscale/component-primitives";
+import { Matrix, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { InfoIcon } from "lucide-react";
+import { ButtonPropsProvider, IconButton } from "@stealthscale/component-actions";
+import { Stack } from "@stealthscale/component-layout";
+import { Span } from "@stealthscale/component-typography";
+import { DataList } from "@stealthscale/component-collections";
+//#region src/toggle-tip/examples/definition.example.tsx
+var definition_example_exports = /* @__PURE__ */ __exportAll({
+	Definition: () => Definition,
+	source: () => source$2
+});
+function Definition(props) {
+	const $ = c(22);
+	const { t } = useWords("toggle-tip");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("definition.label");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Span, {
+			weight: "medium",
+			children: t0
+		});
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = {
+			size: "xs",
+			variant: "ghost"
+		};
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("definition.trigger");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(InfoIcon, {});
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t3) {
+		t5 = /* @__PURE__ */ jsx(ButtonPropsProvider, {
+			value: t2,
+			children: /* @__PURE__ */ jsx(Trigger, {
+				"aria-label": t3,
+				as: IconButton,
+				children: t4
+			})
+		});
+		$[8] = t3;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(Arrow, { children: /* @__PURE__ */ jsx(ArrowTip, {}) });
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== t) {
+		t7 = t("definition.tip");
+		$[11] = t;
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Positioner, { children: /* @__PURE__ */ jsxs(Content, { children: [t6, t7] }) }) });
+		$[13] = t7;
+		$[14] = t8;
+	} else t8 = $[14];
+	let t9;
+	if ($[15] !== props || $[16] !== t5 || $[17] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Root, {
+			...props,
+			children: [t5, t8]
+		});
+		$[15] = props;
+		$[16] = t5;
+		$[17] = t8;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== t1 || $[20] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(Stack, {
+			direction: "row",
+			gap: "xs",
+			children: [t1, t9]
+		});
+		$[19] = t1;
+		$[20] = t9;
+		$[21] = t10;
+	} else t10 = $[21];
+	return t10;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { InfoIcon } from \"lucide-react\";\n\nimport { ButtonPropsProvider, IconButton } from \"@stealthscale/component-actions\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Portal } from \"@stealthscale/component-primitives\";\nimport { Span } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { ToggleTip } from \"@stealthscale/component-disclosure\";\n\nexport function Definition(props: ToggleTip.RootProps): ReactElement {\n  const { t } = useWords(\"toggle-tip\");\n\n  return (\n    <Stack direction=\"row\" gap=\"xs\">\n      <Span weight=\"medium\">{t(\"definition.label\")}</Span>\n      <ToggleTip.Root {...props}>\n        <ButtonPropsProvider value={{ size: \"xs\", variant: \"ghost\" }}>\n          <ToggleTip.Trigger aria-label={t(\"definition.trigger\")} as={IconButton}>\n            <InfoIcon />\n          </ToggleTip.Trigger>\n        </ButtonPropsProvider>\n        <Portal>\n          <ToggleTip.Positioner>\n            <ToggleTip.Content>\n              <ToggleTip.Arrow>\n                <ToggleTip.ArrowTip />\n              </ToggleTip.Arrow>\n              {t(\"definition.tip\")}\n            </ToggleTip.Content>\n          </ToggleTip.Positioner>\n        </Portal>\n      </ToggleTip.Root>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/toggle-tip/examples/fees.example.tsx
+var fees_example_exports = /* @__PURE__ */ __exportAll({
+	Fees: () => Fees,
+	source: () => source$1
+});
+const FEES = [
+	"processing",
+	"payout",
+	"conversion"
+];
+function Fees() {
+	const $ = c(5);
+	const { t } = useWords("toggle-tip");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			size: "xs",
+			variant: "ghost"
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		t1 = FEES.map((fee) => /* @__PURE__ */ jsxs(DataList.Item, { children: [/* @__PURE__ */ jsxs(DataList.ItemLabel, { children: [t(`fees.${fee}.label`), /* @__PURE__ */ jsxs(Root, { children: [/* @__PURE__ */ jsx(Trigger, {
+			"aria-label": t(`fees.${fee}.trigger`),
+			as: IconButton,
+			children: /* @__PURE__ */ jsx(InfoIcon, {})
+		}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Positioner, { children: /* @__PURE__ */ jsxs(Content, { children: [/* @__PURE__ */ jsx(Arrow, { children: /* @__PURE__ */ jsx(ArrowTip, {}) }), t(`fees.${fee}.tip`)] }) }) })] })] }), /* @__PURE__ */ jsx(DataList.ItemValue, { children: t(`fees.${fee}.value`) })] }, fee));
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(ButtonPropsProvider, {
+			value: t0,
+			children: /* @__PURE__ */ jsx(DataList.Root, {
+				orientation: "horizontal",
+				children: t1
+			})
+		});
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { InfoIcon } from \"lucide-react\";\n\nimport { ButtonPropsProvider, IconButton } from \"@stealthscale/component-actions\";\nimport { DataList } from \"@stealthscale/component-collections\";\nimport { Portal } from \"@stealthscale/component-primitives\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { ToggleTip } from \"@stealthscale/component-disclosure\";\n\nconst FEES = [\"processing\", \"payout\", \"conversion\"] as const;\n\nexport function Fees(): ReactElement {\n  const { t } = useWords(\"toggle-tip\");\n\n  return (\n    <ButtonPropsProvider value={{ size: \"xs\", variant: \"ghost\" }}>\n      <DataList.Root orientation=\"horizontal\">\n        {FEES.map((fee) => (\n          <DataList.Item key={fee}>\n            <DataList.ItemLabel>\n              {t(`fees.${fee}.label`)}\n              <ToggleTip.Root>\n                <ToggleTip.Trigger aria-label={t(`fees.${fee}.trigger`)} as={IconButton}>\n                  <InfoIcon />\n                </ToggleTip.Trigger>\n                <Portal>\n                  <ToggleTip.Positioner>\n                    <ToggleTip.Content>\n                      <ToggleTip.Arrow>\n                        <ToggleTip.ArrowTip />\n                      </ToggleTip.Arrow>\n                      {t(`fees.${fee}.tip`)}\n                    </ToggleTip.Content>\n                  </ToggleTip.Positioner>\n                </Portal>\n              </ToggleTip.Root>\n            </DataList.ItemLabel>\n            <DataList.ItemValue>{t(`fees.${fee}.value`)}</DataList.ItemValue>\n          </DataList.Item>\n        ))}\n      </DataList.Root>\n    </ButtonPropsProvider>\n  );\n}\n";
+//#endregion
+//#region src/toggle-tip/examples/terms.example.tsx
+var terms_example_exports = /* @__PURE__ */ __exportAll({
+	Terms: () => Terms,
+	source: () => source
+});
+function Terms() {
+	const $ = c(26);
+	const { t } = useWords("toggle-tip");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("terms.label");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Span, {
+			weight: "medium",
+			children: t0
+		});
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = {
+			size: "xs",
+			variant: "ghost"
+		};
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("terms.trigger");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(InfoIcon, {});
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t3) {
+		t5 = /* @__PURE__ */ jsx(ButtonPropsProvider, {
+			value: t2,
+			children: /* @__PURE__ */ jsx(Trigger, {
+				"aria-label": t3,
+				as: IconButton,
+				children: t4
+			})
+		});
+		$[8] = t3;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(Arrow, { children: /* @__PURE__ */ jsx(ArrowTip, {}) });
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== t) {
+		t7 = t("terms.tip");
+		$[11] = t;
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== t) {
+		t8 = t("terms.link");
+		$[13] = t;
+		$[14] = t8;
+	} else t8 = $[14];
+	let t9;
+	if ($[15] !== t8) {
+		t9 = /* @__PURE__ */ jsx("a", {
+			href: "#terms",
+			children: t8
+		});
+		$[15] = t8;
+		$[16] = t9;
+	} else t9 = $[16];
+	let t10;
+	if ($[17] !== t7 || $[18] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Positioner, { children: /* @__PURE__ */ jsxs(Content, { children: [
+			t6,
+			t7,
+			" ",
+			t9
+		] }) }) });
+		$[17] = t7;
+		$[18] = t9;
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[20] !== t10 || $[21] !== t5) {
+		t11 = /* @__PURE__ */ jsxs(Root, { children: [t5, t10] });
+		$[20] = t10;
+		$[21] = t5;
+		$[22] = t11;
+	} else t11 = $[22];
+	let t12;
+	if ($[23] !== t1 || $[24] !== t11) {
+		t12 = /* @__PURE__ */ jsxs(Stack, {
+			direction: "row",
+			gap: "xs",
+			children: [t1, t11]
+		});
+		$[23] = t1;
+		$[24] = t11;
+		$[25] = t12;
+	} else t12 = $[25];
+	return t12;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { InfoIcon } from \"lucide-react\";\n\nimport { ButtonPropsProvider, IconButton } from \"@stealthscale/component-actions\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Portal } from \"@stealthscale/component-primitives\";\nimport { Span } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { ToggleTip } from \"@stealthscale/component-disclosure\";\n\nexport function Terms(): ReactElement {\n  const { t } = useWords(\"toggle-tip\");\n\n  return (\n    <Stack direction=\"row\" gap=\"xs\">\n      <Span weight=\"medium\">{t(\"terms.label\")}</Span>\n      <ToggleTip.Root>\n        <ButtonPropsProvider value={{ size: \"xs\", variant: \"ghost\" }}>\n          <ToggleTip.Trigger aria-label={t(\"terms.trigger\")} as={IconButton}>\n            <InfoIcon />\n          </ToggleTip.Trigger>\n        </ButtonPropsProvider>\n        <Portal>\n          <ToggleTip.Positioner>\n            <ToggleTip.Content>\n              <ToggleTip.Arrow>\n                <ToggleTip.ArrowTip />\n              </ToggleTip.Arrow>\n              {t(\"terms.tip\")} <a href=\"#terms\">{t(\"terms.link\")}</a>\n            </ToggleTip.Content>\n          </ToggleTip.Positioner>\n        </Portal>\n      </ToggleTip.Root>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/toggle-tip/toggle-tip.specimen.tsx
+/**
+* Catalogue page for the toggle tip.
+*
+* @remarks
+*   `scenesOf` generates the looks by sizes from the definition example. The placement scene is
+*   hand-written, because the placement is the machine's `positioning` option and not an axis. The
+*   terms and fees scenes show a note with a link and notes beside the names of a data list. Every
+*   toggle tip renders closed and portals its note to the document body, so an opened note renders
+*   over the page and a scene is as tall as its triggers. The words are keys under `toggle-tip` in
+*   `locales/en/specimen/toggle-tip.json`.
+*/
+/**
+* Sides of the placement scene.
+*/
+const SIDES = [
+	"top",
+	"right",
+	"bottom",
+	"left"
+];
+/**
+* Hand-written scene for the four placements.
+*/
+const placement = {
+	about: "toggle-tip.placement.about",
+	draw: () => /* @__PURE__ */ jsx(Matrix, {
+		knob: "placement",
+		of: SIDES,
+		children: (side) => /* @__PURE__ */ jsx(Definition, { positioning: { placement: side } })
+	}),
+	example: definition_example_exports,
+	props: { positioning: { placement: "top" } },
+	title: "toggle-tip.placement.title"
+};
+/**
+* Hand-written scene for a note that contains a link.
+*/
+const terms = {
+	about: "toggle-tip.terms.about",
+	draw: Terms,
+	example: terms_example_exports,
+	title: "toggle-tip.terms.title"
+};
+/**
+* Hand-written scene for notes beside the names of a data list.
+*/
+const fees = {
+	about: "toggle-tip.fees.about",
+	draw: Fees,
+	example: fees_example_exports,
+	title: "toggle-tip.fees.title"
+};
+var toggle_tip_specimen_default = specimen({
+	about: "toggle-tip.about",
+	id: "components/disclosure/toggle-tip",
+	imports: "import { ToggleTip } from \"@stealthscale/component-disclosure\";",
+	scenes: [
+		...scenesOf(recipe, {
+			axes: { variant: { across: "size" } },
+			draw: (props) => /* @__PURE__ */ jsx(Definition, { ...props }),
+			example: definition_example_exports,
+			namespace: "toggle-tip"
+		}),
+		placement,
+		terms,
+		fees
+	],
+	title: "toggle-tip.title"
+});
+//#endregion
+export { toggle_tip_specimen_default as default, fees, placement, terms };

package/dist/pages/toggle-tip/toggle-tip.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"ArrowTipProps": {"conditions": 284, "foreign": 1041}, "ArrowProps": {"conditions": 284, "foreign": 1041}, "ContentProps": {"conditions": 284, "foreign": 1040}, "PositionerProps": {"conditions": 284, "foreign": 1041}, "RootProps": {"conditions": 284, "foreign": 1039}, "TriggerProps": {"conditions": 284, "foreign": 1051}};
+export const parts = {"ArrowTipProps": [], "ArrowProps": [], "ContentProps": [], "PositionerProps": [], "RootProps": [{"accepts": "boolean", "fallback": "true", "kind": "option", "name": "closeOnEscape", "refers": [], "required": false, "says": "Whether to close the popover when the escape key is pressed."}, {"accepts": "boolean", "fallback": "true", "kind": "option", "name": "closeOnInteractOutside", "refers": [], "required": false, "says": "Whether to close the popover when the user clicks outside of the popover."}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "defaultOpen", "refers": [], "required": false, "says": "The initial open state of the popover when rendered. Use when you don't need to control the open state of the popover."}, {"accepts": "string | null", "fallback": "", "kind": "option", "name": "defaultTriggerValue", "refers": [], "required": false, "says": "The initial trigger value when rendered. Use when you don't need to control the trigger value."}, {"accepts": "\"ltr\" | \"rtl\"", "fallback": "\"ltr\"", "kind": "option", "name": "dir", "refers": [], "required": false, "says": "The document's text/writing direction."}, {"accepts": "(() => MaybeElement)", "fallback": "", "kind": "option", "name": "finalFocusEl", "refers": [], "required": false, "says": "Element to receive focus when the popover is closed."}, {"accepts": "(() => Document | Node | ShadowRoot)", "fallback": "", "kind": "option", "name": "getRootNode", "refers": [], "required": false, "says": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "id", "refers": [], "required": false, "says": "The unique identifier of the machine."}, {"accepts": "ElementIds", "fallback": "", "kind": "option", "name": "ids", "refers": ["popover.ElementIds"], "required": false, "says": "The ids of the elements in the popover. Useful for composition."}, {"accepts": "(() => false | HTMLElement | null)", "fallback": "", "kind": "option", "name": "initialFocusEl", "refers": [], "required": false, "says": "The element to focus on when the popover is opened. Return `false` to skip moving focus, or `null` to use the default."}, {"accepts": "boolean", "fallback": "true", "kind": "option", "name": "lazyMount", "refers": [], "required": false, "says": "When true, the overlay renders no content until it first opens."}, {"accepts": "boolean", "fallback": "false", "kind": "option", "name": "modal", "refers": [], "required": false, "says": "Whether the popover should be modal. When set to `true`: - interaction with outside elements will be disabled - only popover content will be visible to screen readers - scrolling is blocked - focus is trapped within the popover"}, {"accepts": "((event: KeyboardEvent) => void)", "fallback": "", "kind": "option", "name": "onEscapeKeyDown", "refers": [], "required": false, "says": "Function called when the escape key is pressed"}, {"accepts": "(() => void)", "fallback": "", "kind": "option", "name": "onExitComplete", "refers": [], "required": false, "says": "Runs once the content's exit animation ends."}, {"accepts": "((event: FocusOutsideEvent) => void)", "fallback": "", "kind": "option", "name": "onFocusOutside", "refers": ["interact-outside.EventDetails", "interact-outside.FocusOutsideEvent"], "required": false, "says": "Function called when the focus is moved outside the component"}, {"accepts": "((event: InteractOutsideEvent) => void)", "fallback": "", "kind": "option", "name": "onInteractOutside", "refers": ["interact-outside.EventDetails", "interact-outside.FocusOutsideEvent", "interact-outside.InteractOutsideEvent", "interact-outside.PointerDownOutsideEvent"], "required": false, "says": "Function called when an interaction happens outside the component"}, {"accepts": "((details: OpenChangeDetails) => void)", "fallback": "", "kind": "option", "name": "onOpenChange", "refers": ["popover.OpenChangeDetails"], "required": false, "says": "Function invoked when the popover opens or closes"}, {"accepts": "((event: PointerDownOutsideEvent) => void)", "fallback": "", "kind": "option", "name": "onPointerDownOutside", "refers": ["interact-outside.EventDetails", "interact-outside.PointerDownOutsideEvent"], "required": false, "says": "Function called when the pointer is pressed down outside the component"}, {"accepts": "((event: LayerDismissEvent) => void)", "fallback": "", "kind": "option", "name": "onRequestDismiss", "refers": ["dismissable.LayerDismissEvent", "dismissable.LayerDismissEventDetail"], "required": false, "says": "Function called when this layer is closed due to a parent layer being closed"}, {"accepts": "((details: TriggerValueChangeDetails) => void)", "fallback": "", "kind": "option", "name": "onTriggerValueChange", "refers": ["popover.TriggerValueChangeDetails"], "required": false, "says": "Function called when the trigger value changes."}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "open", "refers": [], "required": false, "says": "The controlled open state of the popover"}, {"accepts": "(() => Element | null)[]", "fallback": "", "kind": "option", "name": "persistentElements", "refers": [], "required": false, "says": "Returns the persistent elements that: - should not have pointer-events disabled - should not trigger the dismiss event"}, {"accepts": "boolean", "fallback": "true", "kind": "option", "name": "portalled", "refers": [], "required": false, "says": "Whether the popover is portalled. This will proxy the tabbing behavior regardless of the DOM position of the popover content."}, {"accepts": "PositioningOptions", "fallback": "", "kind": "option", "name": "positioning", "refers": ["core.ComputePositionReturn", "dom.AutoUpdateOptions", "dom.VirtualElement", "popper.PositioningOptions", "utils.Placement"], "required": false, "says": "The user provided options used to position the popover content"}, {"accepts": "boolean", "fallback": "true", "kind": "option", "name": "restoreFocus", "refers": [], "required": false, "says": "Whether to restore focus to the element that had focus before the popover was opened."}, {"accepts": "Scale", "fallback": "", "kind": "variant", "name": "size", "refers": ["kit.Scale"], "required": false, "says": "Padding of the content on the inset scale and its text on the label role."}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "skipAnimationOnMount", "refers": [], "required": false, "says": "When true, content that is open on mount plays no entry animation."}, {"accepts": "string | null", "fallback": "", "kind": "option", "name": "triggerValue", "refers": [], "required": false, "says": "The controlled trigger value"}, {"accepts": "boolean", "fallback": "true", "kind": "option", "name": "unmountOnExit", "refers": [], "required": false, "says": "When true, the overlay removes its content once the exit animation ends."}, {"accepts": "\"inverted\" | \"surface\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": "Surface of the content: the inverted surface, or the popover surface inside a hairline edge."}], "TriggerProps": []};
+export const shapes = {"interact-outside.EventDetails": [{"accepts": "PointerEvent", "name": "originalEvent", "says": ""}, {"accepts": "boolean", "name": "contextmenu", "says": ""}, {"accepts": "boolean", "name": "focusable", "says": ""}, {"accepts": "EventTarget", "name": "target", "says": ""}], "interact-outside.PointerDownOutsideEvent": [{"accepts": "EventDetails<PointerEvent>", "name": "detail", "says": "The read-only **`detail`** property of the CustomEvent interface returns any data passed when initializing the event."}, {"accepts": "(type: string, bubbles?: boolean, cancelable?: boolean, detail?: EventDetails<PointerEvent>) => void", "name": "initCustomEvent", "says": "The **`CustomEvent.initCustomEvent()`** method initializes a CustomEvent object. If the event has already been dispatched, this method does nothing."}, {"accepts": "boolean", "name": "bubbles", "says": "The **`bubbles`** read-only property of the Event interface indicates whether the event bubbles up through the DOM tree or not."}, {"accepts": "boolean", "name": "cancelBubble", "says": "The **`cancelBubble`** property of the Event interface is deprecated. Use Event.stopPropagation() instead. Setting its value to true before returning from an event handler prevents propagation of the event. In later implementations, setting this to false does nothing. See Browser compatibility for details."}, {"accepts": "boolean", "name": "cancelable", "says": "The **`cancelable`** read-only property of the Event interface indicates whether the event can be canceled, and therefore prevented as if the event never happened."}, {"accepts": "boolean", "name": "composed", "says": "The read-only **`composed`** property of the Event interface returns a boolean value which indicates whether or not the event will propagate across the shadow DOM boundary into the standard DOM."}, {"accepts": "EventTarget | null", "name": "currentTarget", "says": "The **`currentTarget`** read-only property of the Event interface identifies the element to which the event handler has been attached."}, {"accepts": "boolean", "name": "defaultPrevented", "says": "The **`defaultPrevented`** read-only property of the Event interface returns a boolean value indicating whether or not the call to Event.preventDefault() canceled the event."}, {"accepts": "number", "name": "eventPhase", "says": "The **`eventPhase`** read-only property of the Event interface indicates which phase of the event flow is currently being evaluated."}, {"accepts": "boolean", "name": "isTrusted", "says": "The **`isTrusted`** read-only property of the Event interface is a boolean value that is true when the event was generated by the user agent (including via user actions and programmatic methods such as HTMLElement.focus()), and false when the event was dispatched via EventTarget.dispatchEvent(). The only exception is the click event, which initializes the isTrusted property to false in user agents."}, {"accepts": "boolean", "name": "returnValue", "says": "The Event property **`returnValue`** indicates whether the default action for this event has been prevented or not."}, {"accepts": "EventTarget | null", "name": "srcElement", "says": "The deprecated **`Event.srcElement`** is an alias for the Event.target property. Use Event.target instead."}, {"accepts": "EventTarget | null", "name": "target", "says": "The read-only **`target`** property of the Event interface is a reference to the object onto which the event was dispatched. It is different from Event.currentTarget when the event handler is called during the bubbling or capturing phase of the event."}, {"accepts": "number", "name": "timeStamp", "says": "The **`timeStamp`** read-only property of the Event interface returns the time (in milliseconds) at which the event was created."}, {"accepts": "string", "name": "type", "says": "The **`type`** read-only property of the Event interface returns a string containing the event's type. It is set when the event is constructed and is the name commonly used to refer to the specific event, such as click, load, or error."}, {"accepts": "() => EventTarget[]", "name": "composedPath", "says": "The **`composedPath()`** method of the Event interface returns the event's path which is an array of the objects on which listeners will be invoked. This does not include nodes in shadow trees if the shadow root was created with its ShadowRoot.mode closed."}, {"accepts": "(type: string, bubbles?: boolean, cancelable?: boolean) => void", "name": "initEvent", "says": "The **`Event.initEvent()`** method is used to initialize the value of an event created using Document.createEvent()."}, {"accepts": "() => void", "name": "preventDefault", "says": "The **`preventDefault()`** method of the Event interface tells the user agent that the event is being explicitly handled, so its default action, such as page scrolling, link navigation, or pasting text, should not be taken."}, {"accepts": "() => void", "name": "stopImmediatePropagation", "says": "The **`stopImmediatePropagation()`** method of the Event interface prevents other listeners of the same event from being called."}, {"accepts": "() => void", "name": "stopPropagation", "says": "The **`stopPropagation()`** method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases. It does not, however, prevent any default behaviors from occurring; for instance, clicks on links are still processed. If you want to stop those behaviors, see the preventDefault() method. It also does not prevent propagation to other event-handlers of the current element. If you want to stop those, see stopImmediatePropagation()."}, {"accepts": "0", "name": "NONE", "says": ""}, {"accepts": "1", "name": "CAPTURING_PHASE", "says": ""}, {"accepts": "2", "name": "AT_TARGET", "says": ""}, {"accepts": "3", "name": "BUBBLING_PHASE", "says": ""}], "interact-outside.FocusOutsideEvent": [{"accepts": "EventDetails<FocusEvent>", "name": "detail", "says": "The read-only **`detail`** property of the CustomEvent interface returns any data passed when initializing the event."}, {"accepts": "(type: string, bubbles?: boolean, cancelable?: boolean, detail?: EventDetails<FocusEvent>) => void", "name": "initCustomEvent", "says": "The **`CustomEvent.initCustomEvent()`** method initializes a CustomEvent object. If the event has already been dispatched, this method does nothing."}, {"accepts": "boolean", "name": "bubbles", "says": "The **`bubbles`** read-only property of the Event interface indicates whether the event bubbles up through the DOM tree or not."}, {"accepts": "boolean", "name": "cancelBubble", "says": "The **`cancelBubble`** property of the Event interface is deprecated. Use Event.stopPropagation() instead. Setting its value to true before returning from an event handler prevents propagation of the event. In later implementations, setting this to false does nothing. See Browser compatibility for details."}, {"accepts": "boolean", "name": "cancelable", "says": "The **`cancelable`** read-only property of the Event interface indicates whether the event can be canceled, and therefore prevented as if the event never happened."}, {"accepts": "boolean", "name": "composed", "says": "The read-only **`composed`** property of the Event interface returns a boolean value which indicates whether or not the event will propagate across the shadow DOM boundary into the standard DOM."}, {"accepts": "EventTarget | null", "name": "currentTarget", "says": "The **`currentTarget`** read-only property of the Event interface identifies the element to which the event handler has been attached."}, {"accepts": "boolean", "name": "defaultPrevented", "says": "The **`defaultPrevented`** read-only property of the Event interface returns a boolean value indicating whether or not the call to Event.preventDefault() canceled the event."}, {"accepts": "number", "name": "eventPhase", "says": "The **`eventPhase`** read-only property of the Event interface indicates which phase of the event flow is currently being evaluated."}, {"accepts": "boolean", "name": "isTrusted", "says": "The **`isTrusted`** read-only property of the Event interface is a boolean value that is true when the event was generated by the user agent (including via user actions and programmatic methods such as HTMLElement.focus()), and false when the event was dispatched via EventTarget.dispatchEvent(). The only exception is the click event, which initializes the isTrusted property to false in user agents."}, {"accepts": "boolean", "name": "returnValue", "says": "The Event property **`returnValue`** indicates whether the default action for this event has been prevented or not."}, {"accepts": "EventTarget | null", "name": "srcElement", "says": "The deprecated **`Event.srcElement`** is an alias for the Event.target property. Use Event.target instead."}, {"accepts": "EventTarget | null", "name": "target", "says": "The read-only **`target`** property of the Event interface is a reference to the object onto which the event was dispatched. It is different from Event.currentTarget when the event handler is called during the bubbling or capturing phase of the event."}, {"accepts": "number", "name": "timeStamp", "says": "The **`timeStamp`** read-only property of the Event interface returns the time (in milliseconds) at which the event was created."}, {"accepts": "string", "name": "type", "says": "The **`type`** read-only property of the Event interface returns a string containing the event's type. It is set when the event is constructed and is the name commonly used to refer to the specific event, such as click, load, or error."}, {"accepts": "() => EventTarget[]", "name": "composedPath", "says": "The **`composedPath()`** method of the Event interface returns the event's path which is an array of the objects on which listeners will be invoked. This does not include nodes in shadow trees if the shadow root was created with its ShadowRoot.mode closed."}, {"accepts": "(type: string, bubbles?: boolean, cancelable?: boolean) => void", "name": "initEvent", "says": "The **`Event.initEvent()`** method is used to initialize the value of an event created using Document.createEvent()."}, {"accepts": "() => void", "name": "preventDefault", "says": "The **`preventDefault()`** method of the Event interface tells the user agent that the event is being explicitly handled, so its default action, such as page scrolling, link navigation, or pasting text, should not be taken."}, {"accepts": "() => void", "name": "stopImmediatePropagation", "says": "The **`stopImmediatePropagation()`** method of the Event interface prevents other listeners of the same event from being called."}, {"accepts": "() => void", "name": "stopPropagation", "says": "The **`stopPropagation()`** method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases. It does not, however, prevent any default behaviors from occurring; for instance, clicks on links are still processed. If you want to stop those behaviors, see the preventDefault() method. It also does not prevent propagation to other event-handlers of the current element. If you want to stop those, see stopImmediatePropagation()."}, {"accepts": "0", "name": "NONE", "says": ""}, {"accepts": "1", "name": "CAPTURING_PHASE", "says": ""}, {"accepts": "2", "name": "AT_TARGET", "says": ""}, {"accepts": "3", "name": "BUBBLING_PHASE", "says": ""}], "interact-outside.InteractOutsideEvent": [{"accepts": "", "name": "FocusOutsideEvent", "says": ""}, {"accepts": "", "name": "PointerDownOutsideEvent", "says": ""}], "dismissable.LayerDismissEventDetail": [{"accepts": "HTMLElement", "name": "originalLayer", "says": ""}, {"accepts": "HTMLElement", "name": "targetLayer", "says": ""}, {"accepts": "number", "name": "originalIndex", "says": ""}, {"accepts": "number", "name": "targetIndex", "says": ""}], "dismissable.LayerDismissEvent": [{"accepts": "LayerDismissEventDetail", "name": "detail", "says": "The read-only **`detail`** property of the CustomEvent interface returns any data passed when initializing the event."}, {"accepts": "(type: string, bubbles?: boolean, cancelable?: boolean, detail?: LayerDismissEventDetail) => void", "name": "initCustomEvent", "says": "The **`CustomEvent.initCustomEvent()`** method initializes a CustomEvent object. If the event has already been dispatched, this method does nothing."}, {"accepts": "boolean", "name": "bubbles", "says": "The **`bubbles`** read-only property of the Event interface indicates whether the event bubbles up through the DOM tree or not."}, {"accepts": "boolean", "name": "cancelBubble", "says": "The **`cancelBubble`** property of the Event interface is deprecated. Use Event.stopPropagation() instead. Setting its value to true before returning from an event handler prevents propagation of the event. In later implementations, setting this to false does nothing. See Browser compatibility for details."}, {"accepts": "boolean", "name": "cancelable", "says": "The **`cancelable`** read-only property of the Event interface indicates whether the event can be canceled, and therefore prevented as if the event never happened."}, {"accepts": "boolean", "name": "composed", "says": "The read-only **`composed`** property of the Event interface returns a boolean value which indicates whether or not the event will propagate across the shadow DOM boundary into the standard DOM."}, {"accepts": "EventTarget | null", "name": "currentTarget", "says": "The **`currentTarget`** read-only property of the Event interface identifies the element to which the event handler has been attached."}, {"accepts": "boolean", "name": "defaultPrevented", "says": "The **`defaultPrevented`** read-only property of the Event interface returns a boolean value indicating whether or not the call to Event.preventDefault() canceled the event."}, {"accepts": "number", "name": "eventPhase", "says": "The **`eventPhase`** read-only property of the Event interface indicates which phase of the event flow is currently being evaluated."}, {"accepts": "boolean", "name": "isTrusted", "says": "The **`isTrusted`** read-only property of the Event interface is a boolean value that is true when the event was generated by the user agent (including via user actions and programmatic methods such as HTMLElement.focus()), and false when the event was dispatched via EventTarget.dispatchEvent(). The only exception is the click event, which initializes the isTrusted property to false in user agents."}, {"accepts": "boolean", "name": "returnValue", "says": "The Event property **`returnValue`** indicates whether the default action for this event has been prevented or not."}, {"accepts": "EventTarget | null", "name": "srcElement", "says": "The deprecated **`Event.srcElement`** is an alias for the Event.target property. Use Event.target instead."}, {"accepts": "EventTarget | null", "name": "target", "says": "The read-only **`target`** property of the Event interface is a reference to the object onto which the event was dispatched. It is different from Event.currentTarget when the event handler is called during the bubbling or capturing phase of the event."}, {"accepts": "number", "name": "timeStamp", "says": "The **`timeStamp`** read-only property of the Event interface returns the time (in milliseconds) at which the event was created."}, {"accepts": "string", "name": "type", "says": "The **`type`** read-only property of the Event interface returns a string containing the event's type. It is set when the event is constructed and is the name commonly used to refer to the specific event, such as click, load, or error."}, {"accepts": "() => EventTarget[]", "name": "composedPath", "says": "The **`composedPath()`** method of the Event interface returns the event's path which is an array of the objects on which listeners will be invoked. This does not include nodes in shadow trees if the shadow root was created with its ShadowRoot.mode closed."}, {"accepts": "(type: string, bubbles?: boolean, cancelable?: boolean) => void", "name": "initEvent", "says": "The **`Event.initEvent()`** method is used to initialize the value of an event created using Document.createEvent()."}, {"accepts": "() => void", "name": "preventDefault", "says": "The **`preventDefault()`** method of the Event interface tells the user agent that the event is being explicitly handled, so its default action, such as page scrolling, link navigation, or pasting text, should not be taken."}, {"accepts": "() => void", "name": "stopImmediatePropagation", "says": "The **`stopImmediatePropagation()`** method of the Event interface prevents other listeners of the same event from being called."}, {"accepts": "() => void", "name": "stopPropagation", "says": "The **`stopPropagation()`** method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases. It does not, however, prevent any default behaviors from occurring; for instance, clicks on links are still processed. If you want to stop those behaviors, see the preventDefault() method. It also does not prevent propagation to other event-handlers of the current element. If you want to stop those, see stopImmediatePropagation()."}, {"accepts": "0", "name": "NONE", "says": ""}, {"accepts": "1", "name": "CAPTURING_PHASE", "says": ""}, {"accepts": "2", "name": "AT_TARGET", "says": ""}, {"accepts": "3", "name": "BUBBLING_PHASE", "says": ""}], "popover.ElementIds": [{"accepts": "string", "name": "anchor", "says": ""}, {"accepts": "string | ((value?: string) => string)", "name": "trigger", "says": ""}, {"accepts": "string", "name": "content", "says": ""}, {"accepts": "string", "name": "title", "says": ""}, {"accepts": "string", "name": "description", "says": ""}, {"accepts": "string", "name": "closeTrigger", "says": ""}, {"accepts": "string", "name": "positioner", "says": ""}, {"accepts": "string", "name": "arrow", "says": ""}], "popover.OpenChangeDetails": [{"accepts": "boolean", "name": "open", "says": ""}], "popper.PositioningOptions": [{"accepts": "boolean", "name": "restoreStyles", "says": "Whether styles applied by the positioning utility should be restored on cleanup."}, {"accepts": "boolean", "name": "applyStyles", "says": "Whether to apply computed position styles (`--x`, `--y`, `--z-index`, `z-index`) to the floating element. Set to `false` when the consumer applies these from context (e.g. for exit animations)."}, {"accepts": "boolean", "name": "hideWhenDetached", "says": "Whether the popover should be hidden when the reference element is detached"}, {"accepts": "\"absolute\" | \"fixed\"", "name": "strategy", "says": "The strategy to use for positioning"}, {"accepts": "Placement", "name": "placement", "says": "The initial placement of the floating element"}, {"accepts": "{ mainAxis?: number; crossAxis?: number; }", "name": "offset", "says": "The offset of the floating element"}, {"accepts": "number", "name": "gutter", "says": "The main axis offset or gap between the reference and floating elements"}, {"accepts": "number", "name": "shift", "says": "The secondary axis offset or gap between the reference and floating elements"}, {"accepts": "number", "name": "overflowPadding", "says": "The virtual padding around the viewport edges to check for overflow"}, {"accepts": "number", "name": "arrowPadding", "says": "The minimum padding between the arrow and the floating element's corner."}, {"accepts": "boolean | Placement[]", "name": "flip", "says": "Whether to flip the placement"}, {"accepts": "boolean", "name": "slide", "says": "Whether the popover should slide when it overflows."}, {"accepts": "boolean", "name": "overlap", "says": "Whether the floating element can overlap the reference element"}, {"accepts": "boolean", "name": "sameWidth", "says": "Whether to make the floating element same width as the reference element"}, {"accepts": "boolean", "name": "fitViewport", "says": "Whether the popover should fit the viewport."}, {"accepts": "boolean", "name": "sizeMiddleware", "says": "Whether to use the size middleware from Floating UI. It computes and sets CSS variables (`--reference-width`, `--reference-height`, `--available-width`, `--available-height`) used by `sameWidth` and `fitViewport`."}, {"accepts": "\"clipping-ancestors\" | (() => Boundary) | Boundary", "name": "boundary", "says": "The overflow boundary of the reference element Accepts a function returning a Boundary, a Boundary directly, or the shorthand string 'clipping-ancestors' which maps to Floating UI's 'clippingAncestors'."}, {"accepts": "boolean | AutoUpdateOptions", "name": "listeners", "says": "Options to activate auto-update listeners"}, {"accepts": "((data: ComputePositionReturn) => void)", "name": "onComplete", "says": "Function called when the placement is computed"}, {"accepts": "((data: { placed: boolean; }) => void)", "name": "onPositioned", "says": "Function called when the floating element is positioned or not"}, {"accepts": "(() => HTMLElement | VirtualElement | null)", "name": "getAnchorElement", "says": "Function that returns the anchor element. Useful when you want to use a different element as the anchor."}, {"accepts": "((element: HTMLElement | VirtualElement | null) => AnchorRect | null)", "name": "getAnchorRect", "says": "Function that returns the anchor rect"}, {"accepts": "((data: { updatePosition: () => Promise<void>; floatingElement: HTMLElement | null; }) => void | Promise<void>)", "name": "updatePosition", "says": "A callback that will be called when the popover needs to calculate its position."}], "utils.Placement": [{"accepts": "", "name": "\"bottom\"", "says": ""}, {"accepts": "", "name": "\"bottom-end\"", "says": ""}, {"accepts": "", "name": "\"bottom-start\"", "says": ""}, {"accepts": "", "name": "\"left\"", "says": ""}, {"accepts": "", "name": "\"left-end\"", "says": ""}, {"accepts": "", "name": "\"left-start\"", "says": ""}, {"accepts": "", "name": "\"right\"", "says": ""}, {"accepts": "", "name": "\"right-end\"", "says": ""}, {"accepts": "", "name": "\"right-start\"", "says": ""}, {"accepts": "", "name": "\"top\"", "says": ""}, {"accepts": "", "name": "\"top-end\"", "says": ""}, {"accepts": "", "name": "\"top-start\"", "says": ""}], "dom.AutoUpdateOptions": [{"accepts": "boolean", "name": "ancestorScroll", "says": "Whether to update the position when an overflow ancestor is scrolled."}, {"accepts": "boolean", "name": "ancestorResize", "says": "Whether to update the position when an overflow ancestor is resized. This\r uses the native `resize` event."}, {"accepts": "boolean", "name": "elementResize", "says": "Whether to update the position when either the reference or floating\r elements resized. This uses a `ResizeObserver`."}, {"accepts": "boolean", "name": "layoutShift", "says": "Whether to update the position when the reference relocated on the screen\r due to layout shift."}, {"accepts": "boolean", "name": "animationFrame", "says": "Whether to update on every animation frame if necessary. Only use if you\r need to update the position in response to an animation using transforms."}], "core.ComputePositionReturn": [{"accepts": "Placement", "name": "placement", "says": "The final chosen placement of the floating element."}, {"accepts": "Strategy", "name": "strategy", "says": "The strategy used to position the floating element."}, {"accepts": "MiddlewareData", "name": "middlewareData", "says": "Object containing data returned from all middleware, keyed by their name."}, {"accepts": "number", "name": "x", "says": ""}, {"accepts": "number", "name": "y", "says": ""}], "dom.VirtualElement": [{"accepts": "() => { bottom: number; height: number; left: number; right: number; top: number; width: number; x: number; y: number; }", "name": "getBoundingClientRect", "says": ""}, {"accepts": "(() => { bottom: number; height: number; left: number; right: number; top: number; width: number; x: number; y: number; }[] | DOMRectList)", "name": "getClientRects", "says": ""}, {"accepts": "Element", "name": "contextElement", "says": ""}], "popover.TriggerValueChangeDetails": [{"accepts": "string | null", "name": "value", "says": "The value of the trigger"}, {"accepts": "HTMLElement | null", "name": "triggerElement", "says": "The trigger element"}], "kit.Scale": [{"accepts": "", "name": "\"2xl\"", "says": ""}, {"accepts": "", "name": "\"3xl\"", "says": ""}, {"accepts": "", "name": "\"4xl\"", "says": ""}, {"accepts": "", "name": "\"lg\"", "says": ""}, {"accepts": "", "name": "\"md\"", "says": ""}, {"accepts": "", "name": "\"sm\"", "says": ""}, {"accepts": "", "name": "\"xl\"", "says": ""}, {"accepts": "", "name": "\"xs\"", "says": ""}]};

package/dist/pages/tooltip/tooltip.js

@@ -0,0 +1,112 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { n as recipe } from "../../recipes-95yCB2V3.js";
+import { a as Positioner, c as ArrowTip, i as Root, o as Content, r as Trigger, s as Arrow } from "../../shared-Cfsikh3X.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Portal } from "@stealthscale/component-primitives";
+import { Matrix, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { Button } from "@stealthscale/component-actions";
+//#region src/tooltip/examples/save.example.tsx
+var save_example_exports = /* @__PURE__ */ __exportAll({
+	Save: () => Save,
+	source: () => source
+});
+function Save(props) {
+	const $ = c(13);
+	const { t } = useWords("tooltip");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("save");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Trigger, {
+			as: Button,
+			children: t0
+		});
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Arrow, { children: /* @__PURE__ */ jsx(ArrowTip, {}) });
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("saves");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Positioner, { children: /* @__PURE__ */ jsxs(Content, { children: [t2, t3] }) }) });
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== props || $[10] !== t1 || $[11] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Root, {
+			openDelay: 100,
+			...props,
+			children: [t1, t4]
+		});
+		$[9] = props;
+		$[10] = t1;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	return t5;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { Portal } from \"@stealthscale/component-primitives\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Tooltip } from \"@stealthscale/component-disclosure\";\n\nexport function Save(props: Tooltip.RootProps): ReactElement {\n  const { t } = useWords(\"tooltip\");\n\n  return (\n    <Tooltip.Root openDelay={100} {...props}>\n      <Tooltip.Trigger as={Button}>{t(\"save\")}</Tooltip.Trigger>\n      <Portal>\n        <Tooltip.Positioner>\n          <Tooltip.Content>\n            <Tooltip.Arrow>\n              <Tooltip.ArrowTip />\n            </Tooltip.Arrow>\n            {t(\"saves\")}\n          </Tooltip.Content>\n        </Tooltip.Positioner>\n      </Portal>\n    </Tooltip.Root>\n  );\n}\n";
+//#endregion
+//#region src/tooltip/tooltip.specimen.tsx
+/**
+* Catalogue page for the tooltip.
+*
+* @remarks
+*   `scenesOf` generates the looks by sizes from the save example. The placement scene is
+*   hand-written, because the placement is the machine's `positioning` option and not an axis.
+*   Every tooltip renders closed and portals its content to the document body, so a shown tooltip
+*   renders over the page and a scene is as tall as its triggers. The words are keys under
+*   `tooltip` in `locales/en/specimen/tooltip.json`.
+*/
+/**
+* Sides of the placement scene.
+*/
+const SIDES = [
+	"top",
+	"right",
+	"bottom",
+	"left"
+];
+/**
+* Hand-written scene for the four placements.
+*/
+const placement = {
+	about: "tooltip.placement.about",
+	draw: () => /* @__PURE__ */ jsx(Matrix, {
+		knob: "placement",
+		of: SIDES,
+		children: (side) => /* @__PURE__ */ jsx(Save, { positioning: { placement: side } })
+	}),
+	example: save_example_exports,
+	props: { positioning: { placement: "top" } },
+	title: "tooltip.placement.title"
+};
+var tooltip_specimen_default = specimen({
+	about: "tooltip.about",
+	id: "components/disclosure/tooltip",
+	imports: "import { Tooltip } from \"@stealthscale/component-disclosure\";",
+	scenes: [...scenesOf(recipe, {
+		axes: { variant: { across: "size" } },
+		draw: (props) => /* @__PURE__ */ jsx(Save, { ...props }),
+		example: save_example_exports,
+		namespace: "tooltip"
+	}), placement],
+	title: "tooltip.title"
+});
+//#endregion
+export { tooltip_specimen_default as default, placement };

package/dist/pages/tooltip/tooltip.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"ArrowTipProps": {"conditions": 284, "foreign": 1041}, "ArrowProps": {"conditions": 284, "foreign": 1041}, "ContentProps": {"conditions": 284, "foreign": 1040}, "PositionerProps": {"conditions": 284, "foreign": 1041}, "RootProps": {"conditions": 284, "foreign": 1039}, "TriggerProps": {"conditions": 284, "foreign": 1051}};
+export const parts = {"ArrowTipProps": [], "ArrowProps": [], "ContentProps": [], "PositionerProps": [], "RootProps": [{"accepts": "number", "fallback": "150", "kind": "option", "name": "closeDelay", "refers": [], "required": false, "says": "The close delay of the tooltip."}, {"accepts": "boolean", "fallback": "true", "kind": "option", "name": "closeOnClick", "refers": [], "required": false, "says": "Whether the tooltip should close on click"}, {"accepts": "boolean", "fallback": "true", "kind": "option", "name": "closeOnEscape", "refers": [], "required": false, "says": "Whether to close the tooltip when the Escape key is pressed."}, {"accepts": "boolean", "fallback": "true", "kind": "option", "name": "closeOnPointerDown", "refers": [], "required": false, "says": "Whether to close the tooltip on pointerdown."}, {"accepts": "boolean", "fallback": "true", "kind": "option", "name": "closeOnScroll", "refers": [], "required": false, "says": "Whether the tooltip should close on scroll"}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "defaultOpen", "refers": [], "required": false, "says": "The initial open state of the tooltip when rendered. Use when you don't need to control the open state of the tooltip."}, {"accepts": "string | null", "fallback": "", "kind": "option", "name": "defaultTriggerValue", "refers": [], "required": false, "says": "The initial trigger value when rendered. Use when you don't need to control the trigger value."}, {"accepts": "\"ltr\" | \"rtl\"", "fallback": "\"ltr\"", "kind": "option", "name": "dir", "refers": [], "required": false, "says": "The document's text/writing direction."}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "disabled", "refers": [], "required": false, "says": "Whether the tooltip is disabled"}, {"accepts": "(() => Document | Node | ShadowRoot)", "fallback": "", "kind": "option", "name": "getRootNode", "refers": [], "required": false, "says": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "id", "refers": [], "required": false, "says": "The unique identifier of the machine."}, {"accepts": "ElementIds", "fallback": "", "kind": "option", "name": "ids", "refers": ["tooltip.ElementIds"], "required": false, "says": "The ids of the elements in the tooltip. Useful for composition."}, {"accepts": "boolean", "fallback": "false", "kind": "option", "name": "interactive", "refers": [], "required": false, "says": "Whether the tooltip's content is interactive. In this mode, the tooltip will remain open when user hovers over the content."}, {"accepts": "boolean", "fallback": "true", "kind": "option", "name": "lazyMount", "refers": [], "required": false, "says": "When true, the overlay renders no content until it first opens."}, {"accepts": "(() => void)", "fallback": "", "kind": "option", "name": "onExitComplete", "refers": [], "required": false, "says": "Runs once the content's exit animation ends."}, {"accepts": "((details: OpenChangeDetails) => void)", "fallback": "", "kind": "option", "name": "onOpenChange", "refers": ["tooltip.OpenChangeDetails"], "required": false, "says": "Function called when the tooltip is opened."}, {"accepts": "((details: TriggerValueChangeDetails) => void)", "fallback": "", "kind": "option", "name": "onTriggerValueChange", "refers": ["tooltip.TriggerValueChangeDetails"], "required": false, "says": "Function called when the trigger value changes."}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "open", "refers": [], "required": false, "says": "The controlled open state of the tooltip"}, {"accepts": "number", "fallback": "400", "kind": "option", "name": "openDelay", "refers": [], "required": false, "says": "The open delay of the tooltip."}, {"accepts": "PositioningOptions", "fallback": "", "kind": "option", "name": "positioning", "refers": ["core.ComputePositionReturn", "dom.AutoUpdateOptions", "dom.VirtualElement", "popper.PositioningOptions", "utils.Placement"], "required": false, "says": "The user provided options used to position the popover content"}, {"accepts": "Scale", "fallback": "", "kind": "variant", "name": "size", "refers": ["kit.Scale"], "required": false, "says": "Padding of the content on the inset scale and its text on the label role."}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "skipAnimationOnMount", "refers": [], "required": false, "says": "When true, content that is open on mount plays no entry animation."}, {"accepts": "string | null", "fallback": "", "kind": "option", "name": "triggerValue", "refers": [], "required": false, "says": "The controlled trigger value"}, {"accepts": "boolean", "fallback": "true", "kind": "option", "name": "unmountOnExit", "refers": [], "required": false, "says": "When true, the overlay removes its content once the exit animation ends."}, {"accepts": "\"inverted\" | \"surface\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": "Surface of the content: the inverted surface, or the popover surface inside a hairline edge."}], "TriggerProps": []};
+export const shapes = {"kit.Scale": [{"accepts": "", "name": "\"2xl\"", "says": ""}, {"accepts": "", "name": "\"3xl\"", "says": ""}, {"accepts": "", "name": "\"4xl\"", "says": ""}, {"accepts": "", "name": "\"lg\"", "says": ""}, {"accepts": "", "name": "\"md\"", "says": ""}, {"accepts": "", "name": "\"sm\"", "says": ""}, {"accepts": "", "name": "\"xl\"", "says": ""}, {"accepts": "", "name": "\"xs\"", "says": ""}], "tooltip.ElementIds": [{"accepts": "string | ((value?: string) => string)", "name": "trigger", "says": ""}, {"accepts": "string", "name": "content", "says": ""}, {"accepts": "string", "name": "arrow", "says": ""}, {"accepts": "string", "name": "positioner", "says": ""}], "tooltip.OpenChangeDetails": [{"accepts": "boolean", "name": "open", "says": ""}], "popper.PositioningOptions": [{"accepts": "boolean", "name": "restoreStyles", "says": "Whether styles applied by the positioning utility should be restored on cleanup."}, {"accepts": "boolean", "name": "applyStyles", "says": "Whether to apply computed position styles (`--x`, `--y`, `--z-index`, `z-index`) to the floating element. Set to `false` when the consumer applies these from context (e.g. for exit animations)."}, {"accepts": "boolean", "name": "hideWhenDetached", "says": "Whether the popover should be hidden when the reference element is detached"}, {"accepts": "\"absolute\" | \"fixed\"", "name": "strategy", "says": "The strategy to use for positioning"}, {"accepts": "Placement", "name": "placement", "says": "The initial placement of the floating element"}, {"accepts": "{ mainAxis?: number; crossAxis?: number; }", "name": "offset", "says": "The offset of the floating element"}, {"accepts": "number", "name": "gutter", "says": "The main axis offset or gap between the reference and floating elements"}, {"accepts": "number", "name": "shift", "says": "The secondary axis offset or gap between the reference and floating elements"}, {"accepts": "number", "name": "overflowPadding", "says": "The virtual padding around the viewport edges to check for overflow"}, {"accepts": "number", "name": "arrowPadding", "says": "The minimum padding between the arrow and the floating element's corner."}, {"accepts": "boolean | Placement[]", "name": "flip", "says": "Whether to flip the placement"}, {"accepts": "boolean", "name": "slide", "says": "Whether the popover should slide when it overflows."}, {"accepts": "boolean", "name": "overlap", "says": "Whether the floating element can overlap the reference element"}, {"accepts": "boolean", "name": "sameWidth", "says": "Whether to make the floating element same width as the reference element"}, {"accepts": "boolean", "name": "fitViewport", "says": "Whether the popover should fit the viewport."}, {"accepts": "boolean", "name": "sizeMiddleware", "says": "Whether to use the size middleware from Floating UI. It computes and sets CSS variables (`--reference-width`, `--reference-height`, `--available-width`, `--available-height`) used by `sameWidth` and `fitViewport`."}, {"accepts": "\"clipping-ancestors\" | (() => Boundary) | Boundary", "name": "boundary", "says": "The overflow boundary of the reference element Accepts a function returning a Boundary, a Boundary directly, or the shorthand string 'clipping-ancestors' which maps to Floating UI's 'clippingAncestors'."}, {"accepts": "boolean | AutoUpdateOptions", "name": "listeners", "says": "Options to activate auto-update listeners"}, {"accepts": "((data: ComputePositionReturn) => void)", "name": "onComplete", "says": "Function called when the placement is computed"}, {"accepts": "((data: { placed: boolean; }) => void)", "name": "onPositioned", "says": "Function called when the floating element is positioned or not"}, {"accepts": "(() => HTMLElement | VirtualElement | null)", "name": "getAnchorElement", "says": "Function that returns the anchor element. Useful when you want to use a different element as the anchor."}, {"accepts": "((element: HTMLElement | VirtualElement | null) => AnchorRect | null)", "name": "getAnchorRect", "says": "Function that returns the anchor rect"}, {"accepts": "((data: { updatePosition: () => Promise<void>; floatingElement: HTMLElement | null; }) => void | Promise<void>)", "name": "updatePosition", "says": "A callback that will be called when the popover needs to calculate its position."}], "utils.Placement": [{"accepts": "", "name": "\"bottom\"", "says": ""}, {"accepts": "", "name": "\"bottom-end\"", "says": ""}, {"accepts": "", "name": "\"bottom-start\"", "says": ""}, {"accepts": "", "name": "\"left\"", "says": ""}, {"accepts": "", "name": "\"left-end\"", "says": ""}, {"accepts": "", "name": "\"left-start\"", "says": ""}, {"accepts": "", "name": "\"right\"", "says": ""}, {"accepts": "", "name": "\"right-end\"", "says": ""}, {"accepts": "", "name": "\"right-start\"", "says": ""}, {"accepts": "", "name": "\"top\"", "says": ""}, {"accepts": "", "name": "\"top-end\"", "says": ""}, {"accepts": "", "name": "\"top-start\"", "says": ""}], "dom.AutoUpdateOptions": [{"accepts": "boolean", "name": "ancestorScroll", "says": "Whether to update the position when an overflow ancestor is scrolled."}, {"accepts": "boolean", "name": "ancestorResize", "says": "Whether to update the position when an overflow ancestor is resized. This\r uses the native `resize` event."}, {"accepts": "boolean", "name": "elementResize", "says": "Whether to update the position when either the reference or floating\r elements resized. This uses a `ResizeObserver`."}, {"accepts": "boolean", "name": "layoutShift", "says": "Whether to update the position when the reference relocated on the screen\r due to layout shift."}, {"accepts": "boolean", "name": "animationFrame", "says": "Whether to update on every animation frame if necessary. Only use if you\r need to update the position in response to an animation using transforms."}], "core.ComputePositionReturn": [{"accepts": "Placement", "name": "placement", "says": "The final chosen placement of the floating element."}, {"accepts": "Strategy", "name": "strategy", "says": "The strategy used to position the floating element."}, {"accepts": "MiddlewareData", "name": "middlewareData", "says": "Object containing data returned from all middleware, keyed by their name."}, {"accepts": "number", "name": "x", "says": ""}, {"accepts": "number", "name": "y", "says": ""}], "dom.VirtualElement": [{"accepts": "() => { bottom: number; height: number; left: number; right: number; top: number; width: number; x: number; y: number; }", "name": "getBoundingClientRect", "says": ""}, {"accepts": "(() => { bottom: number; height: number; left: number; right: number; top: number; width: number; x: number; y: number; }[] | DOMRectList)", "name": "getClientRects", "says": ""}, {"accepts": "Element", "name": "contextElement", "says": ""}], "tooltip.TriggerValueChangeDetails": [{"accepts": "string | null", "name": "value", "says": "The value of the trigger"}, {"accepts": "HTMLElement | null", "name": "triggerElement", "says": "The trigger element"}]};