@stealthscale/component-typography 0.3.1 → 0.3.2

package/dist/shared-CRBzNmJA.js

@@ -0,0 +1,516 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
+import { a as recipe$8, c as recipe$5, d as recipe$2, f as recipe$1, i as recipe$9, l as recipe$4, n as recipe$11, o as recipe$6, p as recipe, r as recipe$10, s as recipe$7, t as recipe$12, u as recipe$3 } from "./recipes-DuvOpofr.js";
+import { createRecipeContext, createSlotRecipeContext } from "@stealthscale/theme";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { useHighlight } from "@stealthscale/hooks";
+//#region src/blockquote/context.ts
+/**
+* Binds the blockquote slot recipe to React.
+*
+* @remarks
+*   The binding is a separate module from the recipe, because the theme compiler imports the recipe
+*   at build time and must not load the React runtime.
+*/
+/**
+* Creates the blockquote recipe's `withProvider` and `withContext` bindings.
+*
+* @remarks
+*   `withProvider` binds the root, which takes the variants and provides the slot classes.
+*   `withContext` binds each other part, which reads its slot classes from the root.
+*/
+const { withContext: withContext$11, withProvider: withProvider$1 } = createSlotRecipeContext(recipe);
+//#endregion
+//#region src/blockquote/caption.ts
+/**
+* Renders a `figcaption` element with the caption slot's classes.
+*/
+const Caption = withContext$11("figcaption", "caption");
+//#endregion
+//#region src/blockquote/content.ts
+/**
+* Renders a `blockquote` element with the content slot's classes.
+*/
+const Content = withContext$11("blockquote", "content");
+//#endregion
+//#region src/icon/context.ts
+/**
+* Binds the icon recipe to React.
+*
+* @remarks
+*   The binding is a separate module from the recipe, because the theme compiler imports the recipe
+*   at build time and must not load the React runtime.
+*/
+/**
+* Creates the icon recipe's `withContext` binding and its `PropsProvider`.
+*
+* @remarks
+*   `PropsProvider` sets variants on every element bound below it.
+*/
+const { PropsProvider: PropsProvider$5, withContext: withContext$10 } = createRecipeContext(recipe$1);
+//#endregion
+//#region src/icon/icon.ts
+/**
+* Renders an `svg` element with the classes of the icon recipe, hidden and in the `img` role.
+*/
+const Icon$1 = withContext$10("svg", { defaultProps: {
+	"aria-hidden": true,
+	role: "img"
+} });
+//#endregion
+//#region src/blockquote/icon.tsx
+/**
+* Renders the package's `Icon` with the icon slot's classes.
+*/
+const Slot = withContext$11(Icon$1, "icon");
+/**
+* Path of the quote mark in a 24-unit box: two filled marks with square tops.
+*/
+const MARK = "M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z";
+/**
+* Renders the quote mark, or the children in its place.
+*
+* @remarks
+*   The `viewBox` defaults to the mark's 24-unit box, and a `viewBox` passed by the caller takes
+*   precedence.
+*/
+function Icon(t0) {
+	const $ = c(8);
+	let children;
+	let props;
+	if ($[0] !== t0) {
+		({children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = props;
+	} else {
+		children = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== children) {
+		t1 = children ?? /* @__PURE__ */ jsx("path", { d: MARK });
+		$[3] = children;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Slot, {
+			viewBox: "0 0 24 24",
+			...props,
+			children: t1
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+//#endregion
+//#region src/blockquote/root.ts
+/**
+* Renders a `figure` element with the root slot's classes and provides the variants to the parts.
+*/
+const Root$2 = withProvider$1("figure", "root");
+//#endregion
+//#region src/blockquote/index.ts
+var blockquote_exports = /* @__PURE__ */ __exportAll({
+	Caption: () => Caption,
+	Content: () => Content,
+	Icon: () => Icon,
+	Root: () => Root$2
+});
+//#endregion
+//#region src/code/context.ts
+/**
+* Binds the code recipe to React.
+*
+* @remarks
+*   The binding is a separate module from the recipe, because the theme compiler imports the recipe
+*   at build time and must not load the React runtime.
+*/
+/**
+* Creates the code recipe's `withContext` binding and its `PropsProvider`.
+*
+* @remarks
+*   `PropsProvider` sets variants on every element bound below it.
+*/
+const { PropsProvider: PropsProvider$4, withContext: withContext$9 } = createRecipeContext(recipe$2);
+//#endregion
+//#region src/code/code.ts
+/**
+* Renders a `code` element with the classes of the code recipe.
+*/
+const Code = withContext$9("code");
+//#endregion
+//#region src/em/context.ts
+/**
+* Binds the em recipe to React.
+*
+* @remarks
+*   The binding is a separate module from the recipe, because the theme compiler imports the recipe
+*   at build time and must not load the React runtime.
+*/
+/**
+* Creates the em recipe's `withContext` binding.
+*/
+const { withContext: withContext$8 } = createRecipeContext(recipe$3);
+//#endregion
+//#region src/em/em.ts
+/**
+* Renders an `em` element with the classes of the em recipe.
+*/
+const Em = withContext$8("em");
+//#endregion
+//#region src/heading/context.ts
+/**
+* Binds the heading recipe to React.
+*
+* @remarks
+*   The binding is a separate module from the recipe, because the theme compiler imports the recipe
+*   at build time and must not load the React runtime.
+*/
+/**
+* Creates the heading recipe's `withContext` binding and its `PropsProvider`.
+*
+* @remarks
+*   `PropsProvider` sets variants on every element bound below it.
+*/
+const { PropsProvider: PropsProvider$3, withContext: withContext$7 } = createRecipeContext(recipe$4);
+//#endregion
+//#region src/heading/heading.ts
+/**
+* Renders an `h2` element with the classes of the heading recipe.
+*/
+const Heading = withContext$7("h2");
+//#endregion
+//#region src/mark/context.ts
+/**
+* Binds the mark recipe to React.
+*
+* @remarks
+*   The binding is a separate module from the recipe, because the theme compiler imports the recipe
+*   at build time and must not load the React runtime.
+*/
+/**
+* Creates the mark recipe's `withContext` binding and its `PropsProvider`.
+*
+* @remarks
+*   `PropsProvider` sets variants on every element bound below it. The package exports it as
+*   `MarkPropsProvider`, so a search results list sets one look for all of its highlights.
+*/
+const { PropsProvider: PropsProvider$2, withContext: withContext$6 } = createRecipeContext(recipe$5);
+//#endregion
+//#region src/mark/mark.ts
+/**
+* Renders a `mark` element with the classes of the mark recipe.
+*/
+const Mark = withContext$6("mark");
+//#endregion
+//#region src/highlight/highlight.tsx
+/**
+* Renders a text with every match of a search query in a mark.
+*
+* @remarks
+*   The text renders as it is, and each run that matches the query renders in `Mark` with the props
+*   the caller gives, so a theme styles a match as it styles any highlight. A match takes the
+*   `none` inset unless a caller states one, because a match inside a word is split by padding.
+*   The matching is `useHighlight`'s: every occurrence, letter case ignored unless `ignoreCase` is
+*   false, each term trimmed, the longer term first. The component renders no element of its own,
+*   so it takes the place of a string inside the caller's text. A screen reader announces a `mark`
+*   only where its user asks for highlights.
+*/
+/**
+* Renders the text with each match in a mark.
+*
+* @param props - The text, the query, whether case is ignored, and the props of every `Mark`.
+* @returns The runs of the text.
+*/
+function Highlight(t0) {
+	const $ = c(10);
+	let children;
+	let ignoreCase;
+	let props;
+	let query;
+	let t1;
+	if ($[0] !== t0) {
+		({children, ignoreCase, inset: t1, query, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = ignoreCase;
+		$[3] = props;
+		$[4] = query;
+		$[5] = t1;
+	} else {
+		children = $[1];
+		ignoreCase = $[2];
+		props = $[3];
+		query = $[4];
+		t1 = $[5];
+	}
+	const inset = t1 === void 0 ? "none" : t1;
+	const runs = [];
+	let start = 0;
+	let t2;
+	if ($[6] !== children || $[7] !== ignoreCase || $[8] !== query) {
+		t2 = {
+			ignoreCase,
+			query,
+			text: children
+		};
+		$[6] = children;
+		$[7] = ignoreCase;
+		$[8] = query;
+		$[9] = t2;
+	} else t2 = $[9];
+	for (const { match, text } of useHighlight(t2)) {
+		runs.push(match ? /* @__PURE__ */ jsx(Mark, {
+			inset,
+			...props,
+			children: text
+		}, start) : /* @__PURE__ */ jsx(Fragment, { children: text }, start));
+		start = start + text.length;
+	}
+	return runs;
+}
+//#endregion
+//#region src/kbd/context.ts
+/**
+* Binds the kbd and kbd-group recipes to React.
+*
+* @remarks
+*   The bindings are a separate module from the recipes, because the theme compiler imports a
+*   recipe at build time and must not load the React runtime.
+*/
+/**
+* Creates the kbd recipe's `withContext` binding and its `PropsProvider`.
+*
+* @remarks
+*   `Kbd.Group` sets its size, look and palette on every keycap inside it through `PropsProvider`.
+*/
+const { PropsProvider: PropsProvider$1, withContext: withContext$5 } = createRecipeContext(recipe$6);
+/**
+* Creates the kbd-group recipe's `withContext` binding.
+*/
+const { withContext: withGroupContext } = createRecipeContext(recipe$7);
+//#endregion
+//#region src/kbd/group.tsx
+/**
+* Renders the outer `kbd` element with the classes of the kbd-group recipe.
+*/
+const Row = withGroupContext("kbd");
+/**
+* Renders a key combination and sets its size, look and palette on every keycap inside it.
+*
+* @remarks
+*   An axis the caller leaves unset is not passed down, so a keycap keeps the recipe's default. The
+*   recipe runtime reads an axis passed as undefined as a selection and writes no class for it.
+*/
+function Group(t0) {
+	const $ = c(20);
+	let palette;
+	let props;
+	let size;
+	let variant;
+	if ($[0] !== t0) {
+		({palette, size, variant, ...props} = t0);
+		$[0] = t0;
+		$[1] = palette;
+		$[2] = props;
+		$[3] = size;
+		$[4] = variant;
+	} else {
+		palette = $[1];
+		props = $[2];
+		size = $[3];
+		variant = $[4];
+	}
+	let t1;
+	if ($[5] !== palette) {
+		t1 = palette === void 0 ? {} : { palette };
+		$[5] = palette;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== size) {
+		t2 = size === void 0 ? {} : { size };
+		$[7] = size;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] !== variant) {
+		t3 = variant === void 0 ? {} : { variant };
+		$[9] = variant;
+		$[10] = t3;
+	} else t3 = $[10];
+	let t4;
+	if ($[11] !== t1 || $[12] !== t2 || $[13] !== t3) {
+		t4 = {
+			...t1,
+			...t2,
+			...t3
+		};
+		$[11] = t1;
+		$[12] = t2;
+		$[13] = t3;
+		$[14] = t4;
+	} else t4 = $[14];
+	const chosen = t4;
+	let t5;
+	if ($[15] !== props) {
+		t5 = /* @__PURE__ */ jsx(Row, { ...props });
+		$[15] = props;
+		$[16] = t5;
+	} else t5 = $[16];
+	let t6;
+	if ($[17] !== chosen || $[18] !== t5) {
+		t6 = /* @__PURE__ */ jsx(PropsProvider$1, {
+			value: chosen,
+			children: t5
+		});
+		$[17] = chosen;
+		$[18] = t5;
+		$[19] = t6;
+	} else t6 = $[19];
+	return t6;
+}
+//#endregion
+//#region src/kbd/root.ts
+/**
+* Renders a `kbd` element with the classes of the kbd recipe.
+*/
+const Root$1 = withContext$5("kbd");
+//#endregion
+//#region src/kbd/index.ts
+var kbd_exports = /* @__PURE__ */ __exportAll({
+	Group: () => Group,
+	Root: () => Root$1
+});
+//#endregion
+//#region src/list/context.ts
+/**
+* Binds the list slot recipe to React.
+*
+* @remarks
+*   The binding is a separate module from the recipe, because the theme compiler imports the recipe
+*   at build time and must not load the React runtime.
+*/
+/**
+* Creates the list recipe's `withProvider` and `withContext` bindings.
+*
+* @remarks
+*   `withProvider` binds the root, which takes the variants and provides the slot classes.
+*   `withContext` binds each other part, which reads its slot classes from the root.
+*/
+const { withContext: withContext$4, withProvider } = createSlotRecipeContext(recipe$8);
+//#endregion
+//#region src/list/indicator.ts
+/**
+* Renders a `span` element with the indicator slot's classes, hidden from assistive technology.
+*/
+const Indicator = withContext$4("span", "indicator", { defaultProps: { "aria-hidden": true } });
+//#endregion
+//#region src/list/item.ts
+/**
+* Renders an `li` element with the item slot's classes.
+*/
+const Item = withContext$4("li", "item");
+//#endregion
+//#region src/list/root.ts
+/**
+* Renders a `ul` element in the `list` role with the root slot's classes, and provides the
+* variants to the items.
+*/
+const Root = withProvider("ul", "root", {
+	defaultProps: { role: "list" },
+	forwardProps: ["start"]
+});
+//#endregion
+//#region src/list/index.ts
+var list_exports = /* @__PURE__ */ __exportAll({
+	Indicator: () => Indicator,
+	Item: () => Item,
+	Root: () => Root
+});
+//#endregion
+//#region src/quote/context.ts
+/**
+* Binds the quote recipe to React.
+*
+* @remarks
+*   The binding is a separate module from the recipe, because the theme compiler imports the recipe
+*   at build time and must not load the React runtime.
+*/
+/**
+* Creates the quote recipe's `withContext` binding.
+*/
+const { withContext: withContext$3 } = createRecipeContext(recipe$9);
+//#endregion
+//#region src/quote/quote.ts
+/**
+* Renders a `q` element with the classes of the quote recipe.
+*/
+const Quote = withContext$3("q");
+//#endregion
+//#region src/span/context.ts
+/**
+* Binds the span recipe to React.
+*
+* @remarks
+*   The binding is a separate module from the recipe, because the theme compiler imports the recipe
+*   at build time and must not load the React runtime.
+*/
+/**
+* Creates the span recipe's `withContext` binding.
+*/
+const { withContext: withContext$2 } = createRecipeContext(recipe$10);
+//#endregion
+//#region src/span/span.ts
+/**
+* Renders a `span` element with the classes of the span recipe.
+*/
+const Span = withContext$2("span");
+//#endregion
+//#region src/strong/context.ts
+/**
+* Binds the strong recipe to React.
+*
+* @remarks
+*   The binding is a separate module from the recipe, because the theme compiler imports the recipe
+*   at build time and must not load the React runtime.
+*/
+/**
+* Creates the strong recipe's `withContext` binding.
+*/
+const { withContext: withContext$1 } = createRecipeContext(recipe$11);
+//#endregion
+//#region src/strong/strong.ts
+/**
+* Renders a `strong` element with the classes of the strong recipe.
+*/
+const Strong = withContext$1("strong");
+//#endregion
+//#region src/text/context.ts
+/**
+* Binds the text recipe to React.
+*
+* @remarks
+*   The binding is a separate module from the recipe, because the theme compiler imports the recipe
+*   at build time and must not load the React runtime.
+*/
+/**
+* Creates the text recipe's `withContext` binding and its `PropsProvider`.
+*
+* @remarks
+*   `PropsProvider` sets variants on every element bound below it.
+*/
+const { PropsProvider, withContext } = createRecipeContext(recipe$12);
+//#endregion
+//#region src/text/text.ts
+/**
+* Renders a `p` element with the classes of the text recipe.
+*/
+const Text = withContext("p");
+//#endregion
+export { Caption as C, Content as S, Code as _, list_exports as a, Icon as b, Indicator as c, Group as d, Highlight as f, Em as g, Heading as h, Quote as i, kbd_exports as l, PropsProvider$2 as m, Strong as n, Root as o, Mark as p, Span as r, Item as s, Text as t, Root$1 as u, blockquote_exports as v, Icon$1 as x, Root$2 as y };

package/dist/theme.js

@@ -1,4 +1,4 @@
-import { a as recipe$12, c as recipe$6, d as recipe, f as recipe$3, i as recipe$7, l as recipe$2, n as recipe$9, o as recipe$4, p as recipe$11, r as recipe$8, s as recipe$5, t as recipe$10, u as recipe$1 } from "./recipe-DuvOpofr.js";
+import { a as recipe$12, c as recipe$6, d as recipe, f as recipe$3, i as recipe$7, l as recipe$2, n as recipe$9, o as recipe$4, p as recipe$11, r as recipe$8, s as recipe$5, t as recipe$10, u as recipe$1 } from "./recipes-DuvOpofr.js";
 import { definePreset } from "@stealthscale/theme/authoring";
 //#endregion
 const theme_default$published = ((preset) => {

package/locales/en/specimen/blockquote.json

@@ -0,0 +1,26 @@
+{
+  "about": "Renders a quotation as its own block: a `figure` with an icon, the quotation and a caption.",
+  "author": "Priya Raman, Head of Finance at Northwind",
+  "justify": {
+    "about": "The three alignments in a 512px room. At `start` the icon hangs in a start gutter, and at `center` and `end` it sits above the quotation.",
+    "title": "Alignment"
+  },
+  "motion": {
+    "about": "The animation a quotation enters with. Each one runs once when the quotation mounts.",
+    "title": "Motion"
+  },
+  "palette": {
+    "about": "Every palette in the surface look: the fill in `colorPalette.subtle`, the rule and the icon in `colorPalette.solid`.",
+    "title": "Palettes"
+  },
+  "quotation": "Moving billing to one ledger cut our month-end close from nine days to two.",
+  "size": {
+    "about": "The five sizes. Each sets the body text style, the gaps and the start padding, and the icon is one line of the quotation tall.",
+    "title": "Sizes"
+  },
+  "title": "Blockquote",
+  "variant": {
+    "about": "`subtle` and `solid` render a rule down the start edge. `surface` adds a fill and rounds the end corners. `glass` renders the theme's glass surface. `plain` renders no rule.",
+    "title": "Looks"
+  }
+}

package/locales/en/specimen/code.json

@@ -0,0 +1,26 @@
+{
+  "about": "Renders code inside a line of text in a look, a size and a palette.",
+  "palette": {
+    "about": "Every look in every palette.",
+    "title": "Palettes"
+  },
+  "run": "Run",
+  "sentence": {
+    "about": "A command at `md` inside a line of body text.",
+    "title": "In a sentence"
+  },
+  "subpath": {
+    "after": "in the application's bar.",
+    "before": "Import the switchers from"
+  },
+  "title": "Code",
+  "variant": {
+    "about": "Every look at both sizes. `plain` sets no inline padding.",
+    "title": "Looks and sizes"
+  },
+  "where": "in the application's directory.",
+  "wrap": {
+    "about": "A package path longer than a line of its 320px room. With `wrap` the path breaks where the line ends.",
+    "title": "Wrapping"
+  }
+}

package/locales/en/specimen/em.json

@@ -0,0 +1,15 @@
+{
+  "about": "Marks stressed text. The element has the emphasis role.",
+  "after": "after",
+  "backup": "the backup finishes.",
+  "before": "The export starts",
+  "motion": {
+    "about": "The animation a stressed run enters with. Each one runs once when the run mounts.",
+    "title": "Motion"
+  },
+  "title": "Em",
+  "tone": {
+    "about": "The stressed run in every text ink, inside a line of body text. The inverted ink is for a dark surface, so its cell renders on `bg.inverted`.",
+    "title": "Inks"
+  }
+}

package/locales/en/specimen/heading.json

@@ -0,0 +1,32 @@
+{
+  "about": "Renders a heading in a heading text role, a text ink, a text effect and an entrance motion. `as` sets the heading level.",
+  "display": {
+    "about": "The heading at size `2xl` in the heading text role and in the display text role. The display role is heavier and tighter.",
+    "title": "Display"
+  },
+  "effect": {
+    "about": "`gradient` fills the words with a gradient. `shine` moves a highlight across them.",
+    "title": "Effects"
+  },
+  "migration": "Migrate every workspace to the new billing plan before the end of the quarter",
+  "motion": {
+    "about": "The animation a heading enters with. Each one runs once when the heading mounts.",
+    "title": "Motion"
+  },
+  "report": "Quarterly report",
+  "settings": "Account settings",
+  "size": {
+    "about": "The eight steps of the heading text role. `size` sets the prominence and `as` sets the level.",
+    "title": "Sizes"
+  },
+  "title": "Heading",
+  "tone": {
+    "about": "Every text ink. The inverted ink is for a dark surface, so its cell renders on `bg.inverted`.",
+    "title": "Inks"
+  },
+  "truncate": {
+    "about": "A heading that wraps, and the same heading cut to one line with an ellipsis, in a 512px room.",
+    "title": "Truncate"
+  },
+  "welcome": "Welcome back, Ada"
+}

package/locales/en/specimen/highlight.json

@@ -0,0 +1,37 @@
+{
+  "about": "Highlight marks every match of a search query in a text, each in the mark component, so a reader sees why a result matched. It matches as the search filters: by substring, with letter case ignored, each term trimmed and the longer term first.",
+  "letters": {
+    "about": "One query with letter case ignored, the default, and matched. Ignored, it marks Net and the net in network. Matched, it marks the lower-case net alone.",
+    "query": "net",
+    "text": "Net 30 terms apply to every invoice on the network plan.",
+    "title": "Letter case"
+  },
+  "looks": {
+    "about": "Every match takes the props of the mark, so a theme styles a match as it styles any highlight. The text look marks by weight, for a reader who does not see the fill.",
+    "query": "settled",
+    "text": "The dispute was raised on Tuesday and settled on Friday.",
+    "title": "Looks"
+  },
+  "search": {
+    "about": "Type in the field: the list keeps the titles that contain the query and marks it in each, as a help centre shows its results.",
+    "articles": {
+      "chargebacks": "Chargebacks and disputes",
+      "fees": "Fees for international payments",
+      "methods": "Payment methods by country",
+      "payouts": "Payout schedules",
+      "refunds": "Refunds and partial refunds"
+    },
+    "clear": "Clear the search",
+    "label": "Search the help centre",
+    "query": "pay",
+    "title": "Search results"
+  },
+  "terms": {
+    "about": "Several terms mark together, each wherever it occurs in the text.",
+    "chargeback": "chargeback",
+    "refund": "refund",
+    "text": "A refund returns a payment to the customer. A chargeback is a refund the customer's bank takes back after a dispute, and every chargeback costs a fee.",
+    "title": "Several terms"
+  },
+  "title": "Highlight"
+}

package/locales/en/specimen/icon.json

@@ -0,0 +1,22 @@
+{
+  "about": "Renders an icon at a size, in a text ink and with a motion. The component ships no artwork: pass paths as children or an icon component through `as`.",
+  "arrow": "Next",
+  "mirrored": {
+    "about": "An icon that points is mirrored in a right-to-left page. The arrow renders the same in this left-to-right page.",
+    "title": "Mirrored"
+  },
+  "motion": {
+    "about": "`spin` for loading, `float` for waiting and `twinkle` for something new. Each stops under reduced motion.",
+    "title": "Motion"
+  },
+  "size": {
+    "about": "The eight steps of the icon scale, and `inherit`, which is the height of the surrounding text.",
+    "title": "Sizes"
+  },
+  "star": "Favourite",
+  "title": "Icon",
+  "tone": {
+    "about": "Every text ink. `current` takes the ink of the surrounding text. The inverted ink is for a dark surface, so its cell renders on `bg.inverted`.",
+    "title": "Inks"
+  }
+}