@kanso-labs/kanso-ui 0.35.0 → 0.37.0

package/dist/collection/styles.js

@@ -10,6 +10,14 @@ const collectionStyles = {
 		k8WAf4: "x1cmllll",
 		$$css: true
 	},
+	dropTarget: {
+		kWkggS: "x659ado",
+		kjBf7l: "xrgy624 x1x84bn5",
+		kInvED: "x2ssjo2",
+		k3XXqK: "xaatb59",
+		kMeerF: "x1de99jn",
+		$$css: true
+	},
 	header: {
 		kB7OPa: "x9f619",
 		kMwMTN: "x1w5n3ug",
@@ -39,6 +47,17 @@ const collectionStyles = {
 	}
 };
 /**
+* A collection's own box, as the function React Aria's `className` prop
+* wants: the container, and the drop target while a drop would land on the
+* collection as a whole. List, ListBox and Tree each draw it.
+*/
+function containerClasses(state) {
+	return {
+		0: { className: "x9f619 x78zum5 xdt5ytf x1t137rt x1cmllll" },
+		1: { className: "x9f619 x78zum5 xdt5ytf x1cmllll x659ado xrgy624 x1x84bn5 x2ssjo2 xaatb59 x1de99jn" }
+	}[!!state.isDropTarget << 0];
+}
+/**
 * The styles a selectable row in a list takes, as the function React Aria's
 * `className` prop wants.
 *
@@ -59,9 +78,9 @@ const collectionStyles = {
 */
 function rowItemStyles(supporting, overline, extra) {
 	const lines = (overline === void 0 ? 0 : 1) + (supporting === void 0 ? 0 : 1);
-	return (state) => props(rowStyles.base, rowStyles.list, extra, lines === 1 && rowStyles.twoLine, lines === 2 && rowStyles.threeLine, state.isSelected && rowStyles.selectedList, state.isHovered && rowStyles.hovered, state.isFocusVisible && rowStyles.focusVisible, state.isPressed && rowStyles.pressed, state.isDisabled && rowStyles.disabled);
+	return (state) => props(rowStyles.base, rowStyles.list, extra, lines === 1 && rowStyles.twoLine, lines === 2 && rowStyles.threeLine, state.isDragging === true && rowStyles.dragging, state.isSelected && rowStyles.selectedList, state.isHovered && rowStyles.hovered, state.isFocusVisible && rowStyles.focusVisible, state.isPressed && rowStyles.pressed, state.isDropTarget === true && rowStyles.dropTarget, state.isDisabled && rowStyles.disabled);
 }
 //#endregion
-export { collectionStyles, rowItemStyles };
+export { collectionStyles, containerClasses, rowItemStyles };
 
 //# sourceMappingURL=styles.js.map

package/dist/collection/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["ReactNode","stylex","rowStyles","colors","sizing","spacing","typography","collectionStyles","container","kB7OPa","k1xSpc","kXwgrk","k3XXqK","k8WAf4","$$css","header","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","kGO01o","kLKAdn","kg3NbH","loading","kGNEyG","kjj79g","kAzted","section","CollectionItemState","isDisabled","isFocusVisible","isHovered","isPressed","isSelected","rowItemStyles","supporting","overline","extra","StyleXStyles","lines","undefined","state","props","base","list","twoLine","threeLine","selectedList","hovered","focusVisible","pressed","disabled","stylex.props"],"sources":["../../src/collection/styles.ts"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { rowStyles } from '../row/styles';\nimport '../tokens/design.tokens.stylex';\nimport { colors, sizing, spacing, typography } from '../tokens/design.tokens.stylex';\n\n// The chrome around the row. `src/row` was extracted so a list, menu, tree and\n// drawer draw the same row; everything wrapped around it stayed behind in each\n// component, so a change to the subhead over a list was three edits with\n// nothing failing if one were missed.\n//\n// Two of these are shared by four components and two by three, and the split\n// is the Material Design spec pages rather than convenience:\n//\n// - `container` and `section` are the box and the grouping, which List,\n//   ListBox, Tree and NavigationTree all draw the same way.\n// - `header` and `loading` are the lists page's, so they are shared by the\n//   three components that follow it. Menu and NavigationTree keep their own,\n//   because the menus page and the navigation drawer page give different\n//   values — a subhead tighter to the items above it, a label role rather\n//   than a title role, and an inset that lines up with pill-shaped rows.\n//   Those are the specs disagreeing rather than the code drifting, so each\n//   stays where its comment explaining it is.\nconst collectionStyles = {\n  container: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    k3XXqK: \"x1t137rt\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  },\n  header: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xrgwony\",\n    kGuDYH: \"x12s497w\",\n    k63SB2: \"x1szcwkt\",\n    kb6lSQ: \"xo803ec\",\n    kLWn49: \"xyl1r0q\",\n    kGO01o: \"xw3mh6e\",\n    kLKAdn: \"x1clyivc\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  loading: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kAzted: \"xyax5pk\",\n    $$css: true\n  },\n  section: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    $$css: true\n  }\n};\n\n/**\n * The render state every collection item this covers reports. Each of React\n * Aria's own is wider than this, and this is the part the three share.\n */\ntype CollectionItemState = {\n  isDisabled: boolean;\n  isFocusVisible: boolean;\n  isHovered: boolean;\n  isPressed: boolean;\n  isSelected: boolean;\n};\n\n/**\n * The styles a selectable row in a list takes, as the function React Aria's\n * `className` prop wants.\n *\n * Which of the lists page's three items the row is, read from the content\n * rather than taken as a prop: a row holding all three lines already says it\n * is three lines, and a word for it would be a second place to get it wrong.\n * `ListItem` does the same arithmetic for the static row, and this is where\n * the collection forms share it.\n *\n * The three-line item is the only row whose slots move, which is why it alone\n * carries an alignment as well as a height.\n *\n * `extra` is the one difference between the three callers — Tree passes its\n * indent, which is why it sits where Tree already had it rather than at the\n * end. NavigationTree is not a caller: it draws the drawer variant, branches\n * on an ancestor being current, and reads `isCurrent` where these read\n * `isSelected`.\n */\nfunction rowItemStyles(supporting: ReactNode, overline: ReactNode, extra?: stylex.StyleXStyles) {\n  const lines = (overline === undefined ? 0 : 1) + (supporting === undefined ? 0 : 1);\n  return (state: CollectionItemState) => stylex.props(rowStyles.base, rowStyles.list, extra, lines === 1 && rowStyles.twoLine, lines === 2 && rowStyles.threeLine, state.isSelected && rowStyles.selectedList, state.isHovered && rowStyles.hovered, state.isFocusVisible && rowStyles.focusVisible, state.isPressed && rowStyles.pressed, state.isDisabled && rowStyles.disabled);\n}\nexport type { CollectionItemState };\nexport { collectionStyles, rowItemStyles };"],"mappings":";;;AAuBA,MAAMO,mBAAmB;CACvBC,WAAW;EACTC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,QAAQ;EACNN,QAAQ;EACRO,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRV,OAAO;CACT;CACAW,SAAS;EACPC,QAAQ;EACRjB,QAAQ;EACRC,QAAQ;EACRiB,QAAQ;EACRC,QAAQ;EACRd,OAAO;CACT;CACAe,SAAS;EACPpB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRG,OAAO;CACT;AACF;;;;;;;;;;;;;;;;;;;;AAiCA,SAASsB,cAAcC,YAAuBC,UAAqBC,OAA6B;CAC9F,MAAME,SAASH,aAAaI,KAAAA,IAAY,IAAI,MAAML,eAAeK,KAAAA,IAAY,IAAI;CACjF,QAAQC,UAA+B1C,MAAaC,UAAU2C,MAAM3C,UAAU4C,MAAMP,OAAOE,UAAU,KAAKvC,UAAU6C,SAASN,UAAU,KAAKvC,UAAU8C,WAAWL,MAAMR,cAAcjC,UAAU+C,cAAcN,MAAMV,aAAa/B,UAAUgD,SAASP,MAAMX,kBAAkB9B,UAAUiD,cAAcR,MAAMT,aAAahC,UAAUkD,SAAST,MAAMZ,cAAc7B,UAAUmD,QAAQ;AACjX"}
+{"version":3,"file":"styles.js","names":["ReactNode","stylex","rowStyles","colors","sizing","spacing","stateLayerOpacity","typography","FORCED_COLORS","collectionStyles","container","kB7OPa","k1xSpc","kXwgrk","k3XXqK","k8WAf4","$$css","dropTarget","kWkggS","kjBf7l","kInvED","kMeerF","header","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","kGO01o","kLKAdn","kg3NbH","loading","kGNEyG","kjj79g","kAzted","section","CollectionItemState","isDisabled","isDragging","isDropTarget","isFocusVisible","isHovered","isPressed","isSelected","containerClasses","state","className","rowItemStyles","supporting","overline","extra","StyleXStyles","lines","undefined","props","base","list","twoLine","threeLine","dragging","selectedList","hovered","focusVisible","pressed","disabled","stylex.props"],"sources":["../../src/collection/styles.ts"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { rowStyles } from '../row/styles';\nimport '../tokens/design.tokens.stylex';\nimport { colors, sizing, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The chrome around the row. `src/row` was extracted so a list, menu, tree and\n// drawer draw the same row; everything wrapped around it stayed behind in each\n// component, so a change to the subhead over a list was three edits with\n// nothing failing if one were missed.\n//\n// Two of these are shared by four components and two by three, and the split\n// is the Material Design spec pages rather than convenience:\n//\n// - `container` and `section` are the box and the grouping, which List,\n//   ListBox, Tree and NavigationTree all draw the same way.\n// - `header` and `loading` are the lists page's, so they are shared by the\n//   three components that follow it. Menu and NavigationTree keep their own,\n//   because the menus page and the navigation drawer page give different\n//   values — a subhead tighter to the items above it, a label role rather\n//   than a title role, and an inset that lines up with pill-shaped rows.\n//   Those are the specs disagreeing rather than the code drifting, so each\n//   stays where its comment explaining it is.\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst collectionStyles = {\n  container: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    k3XXqK: \"x1t137rt\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  },\n  dropTarget: {\n    kWkggS: \"x659ado\",\n    kjBf7l: \"xrgy624 x1x84bn5\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"xaatb59\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  header: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xrgwony\",\n    kGuDYH: \"x12s497w\",\n    k63SB2: \"x1szcwkt\",\n    kb6lSQ: \"xo803ec\",\n    kLWn49: \"xyl1r0q\",\n    kGO01o: \"xw3mh6e\",\n    kLKAdn: \"x1clyivc\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  loading: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kAzted: \"xyax5pk\",\n    $$css: true\n  },\n  section: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    $$css: true\n  }\n};\n\n/**\n * The render state every collection item this covers reports. Each of React\n * Aria's own is wider than this, and this is the part the three share.\n */\ntype CollectionItemState = {\n  isDisabled: boolean;\n  /** Reported only where the collection drags; see `dragging` in `src/row`. */\n  isDragging?: boolean;\n  /** Reported only where the collection takes drops onto its items. */\n  isDropTarget?: boolean;\n  isFocusVisible: boolean;\n  isHovered: boolean;\n  isPressed: boolean;\n  isSelected: boolean;\n};\n\n/**\n * A collection's own box, as the function React Aria's `className` prop\n * wants: the container, and the drop target while a drop would land on the\n * collection as a whole. List, ListBox and Tree each draw it.\n */\nfunction containerClasses(state: {\n  isDropTarget: boolean;\n}) {\n  return {\n    0: {\n      className: \"x9f619 x78zum5 xdt5ytf x1t137rt x1cmllll\"\n    },\n    1: {\n      className: \"x9f619 x78zum5 xdt5ytf x1cmllll x659ado xrgy624 x1x84bn5 x2ssjo2 xaatb59 x1de99jn\"\n    }\n  }[!!state.isDropTarget << 0];\n}\n\n/**\n * The styles a selectable row in a list takes, as the function React Aria's\n * `className` prop wants.\n *\n * Which of the lists page's three items the row is, read from the content\n * rather than taken as a prop: a row holding all three lines already says it\n * is three lines, and a word for it would be a second place to get it wrong.\n * `ListItem` does the same arithmetic for the static row, and this is where\n * the collection forms share it.\n *\n * The three-line item is the only row whose slots move, which is why it alone\n * carries an alignment as well as a height.\n *\n * `extra` is the one difference between the three callers — Tree passes its\n * indent, which is why it sits where Tree already had it rather than at the\n * end. NavigationTree is not a caller: it draws the drawer variant, branches\n * on an ancestor being current, and reads `isCurrent` where these read\n * `isSelected`.\n */\nfunction rowItemStyles(supporting: ReactNode, overline: ReactNode, extra?: stylex.StyleXStyles) {\n  const lines = (overline === undefined ? 0 : 1) + (supporting === undefined ? 0 : 1);\n  return (state: CollectionItemState) => stylex.props(rowStyles.base, rowStyles.list, extra, lines === 1 && rowStyles.twoLine, lines === 2 && rowStyles.threeLine, state.isDragging === true && rowStyles.dragging, state.isSelected && rowStyles.selectedList, state.isHovered && rowStyles.hovered, state.isFocusVisible && rowStyles.focusVisible, state.isPressed && rowStyles.pressed, state.isDropTarget === true && rowStyles.dropTarget, state.isDisabled && rowStyles.disabled);\n}\nexport type { CollectionItemState };\nexport { collectionStyles, containerClasses, rowItemStyles };"],"mappings":";;;AA4BA,MAAMS,mBAAmB;CACvBC,WAAW;EACTC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,YAAY;EACVC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRN,QAAQ;EACRO,QAAQ;EACRL,OAAO;CACT;CACAM,QAAQ;EACNX,QAAQ;EACRY,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRf,OAAO;CACT;CACAgB,SAAS;EACPC,QAAQ;EACRtB,QAAQ;EACRC,QAAQ;EACRsB,QAAQ;EACRC,QAAQ;EACRnB,OAAO;CACT;CACAoB,SAAS;EACPzB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRG,OAAO;CACT;AACF;;;;;;AAuBA,SAAS6B,iBAAiBC,OAEvB;CACD,OAAO;EACL,GAAG,EACDC,WAAW,2CACb;EACA,GAAG,EACDA,WAAW,oFACb;CACF,EAAE,CAAC,CAACD,MAAMN,gBAAgB;AAC5B;;;;;;;;;;;;;;;;;;;;AAqBA,SAASQ,cAAcC,YAAuBC,UAAqBC,OAA6B;CAC9F,MAAME,SAASH,aAAaI,KAAAA,IAAY,IAAI,MAAML,eAAeK,KAAAA,IAAY,IAAI;CACjF,QAAQR,UAA+B7C,MAAaC,UAAUsD,MAAMtD,UAAUuD,MAAMN,OAAOE,UAAU,KAAKnD,UAAUwD,SAASL,UAAU,KAAKnD,UAAUyD,WAAWb,MAAMP,eAAe,QAAQrC,UAAU0D,UAAUd,MAAMF,cAAc1C,UAAU2D,cAAcf,MAAMJ,aAAaxC,UAAU4D,SAAShB,MAAML,kBAAkBvC,UAAU6D,cAAcjB,MAAMH,aAAazC,UAAU8D,SAASlB,MAAMN,iBAAiB,QAAQtC,UAAUe,YAAY6B,MAAMR,cAAcpC,UAAU+D,QAAQ;AACvd"}

package/dist/color-scheme.d.ts

@@ -0,0 +1,29 @@
+//#region src/color-scheme.d.ts
+/**
+ * The classes that pin the library's colours to its light or its dark
+ * scheme, whatever the reader's OS asks for — for an app with a theme switch
+ * of its own. Put one on the `<html>` element, where overlays portalled to
+ * the body still sit inside it; with neither there, the colours follow the
+ * OS as they always have.
+ *
+ * Shaped as next-themes takes its class names:
+ *
+ * ```tsx
+ * import { ThemeProvider } from 'next-themes'
+ * import { colorScheme } from '@kanso-labs/kanso-ui'
+ *
+ * <ThemeProvider attribute="class" value={colorScheme}>
+ *   {children}
+ * </ThemeProvider>
+ * ```
+ *
+ * A `--kui-color-*` override still applies under either, declared on the
+ * same element or above it.
+ */
+declare const colorScheme: {
+  dark: string;
+  light: string;
+};
+//#endregion
+export { colorScheme };
+//# sourceMappingURL=color-scheme.d.ts.map

package/dist/color-scheme.js

@@ -0,0 +1,32 @@
+import { props } from "./node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { colorsDarkTheme, colorsLightTheme } from "./tokens/design.tokens.stylex.js";
+//#region src/color-scheme.ts
+/**
+* The classes that pin the library's colours to its light or its dark
+* scheme, whatever the reader's OS asks for — for an app with a theme switch
+* of its own. Put one on the `<html>` element, where overlays portalled to
+* the body still sit inside it; with neither there, the colours follow the
+* OS as they always have.
+*
+* Shaped as next-themes takes its class names:
+*
+* ```tsx
+* import { ThemeProvider } from 'next-themes'
+* import { colorScheme } from '@kanso-labs/kanso-ui'
+*
+* <ThemeProvider attribute="class" value={colorScheme}>
+*   {children}
+* </ThemeProvider>
+* ```
+*
+* A `--kui-color-*` override still applies under either, declared on the
+* same element or above it.
+*/
+const colorScheme = {
+	dark: props(colorsDarkTheme).className ?? "",
+	light: props(colorsLightTheme).className ?? ""
+};
+//#endregion
+export { colorScheme };
+
+//# sourceMappingURL=color-scheme.js.map

package/dist/color-scheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-scheme.js","names":["stylex","colorsDarkTheme","colorsLightTheme","colorScheme","dark","props","className","light","stylex.props"],"sources":["../src/color-scheme.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport { colorsDarkTheme, colorsLightTheme } from './tokens/design.tokens.stylex';\n\n// The library's colours follow the reader's OS through `prefers-color-scheme`\n// unless something says otherwise, and these are what say otherwise. Both\n// classes have always been generated and shipped in the stylesheet, for\n// Storybook's Theme control; nothing in the package named them, so an app\n// with a switch of its own had to restate every colour token under its own\n// selector, twice — dark for a light OS, light for a dark one.\n//\n// A server module like the entry, since it is two strings.\n\n/**\n * The classes that pin the library's colours to its light or its dark\n * scheme, whatever the reader's OS asks for — for an app with a theme switch\n * of its own. Put one on the `<html>` element, where overlays portalled to\n * the body still sit inside it; with neither there, the colours follow the\n * OS as they always have.\n *\n * Shaped as next-themes takes its class names:\n *\n * ```tsx\n * import { ThemeProvider } from 'next-themes'\n * import { colorScheme } from '@kanso-labs/kanso-ui'\n *\n * <ThemeProvider attribute=\"class\" value={colorScheme}>\n *   {children}\n * </ThemeProvider>\n * ```\n *\n * A `--kui-color-*` override still applies under either, declared on the\n * same element or above it.\n */\nconst colorScheme = {\n  dark: stylex.props(colorsDarkTheme).className ?? '',\n  light: stylex.props(colorsLightTheme).className ?? ''\n};\nexport { colorScheme };"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAMG,cAAc;CAClBC,MAAMJ,MAAaC,eAAe,CAAC,CAACK,aAAa;CACjDC,OAAOP,MAAaE,gBAAgB,CAAC,CAACI,aAAa;AACrD"}

package/dist/components/avatar/index.js

@@ -5,6 +5,7 @@ import { mergeStyles } from "../../styles/merge.js";
 import { useImageLoadingStatus } from "../../hooks/useImageLoadingStatus.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
+import { useLocale } from "react-aria-components";
 //#region src/components/avatar/index.tsx
 const styles = {
 	base: {
@@ -71,11 +72,12 @@ const styles = {
 	}
 };
 function Avatar(t0) {
-	const $ = c(17);
+	const $ = c(18);
 	const { name, render, size: t1, src, tone: t2, ...props$1 } = t0;
 	const size = t1 === void 0 ? "md" : t1;
 	const tone = t2 === void 0 ? "primary" : t2;
 	const status = useImageLoadingStatus(src);
+	const { locale } = useLocale();
 	let t3;
 	if ($[0] !== name) {
 		t3 = name.trim();
@@ -95,49 +97,60 @@ function Avatar(t0) {
 		$[4] = t5;
 	} else t5 = $[4];
 	let t6;
-	if ($[5] !== name || $[6] !== src || $[7] !== status) {
+	if ($[5] !== locale || $[6] !== name || $[7] !== src || $[8] !== status) {
 		t6 = status === "loaded" ? /* @__PURE__ */ jsx("img", {
 			alt: "",
 			src,
 			className: "x5yr21d xh8yej3 xl1xv1r"
-		}) : initialsFrom(name);
-		$[5] = name;
-		$[6] = src;
-		$[7] = status;
-		$[8] = t6;
-	} else t6 = $[8];
+		}) : initialsFrom(name, locale);
+		$[5] = locale;
+		$[6] = name;
+		$[7] = src;
+		$[8] = status;
+		$[9] = t6;
+	} else t6 = $[9];
 	const t7 = mergeStyles(props(styles.base, styles[size], styles[tone]), props$1);
 	let t8;
-	if ($[9] !== props$1 || $[10] !== t5 || $[11] !== t6 || $[12] !== t7) {
+	if ($[10] !== props$1 || $[11] !== t5 || $[12] !== t6 || $[13] !== t7) {
 		t8 = {
 			...t5,
 			...props$1,
 			children: t6,
 			...t7
 		};
-		$[9] = props$1;
-		$[10] = t5;
-		$[11] = t6;
-		$[12] = t7;
-		$[13] = t8;
-	} else t8 = $[13];
+		$[10] = props$1;
+		$[11] = t5;
+		$[12] = t6;
+		$[13] = t7;
+		$[14] = t8;
+	} else t8 = $[14];
 	let t9;
-	if ($[14] !== render || $[15] !== t8) {
+	if ($[15] !== render || $[16] !== t8) {
 		t9 = {
 			defaultTagName: t4,
 			props: t8,
 			render
 		};
-		$[14] = render;
-		$[15] = t8;
-		$[16] = t9;
-	} else t9 = $[16];
+		$[15] = render;
+		$[16] = t8;
+		$[17] = t9;
+	} else t9 = $[17];
 	return useRender(t9);
 }
-function initialsFrom(name) {
+function initialsFrom(name, locale) {
 	const words = name.split(/\s+/u).filter(Boolean);
 	if (words.length === 0) return "";
-	return `${Array.from(words[0] ?? "")[0] ?? ""}${words.length > 1 ? Array.from(words.at(-1) ?? "")[0] ?? "" : ""}`.toLocaleUpperCase();
+	return `${firstGrapheme(words[0] ?? "", locale)}${words.length > 1 ? firstGrapheme(words.at(-1) ?? "", locale) : ""}`.toLocaleUpperCase(locale);
+}
+const segmenters = /* @__PURE__ */ new Map();
+function firstGrapheme(word, locale) {
+	let segmenter = segmenters.get(locale);
+	if (segmenter === void 0) {
+		segmenter = new Intl.Segmenter(locale, { granularity: "grapheme" });
+		segmenters.set(locale, segmenter);
+	}
+	for (const { segment } of segmenter.segment(word)) return segment;
+	return "";
 }
 //#endregion
 export { Avatar as default };

package/dist/components/avatar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","stylex","RenderComponentProps","useImageLoadingStatus","useRender","mergeStyles","colors","radii","typography","styles","base","kGNEyG","kaIpWk","kB7OPa","k1xSpc","kmuXW","kMv6JI","k63SB2","kjj79g","kVQacm","kfSwDN","$$css","image","kZKoxP","kzqmXN","kVIFPx","lg","kGuDYH","md","negative","kWkggS","kMwMTN","positive","primary","secondary","sm","tertiary","AvatarProps","Omit","name","size","src","tone","Avatar","t0","$","render","t1","t2","props","undefined","status","t3","trim","named","t4","t5","role","t6","initialsFrom","t7","t8","children","t9","defaultTagName","words","split","filter","Boolean","length","first","Array","from","last","at","toLocaleUpperCase","_c","props","stylex.props"],"sources":["../../../src/components/avatar/index.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useImageLoadingStatus } from '../../hooks/useImageLoadingStatus';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, typography } from '../../tokens/design.tokens.stylex';\n\n// Tones are container/on-container pairs rather than one colour each, so the\n// initials are always a role's own foreground and can't end up unreadable on\n// a tint they were never paired with. Which tone a given person gets is the\n// consuming app's decision — the design cycles colours per person, and that\n// cycle belongs where the list of people is, not in this component.\n//\n// Sizes carry their own type size but not their own weight or family: the\n// label face at medium weight holds across all three, so a large avatar is\n// bigger initials rather than differently-styled ones.\n//\n// The three are the library's own rather than a spec page's — no Material\n// Design page gives a measurement for one in text; the lists page draws its\n// leading elements in a diagram and tabulates only their padding. So they are\n// stated against the scale the library already has. `md` is 40dp, which is\n// Button's and IconButton's own `md` height, so an avatar and a control line\n// up in a row. `lg` is 56dp. `sm` is 36dp, between the 32dp a chip and an\n// `xs` control take and that 40dp default, for a row that wants a person\n// smaller than the button beside them.\n//\n// ProductIcon takes the same three, so a mark and a person fill the same\n// slot.\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    k63SB2: \"x1bf3uqz\",\n    kjj79g: \"xl56j7k\",\n    kVQacm: \"xb3r6kr\",\n    kfSwDN: \"x87ps6o\",\n    $$css: true\n  },\n  image: {\n    kZKoxP: \"x5yr21d\",\n    kzqmXN: \"xh8yej3\",\n    kVIFPx: \"xl1xv1r\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xnnlda6\",\n    kGuDYH: \"x1848etk\",\n    kzqmXN: \"x15yg21f\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1vqgdyp\",\n    kGuDYH: \"x14zspaw\",\n    kzqmXN: \"x100vrsf\",\n    $$css: true\n  },\n  negative: {\n    kWkggS: \"xkz0cvf\",\n    kMwMTN: \"xylzu7l\",\n    $$css: true\n  },\n  positive: {\n    kWkggS: \"xa3zu90\",\n    kMwMTN: \"x1di7zbg\",\n    $$css: true\n  },\n  primary: {\n    kWkggS: \"xp89om9\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  },\n  secondary: {\n    kWkggS: \"x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  sm: {\n    kZKoxP: \"xc9qbxq\",\n    kGuDYH: \"xkucv67\",\n    kzqmXN: \"x14qfxbe\",\n    $$css: true\n  },\n  tertiary: {\n    kWkggS: \"xs6yvni\",\n    kMwMTN: \"x3cbcwg\",\n    $$css: true\n  }\n};\ntype AvatarProps = Omit<RenderComponentProps<'span'>, 'children'> & {\n  /**\n   * The person this represents. Supplies both the initials and the accessible\n   * name, so a screen reader announces who it is rather than reading two\n   * letters aloud.\n   */\n  name: string;\n  /**\n   * Diameter: `sm` 36px, `md` 40px, `lg` 56px.\n   * @default 'md'\n   */\n  size?: 'lg' | 'md' | 'sm';\n  /**\n   * A photo to show in place of the initials. The initials stay until it has\n   * loaded, and come back if it fails.\n   */\n  src?: string;\n  /**\n   * Which container/on-container colour pair to tint with.\n   * @default 'primary'\n   */\n  tone?: 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary';\n};\nfunction Avatar({\n  name,\n  render,\n  size = 'md',\n  src,\n  tone = 'primary',\n  ...props\n}: AvatarProps) {\n  // The photo is shown only once it has loaded, and the initials stay until\n  // then and come back if it fails — see useImageLoadingStatus.\n  const status = useImageLoadingStatus(src);\n\n  // role/aria-label rather than letting the initials be read: \"AL\" is not\n  // what anyone means to announce. Marking the root as an image also makes\n  // its contents presentational, so the photo and the initials can't be\n  // announced a second time underneath the name. A span rather than an\n  // <img>, which is void: this element's whole job is to hold the initials\n  // shown when there is no photo, or none has loaded yet.\n  //\n  // A blank name — one still loading, say — names nothing, so the avatar is\n  // then a plain element rather than an image with no name, which a screen\n  // reader reads as a bare \"image\". Its empty initials, or its photo with an\n  // empty alt, leave it nothing to announce.\n  const named = name.trim() !== '';\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...(named ? {\n        'aria-label': name,\n        role: 'img'\n      } : {}),\n      ...props,\n      children: status === 'loaded' ? <img alt=\"\" src={src} className=\"x5yr21d xh8yej3 xl1xv1r\" /> : initialsFrom(name),\n      ...mergeStyles(stylex.props(styles.base, styles[size], styles[tone]), props)\n    },\n    render\n  });\n}\n\n// First letter of the first and last word, which handles both \"Ada\" and \"Ada\n// Lovelace\" without a separate prop for how many to take. Array.from rather\n// than indexing, so a name starting outside the Basic Multilingual Plane\n// yields its whole first character instead of half a surrogate pair.\nfunction initialsFrom(name: string) {\n  const words = name.split(/\\s+/u).filter(Boolean);\n  if (words.length === 0) {\n    return '';\n  }\n  const first = Array.from(words[0] ?? '')[0] ?? '';\n  const last = words.length > 1 ? Array.from(words.at(-1) ?? '')[0] ?? '' : '';\n  return `${first}${last}`.toLocaleUpperCase();\n}\nexport type { AvatarProps };\nexport default Avatar;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","stylex","useLocale","RenderComponentProps","useImageLoadingStatus","useRender","mergeStyles","colors","radii","typography","styles","base","kGNEyG","kaIpWk","kB7OPa","k1xSpc","kmuXW","kMv6JI","k63SB2","kjj79g","kVQacm","kfSwDN","$$css","image","kZKoxP","kzqmXN","kVIFPx","lg","kGuDYH","md","negative","kWkggS","kMwMTN","positive","primary","secondary","sm","tertiary","AvatarProps","Omit","name","size","src","tone","Avatar","t0","$","render","t1","t2","props","undefined","status","locale","t3","trim","named","t4","t5","role","t6","initialsFrom","t7","t8","children","t9","defaultTagName","words","split","filter","Boolean","length","first","firstGrapheme","last","at","toLocaleUpperCase","segmenters","Map","Intl","Segmenter","word","segmenter","get","granularity","set","segment","_c","props","stylex.props"],"sources":["../../../src/components/avatar/index.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { useLocale } from 'react-aria-components';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useImageLoadingStatus } from '../../hooks/useImageLoadingStatus';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, typography } from '../../tokens/design.tokens.stylex';\n\n// Tones are container/on-container pairs rather than one colour each, so the\n// initials are always a role's own foreground and can't end up unreadable on\n// a tint they were never paired with. Which tone a given person gets is the\n// consuming app's decision — the design cycles colours per person, and that\n// cycle belongs where the list of people is, not in this component.\n//\n// Sizes carry their own type size but not their own weight or family: the\n// label face at medium weight holds across all three, so a large avatar is\n// bigger initials rather than differently-styled ones.\n//\n// The three are the library's own rather than a spec page's — no Material\n// Design page gives a measurement for one in text; the lists page draws its\n// leading elements in a diagram and tabulates only their padding. So they are\n// stated against the scale the library already has. `md` is 40dp, which is\n// Button's and IconButton's own `md` height, so an avatar and a control line\n// up in a row. `lg` is 56dp. `sm` is 36dp, between the 32dp a chip and an\n// `xs` control take and that 40dp default, for a row that wants a person\n// smaller than the button beside them.\n//\n// ProductIcon takes the same three, so a mark and a person fill the same\n// slot.\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    k63SB2: \"x1bf3uqz\",\n    kjj79g: \"xl56j7k\",\n    kVQacm: \"xb3r6kr\",\n    kfSwDN: \"x87ps6o\",\n    $$css: true\n  },\n  image: {\n    kZKoxP: \"x5yr21d\",\n    kzqmXN: \"xh8yej3\",\n    kVIFPx: \"xl1xv1r\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xnnlda6\",\n    kGuDYH: \"x1848etk\",\n    kzqmXN: \"x15yg21f\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1vqgdyp\",\n    kGuDYH: \"x14zspaw\",\n    kzqmXN: \"x100vrsf\",\n    $$css: true\n  },\n  negative: {\n    kWkggS: \"xkz0cvf\",\n    kMwMTN: \"xylzu7l\",\n    $$css: true\n  },\n  positive: {\n    kWkggS: \"xa3zu90\",\n    kMwMTN: \"x1di7zbg\",\n    $$css: true\n  },\n  primary: {\n    kWkggS: \"xp89om9\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  },\n  secondary: {\n    kWkggS: \"x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  sm: {\n    kZKoxP: \"xc9qbxq\",\n    kGuDYH: \"xkucv67\",\n    kzqmXN: \"x14qfxbe\",\n    $$css: true\n  },\n  tertiary: {\n    kWkggS: \"xs6yvni\",\n    kMwMTN: \"x3cbcwg\",\n    $$css: true\n  }\n};\ntype AvatarProps = Omit<RenderComponentProps<'span'>, 'children'> & {\n  /**\n   * The person this represents. Supplies both the initials and the accessible\n   * name, so a screen reader announces who it is rather than reading two\n   * letters aloud.\n   */\n  name: string;\n  /**\n   * Diameter: `sm` 36px, `md` 40px, `lg` 56px.\n   * @default 'md'\n   */\n  size?: 'lg' | 'md' | 'sm';\n  /**\n   * A photo to show in place of the initials. The initials stay until it has\n   * loaded, and come back if it fails.\n   */\n  src?: string;\n  /**\n   * Which container/on-container colour pair to tint with.\n   * @default 'primary'\n   */\n  tone?: 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary';\n};\nfunction Avatar({\n  name,\n  render,\n  size = 'md',\n  src,\n  tone = 'primary',\n  ...props\n}: AvatarProps) {\n  // The photo is shown only once it has loaded, and the initials stay until\n  // then and come back if it fails — see useImageLoadingStatus.\n  const status = useImageLoadingStatus(src);\n  const {\n    locale\n  } = useLocale();\n\n  // role/aria-label rather than letting the initials be read: \"AL\" is not\n  // what anyone means to announce. Marking the root as an image also makes\n  // its contents presentational, so the photo and the initials can't be\n  // announced a second time underneath the name. A span rather than an\n  // <img>, which is void: this element's whole job is to hold the initials\n  // shown when there is no photo, or none has loaded yet.\n  //\n  // A blank name — one still loading, say — names nothing, so the avatar is\n  // then a plain element rather than an image with no name, which a screen\n  // reader reads as a bare \"image\". Its empty initials, or its photo with an\n  // empty alt, leave it nothing to announce.\n  const named = name.trim() !== '';\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...(named ? {\n        'aria-label': name,\n        role: 'img'\n      } : {}),\n      ...props,\n      children: status === 'loaded' ? <img alt=\"\" src={src} className=\"x5yr21d xh8yej3 xl1xv1r\" /> : initialsFrom(name, locale),\n      ...mergeStyles(stylex.props(styles.base, styles[size], styles[tone]), props)\n    },\n    render\n  });\n}\n\n// The first character of the first and last word, which handles both \"Ada\"\n// and \"Ada Lovelace\" without a separate prop for how many to take.\n//\n// A character is a grapheme, what a reader sees as one, rather than a code\n// point: a code point drops an accent written as a combining mark, splits an\n// Indic conjunct and cuts a flag or a joined emoji in half. And it is\n// upper-cased in the reader's locale, which is what turns a Turkish \"i\" into\n// \"İ\" rather than \"I\".\nfunction initialsFrom(name: string, locale: string) {\n  const words = name.split(/\\s+/u).filter(Boolean);\n  if (words.length === 0) {\n    return '';\n  }\n  const first = firstGrapheme(words[0] ?? '', locale);\n  const last = words.length > 1 ? firstGrapheme(words.at(-1) ?? '', locale) : '';\n  return `${first}${last}`.toLocaleUpperCase(locale);\n}\nconst segmenters = new Map<string, Intl.Segmenter>();\nfunction firstGrapheme(word: string, locale: string) {\n  let segmenter = segmenters.get(locale);\n  if (segmenter === undefined) {\n    segmenter = new Intl.Segmenter(locale, {\n      granularity: 'grapheme'\n    });\n    segmenters.set(locale, segmenter);\n  }\n  for (const {\n    segment\n  } of segmenter.segment(word)) {\n    return segment;\n  }\n  return '';\n}\nexport type { AvatarProps };\nexport default Avatar;"],"mappings":"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"}

package/dist/components/badge/index.d.ts

@@ -0,0 +1,40 @@
+import { RenderComponentProps } from "../../render/useRender.js";
+//#region src/components/badge/index.d.ts
+type BadgeProps = RenderComponentProps<'span'> & {
+  /**
+   * The number to show, which draws the page's large badge. Left out, the
+   * badge is the small 6dp dot, which flags without counting. A count of 0
+   * still draws, so leave the badge out when there is nothing to count.
+   */
+  count?: number;
+  /**
+   * The largest count drawn as itself. Above it the badge reads `max` and a
+   * plus, which is the page's 999+ at the default.
+   * @default 999
+   */
+  max?: number;
+};
+/**
+ * A badge on the corner of what it wraps, usually an icon: the small dot,
+ * or with `count` the large badge holding a number. The mark is hidden from
+ * assistive technology, so put what it says in the name of the control it
+ * sits on.
+ *
+ * ```tsx
+ * <IconButton aria-label="Notifications, 3 new">
+ *   <Badge count={3}>
+ *     <BellIcon />
+ *   </Badge>
+ * </IconButton>
+ * ```
+ *
+ * Given no children, the mark stands alone in the line, as a tab draws it
+ * after its label.
+ *
+ * The call site's `className` and `style` land on the element wrapping what
+ * the badge is drawn on.
+ */
+declare function Badge({ children, count, max, render, ...props }: BadgeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { type BadgeProps, Badge as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/badge/index.js

@@ -0,0 +1,102 @@
+"use client";
+import { useRender } from "../../render/useRender.js";
+import { mergeStyles } from "../../styles/merge.js";
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useLocale } from "react-aria-components";
+//#region src/components/badge/index.tsx
+/**
+* A badge on the corner of what it wraps, usually an icon: the small dot,
+* or with `count` the large badge holding a number. The mark is hidden from
+* assistive technology, so put what it says in the name of the control it
+* sits on.
+*
+* ```tsx
+* <IconButton aria-label="Notifications, 3 new">
+*   <Badge count={3}>
+*     <BellIcon />
+*   </Badge>
+* </IconButton>
+* ```
+*
+* Given no children, the mark stands alone in the line, as a tab draws it
+* after its label.
+*
+* The call site's `className` and `style` land on the element wrapping what
+* the badge is drawn on.
+*/
+function Badge(t0) {
+	const $ = c(18);
+	const { children, count, max: t1, render, ...props } = t0;
+	const max = t1 === void 0 ? 999 : t1;
+	const { locale } = useLocale();
+	let t2;
+	if ($[0] !== count || $[1] !== locale || $[2] !== max) {
+		const numbers = new Intl.NumberFormat(locale);
+		t2 = count === void 0 ? void 0 : count > max ? `${numbers.format(max)}+` : numbers.format(count);
+		$[0] = count;
+		$[1] = locale;
+		$[2] = max;
+		$[3] = t2;
+	} else t2 = $[3];
+	const label = t2;
+	const t3 = "span";
+	const t4 = mergeStyles({ className: "x9f619 x3nfvp2 x1n2onr6" }, props);
+	let t5;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = {
+			0: { className: "xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl x10l6tqk x6s0dn4 xlup9mm x1l7c2jh x78zum5 xs1w0rn x1n35her xss6m8b x1su64ma x1qiirwl xty0069 xl56j7k xdlnduh xaomhve x15kz4h8 ximhkdq xuxw1ft" },
+			2: { className: "xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl x10l6tqk xols6we x1v4s8kt x13vifvy xtijo5x" },
+			1: { className: "xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl x6s0dn4 xlup9mm x1l7c2jh x78zum5 xs1w0rn x1n35her xss6m8b x1su64ma x1qiirwl xty0069 xl56j7k xdlnduh xaomhve x15kz4h8 ximhkdq xuxw1ft x1uhb9sk" },
+			3: { className: "xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl xols6we x1v4s8kt x13vifvy xtijo5x x1uhb9sk" }
+		};
+		$[4] = t5;
+	} else t5 = $[4];
+	const t6 = t5[!!(label === void 0) << 1 | !!(children === void 0 || children === null) << 0];
+	let t7;
+	if ($[5] !== label || $[6] !== t6) {
+		t7 = /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			...t6,
+			children: label
+		});
+		$[5] = label;
+		$[6] = t6;
+		$[7] = t7;
+	} else t7 = $[7];
+	let t8;
+	if ($[8] !== children || $[9] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Fragment, { children: [children, t7] });
+		$[8] = children;
+		$[9] = t7;
+		$[10] = t8;
+	} else t8 = $[10];
+	let t9;
+	if ($[11] !== props || $[12] !== t4 || $[13] !== t8) {
+		t9 = {
+			...props,
+			...t4,
+			children: t8
+		};
+		$[11] = props;
+		$[12] = t4;
+		$[13] = t8;
+		$[14] = t9;
+	} else t9 = $[14];
+	let t10;
+	if ($[15] !== render || $[16] !== t9) {
+		t10 = {
+			defaultTagName: t3,
+			props: t9,
+			render
+		};
+		$[15] = render;
+		$[16] = t9;
+		$[17] = t10;
+	} else t10 = $[17];
+	return useRender(t10);
+}
+//#endregion
+export { Badge as default };
+
+//# sourceMappingURL=index.js.map

package/dist/components/badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","stylex","useLocale","RenderComponentProps","useRender","mergeStyles","colors","radii","spacing","typography","FORCED_COLORS","BadgeProps","count","max","Badge","t0","$","children","t1","render","props","undefined","locale","t2","numbers","Intl","NumberFormat","format","label","t3","t4","className","t5","Symbol","for","0","2","1","3","t6","t7","t8","t9","t10","defaultTagName","_c"],"sources":["../../../src/components/badge/index.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { useLocale } from 'react-aria-components';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// The badges page's badge: a mark on the corner of an icon that flags\n// something new there, either as the 6dp small badge or as the 16dp large\n// badge holding a count. Both are the error pair — the error role, with the\n// count in on error — on a full corner, and the count is label small, capped\n// at four characters with a plus, as \"999+\".\n//\n// The badge wraps what it is drawn on, usually an icon, and places the mark\n// against that element's box, which is what the page measures from. The\n// small badge fills the icon's top trailing 6dp square. The large badge's\n// bottom leading corner sits 14dp down and 12dp in from the icon's top\n// trailing corner, so it stands 2dp above the icon and grows toward the end\n// as its count lengthens, to the page's 34dp at \"999+\". Both are logical\n// insets, so the mark stays on the trailing corner under right-to-left.\n//\n// Given nothing to wrap, the badge is the mark alone, standing in the line\n// rather than over a corner. That is the form the tabs page draws after a\n// label with no icon above it.\n//\n// The mark is hidden from assistive technology. A count read on its own is a\n// number with no subject; it belongs in the name of the control it sits on,\n// where a reader meets it with what it counts — \"Notifications, 3 new\" — and\n// the stories show it there.\n//\n// Under forced colours the error fill is painted over in the mode's\n// background, which left the small badge as nothing at all. It takes a 1px\n// border there instead, which the mode keeps and paints in its text colour.\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\ntype BadgeProps = RenderComponentProps<'span'> & {\n  /**\n   * The number to show, which draws the page's large badge. Left out, the\n   * badge is the small 6dp dot, which flags without counting. A count of 0\n   * still draws, so leave the badge out when there is nothing to count.\n   */\n  count?: number;\n  /**\n   * The largest count drawn as itself. Above it the badge reads `max` and a\n   * plus, which is the page's 999+ at the default.\n   * @default 999\n   */\n  max?: number;\n};\n\n/**\n * A badge on the corner of what it wraps, usually an icon: the small dot,\n * or with `count` the large badge holding a number. The mark is hidden from\n * assistive technology, so put what it says in the name of the control it\n * sits on.\n *\n * ```tsx\n * <IconButton aria-label=\"Notifications, 3 new\">\n *   <Badge count={3}>\n *     <BellIcon />\n *   </Badge>\n * </IconButton>\n * ```\n *\n * Given no children, the mark stands alone in the line, as a tab draws it\n * after its label.\n *\n * The call site's `className` and `style` land on the element wrapping what\n * the badge is drawn on.\n */\nfunction Badge({\n  children,\n  count,\n  max = 999,\n  render,\n  ...props\n}: BadgeProps) {\n  const {\n    locale\n  } = useLocale();\n  const numbers = new Intl.NumberFormat(locale);\n  const label = count === undefined ? undefined : count > max ? `${numbers.format(max)}+` : numbers.format(count);\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...props,\n      ...mergeStyles({\n        className: \"x9f619 x3nfvp2 x1n2onr6\"\n      }, props),\n      children: <>\n          {children}\n          <span aria-hidden=\"true\" {...{\n          0: {\n            className: \"xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl x10l6tqk x6s0dn4 xlup9mm x1l7c2jh x78zum5 xs1w0rn x1n35her xss6m8b x1su64ma x1qiirwl xty0069 xl56j7k xdlnduh xaomhve x15kz4h8 ximhkdq xuxw1ft\"\n          },\n          2: {\n            className: \"xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl x10l6tqk xols6we x1v4s8kt x13vifvy xtijo5x\"\n          },\n          1: {\n            className: \"xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl x6s0dn4 xlup9mm x1l7c2jh x78zum5 xs1w0rn x1n35her xss6m8b x1su64ma x1qiirwl xty0069 xl56j7k xdlnduh xaomhve x15kz4h8 ximhkdq xuxw1ft x1uhb9sk\"\n          },\n          3: {\n            className: \"xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl xols6we x1v4s8kt x13vifvy xtijo5x x1uhb9sk\"\n          }\n        }[!!(label === undefined) << 1 | !!(children === undefined || children === null) << 0]}>\n            {label}\n          </span>\n        </>\n    },\n    render\n  });\n}\nexport type { BadgeProps };\nexport default Badge;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA6EA,SAAAe,MAAAC,IAAA;CAAA,MAAAC,IAAAhB,EAAA,EAAA;CAAe,MAAA,EAAAiB,UAAAL,OAAAC,KAAAK,IAAAC,QAAA,GAAAC,UAAAL;CAGb,MAAAF,MAAAK,OAAAG,KAAAA,IAAA,MAAAH;CAIA,MAAA,EAAAI,WAEIpB,UAAU;CAAE,IAAAqB;CAAA,IAAAP,EAAA,OAAAJ,SAAAI,EAAA,OAAAM,UAAAN,EAAA,OAAAH,KAAA;EAChB,MAAAW,UAAgB,IAAIC,KAAIC,aAAcJ,MAAM;EAC9BC,KAAAX,UAAUS,KAAAA,IAAVA,KAAAA,IAAkCT,QAAQC,MAAR,GAAiBW,QAAOG,OAAQd,GAAG,EAAC,KAAMW,QAAOG,OAAQf,KAAK;EAACI,EAAA,KAAAJ;EAAAI,EAAA,KAAAM;EAAAN,EAAA,KAAAH;EAAAG,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAA/G,MAAAY,QAAcL;CAEI,MAAAM,KAAA;CAGX,MAAAC,KAAAzB,YAAY,EAAA0B,WACF,0BACb,GAAGX,KAAK;CAAC,IAAAY;CAAA,IAAAhB,EAAA,OAAAiB,OAAAC,IAAA,2BAAA,GAAA;EAGwBF,KAAA;GAAAG,GAC1B,EAAAJ,WACU,0MACb;GAACK,GACE,EAAAL,WACU,uGACb;GAACM,GACE,EAAAN,WACU,0MACb;GAACO,GACE,EAAAP,WACU,uGACb;EACF;EAACf,EAAA,KAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAb8B,MAAAuB,KAAAP,GAa7B,CAAC,EAAEJ,UAAUP,KAAAA,MAAc,IAAI,CAAC,EAAEJ,aAAaI,KAAAA,KAAaJ,aAAa,SAAS;CAAE,IAAAuB;CAAA,IAAAxB,EAAA,OAAAY,SAAAZ,EAAA,OAAAuB,IAAA;EAbpFC,KAAA,oBAAA,QAAA;GAAkB,eAAA;GAAM,GAAKD;GAc1BX,UAAAA;EACI,CAAA;EAAAZ,EAAA,KAAAY;EAAAZ,EAAA,KAAAuB;EAAAvB,EAAA,KAAAwB;CAAA,OAAAA,KAAAxB,EAAA;CAAA,IAAAyB;CAAA,IAAAzB,EAAA,OAAAC,YAAAD,EAAA,OAAAwB,IAAA;EAjBDC,KAAA,qBAAA,UAAA,EAAA,UAAA,CACLxB,UACDuB,EAeO,EAAA,CAAA;EACNxB,EAAA,KAAAC;EAAAD,EAAA,KAAAwB;EAAAxB,EAAA,MAAAyB;CAAA,OAAAA,KAAAzB,EAAA;CAAA,IAAA0B;CAAA,IAAA1B,EAAA,QAAAI,SAAAJ,EAAA,QAAAc,MAAAd,EAAA,QAAAyB,IAAA;EAvBAC,KAAA;GAAA,GACFtB;GAAK,GACLU;GAEMb,UACCwB;EAmBZ;EAACzB,EAAA,MAAAI;EAAAJ,EAAA,MAAAc;EAAAd,EAAA,MAAAyB;EAAAzB,EAAA,MAAA0B;CAAA,OAAAA,KAAA1B,EAAA;CAAA,IAAA2B;CAAA,IAAA3B,EAAA,QAAAG,UAAAH,EAAA,QAAA0B,IAAA;EA1BcC,MAAA;GAAAC,gBACCf;GAAMT,OACfsB;GAwBNvB;EAEH;EAACH,EAAA,MAAAG;EAAAH,EAAA,MAAA0B;EAAA1B,EAAA,MAAA2B;CAAA,OAAAA,MAAA3B,EAAA;CAAA,OA5BMZ,UAAUuC,GA4BhB;AAAC"}

package/dist/components/breadcrumbs/index.d.ts

@@ -53,5 +53,5 @@ declare namespace Breadcrumbs$1 {
  */
 declare function BreadcrumbsItem({ children, href, rel, target, ...props }: BreadcrumbsItemProps): import("react").JSX.Element;
 //#endregion
-export { type BreadcrumbsItemProps, type BreadcrumbsProps$1 as BreadcrumbsProps, Breadcrumbs$1 as default };
+export { BreadcrumbsItem, type BreadcrumbsItemProps, type BreadcrumbsProps$1 as BreadcrumbsProps, Breadcrumbs$1 as default };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/breadcrumbs/index.js

@@ -129,6 +129,6 @@ function itemContent(children, href, rel, target) {
 }
 Breadcrumbs$1.Item = BreadcrumbsItem;
 //#endregion
-export { Breadcrumbs$1 as default };
+export { BreadcrumbsItem, Breadcrumbs$1 as default };
 
 //# sourceMappingURL=index.js.map

package/dist/components/breadcrumbs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","BreadcrumbRenderProps","BreadcrumbProps","RACBreadcrumbProps","BreadcrumbsProps","RACBreadcrumbsProps","stylex","Breadcrumb","RACBreadcrumb","Breadcrumbs","RACBreadcrumbs","ChevronEndGlyph","mergeStatefulStyles","mergeStyles","colors","spacing","typography","Link","BreadcrumbsItemProps","Omit","children","className","href","rel","style","target","T","props","$","t0","t1","BreadcrumbsItem","T0","t2","t3","t4","t5","t6","itemContent","state","isCurrent","Item","Breadcrumbs","_c","RACBreadcrumbs","RACBreadcrumb","Link"],"sources":["../../../src/components/breadcrumbs/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { BreadcrumbRenderProps, BreadcrumbProps as RACBreadcrumbProps, BreadcrumbsProps as RACBreadcrumbsProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Breadcrumb as RACBreadcrumb, Breadcrumbs as RACBreadcrumbs } from 'react-aria-components';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport Link from '../link';\n\n// A trail of links back up a hierarchy, ending at the page you are on. The\n// design system carries no breadcrumbs page, so the two nearest ones stand\n// in: the row takes the top app bar's muted content role, and each link the\n// text button's label-large type. Both are written down here rather than\n// guessed at each call site.\n//\n// React Aria decides which item is current — the last one — and marks it\n// `aria-current=\"page\"`. The trail is an ordered list, which is what a screen\n// reader reads it as, and `Breadcrumbs.Item` is one entry in it.\n//\n// Three things are this component's own.\n//\n// **The current item is text, not a link.** React Aria's own answer is a\n// disabled link, and a disabled link takes the library's disabled treatment\n// — the content role at 38%, which fades the one item the trail exists to\n// name. Here it is a span carrying `aria-current=\"page\"` instead, in the\n// full-strength content role, so the page you are on is the most legible\n// thing in the row rather than the least.\n//\n// **The chevron belongs to the item before it.** Each item that is not the\n// current one draws one after its link, which puts a separator between every\n// pair and none at the end. It says \"further in\" rather than \"to the right\",\n// so it mirrors under a right-to-left writing mode.\n//\n// **A link is drawn as a link in a place already understood to be links.**\n// `tone=\"inherit\"` takes the row's muted colour and `underline=\"hover\"`\n// leaves the rule for a pointer, which is what Link's own documentation\n// names this case for. The row's position is what announces them.\n//\n// `onAction` is React Aria's and is not wrapped: give each item an `id` and\n// the trail reports which one was pressed, for a page that navigates without\n// an `href`.\n\ntype BreadcrumbsItemProps = Omit<RACBreadcrumbProps, 'children' | 'className' | 'style'> & {\n  /** The item's label. */\n  children?: ReactNode;\n  /** A function may compute the class from the item's render state. */\n  className?: RACBreadcrumbProps['className'];\n  /**\n   * Where the item leads. Leave it out on an item the page handles through\n   * the trail's `onAction`, and on the current one, which is never a link.\n   */\n  href?: string;\n  /** The link's `rel`. */\n  rel?: string;\n  /** A function may compute the style from the item's render state. */\n  style?: RACBreadcrumbProps['style'];\n  /** The link's `target`. */\n  target?: string;\n};\ntype BreadcrumbsProps<T extends object = object> = Omit<RACBreadcrumbsProps<T>, 'children'> & {\n  /** The trail, as `Breadcrumbs.Item` entries. */\n  children?: ReactNode;\n};\n\n/**\n * A trail of links back up a hierarchy, ending at the page you are on.\n * React Aria makes the last item the current one and marks it\n * `aria-current=\"page\"`; everything before it is a link.\n *\n * ```tsx\n * <Breadcrumbs aria-label=\"Label\">\n *   <Breadcrumbs.Item href=\"#first\">First item</Breadcrumbs.Item>\n *   <Breadcrumbs.Item href=\"#second\">Second item</Breadcrumbs.Item>\n *   <Breadcrumbs.Item>Third item</Breadcrumbs.Item>\n * </Breadcrumbs>\n * ```\n *\n * Name it with `aria-label` or `aria-labelledby`. A page that navigates\n * without an `href` gives each item an `id` and the trail an `onAction`,\n * which is React Aria's and reports the key that was pressed.\n *\n * The call site's `className` and `style` land on the list, which is the\n * element a layout positions.\n */\nfunction Breadcrumbs<T extends object = object>(props: BreadcrumbsProps<T> & RefAttributes<HTMLOListElement>) {\n  return <RACBreadcrumbs<T> {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x1w5n3ug x78zum5 x1a02dak xkknnkr x14zspaw x1v9cpvo xzoy561 x155f00i x1lz68p4 xe8uvvx x1ghz6dp x1717udv\"\n  }, props)} />;\n}\n\n/**\n * One entry in the trail. Give it an `href` to navigate, or an `id` and let\n * the trail's `onAction` handle it. The last entry is the current page and\n * is drawn as text rather than a link, whatever it is given.\n */\nfunction BreadcrumbsItem({\n  children,\n  href,\n  rel,\n  target,\n  ...props\n}: BreadcrumbsItemProps) {\n  return <RACBreadcrumb {...props} {...mergeStatefulStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xzoy561\"\n  }, props)}>\n      {itemContent(children, href, rel, target)}\n    </RACBreadcrumb>;\n}\n\n// What an entry draws, from React Aria's render state. Built by a call rather\n// than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result on\n// its inputs.\nfunction itemContent(children: ReactNode, href: string | undefined, rel: string | undefined, target: string | undefined) {\n  return (state: BreadcrumbRenderProps) => {\n    if (state.isCurrent) {\n      return <span aria-current=\"page\" className=\"x139gbkf\">\n          {children}\n        </span>;\n    }\n    return <>\n        <Link href={href} rel={rel} target={target} tone=\"inherit\" underline=\"hover\">\n          {children}\n        </Link>\n        <ChevronEndGlyph className=\"xmix8c7 x2lah0s x1xp8n7a x19axjrm x1c071of\" />\n      </>;\n  };\n}\nBreadcrumbs.Item = BreadcrumbsItem;\nexport type { BreadcrumbsItemProps, BreadcrumbsProps };\nexport default Breadcrumbs;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuFA,SAAAY,cAAAkB,OAAA;CAAA,MAAAC,IAAA9B,EAAA,CAAA;CAAA,IAAA+B;CAAA,IAAAD,EAAA,OAAAD,OAAA;EAC2CE,KAAAhB,YAAY,EAAAQ,WACxC,yHACb,GAAGM,KAAK;EAACC,EAAA,KAAAD;EAAAC,EAAA,KAAAC;CAAA,OAAAA,KAAAD,EAAA;CAAA,IAAAE;CAAA,IAAAF,EAAA,OAAAD,SAAAC,EAAA,OAAAC,IAAA;EAFFC,KAAA,oBAACc,aAAD;GAAe,GAAQjB;GAAK,GAAME;EAEhC,CAAA;EAAID,EAAA,KAAAD;EAAAC,EAAA,KAAAC;EAAAD,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,OAFNE;AAEM;;;;;;AAQf,SAAAC,gBAAAF,IAAA;CAAA,MAAAD,IAAA9B,EAAA,EAAA;CAAA,IAAAkC;CAAA,IAAAZ;CAAA,IAAAE;CAAA,IAAAC;CAAA,IAAAO;CAAA,IAAAG;CAAA,IAAAR;CAAA,IAAAG,EAAA,OAAAC,IAAA;EAAyB,MAAA,EAAAT,UAAAc,IAAAZ,MAAAa,IAAAZ,KAAAa,IAAAX,QAAAY,IAAA,GAAAV,UAAAE;EAAAT,WAAAc;EAAAZ,OAAAa;EAAAZ,MAAAa;EAAAX,SAAAY;EAOfL,KAAAxB;EAAkBmB,KAAAA;EAAWM,KAAArB,oBAAoB,EAAAS,WAC5C,iCACb,GAAGM,KAAK;EAACC,EAAA,KAAAC;EAAAD,EAAA,KAAAI;EAAAJ,EAAA,KAAAR;EAAAQ,EAAA,KAAAN;EAAAM,EAAA,KAAAL;EAAAK,EAAA,KAAAE;EAAAF,EAAA,KAAAK;EAAAL,EAAA,KAAAH;CAAA,OAAA;EAAAO,KAAAJ,EAAA;EAAAR,WAAAQ,EAAA;EAAAN,OAAAM,EAAA;EAAAL,MAAAK,EAAA;EAAAE,KAAAF,EAAA;EAAAK,KAAAL,EAAA;EAAAH,SAAAG,EAAA;CAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAR,YAAAQ,EAAA,OAAAN,QAAAM,EAAA,QAAAL,OAAAK,EAAA,QAAAH,QAAA;EACJS,KAAAI,YAAYlB,UAAUE,MAAMC,KAAKE,MAAM;EAACG,EAAA,KAAAR;EAAAQ,EAAA,KAAAN;EAAAM,EAAA,MAAAL;EAAAK,EAAA,MAAAH;EAAAG,EAAA,MAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,QAAAI,MAAAJ,EAAA,QAAAE,MAAAF,EAAA,QAAAK,MAAAL,EAAA,QAAAM,IAAA;EAHtCC,KAAA,oBAAC,IAAD;GAAc,GAAKR;GAAK,GAAMM;GAGhCC,UAAAA;EAHgB,CAAA;EAIHN,EAAA,MAAAI;EAAAJ,EAAA,MAAAE;EAAAF,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,OAJXO;AAIW;AAOpB,SAASG,YAAYlB,UAAqBE,MAA0BC,KAAyBE,QAA4B;CACvH,QAAQc,UAAiC;EACvC,IAAIA,MAAMC,WACR,OAAO,oBAAC,QAAD;GAAM,gBAAa;GAAO,WAAU;GACtCpB;EACG,CAAA;EAEV,OAAO,qBAAA,UAAA,EAAA,UAAA,CACH,oBAAC0B,QAAD;GAAYxB;GAAWC;GAAaE;GAAQ,MAAK;GAAU,WAAU;GAClEL;EACG,CAAA,GACN,oBAAC,iBAAD,EAAiB,WAAU,6CAA4C,CAAA,CACzE,EAAA,CAAA;CACJ;AACF;AACAX,cAAYgC,OAAOV"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","BreadcrumbRenderProps","BreadcrumbProps","RACBreadcrumbProps","BreadcrumbsProps","RACBreadcrumbsProps","stylex","Breadcrumb","RACBreadcrumb","Breadcrumbs","RACBreadcrumbs","ChevronEndGlyph","mergeStatefulStyles","mergeStyles","colors","spacing","typography","Link","BreadcrumbsItemProps","Omit","children","className","href","rel","style","target","T","props","$","t0","t1","BreadcrumbsItem","T0","t2","t3","t4","t5","t6","itemContent","state","isCurrent","Item","Breadcrumbs","_c","RACBreadcrumbs","RACBreadcrumb","Link"],"sources":["../../../src/components/breadcrumbs/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { BreadcrumbRenderProps, BreadcrumbProps as RACBreadcrumbProps, BreadcrumbsProps as RACBreadcrumbsProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Breadcrumb as RACBreadcrumb, Breadcrumbs as RACBreadcrumbs } from 'react-aria-components';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport Link from '../link';\n\n// A trail of links back up a hierarchy, ending at the page you are on. The\n// design system carries no breadcrumbs page, so the two nearest ones stand\n// in: the row takes the top app bar's muted content role, and each link the\n// text button's label-large type. Both are written down here rather than\n// guessed at each call site.\n//\n// React Aria decides which item is current — the last one — and marks it\n// `aria-current=\"page\"`. The trail is an ordered list, which is what a screen\n// reader reads it as, and `Breadcrumbs.Item` is one entry in it.\n//\n// Three things are this component's own.\n//\n// **The current item is text, not a link.** React Aria's own answer is a\n// disabled link, and a disabled link takes the library's disabled treatment\n// — the content role at 38%, which fades the one item the trail exists to\n// name. Here it is a span carrying `aria-current=\"page\"` instead, in the\n// full-strength content role, so the page you are on is the most legible\n// thing in the row rather than the least.\n//\n// **The chevron belongs to the item before it.** Each item that is not the\n// current one draws one after its link, which puts a separator between every\n// pair and none at the end. It says \"further in\" rather than \"to the right\",\n// so it mirrors under a right-to-left writing mode.\n//\n// **A link is drawn as a link in a place already understood to be links.**\n// `tone=\"inherit\"` takes the row's muted colour and `underline=\"hover\"`\n// leaves the rule for a pointer, which is what Link's own documentation\n// names this case for. The row's position is what announces them.\n//\n// `onAction` is React Aria's and is not wrapped: give each item an `id` and\n// the trail reports which one was pressed, for a page that navigates without\n// an `href`.\n\ntype BreadcrumbsItemProps = Omit<RACBreadcrumbProps, 'children' | 'className' | 'style'> & {\n  /** The item's label. */\n  children?: ReactNode;\n  /** A function may compute the class from the item's render state. */\n  className?: RACBreadcrumbProps['className'];\n  /**\n   * Where the item leads. Leave it out on an item the page handles through\n   * the trail's `onAction`, and on the current one, which is never a link.\n   */\n  href?: string;\n  /** The link's `rel`. */\n  rel?: string;\n  /** A function may compute the style from the item's render state. */\n  style?: RACBreadcrumbProps['style'];\n  /** The link's `target`. */\n  target?: string;\n};\ntype BreadcrumbsProps<T extends object = object> = Omit<RACBreadcrumbsProps<T>, 'children'> & {\n  /** The trail, as `Breadcrumbs.Item` entries. */\n  children?: ReactNode;\n};\n\n/**\n * A trail of links back up a hierarchy, ending at the page you are on.\n * React Aria makes the last item the current one and marks it\n * `aria-current=\"page\"`; everything before it is a link.\n *\n * ```tsx\n * <Breadcrumbs aria-label=\"Label\">\n *   <Breadcrumbs.Item href=\"#first\">First item</Breadcrumbs.Item>\n *   <Breadcrumbs.Item href=\"#second\">Second item</Breadcrumbs.Item>\n *   <Breadcrumbs.Item>Third item</Breadcrumbs.Item>\n * </Breadcrumbs>\n * ```\n *\n * Name it with `aria-label` or `aria-labelledby`. A page that navigates\n * without an `href` gives each item an `id` and the trail an `onAction`,\n * which is React Aria's and reports the key that was pressed.\n *\n * The call site's `className` and `style` land on the list, which is the\n * element a layout positions.\n */\nfunction Breadcrumbs<T extends object = object>(props: BreadcrumbsProps<T> & RefAttributes<HTMLOListElement>) {\n  return <RACBreadcrumbs<T> {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x1w5n3ug x78zum5 x1a02dak xkknnkr x14zspaw x1v9cpvo xzoy561 x155f00i x1lz68p4 xe8uvvx x1ghz6dp x1717udv\"\n  }, props)} />;\n}\n\n/**\n * One entry in the trail. Give it an `href` to navigate, or an `id` and let\n * the trail's `onAction` handle it. The last entry is the current page and\n * is drawn as text rather than a link, whatever it is given.\n */\nfunction BreadcrumbsItem({\n  children,\n  href,\n  rel,\n  target,\n  ...props\n}: BreadcrumbsItemProps) {\n  return <RACBreadcrumb {...props} {...mergeStatefulStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xzoy561\"\n  }, props)}>\n      {itemContent(children, href, rel, target)}\n    </RACBreadcrumb>;\n}\n\n// What an entry draws, from React Aria's render state. Built by a call rather\n// than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result on\n// its inputs.\nfunction itemContent(children: ReactNode, href: string | undefined, rel: string | undefined, target: string | undefined) {\n  return (state: BreadcrumbRenderProps) => {\n    if (state.isCurrent) {\n      return <span aria-current=\"page\" className=\"x139gbkf\">\n          {children}\n        </span>;\n    }\n    return <>\n        <Link href={href} rel={rel} target={target} tone=\"inherit\" underline=\"hover\">\n          {children}\n        </Link>\n        <ChevronEndGlyph className=\"xmix8c7 x2lah0s x1xp8n7a x19axjrm x1c071of\" />\n      </>;\n  };\n}\nBreadcrumbs.Item = BreadcrumbsItem;\nexport type { BreadcrumbsItemProps, BreadcrumbsProps };\nexport { BreadcrumbsItem };\nexport default Breadcrumbs;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuFA,SAAAY,cAAAkB,OAAA;CAAA,MAAAC,IAAA9B,EAAA,CAAA;CAAA,IAAA+B;CAAA,IAAAD,EAAA,OAAAD,OAAA;EAC2CE,KAAAhB,YAAY,EAAAQ,WACxC,yHACb,GAAGM,KAAK;EAACC,EAAA,KAAAD;EAAAC,EAAA,KAAAC;CAAA,OAAAA,KAAAD,EAAA;CAAA,IAAAE;CAAA,IAAAF,EAAA,OAAAD,SAAAC,EAAA,OAAAC,IAAA;EAFFC,KAAA,oBAACc,aAAD;GAAe,GAAQjB;GAAK,GAAME;EAEhC,CAAA;EAAID,EAAA,KAAAD;EAAAC,EAAA,KAAAC;EAAAD,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,OAFNE;AAEM;;;;;;AAQf,SAAAC,gBAAAF,IAAA;CAAA,MAAAD,IAAA9B,EAAA,EAAA;CAAA,IAAAkC;CAAA,IAAAZ;CAAA,IAAAE;CAAA,IAAAC;CAAA,IAAAO;CAAA,IAAAG;CAAA,IAAAR;CAAA,IAAAG,EAAA,OAAAC,IAAA;EAAyB,MAAA,EAAAT,UAAAc,IAAAZ,MAAAa,IAAAZ,KAAAa,IAAAX,QAAAY,IAAA,GAAAV,UAAAE;EAAAT,WAAAc;EAAAZ,OAAAa;EAAAZ,MAAAa;EAAAX,SAAAY;EAOfL,KAAAxB;EAAkBmB,KAAAA;EAAWM,KAAArB,oBAAoB,EAAAS,WAC5C,iCACb,GAAGM,KAAK;EAACC,EAAA,KAAAC;EAAAD,EAAA,KAAAI;EAAAJ,EAAA,KAAAR;EAAAQ,EAAA,KAAAN;EAAAM,EAAA,KAAAL;EAAAK,EAAA,KAAAE;EAAAF,EAAA,KAAAK;EAAAL,EAAA,KAAAH;CAAA,OAAA;EAAAO,KAAAJ,EAAA;EAAAR,WAAAQ,EAAA;EAAAN,OAAAM,EAAA;EAAAL,MAAAK,EAAA;EAAAE,KAAAF,EAAA;EAAAK,KAAAL,EAAA;EAAAH,SAAAG,EAAA;CAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAR,YAAAQ,EAAA,OAAAN,QAAAM,EAAA,QAAAL,OAAAK,EAAA,QAAAH,QAAA;EACJS,KAAAI,YAAYlB,UAAUE,MAAMC,KAAKE,MAAM;EAACG,EAAA,KAAAR;EAAAQ,EAAA,KAAAN;EAAAM,EAAA,MAAAL;EAAAK,EAAA,MAAAH;EAAAG,EAAA,MAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,QAAAI,MAAAJ,EAAA,QAAAE,MAAAF,EAAA,QAAAK,MAAAL,EAAA,QAAAM,IAAA;EAHtCC,KAAA,oBAAC,IAAD;GAAc,GAAKR;GAAK,GAAMM;GAGhCC,UAAAA;EAHgB,CAAA;EAIHN,EAAA,MAAAI;EAAAJ,EAAA,MAAAE;EAAAF,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,OAJXO;AAIW;AAOpB,SAASG,YAAYlB,UAAqBE,MAA0BC,KAAyBE,QAA4B;CACvH,QAAQc,UAAiC;EACvC,IAAIA,MAAMC,WACR,OAAO,oBAAC,QAAD;GAAM,gBAAa;GAAO,WAAU;GACtCpB;EACG,CAAA;EAEV,OAAO,qBAAA,UAAA,EAAA,UAAA,CACH,oBAAC0B,QAAD;GAAYxB;GAAWC;GAAaE;GAAQ,MAAK;GAAU,WAAU;GAClEL;EACG,CAAA,GACN,oBAAC,iBAAD,EAAiB,WAAU,6CAA4C,CAAA,CACzE,EAAA,CAAA;CACJ;AACF;AACAX,cAAYgC,OAAOV"}