@stealthscale/component-screen 0.2.1 → 0.2.3

package/dist/pages/action-bar/action-bar.js

@@ -0,0 +1,471 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { O as recipe } from "../../recipes-Cmy1leBm.js";
+import { Gt as Content, Kt as CloseTrigger, Ut as Root$1, Wt as Positioner, a as Start, c as Root, d as End, p as Action } from "../../shared-DxlFabHA.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Checkbox } from "@stealthscale/component-forms";
+import { Grid, Stack } from "@stealthscale/component-layout";
+import { scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { CheckIcon, DownloadIcon, EllipsisIcon, ReceiptIcon, Share2Icon, XIcon } from "lucide-react";
+import { Text } from "@stealthscale/component-typography";
+//#region src/action-bar/examples/photos.example.tsx
+var photos_example_exports = /* @__PURE__ */ __exportAll({
+	Photos: () => Photos,
+	source: () => source$1
+});
+const PHOTOS = [
+	"harbour",
+	"market",
+	"bridge",
+	"garden",
+	"tower",
+	"square"
+];
+const ACTIONS$1 = [
+	{ name: "album" },
+	{ name: "trash" },
+	{
+		Icon: DownloadIcon,
+		name: "download"
+	},
+	{
+		Icon: Share2Icon,
+		name: "share",
+		primary: true
+	}
+];
+function choices$1(names, label, selected, toggle) {
+	return names.map((name) => /* @__PURE__ */ jsxs(Checkbox.Root, {
+		checked: selected.includes(name),
+		onCheckedChange: ({ checked }) => {
+			toggle(name, checked === true);
+		},
+		children: [/* @__PURE__ */ jsx(Checkbox.Control, { children: /* @__PURE__ */ jsx(Checkbox.Indicator, { children: /* @__PURE__ */ jsx(CheckIcon, { strokeWidth: 3 }) }) }), /* @__PURE__ */ jsx(Checkbox.Label, { children: label(name) })]
+	}, name));
+}
+function Photos() {
+	const $ = c(50);
+	const { t } = useWords("action-bar");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = [];
+		$[0] = t0;
+	} else t0 = $[0];
+	const [selected, setSelected] = useState(t0);
+	const [done, setDone] = useState("");
+	const count = selected.length;
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = (photo, on) => {
+			setSelected((held) => on ? [...held, photo] : held.filter((each) => each !== photo));
+		};
+		$[1] = t1;
+	} else t1 = $[1];
+	const toggle = t1;
+	let t2;
+	if ($[2] !== t) {
+		t2 = (photo_0) => t(`photos.names.${photo_0}`);
+		$[2] = t;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== selected || $[5] !== t2) {
+		t3 = choices$1(PHOTOS, t2, selected, toggle);
+		$[4] = selected;
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Grid.Root, {
+			columns: "2",
+			justify: "start",
+			children: t3
+		});
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== done) {
+		t5 = /* @__PURE__ */ jsx(Text, {
+			as: "output",
+			children: done
+		});
+		$[9] = done;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t) {
+		t6 = t("photos.announcement");
+		$[11] = t;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = () => {
+			setSelected([]);
+		};
+		$[13] = t7;
+	} else t7 = $[13];
+	const t8 = count > 0;
+	let t9;
+	if ($[14] !== t) {
+		t9 = t("photos.label");
+		$[14] = t;
+		$[15] = t9;
+	} else t9 = $[15];
+	let t10;
+	if ($[16] !== t) {
+		t10 = t("photos.more");
+		$[16] = t;
+		$[17] = t10;
+	} else t10 = $[17];
+	let t11;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsx(EllipsisIcon, { size: "1em" });
+		$[18] = t11;
+	} else t11 = $[18];
+	let t12;
+	if ($[19] !== t) {
+		t12 = t("clear");
+		$[19] = t;
+		$[20] = t12;
+	} else t12 = $[20];
+	let t13;
+	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = /* @__PURE__ */ jsx(XIcon, { size: "1em" });
+		$[21] = t13;
+	} else t13 = $[21];
+	let t14;
+	if ($[22] !== t12) {
+		t14 = /* @__PURE__ */ jsx(CloseTrigger, {
+			"aria-label": t12,
+			children: t13
+		});
+		$[22] = t12;
+		$[23] = t14;
+	} else t14 = $[23];
+	let t15;
+	if ($[24] !== count || $[25] !== t) {
+		t15 = t("photos.count", { count });
+		$[24] = count;
+		$[25] = t;
+		$[26] = t15;
+	} else t15 = $[26];
+	let t16;
+	if ($[27] !== t15) {
+		t16 = /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			children: t15
+		});
+		$[27] = t15;
+		$[28] = t16;
+	} else t16 = $[28];
+	let t17;
+	if ($[29] !== t14 || $[30] !== t16) {
+		t17 = /* @__PURE__ */ jsxs(Start, { children: [t14, t16] });
+		$[29] = t14;
+		$[30] = t16;
+		$[31] = t17;
+	} else t17 = $[31];
+	let t18;
+	if ($[32] !== count || $[33] !== t) {
+		t18 = ACTIONS$1.map((action) => /* @__PURE__ */ jsx(Action, {
+			icon: "Icon" in action ? /* @__PURE__ */ jsx(action.Icon, { size: "1em" }) : void 0,
+			onClick: () => {
+				setDone(t("photos.done", {
+					action: t(`photos.${action.name}`),
+					count
+				}));
+			},
+			primary: "primary" in action,
+			priority: "primary" in action ? "primary" : void 0,
+			children: t(`photos.${action.name}`)
+		}, action.name));
+		$[32] = count;
+		$[33] = t;
+		$[34] = t18;
+	} else t18 = $[34];
+	let t19;
+	if ($[35] !== t18) {
+		t19 = /* @__PURE__ */ jsx(End, { children: t18 });
+		$[35] = t18;
+		$[36] = t19;
+	} else t19 = $[36];
+	let t20;
+	if ($[37] !== t10 || $[38] !== t17 || $[39] !== t19 || $[40] !== t9) {
+		t20 = /* @__PURE__ */ jsx(Positioner, { children: /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsxs(Root, {
+			"aria-label": t9,
+			more: t10,
+			moreIcon: t11,
+			size: "sm",
+			children: [t17, t19]
+		}) }) });
+		$[37] = t10;
+		$[38] = t17;
+		$[39] = t19;
+		$[40] = t9;
+		$[41] = t20;
+	} else t20 = $[41];
+	let t21;
+	if ($[42] !== t20 || $[43] !== t6 || $[44] !== t8) {
+		t21 = /* @__PURE__ */ jsx(Root$1, {
+			announcement: t6,
+			onOpenChange: t7,
+			open: t8,
+			placement: "bottom-end",
+			children: t20
+		});
+		$[42] = t20;
+		$[43] = t6;
+		$[44] = t8;
+		$[45] = t21;
+	} else t21 = $[45];
+	let t22;
+	if ($[46] !== t21 || $[47] !== t4 || $[48] !== t5) {
+		t22 = /* @__PURE__ */ jsxs(Stack, {
+			gap: "sm",
+			children: [
+				t4,
+				t5,
+				t21
+			]
+		});
+		$[46] = t21;
+		$[47] = t4;
+		$[48] = t5;
+		$[49] = t22;
+	} else t22 = $[49];
+	return t22;
+}
+const source$1 = "import { type ReactElement, useState } from \"react\";\n\nimport { CheckIcon, DownloadIcon, EllipsisIcon, Share2Icon, XIcon } from \"lucide-react\";\n\nimport { Checkbox } from \"@stealthscale/component-forms\";\nimport { Grid, Stack } from \"@stealthscale/component-layout\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { ActionBar, Toolbar } from \"@stealthscale/component-screen\";\n\nconst PHOTOS = [\"harbour\", \"market\", \"bridge\", \"garden\", \"tower\", \"square\"] as const;\n\nconst ACTIONS = [\n  { name: \"album\" },\n  { name: \"trash\" },\n  { Icon: DownloadIcon, name: \"download\" },\n  { Icon: Share2Icon, name: \"share\", primary: true },\n] as const;\n\nfunction choices<Name extends string>(\n  names: readonly Name[],\n  label: (name: Name) => string,\n  selected: readonly string[],\n  toggle: (name: Name, on: boolean) => void,\n): ReactElement[] {\n  return names.map((name) => (\n    <Checkbox.Root\n      checked={selected.includes(name)}\n      key={name}\n      onCheckedChange={({ checked }) => {\n        toggle(name, checked === true);\n      }}\n    >\n      <Checkbox.Control>\n        <Checkbox.Indicator>\n          <CheckIcon strokeWidth={3} />\n        </Checkbox.Indicator>\n      </Checkbox.Control>\n      <Checkbox.Label>{label(name)}</Checkbox.Label>\n    </Checkbox.Root>\n  ));\n}\n\nexport function Photos(): ReactElement {\n  const { t } = useWords(\"action-bar\");\n  const [selected, setSelected] = useState<readonly string[]>([]);\n  const [done, setDone] = useState(\"\");\n  const count = selected.length;\n  const toggle = (photo: string, on: boolean): void => {\n    setSelected((held) => (on ? [...held, photo] : held.filter((each) => each !== photo)));\n  };\n\n  return (\n    <Stack gap=\"sm\">\n      <Grid.Root columns=\"2\" justify=\"start\">\n        {choices(PHOTOS, (photo) => t(`photos.names.${photo}`), selected, toggle)}\n      </Grid.Root>\n      <Text as=\"output\">{done}</Text>\n      <ActionBar.Root\n        announcement={t(\"photos.announcement\")}\n        onOpenChange={() => {\n          setSelected([]);\n        }}\n        open={count > 0}\n        placement=\"bottom-end\"\n      >\n        <ActionBar.Positioner>\n          <ActionBar.Content>\n            <Toolbar.Root\n              aria-label={t(\"photos.label\")}\n              more={t(\"photos.more\")}\n              moreIcon={<EllipsisIcon size=\"1em\" />}\n              size=\"sm\"\n            >\n              <Toolbar.Start>\n                <ActionBar.CloseTrigger aria-label={t(\"clear\")}>\n                  <XIcon size=\"1em\" />\n                </ActionBar.CloseTrigger>\n                <Text size=\"sm\">{t(\"photos.count\", { count })}</Text>\n              </Toolbar.Start>\n              <Toolbar.End>\n                {ACTIONS.map((action) => (\n                  <Toolbar.Action\n                    icon={\"Icon\" in action ? <action.Icon size=\"1em\" /> : undefined}\n                    key={action.name}\n                    onClick={() => {\n                      setDone(t(\"photos.done\", { action: t(`photos.${action.name}`), count }));\n                    }}\n                    primary={\"primary\" in action}\n                    priority={\"primary\" in action ? \"primary\" : undefined}\n                  >\n                    {t(`photos.${action.name}`)}\n                  </Toolbar.Action>\n                ))}\n              </Toolbar.End>\n            </Toolbar.Root>\n          </ActionBar.Content>\n        </ActionBar.Positioner>\n      </ActionBar.Root>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/action-bar/examples/selection.example.tsx
+var selection_example_exports = /* @__PURE__ */ __exportAll({
+	Selection: () => Selection,
+	source: () => source
+});
+const INVOICES = [
+	"1042",
+	"1043",
+	"1044",
+	"1045"
+];
+const ACTIONS = [{
+	Icon: DownloadIcon,
+	name: "download",
+	primary: false
+}, {
+	Icon: ReceiptIcon,
+	name: "mark",
+	primary: true
+}];
+function choices(names, label, selected, toggle) {
+	return names.map((name) => /* @__PURE__ */ jsxs(Checkbox.Root, {
+		checked: selected.includes(name),
+		onCheckedChange: ({ checked }) => {
+			toggle(name, checked === true);
+		},
+		children: [/* @__PURE__ */ jsx(Checkbox.Control, { children: /* @__PURE__ */ jsx(Checkbox.Indicator, { children: /* @__PURE__ */ jsx(CheckIcon, { strokeWidth: 3 }) }) }), /* @__PURE__ */ jsx(Checkbox.Label, { children: label(name) })]
+	}, name));
+}
+function Selection(props) {
+	const $ = c(42);
+	const { t } = useWords("action-bar");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = [];
+		$[0] = t0;
+	} else t0 = $[0];
+	const [selected, setSelected] = useState(t0);
+	const [done, setDone] = useState("");
+	const count = selected.length;
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = (number, on) => {
+			setSelected((held) => on ? [...held, number] : held.filter((each) => each !== number));
+		};
+		$[1] = t1;
+	} else t1 = $[1];
+	const toggle = t1;
+	let t2;
+	if ($[2] !== t) {
+		t2 = (number_0) => t("selection.invoice", { number: number_0 });
+		$[2] = t;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== selected || $[5] !== t2) {
+		t3 = choices(INVOICES, t2, selected, toggle);
+		$[4] = selected;
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== done) {
+		t4 = /* @__PURE__ */ jsx(Text, {
+			as: "output",
+			children: done
+		});
+		$[7] = done;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = () => {
+			setSelected([]);
+		};
+		$[9] = t5;
+	} else t5 = $[9];
+	const t6 = count > 0;
+	let t7;
+	if ($[10] !== t) {
+		t7 = t("selection.label");
+		$[10] = t;
+		$[11] = t7;
+	} else t7 = $[11];
+	let t8;
+	if ($[12] !== t) {
+		t8 = t("clear");
+		$[12] = t;
+		$[13] = t8;
+	} else t8 = $[13];
+	let t9;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx(XIcon, { size: "1em" });
+		$[14] = t9;
+	} else t9 = $[14];
+	let t10;
+	if ($[15] !== t8) {
+		t10 = /* @__PURE__ */ jsx(CloseTrigger, {
+			"aria-label": t8,
+			children: t9
+		});
+		$[15] = t8;
+		$[16] = t10;
+	} else t10 = $[16];
+	let t11;
+	if ($[17] !== count || $[18] !== t) {
+		t11 = t("selection.count", { count });
+		$[17] = count;
+		$[18] = t;
+		$[19] = t11;
+	} else t11 = $[19];
+	let t12;
+	if ($[20] !== t11) {
+		t12 = /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			children: t11
+		});
+		$[20] = t11;
+		$[21] = t12;
+	} else t12 = $[21];
+	let t13;
+	if ($[22] !== t10 || $[23] !== t12) {
+		t13 = /* @__PURE__ */ jsxs(Start, { children: [t10, t12] });
+		$[22] = t10;
+		$[23] = t12;
+		$[24] = t13;
+	} else t13 = $[24];
+	let t14;
+	if ($[25] !== count || $[26] !== t) {
+		t14 = ACTIONS.map((t15) => {
+			const { Icon, name, primary } = t15;
+			return /* @__PURE__ */ jsx(Action, {
+				icon: /* @__PURE__ */ jsx(Icon, { size: "1em" }),
+				onClick: () => {
+					setDone(t(`selection.${name}.done`, { count }));
+				},
+				primary,
+				priority: primary ? "primary" : void 0,
+				children: t(`selection.${name}.label`)
+			}, name);
+		});
+		$[25] = count;
+		$[26] = t;
+		$[27] = t14;
+	} else t14 = $[27];
+	let t15;
+	if ($[28] !== t14) {
+		t15 = /* @__PURE__ */ jsx(End, { children: t14 });
+		$[28] = t14;
+		$[29] = t15;
+	} else t15 = $[29];
+	let t16;
+	if ($[30] !== t13 || $[31] !== t15 || $[32] !== t7) {
+		t16 = /* @__PURE__ */ jsx(Positioner, { children: /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsxs(Root, {
+			"aria-label": t7,
+			size: "sm",
+			children: [t13, t15]
+		}) }) });
+		$[30] = t13;
+		$[31] = t15;
+		$[32] = t7;
+		$[33] = t16;
+	} else t16 = $[33];
+	let t17;
+	if ($[34] !== props || $[35] !== t16 || $[36] !== t6) {
+		t17 = /* @__PURE__ */ jsx(Root$1, {
+			...props,
+			onOpenChange: t5,
+			open: t6,
+			children: t16
+		});
+		$[34] = props;
+		$[35] = t16;
+		$[36] = t6;
+		$[37] = t17;
+	} else t17 = $[37];
+	let t18;
+	if ($[38] !== t17 || $[39] !== t3 || $[40] !== t4) {
+		t18 = /* @__PURE__ */ jsxs(Stack, {
+			gap: "sm",
+			children: [
+				t3,
+				t4,
+				t17
+			]
+		});
+		$[38] = t17;
+		$[39] = t3;
+		$[40] = t4;
+		$[41] = t18;
+	} else t18 = $[41];
+	return t18;
+}
+const source = "import { type ReactElement, useState } from \"react\";\n\nimport { CheckIcon, DownloadIcon, ReceiptIcon, XIcon } from \"lucide-react\";\n\nimport { Checkbox } from \"@stealthscale/component-forms\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { ActionBar, Toolbar } from \"@stealthscale/component-screen\";\n\nconst INVOICES = [\"1042\", \"1043\", \"1044\", \"1045\"] as const;\n\nconst ACTIONS = [\n  { Icon: DownloadIcon, name: \"download\", primary: false },\n  { Icon: ReceiptIcon, name: \"mark\", primary: true },\n] as const;\n\nfunction choices<Name extends string>(\n  names: readonly Name[],\n  label: (name: Name) => string,\n  selected: readonly string[],\n  toggle: (name: Name, on: boolean) => void,\n): ReactElement[] {\n  return names.map((name) => (\n    <Checkbox.Root\n      checked={selected.includes(name)}\n      key={name}\n      onCheckedChange={({ checked }) => {\n        toggle(name, checked === true);\n      }}\n    >\n      <Checkbox.Control>\n        <Checkbox.Indicator>\n          <CheckIcon strokeWidth={3} />\n        </Checkbox.Indicator>\n      </Checkbox.Control>\n      <Checkbox.Label>{label(name)}</Checkbox.Label>\n    </Checkbox.Root>\n  ));\n}\n\nexport function Selection(props: Omit<ActionBar.RootProps, \"open\">): ReactElement {\n  const { t } = useWords(\"action-bar\");\n  const [selected, setSelected] = useState<readonly string[]>([]);\n  const [done, setDone] = useState(\"\");\n  const count = selected.length;\n  const toggle = (number: string, on: boolean): void => {\n    setSelected((held) => (on ? [...held, number] : held.filter((each) => each !== number)));\n  };\n\n  return (\n    <Stack gap=\"sm\">\n      {choices(INVOICES, (number) => t(\"selection.invoice\", { number }), selected, toggle)}\n      <Text as=\"output\">{done}</Text>\n      <ActionBar.Root\n        {...props}\n        onOpenChange={() => {\n          setSelected([]);\n        }}\n        open={count > 0}\n      >\n        <ActionBar.Positioner>\n          <ActionBar.Content>\n            <Toolbar.Root aria-label={t(\"selection.label\")} size=\"sm\">\n              <Toolbar.Start>\n                <ActionBar.CloseTrigger aria-label={t(\"clear\")}>\n                  <XIcon size=\"1em\" />\n                </ActionBar.CloseTrigger>\n                <Text size=\"sm\">{t(\"selection.count\", { count })}</Text>\n              </Toolbar.Start>\n              <Toolbar.End>\n                {ACTIONS.map(({ Icon, name, primary }) => (\n                  <Toolbar.Action\n                    icon={<Icon size=\"1em\" />}\n                    key={name}\n                    onClick={() => {\n                      setDone(t(`selection.${name}.done`, { count }));\n                    }}\n                    primary={primary}\n                    priority={primary ? \"primary\" : undefined}\n                  >\n                    {t(`selection.${name}.label`)}\n                  </Toolbar.Action>\n                ))}\n              </Toolbar.End>\n            </Toolbar.Root>\n          </ActionBar.Content>\n        </ActionBar.Positioner>\n      </ActionBar.Root>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/action-bar/action-bar.specimen.tsx
+/**
+* Catalogue page for the action bar.
+*
+* @remarks
+*   `scenesOf` generates the placements from the selection example, whose bar acts on four
+*   invoices. The folding scene is hand-written, because it shows the toolbar inside the bar
+*   folding its actions in a narrow window, which no axis sets. Every bar renders closed and is
+*   fixed to the window while open, so a scene is as tall as its list. The words are keys under
+*   `action-bar` in `locales/en/specimen/action-bar.json`.
+*/
+/**
+* Hand-written scene for a bar whose toolbar folds its quieter actions in a narrow window.
+*/
+const folding = {
+	about: "action-bar.photos.about",
+	draw: Photos,
+	example: photos_example_exports,
+	title: "action-bar.photos.title"
+};
+var action_bar_specimen_default = specimen({
+	about: "action-bar.about",
+	id: "components/screen/action-bar",
+	imports: "import { ActionBar, Toolbar } from \"@stealthscale/component-screen\";",
+	scenes: [...scenesOf(recipe, {
+		draw: (props) => /* @__PURE__ */ jsx(Selection, { ...props }),
+		example: selection_example_exports,
+		namespace: "action-bar"
+	}), folding],
+	title: "action-bar.title"
+});
+//#endregion
+export { action_bar_specimen_default as default, folding };

package/dist/pages/action-bar/action-bar.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"CloseTriggerProps": {"conditions": 284, "foreign": 1050}, "ContentProps": {"conditions": 284, "foreign": 1040}, "PositionerProps": {"conditions": 284, "foreign": 1041}, "RootProps": {"conditions": 284, "foreign": 1041}};
+export const parts = {"CloseTriggerProps": [{"accepts": "\"glow\" | \"pulse\"", "fallback": "", "kind": "variant", "name": "effect", "refers": [], "required": false, "says": "The halo around the button, in the palette's solid at half opacity."}, {"accepts": "Lift", "fallback": "", "kind": "variant", "name": "elevation", "refers": ["kit.Lift"], "required": false, "says": ""}, {"accepts": "string", "fallback": "", "kind": "option", "name": "href", "refers": [], "required": false, "says": "The link's target, which renders the control as an `a`."}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "Palette of every look. The base sets `primary`."}, {"accepts": "\"square\"", "fallback": "", "kind": "variant", "name": "shape", "refers": [], "required": false, "says": ""}, {"accepts": "Scale", "fallback": "", "kind": "variant", "name": "size", "refers": ["kit.Scale"], "required": false, "says": ""}, {"accepts": "\"ghost\" | \"glass\" | \"outline\" | \"plain\" | \"solid\" | \"subtle\" | \"surface\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": ""}], "ContentProps": [], "PositionerProps": [], "RootProps": [{"accepts": "string", "fallback": "\"Actions available\"", "kind": "option", "name": "announcement", "refers": [], "required": false, "says": "The words that a screen reader announces when the bar opens."}, {"accepts": "boolean", "fallback": "true", "kind": "option", "name": "closeOnEscape", "refers": [], "required": false, "says": "When true, Escape inside the bar asks to close it."}, {"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": ["kit.OpenChangeDetails"], "required": false, "says": "Runs when the bar asks to close. The caller closes the bar by clearing the selection."}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "open", "refers": [], "required": true, "says": "True while the bar is open. A caller sets it while anything is selected."}, {"accepts": "\"bottom\" | \"bottom-end\" | \"bottom-start\"", "fallback": "", "kind": "variant", "name": "placement", "refers": [], "required": false, "says": "Place of the bar along the bottom of the window: at the start, in the middle or at the end."}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "skipAnimationOnMount", "refers": [], "required": false, "says": "When true, content that is open on mount plays no entry animation."}, {"accepts": "boolean", "fallback": "true", "kind": "option", "name": "unmountOnExit", "refers": [], "required": false, "says": "When true, the overlay removes its content once the exit animation ends."}]};
+export const shapes = {"kit.Lift": [{"accepts": "", "name": "\"floating\"", "says": ""}, {"accepts": "", "name": "\"raised\"", "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": ""}], "kit.OpenChangeDetails": [{"accepts": "boolean", "name": "open", "says": "The open state that the bar asks for. Escape and the close trigger ask for false."}]};