@kanso-labs/kanso-ui 0.35.0 → 0.36.0

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,37 @@
+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>
+ * ```
+ *
+ * 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,97 @@
+"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>
+* ```
+*
+* 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" },
+			1: { className: "xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl x10l6tqk xols6we x1v4s8kt x13vifvy xtijo5x" }
+		};
+		$[4] = t5;
+	} else t5 = $[4];
+	const t6 = t5[!!(label === void 0) << 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","1","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// 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 * 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          1: {\n            className: \"xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl x10l6tqk xols6we x1v4s8kt x13vifvy xtijo5x\"\n          }\n        }[!!(label === undefined) << 0]}>\n            {label}\n          </span>\n        </>\n    },\n    render\n  });\n}\nexport type { BadgeProps };\nexport default Badge;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAsEA,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;EACF;EAACf,EAAA,KAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAP8B,MAAAqB,KAAAL,GAO7B,CAAC,EAAEJ,UAAUP,KAAAA,MAAc;CAAE,IAAAiB;CAAA,IAAAtB,EAAA,OAAAY,SAAAZ,EAAA,OAAAqB,IAAA;EAP7BC,KAAA,oBAAA,QAAA;GAAkB,eAAA;GAAM,GAAKD;GAQ1BT,UAAAA;EACI,CAAA;EAAAZ,EAAA,KAAAY;EAAAZ,EAAA,KAAAqB;EAAArB,EAAA,KAAAsB;CAAA,OAAAA,KAAAtB,EAAA;CAAA,IAAAuB;CAAA,IAAAvB,EAAA,OAAAC,YAAAD,EAAA,OAAAsB,IAAA;EAXDC,KAAA,qBAAA,UAAA,EAAA,UAAA,CACLtB,UACDqB,EASO,EAAA,CAAA;EACNtB,EAAA,KAAAC;EAAAD,EAAA,KAAAsB;EAAAtB,EAAA,MAAAuB;CAAA,OAAAA,KAAAvB,EAAA;CAAA,IAAAwB;CAAA,IAAAxB,EAAA,QAAAI,SAAAJ,EAAA,QAAAc,MAAAd,EAAA,QAAAuB,IAAA;EAjBAC,KAAA;GAAA,GACFpB;GAAK,GACLU;GAEMb,UACCsB;EAaZ;EAACvB,EAAA,MAAAI;EAAAJ,EAAA,MAAAc;EAAAd,EAAA,MAAAuB;EAAAvB,EAAA,MAAAwB;CAAA,OAAAA,KAAAxB,EAAA;CAAA,IAAAyB;CAAA,IAAAzB,EAAA,QAAAG,UAAAH,EAAA,QAAAwB,IAAA;EApBcC,MAAA;GAAAC,gBACCb;GAAMT,OACfoB;GAkBNrB;EAEH;EAACH,EAAA,MAAAG;EAAAH,EAAA,MAAAwB;EAAAxB,EAAA,MAAAyB;CAAA,OAAAA,MAAAzB,EAAA;CAAA,OAtBMZ,UAAUqC,GAsBhB;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"}

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

@@ -1,11 +1,18 @@
-import { DOMAttributes, ReactNode, RefAttributes } from "react";
-import { ButtonProps, ButtonRenderProps, ClassNameOrFunction, StyleOrFunction } from "react-aria-components";
+import { ButtonDOMProps, ButtonState } from "../../button/index.js";
+import { ReactNode, RefAttributes } from "react";
+import { ClassNameOrFunction, StyleOrFunction } from "react-aria-components";
 //#region src/components/button/index.d.ts
-type ButtonDOMProps = Omit<ButtonProps, 'children' | 'className' | 'style' | GlobalEventKey> & Pick<DOMAttributes<HTMLElement>, GlobalEventKey>;
 type ButtonProps$1 = {
   children?: ReactNode;
   /** A function may compute the class from the button's render state. */
   className?: ClassNameOrFunction<ButtonState>;
+  /**
+   * Whether a toggle starts selected, when it keeps its own state. Passing
+   * this, `isSelected` or `onChange` is what makes the button a toggle —
+   * except a `text` button, which the page gives no selected colours, so it
+   * stays a plain button.
+   */
+  defaultSelected?: boolean;
   /**
    * Disables the press ripple. The hover/pressed background state layer is
    * unaffected.
@@ -16,17 +23,44 @@ type ButtonProps$1 = {
    * Where the button leads. Given one, the button is rendered as a link —
    * an `<a>`, announced as the link it is — with the same styles and ripple.
    * `render`, `type`, and the form and pending props apply to the button
-   * form only.
+   * form only, and a toggle is never a link.
    */
   href?: string;
+  /**
+   * An icon before the label, at the page's icon size for the button's size:
+   * 20px at `xs` and `md`, 24px at `lg`, 32px at `xl` and 40px at `xxl`. Draw
+   * it `1em` square in `currentColor`, as every icon here is, and it follows.
+   * Hidden with the label while the button is pending.
+   */
+  icon?: ReactNode;
+  /**
+   * Whether a toggle is selected, when the call site holds the state. Pass
+   * it with `onChange`; passing this, `defaultSelected` or `onChange` is what
+   * makes the button a toggle, `text` excepted.
+   */
+  isSelected?: boolean;
+  /**
+   * Called with the new state when a toggle is pressed. Passing this,
+   * `isSelected` or `defaultSelected` is what makes the button a toggle,
+   * `text` excepted.
+   */
+  onChange?: (isSelected: boolean) => void;
   /**
    * The name of the ring shown while the button is pending, for a screen
-   * reader. The label it replaces is hidden while it shows.
-   * @default 'Loading'
+   * reader. The label it replaces is hidden while it shows. Left out, it is
+   * the word for it in the I18nProvider's locale — "Loading" in English.
    */
   pendingLabel?: string;
   /** The link's `rel`, when `href` is set. */
   rel?: string;
+  /**
+   * The corner the button rests at: `round` is the pill, `square` the
+   * page's rounded rectangle, 12px up to `md`, 16px at `lg` and 28px above.
+   * Either tightens while pressed, and a toggle trades one for the other
+   * once selected.
+   * @default 'round'
+   */
+  shape?: ButtonShape;
   /**
    * Control height: `xs` 32px, `md` 40px, `lg` 56px, `xl` 96px, `xxl` 136px —
    * the buttons spec page's XS, S, M, L and XL, each with its own inline
@@ -47,17 +81,27 @@ type ButtonProps$1 = {
    */
   variant?: ButtonVariant;
 } & ButtonDOMProps;
+type ButtonShape = 'round' | 'square';
 type ButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';
-type ButtonState = Pick<ButtonRenderProps, 'isDisabled' | 'isFocused' | 'isFocusVisible' | 'isHovered' | 'isPressed'>;
 type ButtonVariant = 'elevated' | 'filled' | 'outlined' | 'text' | 'tonal';
-type GlobalEventKey = Exclude<keyof DOMAttributes<HTMLElement> & keyof ButtonProps, 'onBlur' | 'onClick' | 'onFocus'>;
 /**
- * The design's button, at five emphasis levels and five control heights.
- * Given `href` it is a link with the same appearance. Every `aria-*` prop is
- * forwarded to the element; React Aria alone would keep only the labelling
- * ones.
+ * The design's button, at five emphasis levels and five control heights,
+ * round or square. Given `href` it is a link with the same appearance. Every
+ * `aria-*` prop is forwarded to the element; React Aria alone would keep only
+ * the labelling ones.
+ *
+ * Given `isSelected`, `defaultSelected` or `onChange` it is a toggle, which
+ * reports its state through `aria-pressed` and draws the page's second pair
+ * of colour roles for its variant. A toggle takes neither `href` nor the
+ * pending props, and a `text` button never toggles.
+ *
+ * ```tsx
+ * <Button defaultSelected variant="tonal">
+ *   Label
+ * </Button>
+ * ```
  */
-declare function Button$1({ children, disableRipple, href, isDisabled, isPending, onClick, onContextMenu, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, pendingLabel, ref, rel, render, size, target, variant, ...props }: ButtonProps$1 & RefAttributes<HTMLAnchorElement | HTMLButtonElement>): import("react").JSX.Element;
+declare function Button$1({ children, defaultSelected, href, icon, isPending, isSelected, onChange, pendingLabel, rel, shape, size, target, variant, ...props }: ButtonProps$1 & RefAttributes<HTMLAnchorElement | HTMLButtonElement>): import("react").JSX.Element;
 //#endregion
-export { type ButtonDOMProps, type ButtonProps$1 as ButtonProps, type ButtonSize, type ButtonState, type ButtonVariant, Button$1 as default };
+export { type ButtonDOMProps, type ButtonProps$1 as ButtonProps, type ButtonShape, type ButtonSize, type ButtonState, type ButtonVariant, Button$1 as default };
 //# sourceMappingURL=index.d.ts.map