@stealthscale/component-typography 0.3.1 → 0.3.2

package/dist/pages/highlight/highlight.js

@@ -0,0 +1,334 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { f as Highlight, o as Root, s as Item, t as Text } from "../../shared-CRBzNmJA.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Matrix, specimen, useWords } from "@stealthscale/specimen";
+import { SearchIcon, XIcon } from "lucide-react";
+import { SearchInput } from "@stealthscale/component-forms";
+import { Stack } from "@stealthscale/component-layout";
+//#region src/highlight/examples/letters.example.tsx
+var letters_example_exports = /* @__PURE__ */ __exportAll({
+	Letters: () => Letters,
+	source: () => source$3
+});
+function Letters(props) {
+	const $ = c(8);
+	const { t } = useWords("highlight");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("letters.query");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("letters.text");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== props || $[5] !== t0 || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx(Highlight, {
+			query: t0,
+			...props,
+			children: t1
+		}) });
+		$[4] = props;
+		$[5] = t0;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Highlight, HighlightProps, Text } from \"@stealthscale/component-typography\";\n\nexport function Letters(props: Omit<HighlightProps, \"children\" | \"query\">): ReactElement {\n  const { t } = useWords(\"highlight\");\n\n  return (\n    <Text>\n      <Highlight query={t(\"letters.query\")} {...props}>\n        {t(\"letters.text\")}\n      </Highlight>\n    </Text>\n  );\n}\n";
+//#endregion
+//#region src/highlight/examples/looks.example.tsx
+var looks_example_exports = /* @__PURE__ */ __exportAll({
+	Looks: () => Looks,
+	source: () => source$2
+});
+function Looks(props) {
+	const $ = c(8);
+	const { t } = useWords("highlight");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("looks.query");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("looks.text");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== props || $[5] !== t0 || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx(Highlight, {
+			query: t0,
+			...props,
+			children: t1
+		}) });
+		$[4] = props;
+		$[5] = t0;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Highlight, HighlightProps, Text } from \"@stealthscale/component-typography\";\n\nexport function Looks(props: Omit<HighlightProps, \"children\" | \"query\">): ReactElement {\n  const { t } = useWords(\"highlight\");\n\n  return (\n    <Text>\n      <Highlight query={t(\"looks.query\")} {...props}>\n        {t(\"looks.text\")}\n      </Highlight>\n    </Text>\n  );\n}\n";
+//#endregion
+//#region src/highlight/examples/search.example.tsx
+var search_example_exports = /* @__PURE__ */ __exportAll({
+	Search: () => Search,
+	source: () => source$1
+});
+const ARTICLES = [
+	"refunds",
+	"chargebacks",
+	"payouts",
+	"methods",
+	"fees"
+];
+function Search() {
+	const $ = c(34);
+	const { t } = useWords("highlight");
+	let t0;
+	if ($[0] !== t) {
+		t0 = () => t("search.query");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	const [query, setQuery] = useState(t0);
+	let T0;
+	let T1;
+	let t1;
+	let t2;
+	let t3;
+	if ($[2] !== query || $[3] !== t) {
+		const typed = query.trim().toLocaleLowerCase();
+		let t4;
+		if ($[9] !== t) {
+			t4 = (key) => t(`search.articles.${key}`);
+			$[9] = t;
+			$[10] = t4;
+		} else t4 = $[10];
+		const titles = ARTICLES.map(t4).filter((title) => title.toLocaleLowerCase().includes(typed));
+		T1 = Stack;
+		t2 = "md";
+		let t5;
+		if ($[11] !== t) {
+			t5 = t("search.label");
+			$[11] = t;
+			$[12] = t5;
+		} else t5 = $[12];
+		let t6;
+		if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+			t6 = /* @__PURE__ */ jsx(XIcon, {});
+			$[13] = t6;
+		} else t6 = $[13];
+		let t7;
+		if ($[14] !== t) {
+			t7 = t("search.clear");
+			$[14] = t;
+			$[15] = t7;
+		} else t7 = $[15];
+		let t8;
+		if ($[16] !== t) {
+			t8 = t("search.label");
+			$[16] = t;
+			$[17] = t8;
+		} else t8 = $[17];
+		let t9;
+		if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+			t9 = /* @__PURE__ */ jsx(SearchIcon, {});
+			$[18] = t9;
+		} else t9 = $[18];
+		if ($[19] !== query || $[20] !== t5 || $[21] !== t7 || $[22] !== t8) {
+			t3 = /* @__PURE__ */ jsx(SearchInput, {
+				"aria-label": t5,
+				clearIndicator: t6,
+				clearLabel: t7,
+				onValueChange: setQuery,
+				placeholder: t8,
+				searchIndicator: t9,
+				value: query
+			});
+			$[19] = query;
+			$[20] = t5;
+			$[21] = t7;
+			$[22] = t8;
+			$[23] = t3;
+		} else t3 = $[23];
+		T0 = Root;
+		let t10;
+		if ($[24] !== query) {
+			t10 = (title_0) => /* @__PURE__ */ jsx(Item, { children: /* @__PURE__ */ jsx(Highlight, {
+				query,
+				children: title_0
+			}) }, title_0);
+			$[24] = query;
+			$[25] = t10;
+		} else t10 = $[25];
+		t1 = titles.map(t10);
+		$[2] = query;
+		$[3] = t;
+		$[4] = T0;
+		$[5] = T1;
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+	} else {
+		T0 = $[4];
+		T1 = $[5];
+		t1 = $[6];
+		t2 = $[7];
+		t3 = $[8];
+	}
+	let t4;
+	if ($[26] !== T0 || $[27] !== t1) {
+		t4 = /* @__PURE__ */ jsx(T0, { children: t1 });
+		$[26] = T0;
+		$[27] = t1;
+		$[28] = t4;
+	} else t4 = $[28];
+	let t5;
+	if ($[29] !== T1 || $[30] !== t2 || $[31] !== t3 || $[32] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(T1, {
+			gap: t2,
+			children: [t3, t4]
+		});
+		$[29] = T1;
+		$[30] = t2;
+		$[31] = t3;
+		$[32] = t4;
+		$[33] = t5;
+	} else t5 = $[33];
+	return t5;
+}
+const source$1 = "import { type ReactElement, useState } from \"react\";\n\nimport { SearchIcon, XIcon } from \"lucide-react\";\n\nimport { SearchInput } from \"@stealthscale/component-forms\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Highlight, List } from \"@stealthscale/component-typography\";\n\nconst ARTICLES = [\"refunds\", \"chargebacks\", \"payouts\", \"methods\", \"fees\"] as const;\n\nexport function Search(): ReactElement {\n  const { t } = useWords(\"highlight\");\n  const [query, setQuery] = useState(() => t(\"search.query\"));\n  const typed = query.trim().toLocaleLowerCase();\n  const titles = ARTICLES.map((key) => t(`search.articles.${key}`)).filter((title) =>\n    title.toLocaleLowerCase().includes(typed),\n  );\n\n  return (\n    <Stack gap=\"md\">\n      <SearchInput\n        aria-label={t(\"search.label\")}\n        clearIndicator={<XIcon />}\n        clearLabel={t(\"search.clear\")}\n        onValueChange={setQuery}\n        placeholder={t(\"search.label\")}\n        searchIndicator={<SearchIcon />}\n        value={query}\n      />\n      <List.Root>\n        {titles.map((title) => (\n          <List.Item key={title}>\n            <Highlight query={query}>{title}</Highlight>\n          </List.Item>\n        ))}\n      </List.Root>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/highlight/examples/terms.example.tsx
+var terms_example_exports = /* @__PURE__ */ __exportAll({
+	Terms: () => Terms,
+	source: () => source
+});
+function Terms() {
+	const $ = c(12);
+	const { t } = useWords("highlight");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("terms.refund");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("terms.chargeback");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t0 || $[5] !== t1) {
+		t2 = [t0, t1];
+		$[4] = t0;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== t) {
+		t3 = t("terms.text");
+		$[7] = t;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== t2 || $[10] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx(Highlight, {
+			query: t2,
+			children: t3
+		}) });
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Highlight, Text } from \"@stealthscale/component-typography\";\n\nexport function Terms(): ReactElement {\n  const { t } = useWords(\"highlight\");\n\n  return (\n    <Text>\n      <Highlight query={[t(\"terms.refund\"), t(\"terms.chargeback\")]}>{t(\"terms.text\")}</Highlight>\n    </Text>\n  );\n}\n";
+//#endregion
+//#region src/highlight/highlight.specimen.tsx
+/**
+* Values of `ignoreCase` in the letter case scene, the default first.
+*/
+const CASES = [true, false];
+/**
+* Looks of the mark in the looks scene, the default first.
+*/
+const LOOKS = [
+	"subtle",
+	"solid",
+	"surface",
+	"outline",
+	"plain",
+	"text"
+];
+/**
+* Hand-written scene for search results filtered and marked as a person types.
+*/
+const searched = {
+	about: "highlight.search.about",
+	draw: Search,
+	example: search_example_exports,
+	title: "highlight.search.title"
+};
+/**
+* Hand-written scene for several terms in one text.
+*/
+const listed = {
+	about: "highlight.terms.about",
+	draw: Terms,
+	example: terms_example_exports,
+	title: "highlight.terms.title"
+};
+/**
+* Hand-written scene for letter case ignored and matched.
+*/
+const cased = {
+	about: "highlight.letters.about",
+	draw: () => /* @__PURE__ */ jsx(Matrix, {
+		knob: "ignoreCase",
+		of: CASES,
+		children: (ignoreCase) => /* @__PURE__ */ jsx(Letters, { ignoreCase })
+	}),
+	example: letters_example_exports,
+	props: { ignoreCase: true },
+	title: "highlight.letters.title"
+};
+/**
+* Hand-written scene for the mark's looks on every match.
+*/
+const looked = {
+	about: "highlight.looks.about",
+	draw: () => /* @__PURE__ */ jsx(Matrix, {
+		knob: "variant",
+		of: LOOKS,
+		children: (variant) => /* @__PURE__ */ jsx(Looks, { variant })
+	}),
+	example: looks_example_exports,
+	props: { variant: "subtle" },
+	title: "highlight.looks.title"
+};
+var highlight_specimen_default = specimen({
+	about: "highlight.about",
+	id: "components/typography/highlight",
+	imports: "import { Highlight } from \"@stealthscale/component-typography\";",
+	scenes: [
+		searched,
+		listed,
+		cased,
+		looked
+	],
+	title: "highlight.title"
+});
+//#endregion
+export { cased, highlight_specimen_default as default, listed, looked, searched };

package/dist/pages/highlight/highlight.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"HighlightProps": {"conditions": 284, "foreign": 1039}, "TextProps": {"conditions": 284, "foreign": 1039}, "IndicatorProps": {"conditions": 284, "foreign": 1041}, "ItemProps": {"conditions": 284, "foreign": 1042}, "RootProps": {"conditions": 284, "foreign": 1039}};
+export const parts = {"HighlightProps": [{"accepts": "string", "fallback": "", "kind": "option", "name": "children", "refers": [], "required": true, "says": "Text to search, as a string."}, {"accepts": "\"glow\" | \"shine\"", "fallback": "", "kind": "variant", "name": "effect", "refers": [], "required": false, "says": "Effect around the highlight."}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "ignoreCase", "refers": [], "required": false, "says": "Whether a match ignores letter case, true unless stated."}, {"accepts": "\"md\" | \"none\" | \"sm\" | \"xs\"", "fallback": "", "kind": "variant", "name": "inset", "refers": [], "required": false, "says": "Inline padding from the inset scale, or `none`. The plain and text looks set no padding."}, {"accepts": "\"fade\" | \"reveal\" | \"rise\"", "fallback": "", "kind": "variant", "name": "motion", "refers": [], "required": false, "says": "Entrance animation. Each value reads the theme's animation style of the same name."}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "Semantic palette of the fill and the edge, and of the text in the plain and text looks."}, {"accepts": "string | readonly string[]", "fallback": "", "kind": "option", "name": "query", "refers": [], "required": true, "says": "Term or terms to mark."}, {"accepts": "Corner", "fallback": "", "kind": "variant", "name": "radius", "refers": ["kit.Corner"], "required": false, "says": "Corner radius token."}, {"accepts": "\"outline\" | \"plain\" | \"solid\" | \"subtle\" | \"surface\" | \"text\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": "Look of the highlight."}], "TextProps": [{"accepts": "\"center\" | \"end\" | \"justify\" | \"start\"", "fallback": "", "kind": "variant", "name": "align", "refers": [], "required": false, "says": "Inline alignment of the lines. `start` and `end` follow the writing direction."}, {"accepts": "\"bottom\" | \"edges\" | \"radial\"", "fallback": "", "kind": "variant", "name": "mask", "refers": [], "required": false, "says": "Fade mask, read from the theme's `mask.*` layer styles."}, {"accepts": "\"fade\" | \"reveal\" | \"rise\"", "fallback": "", "kind": "variant", "name": "motion", "refers": [], "required": false, "says": "Entrance animation. Each value reads the theme's animation style of the same name."}, {"accepts": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"", "fallback": "", "kind": "variant", "name": "size", "refers": [], "required": false, "says": "Step of the body text role, from `xs` to `xl`."}, {"accepts": "Tone", "fallback": "", "kind": "variant", "name": "tone", "refers": ["kit.Tone"], "required": false, "says": "Foreground token of the text."}, {"accepts": "boolean", "fallback": "", "kind": "variant", "name": "truncate", "refers": [], "required": false, "says": "Cuts the text to one line that ends in an ellipsis."}, {"accepts": "Weight", "fallback": "", "kind": "variant", "name": "weight", "refers": ["kit.Weight"], "required": false, "says": "Font weight token."}], "IndicatorProps": [], "ItemProps": [], "RootProps": [{"accepts": "\"center\" | \"end\" | \"start\"", "fallback": "", "kind": "variant", "name": "align", "refers": [], "required": false, "says": "Block alignment of an item's indicator against its text, in the `plain` look."}, {"accepts": "Scale", "fallback": "", "kind": "variant", "name": "gap", "refers": ["kit.Scale"], "required": false, "says": "Gap token between the items."}, {"accepts": "\"circle\" | \"dash\" | \"decimal\" | \"disc\" | \"leading-zero\" | \"lower-alpha\" | \"lower-greek\" | \"lower-roman\" | \"square\" | \"upper-alpha\" | \"upper-roman\"", "fallback": "", "kind": "variant", "name": "marker", "refers": [], "required": false, "says": "Browser marker type of the items, in the `marker` look."}, {"accepts": "\"reveal\" | \"rise\"", "fallback": "", "kind": "variant", "name": "motion", "refers": [], "required": false, "says": "Entrance animation of each item. Each value reads the theme's animation style of the same name."}, {"accepts": "\"marker\" | \"plain\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": "Look of the list."}]};
+export const shapes = {"kit.Corner": [{"accepts": "", "name": "\"full\"", "says": ""}, {"accepts": "", "name": "\"l1\"", "says": ""}, {"accepts": "", "name": "\"l2\"", "says": ""}, {"accepts": "", "name": "\"l3\"", "says": ""}], "kit.Tone": [{"accepts": "", "name": "\"default\"", "says": ""}, {"accepts": "", "name": "\"error\"", "says": ""}, {"accepts": "", "name": "\"info\"", "says": ""}, {"accepts": "", "name": "\"inverted\"", "says": ""}, {"accepts": "", "name": "\"muted\"", "says": ""}, {"accepts": "", "name": "\"subtle\"", "says": ""}, {"accepts": "", "name": "\"success\"", "says": ""}, {"accepts": "", "name": "\"warning\"", "says": ""}], "kit.Weight": [{"accepts": "", "name": "\"bold\"", "says": ""}, {"accepts": "", "name": "\"medium\"", "says": ""}, {"accepts": "", "name": "\"normal\"", "says": ""}, {"accepts": "", "name": "\"semibold\"", "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": ""}]};

package/dist/pages/icon/icon.js

@@ -0,0 +1,110 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { f as recipe } from "../../recipes-DuvOpofr.js";
+import { x as Icon } from "../../shared-CRBzNmJA.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { grounded, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { ArrowRightIcon, StarIcon } from "lucide-react";
+//#region src/icon/examples/favourite.example.tsx
+var favourite_example_exports = /* @__PURE__ */ __exportAll({
+	Favourite: () => Favourite,
+	source: () => source$1
+});
+function Favourite(props) {
+	const $ = c(5);
+	const { t } = useWords("icon");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("star");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Icon, {
+			"aria-hidden": false,
+			"aria-label": t0,
+			as: StarIcon,
+			...props
+		});
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { StarIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Icon } from \"@stealthscale/component-typography\";\n\nexport function Favourite(props: Parameters<typeof Icon>[0]): ReactElement {\n  const { t } = useWords(\"icon\");\n\n  return <Icon aria-hidden={false} aria-label={t(\"star\")} as={StarIcon} {...props} />;\n}\n";
+//#endregion
+//#region src/icon/examples/next.example.tsx
+var next_example_exports = /* @__PURE__ */ __exportAll({
+	Next: () => Next,
+	source: () => source
+});
+function Next(props) {
+	const $ = c(5);
+	const { t } = useWords("icon");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("arrow");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Icon, {
+			"aria-hidden": false,
+			"aria-label": t0,
+			as: ArrowRightIcon,
+			...props
+		});
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { ArrowRightIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Icon } from \"@stealthscale/component-typography\";\n\nexport function Next(props: Parameters<typeof Icon>[0]): ReactElement {\n  const { t } = useWords(\"icon\");\n\n  return <Icon aria-hidden={false} aria-label={t(\"arrow\")} as={ArrowRightIcon} {...props} />;\n}\n";
+//#endregion
+//#region src/icon/icon.specimen.tsx
+/**
+* Catalogue page for the icon.
+*
+* @remarks
+*   `scenesOf` generates one scene per recipe axis. The examples pass lucide icons through `as`: a
+*   star for the size, ink and motion scenes, and an arrow for the mirroring scene, because a
+*   mirrored star looks the same. The ink, motion and mirroring scenes render at `lg`. The tone
+*   scene renders the inverted ink on `bg.inverted` through `grounded`. Every scene renders a
+*   component from `examples/` and shows that file as its source. The words are keys under `icon`
+*   in `locales/en/specimen/icon.json`.
+*/
+var icon_specimen_default = specimen({
+	about: "icon.about",
+	id: "components/typography/icon",
+	imports: "import { Icon } from \"@stealthscale/component-typography\";",
+	scenes: scenesOf(recipe, {
+		axes: {
+			mirrored: {
+				draw: (props) => /* @__PURE__ */ jsx(Next, { ...props }),
+				example: next_example_exports,
+				with: { size: "lg" }
+			},
+			motion: { with: { size: "lg" } },
+			tone: {
+				draw: (props) => grounded(props.tone, /* @__PURE__ */ jsx(Favourite, { ...props })),
+				with: { size: "lg" }
+			}
+		},
+		draw: (props) => /* @__PURE__ */ jsx(Favourite, { ...props }),
+		example: favourite_example_exports,
+		namespace: "icon",
+		order: [
+			"size",
+			"tone",
+			"motion",
+			"mirrored"
+		]
+	}),
+	title: "icon.title"
+});
+//#endregion
+export { icon_specimen_default as default };

package/dist/pages/icon/icon.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"IconProps": {"conditions": 284, "foreign": 1178}};
+export const parts = {"IconProps": [{"accepts": "boolean", "fallback": "", "kind": "variant", "name": "mirrored", "refers": [], "required": false, "says": "Mirrors the icon in a right-to-left page, for an icon that points, such as an arrow."}, {"accepts": "\"float\" | \"spin\" | \"twinkle\"", "fallback": "", "kind": "variant", "name": "motion", "refers": [], "required": false, "says": "Motion. Each value reads the theme's animation style of the same name."}, {"accepts": "\"2xl\" | \"3xl\" | \"4xl\" | \"inherit\" | \"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"", "fallback": "", "kind": "variant", "name": "size", "refers": [], "required": false, "says": "Box size from the icon scale, or `1em` at `inherit`."}, {"accepts": "\"current\" | \"default\" | \"error\" | \"info\" | \"inverted\" | \"muted\" | \"subtle\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "tone", "refers": [], "required": false, "says": "Foreground token of the icon."}]};
+export const shapes = {};