@kanso-labs/kanso-ui 0.26.2 → 0.26.3

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["props"],"sources":["../../../src/components/breadcrumbs/index.tsx"],"sourcesContent":["import type { ReactNode } 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>) {\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAqFA,SAAA,cAAA,OAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EAC2C,KAAA,YAAY,EAAA,WACxC,yHACb,GAAG,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,SAAA,EAAA,OAAA,IAAA;EAFF,KAAA,oBAAC,aAAD;GAAe,GAAQ;GAAK,GAAM;EAEhC,CAAA;EAAI,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAFN;AAEM;;;;;;AAQf,SAAA,gBAAA,IAAA;CAAA,MAAA,IAAA,EAAA,EAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAyB,MAAA,EAAA,UAAA,IAAA,MAAA,IAAA,KAAA,IAAA,QAAA,IAAA,GAAA,UAAA;EAAA,WAAA;EAAA,OAAA;EAAA,MAAA;EAAA,SAAA;EAOf,KAAA;EAAkBA,KAAA;EAAW,KAAA,oBAAoB,EAAA,WAC5C,iCACb,GAAG,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,KAAA,EAAA;EAAA,WAAA,EAAA;EAAA,OAAA,EAAA;EAAA,MAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;EAAA,SAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,YAAA,EAAA,OAAA,QAAA,EAAA,QAAA,OAAA,EAAA,QAAA,QAAA;EACJ,KAAA,YAAY,UAAU,MAAM,KAAK,MAAM;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,MAAA,EAAA,QAAA,MAAA,EAAA,QAAA,MAAA,EAAA,QAAA,IAAA;EAHtC,KAAA,oBAAC,IAAD;GAAc,GAAKA;GAAK,GAAM;GAGhC,UAAA;EAHgB,CAAA;EAIH,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAJX;AAIW;AAOpB,SAAS,YAAY,UAAqB,MAA0B,KAAyB,QAA4B;CACvH,QAAQ,UAAiC;EACvC,IAAI,MAAM,WACR,OAAO,oBAAC,QAAD;GAAM,gBAAa;GAAO,WAAU;GACtC;EACG,CAAA;EAEV,OAAO,qBAAA,UAAA,EAAA,UAAA,CACH,oBAAC,QAAD;GAAY;GAAW;GAAa;GAAQ,MAAK;GAAU,WAAU;GAClE;EACG,CAAA,GACN,oBAAC,iBAAD,EAAiB,WAAU,6CAA4C,CAAA,CACzE,EAAA,CAAA;CACJ;AACF;AACA,cAAY,OAAO"}
+{"version":3,"file":"index.js","names":["ReactNode","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","$","_c","t0","t1","BreadcrumbsItem","T0","t2","t3","t4","t5","t6","itemContent","state","isCurrent","Item"],"sources":["../../../src/components/breadcrumbs/index.tsx"],"sourcesContent":["import type { ReactNode } 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>) {\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAqFA,SAAAS,cAAAkB,OAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAD,OAAA;EAC2CG,KAAAjB,YAAY,EAAAQ,WACxC,yHACb,GAAGM,KAAK;EAACC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,IAAAG;CAAA,IAAAH,EAAA,OAAAD,SAAAC,EAAA,OAAAE,IAAA;EAFFC,KAAA,oBAAC,aAAD;GAAe,GAAQJ;GAAK,GAAMG;EAEhC,CAAA;EAAIF,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,OAFNG;AAEM;;;;;;AAQf,SAAAC,gBAAAF,IAAA;CAAA,MAAAF,IAAAC,EAAA,EAAA;CAAA,IAAAI;CAAA,IAAAb;CAAA,IAAAE;CAAA,IAAAC;CAAA,IAAAQ;CAAA,IAAAG;CAAA,IAAAT;CAAA,IAAAG,EAAA,OAAAE,IAAA;EAAyB,MAAA,EAAAV,UAAAe,IAAAb,MAAAc,IAAAb,KAAAc,IAAAZ,QAAAa,IAAA,GAAAX,UAAAG;EAAAV,WAAAe;EAAAb,OAAAc;EAAAb,MAAAc;EAAAZ,SAAAa;EAOfL,KAAAzB;EAAkBmB,KAAAA;EAAWO,KAAAtB,oBAAoB,EAAAS,WAC5C,iCACb,GAAGM,KAAK;EAACC,EAAA,KAAAE;EAAAF,EAAA,KAAAK;EAAAL,EAAA,KAAAR;EAAAQ,EAAA,KAAAN;EAAAM,EAAA,KAAAL;EAAAK,EAAA,KAAAG;EAAAH,EAAA,KAAAM;EAAAN,EAAA,KAAAH;CAAA,OAAA;EAAAQ,KAAAL,EAAA;EAAAR,WAAAQ,EAAA;EAAAN,OAAAM,EAAA;EAAAL,MAAAK,EAAA;EAAAG,KAAAH,EAAA;EAAAM,KAAAN,EAAA;EAAAH,SAAAG,EAAA;CAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAR,YAAAQ,EAAA,OAAAN,QAAAM,EAAA,QAAAL,OAAAK,EAAA,QAAAH,QAAA;EACJU,KAAAI,YAAYnB,UAAUE,MAAMC,KAAKE,MAAM;EAACG,EAAA,KAAAR;EAAAQ,EAAA,KAAAN;EAAAM,EAAA,MAAAL;EAAAK,EAAA,MAAAH;EAAAG,EAAA,MAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,QAAAK,MAAAL,EAAA,QAAAG,MAAAH,EAAA,QAAAM,MAAAN,EAAA,QAAAO,IAAA;EAHtCC,KAAA,oBAAC,IAAD;GAAc,GAAKT;GAAK,GAAMO;GAGhCC,UAAAA;EAHgB,CAAA;EAIHP,EAAA,MAAAK;EAAAL,EAAA,MAAAG;EAAAH,EAAA,MAAAM;EAAAN,EAAA,MAAAO;EAAAP,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,OAJXQ;AAIW;AAOpB,SAASG,YAAYnB,UAAqBE,MAA0BC,KAAyBE,QAA4B;CACvH,QAAQe,UAAiC;EACvC,IAAIA,MAAMC,WACR,OAAO,oBAAC,QAAD;GAAM,gBAAa;GAAO,WAAU;GACtCrB;EACG,CAAA;EAEV,OAAO,qBAAA,UAAA,EAAA,UAAA,CACH,oBAAC,QAAD;GAAYE;GAAWC;GAAaE;GAAQ,MAAK;GAAU,WAAU;GAClEL;EACG,CAAA,GACN,oBAAC,iBAAD,EAAiB,WAAU,6CAA4C,CAAA,CACzE,EAAA,CAAA;CACJ;AACF;AACAX,cAAYiC,OAAOV"}

package/dist/components/button/index.js

@@ -3,6 +3,7 @@ import { mergeStatefulStyles } from "../../styles/merge.js";
 import { ariaAttributesOf, buttonRenderer, linkRenderer } from "../../render/aria.js";
 import { useRipple } from "../../hooks/useRipple.js";
 import ProgressIndicator from "../progress-indicator/index.js";
+import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button, Link } from "react-aria-components";
 //#region src/components/button/index.tsx
@@ -186,16 +187,41 @@ const disabledStyles = {
 * forwarded to the element; React Aria alone would keep only the labelling
 * ones.
 */
-function Button$1({ children, disableRipple = false, href, isDisabled = false, onClick, onContextMenu, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, pendingLabel = "Loading", rel, render, size = "md", target, variant = "filled", ...props$1 }) {
-	const ripple = useRipple(!disableRipple && !isDisabled, {
-		onClick,
-		onContextMenu,
-		onPointerCancel,
-		onPointerDown,
-		onPointerLeave,
-		onPointerUp
-	});
-	const styleProps = mergeStatefulStyles((state) => props(styles.base, styles[variant], styles[size], variant === "outlined" && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]), props$1);
+function Button$1(t0) {
+	const $ = c(22);
+	const { children, disableRipple: t1, href, isDisabled: t2, onClick, onContextMenu, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, pendingLabel: t3, rel, render, size: t4, target, variant: t5, ...props$1 } = t0;
+	const disableRipple = t1 === void 0 ? false : t1;
+	const isDisabled = t2 === void 0 ? false : t2;
+	const pendingLabel = t3 === void 0 ? "Loading" : t3;
+	const size = t4 === void 0 ? "md" : t4;
+	const variant = t5 === void 0 ? "filled" : t5;
+	let t6;
+	if ($[0] !== onClick || $[1] !== onContextMenu || $[2] !== onPointerCancel || $[3] !== onPointerDown || $[4] !== onPointerLeave || $[5] !== onPointerUp) {
+		t6 = {
+			onClick,
+			onContextMenu,
+			onPointerCancel,
+			onPointerDown,
+			onPointerLeave,
+			onPointerUp
+		};
+		$[0] = onClick;
+		$[1] = onContextMenu;
+		$[2] = onPointerCancel;
+		$[3] = onPointerDown;
+		$[4] = onPointerLeave;
+		$[5] = onPointerUp;
+		$[6] = t6;
+	} else t6 = $[6];
+	const ripple = useRipple(!disableRipple && !isDisabled, t6);
+	let t7;
+	if ($[7] !== size || $[8] !== variant) {
+		t7 = (state) => props(styles.base, styles[variant], styles[size], variant === "outlined" && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]);
+		$[7] = size;
+		$[8] = variant;
+		$[9] = t7;
+	} else t7 = $[9];
+	const styleProps = mergeStatefulStyles(t7, props$1);
 	const element = {
 		aria: ariaAttributesOf(props$1),
 		onKeyDown,
@@ -212,14 +238,37 @@ function Button$1({ children, disableRipple = false, href, isDisabled = false, o
 		...styleProps,
 		children: [children, ripple.surface]
 	});
-	return /* @__PURE__ */ jsx(Button, {
-		isDisabled,
-		render: buttonRenderer(element, render),
-		...ripple.handlers,
-		...props$1,
-		...styleProps,
-		children: buttonContent(children, pendingLabel, ripple)
-	});
+	const T0 = Button;
+	const t8 = buttonRenderer(element, render);
+	const t9 = ripple.handlers;
+	let t10;
+	if ($[10] !== children || $[11] !== pendingLabel || $[12] !== ripple) {
+		t10 = buttonContent(children, pendingLabel, ripple);
+		$[10] = children;
+		$[11] = pendingLabel;
+		$[12] = ripple;
+		$[13] = t10;
+	} else t10 = $[13];
+	let t11;
+	if ($[14] !== T0 || $[15] !== isDisabled || $[16] !== props$1 || $[17] !== ripple.handlers || $[18] !== styleProps || $[19] !== t10 || $[20] !== t8) {
+		t11 = /* @__PURE__ */ jsx(T0, {
+			isDisabled,
+			render: t8,
+			...t9,
+			...props$1,
+			...styleProps,
+			children: t10
+		});
+		$[14] = T0;
+		$[15] = isDisabled;
+		$[16] = props$1;
+		$[17] = ripple.handlers;
+		$[18] = styleProps;
+		$[19] = t10;
+		$[20] = t8;
+		$[21] = t11;
+	} else t11 = $[21];
+	return t11;
 }
 function buttonContent(children, pendingLabel, ripple) {
 	return (state) => /* @__PURE__ */ jsxs(Fragment, { children: [

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/button/index.tsx"],"sourcesContent":["import type { DOMAttributes, ReactNode } from 'react';\nimport type { ButtonRenderProps, ClassNameOrFunction, FocusableElement, ButtonProps as RACButtonProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, Link as RACLink } from 'react-aria-components';\nimport { useRipple } from '../../hooks/useRipple';\nimport { ariaAttributesOf, buttonRenderer, linkRenderer } from '../../render/aria';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, shadows, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport ProgressIndicator from '../progress-indicator';\n\n// Each variant composites its label colour over its container at the\n// interaction state's opacity, rather than swapping in a separate\n// hover/pressed color: filled and tonal paint the 'on-color' over the\n// container, outlined, text and elevated paint the label colour over their\n// own. The pairs are the buttons spec page's newer values: tonal on\n// secondary container, outlined with an outline variant border and an\n// on-surface-variant label, text on primary, elevated on surface container\n// low with a primary label.\n//\n// **Elevated is the one variant whose shadow is part of its identity.** The\n// page rests it at elevation 1 rather than flat, raises it on hover and\n// returns it to 1 while pressed — where filled and tonal rest flat and lift\n// only on hover. Disabled drops it to none, since a shadow says a control is\n// available to press.\n// calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined rather than factored into a helper:\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values, and a call to an externally-defined function\n// isn't one of them.\n//\n// Disabled is a style of its own per variant rather than a `:disabled`\n// branch inside each property: a button given `href` renders as a link,\n// which React Aria turns into a <span> while disabled, and neither matches\n// the pseudo-class. The disabled styles are applied last from the render\n// state's `isDisabled`, and StyleX replaces a property whole, so they also\n// take the hover and pressed branches with them — which is what keeps a\n// hovered disabled button from lighting up.\n//\n// Two independent axes, applied base -> variant -> size. The order is what\n// lets `text` keep its tighter inline padding at the default size while the\n// other sizes still set their own: `md` deliberately declares no\n// paddingInline, so a medium button falls through to whatever its variant\n// asked for, and every other size overrides it. That mirrors the source\n// design's own cascade, where the size classes are declared after the\n// variant ones and win on padding for exactly the same reason.\ntype Ripple = ReturnType<typeof useRipple<FocusableElement>>;\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x3y1ksm\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"x126z3so\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    $$css: true\n  },\n  disabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  elevated: {\n    kWkggS: \"x1k1wbbp x3k5p2v xf9j7ge x1vnz5z6\",\n    kGVxlE: \"x1g60mc1 x1fzngjt x19efjv6\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  elevatedDisabled: {\n    kWkggS: \"xepofeg\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xpky1to x16z974x xyf7a0q xnety89\",\n    kGVxlE: \"xpk4wdd x1955hzl x1gnnqk1\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  filledDisabled: {\n    kWkggS: \"xepofeg\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  label: {\n    k1xSpc: \"xjp7ctv\",\n    $$css: true\n  },\n  labelPending: {\n    k33iCy: \"xlshs6z\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xnnlda6\",\n    kMv6JI: \"x46eyla\",\n    kGuDYH: \"x5ehqhr\",\n    k63SB2: \"xrf6cl6\",\n    kb6lSQ: \"x1g135zh\",\n    kLWn49: \"x1ggk5va\",\n    kg3NbH: \"xg0ps1x\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1vqgdyp\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x1dg9itu x1yu1589 x1728qcm xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  outlinedDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  pending: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kpwlN0: \"x10a8y8t\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  text: {\n    kWkggS: \"x12vej0r x598nmq x14dcer4 xjbqb8w\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  textDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"xnqsvhv xc87fxa xlizrex x15dekr4\",\n    kGVxlE: \"xpk4wdd x1955hzl x1gnnqk1\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  tonalDisabled: {\n    kWkggS: \"xepofeg\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  xl: {\n    kZKoxP: \"xjp8j0k\",\n    kMv6JI: \"x1fz0g89\",\n    kGuDYH: \"xkb6epg\",\n    k63SB2: \"x76yrz5\",\n    kOIVth: \"x1gka490\",\n    kb6lSQ: \"x1s1qhaa\",\n    kLWn49: \"x1voeury\",\n    kg3NbH: \"x1sdxjpb\",\n    $$css: true\n  },\n  xs: {\n    kZKoxP: \"x10w6t97\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  xxl: {\n    kZKoxP: \"xn866dk\",\n    kMv6JI: \"x1vsmgmf\",\n    kGuDYH: \"xh9c4x\",\n    k63SB2: \"x1y15vu6\",\n    kOIVth: \"xxj4525\",\n    kb6lSQ: \"xoqu3bc\",\n    kLWn49: \"x10x9d6x\",\n    kg3NbH: \"x1dao9b2\",\n    $$css: true\n  }\n};\n\n// The outlined button's border thickens with the size, as the page's size\n// tokens have it: 1dp up to M, 2dp at L, 3dp at XL. A style per size rather\n// than a value in the size style, since a border on a filled button would\n// draw in the label colour.\nconst outlineWidths = {\n  lg: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  md: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  xl: {\n    kMzoRj: \"xdh2fpr\",\n    $$css: true\n  },\n  xs: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  xxl: {\n    kMzoRj: \"x9r2w2z\",\n    $$css: true\n  }\n};\nconst disabledStyles = {\n  elevated: styles.elevatedDisabled,\n  filled: styles.filledDisabled,\n  outlined: styles.outlinedDisabled,\n  text: styles.textDisabled,\n  tonal: styles.tonalDisabled\n};\ntype ButtonDOMProps = Omit<RACButtonProps, 'children' | 'className' | 'style' | GlobalEventKey> & Pick<DOMAttributes<HTMLElement>, GlobalEventKey>;\ntype ButtonProps = {\n  children?: ReactNode;\n  /** A function may compute the class from the button's render state. */\n  className?: ClassNameOrFunction<ButtonState>;\n  /**\n   * Disables the press ripple. The hover/pressed background state layer is\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * Where the button leads. Given one, the button is rendered as a link —\n   * an `<a>`, announced as the link it is — with the same styles and ripple.\n   * `render`, `type`, and the form and pending props apply to the button\n   * form only.\n   */\n  href?: string;\n  /**\n   * The name of the ring shown while the button is pending, for a screen\n   * reader. The label it replaces is hidden while it shows.\n   * @default 'Loading'\n   */\n  pendingLabel?: string;\n  /** The link's `rel`, when `href` is set. */\n  rel?: string;\n  /**\n   * Control height: `xs` 32px, `md` 40px, `lg` 56px, `xl` 96px, `xxl` 136px —\n   * the buttons spec page's XS, S, M, L and XL, each with its own inline\n   * padding and type role. `md` is the page's default.\n   * @default 'md'\n   */\n  size?: ButtonSize;\n  /** A function may compute the style from the button's render state. */\n  style?: StyleOrFunction<ButtonState>;\n  /** The link's `target`, when `href` is set. */\n  target?: string;\n  /**\n   * How much weight the button pulls. `filled` and `tonal` carry a container\n   * of their own; `outlined` and `text` sit on the page; `elevated` sits on\n   * a low surface and lifts off it with a shadow, for a button that has to\n   * separate from a busy background rather than from the page.\n   * @default 'filled'\n   */\n  variant?: ButtonVariant;\n} & ButtonDOMProps;\ntype ButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';\n\n// The render state both of React Aria's elements share. A className or\n// style function written against it serves the button and the link alike;\n// `isPending` belongs to the button alone, and `isCurrent` to the link, so\n// neither is here: a `className` written against this state serves both\n// elements. What the button draws while pending is decided in\n// `buttonContent`, which sees React Aria's own state rather than this one.\ntype ButtonState = Pick<ButtonRenderProps, 'isDisabled' | 'isFocused' | 'isFocusVisible' | 'isHovered' | 'isPressed'>;\ntype ButtonVariant = 'elevated' | 'filled' | 'outlined' | 'text' | 'tonal';\n\n// React Aria types the global DOM events — pointer, mouse, touch, wheel and\n// the rest — against the element each component renders, and a handler\n// written for a <button> does not type-check against an <a>. The keys are\n// retyped against HTMLElement here so one set of props serves both forms;\n// the events React Aria defines itself (press, focus, keyboard) keep its\n// types, since it hands those its own event objects.\ntype GlobalEventKey = Exclude<keyof DOMAttributes<HTMLElement> & keyof RACButtonProps, 'onBlur' | 'onClick' | 'onFocus'>;\n\n/**\n * The design's button, at five emphasis levels and five control heights.\n * Given `href` it is a link with the same appearance. Every `aria-*` prop is\n * forwarded to the element; React Aria alone would keep only the labelling\n * ones.\n */\nfunction Button({\n  children,\n  disableRipple = false,\n  href,\n  isDisabled = false,\n  onClick,\n  onContextMenu,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  pendingLabel = 'Loading',\n  rel,\n  render,\n  size = 'md',\n  target,\n  variant = 'filled',\n  ...props\n}: ButtonProps) {\n  // `props` (className/style, etc.) is spread separately: `className` and\n  // `style` there may be functions of render state, which ripple's own\n  // handler-only merge doesn't need to know about. It is also why the styles\n  // below merge through mergeStatefulStyles rather than the plain\n  // mergeStyles. The ripple is off while disabled: React Aria still forwards\n  // pointer events to a disabled element, and a press that changes nothing\n  // should not look like one.\n  const ripple = useRipple<FocusableElement>(!disableRipple && !isDisabled, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  const styleProps = mergeStatefulStyles((state: ButtonState) => stylex.props(styles.base, styles[variant], styles[size], variant === 'outlined' && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]), props);\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n  if (href !== undefined) {\n    return <RACLink href={href} isDisabled={isDisabled} rel={rel} render={linkRenderer(element)} target={target} {...ripple.handlers} {...props} {...styleProps}>\n        {children}\n        {ripple.surface}\n      </RACLink>;\n  }\n  return <RACButton isDisabled={isDisabled} render={buttonRenderer(element, render)} {...ripple.handlers} {...props} {...styleProps}>\n      {buttonContent(children, pendingLabel, ripple)}\n    </RACButton>;\n}\n// What the button draws: its label, hidden while the button is pending, with\n// the ring over it. The ring takes the button's own content colour rather\n// than the progress page's primary, which on a filled button is the fill\n// itself and so invisible. The label stays in the flow so the button keeps its\n// width, which is what stops a form jumping the moment it is submitted.\n// React Aria wants the progress bar in the accessibility tree as soon as the\n// button goes pending, so it is rendered from the render state rather than\n// after a delay.\n//\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler\n// memoises the result on its inputs.\nfunction buttonContent(children: ReactNode, pendingLabel: string, ripple: Ripple) {\n  return (state: ButtonRenderProps) => <>\n      <span {...{\n      0: {\n        className: \"xjp7ctv\"\n      },\n      1: {\n        className: \"xjp7ctv xlshs6z\"\n      }\n    }[!!state.isPending << 0]}>\n        {children}\n      </span>\n      {state.isPending ? <span className=\"x6s0dn4 x78zum5 x10a8y8t xl56j7k x10l6tqk\">\n          <ProgressIndicator aria-label={pendingLabel} isIndeterminate size=\"1em\" tone=\"inherit\" variant=\"circular\" />\n        </span> : null}\n      {ripple.surface}\n    </>;\n}\nexport type { ButtonDOMProps, ButtonProps, ButtonSize, ButtonState, ButtonVariant };\nexport default Button;"],"mappings":";;;;;;;;AA+CA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,kBAAkB;EAChB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,kBAAkB;EAChB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAMA,MAAM,gBAAgB;CACpB,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAM,iBAAiB;CACrB,UAAU,OAAO;CACjB,QAAQ,OAAO;CACf,UAAU,OAAO;CACjB,MAAM,OAAO;CACb,OAAO,OAAO;AAChB;;;;;;;AAwEA,SAAS,SAAO,EACd,UACA,gBAAgB,OAChB,MACA,aAAa,OACb,SACA,eACA,WACA,SACA,iBACA,eACA,gBACA,aACA,eAAe,WACf,KACA,QACA,OAAO,MACP,QACA,UAAU,UACV,GAAG,WACW;CAQd,MAAM,SAAS,UAA4B,CAAC,iBAAiB,CAAC,YAAY;EACxE;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,MAAM,aAAa,qBAAqB,UAAuB,MAAa,OAAO,MAAM,OAAO,UAAU,OAAO,OAAO,YAAY,cAAc,cAAc,OAAO,MAAM,cAAc,OAAO,UAAU,MAAM,cAAc,eAAe,QAAQ,GAAG,OAAK;CAC/P,MAAM,UAAU;EACd,MAAM,iBAAiB,OAAK;EAC5B;EACA;CACF;CACA,IAAI,SAAS,KAAA,GACX,OAAO,qBAAC,MAAD;EAAe;EAAkB;EAAiB;EAAK,QAAQ,aAAa,OAAO;EAAW;EAAQ,GAAI,OAAO;EAAU,GAAI;EAAO,GAAI;EAA1I,UAAA,CACF,UACA,OAAO,OACD;;CAEb,OAAO,oBAAC,QAAD;EAAuB;EAAY,QAAQ,eAAe,SAAS,MAAM;EAAG,GAAI,OAAO;EAAU,GAAI;EAAO,GAAI;EAClH,UAAA,cAAc,UAAU,cAAc,MAAM;CACpC,CAAA;AACf;AAaA,SAAS,cAAc,UAAqB,cAAsB,QAAgB;CAChF,QAAQ,UAA6B,qBAAA,UAAA,EAAA,UAAA;EACjC,oBAAC,QAAD;GAAM,GAAI;IACV,GAAG,EACD,WAAW,UACb;IACA,GAAG,EACD,WAAW,kBACb;GACF,EAAE,CAAC,CAAC,MAAM,aAAa;GAClB;EACG,CAAA;EACL,MAAM,YAAY,oBAAC,QAAD;GAAM,WAAU;GAC/B,UAAA,oBAAC,mBAAD;IAAmB,cAAY;IAAc,iBAAA;IAAgB,MAAK;IAAM,MAAK;IAAU,SAAQ;GAAU,CAAA;EACrG,CAAA,IAAI;EACX,OAAO;CACV,EAAA,CAAA;AACJ"}
+{"version":3,"file":"index.js","names":["DOMAttributes","ReactNode","ButtonRenderProps","ClassNameOrFunction","FocusableElement","ButtonProps","RACButtonProps","StyleOrFunction","stylex","Button","RACButton","Link","RACLink","useRipple","ariaAttributesOf","buttonRenderer","linkRenderer","mergeStatefulStyles","colors","radii","shadows","spacing","stateLayerOpacity","typography","ProgressIndicator","Ripple","ReturnType","styles","base","kGNEyG","kaIpWk","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","kjBf7l","kInvED","k3XXqK","kMeerF","kVAEAm","kybGjl","$$css","disabled","elevated","kWkggS","kGVxlE","kMwMTN","elevatedDisabled","filled","filledDisabled","label","labelPending","k33iCy","lg","kZKoxP","kg3NbH","md","outlined","kVAM5u","ksu8eU","outlinedDisabled","pending","kpwlN0","kjj79g","text","textDisabled","tonal","tonalDisabled","xl","xs","xxl","outlineWidths","disabledStyles","ButtonDOMProps","Omit","GlobalEventKey","Pick","HTMLElement","children","className","ButtonState","disableRipple","href","pendingLabel","rel","size","ButtonSize","style","target","variant","ButtonVariant","Exclude","t0","$","_c","t1","isDisabled","t2","onClick","onContextMenu","onKeyDown","onKeyUp","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","t3","render","t4","t5","props","undefined","t6","ripple","t7","state","styleProps","element","aria","handlers","surface","T0","t8","t9","t10","buttonContent","t11","isPending"],"sources":["../../../src/components/button/index.tsx"],"sourcesContent":["import type { DOMAttributes, ReactNode } from 'react';\nimport type { ButtonRenderProps, ClassNameOrFunction, FocusableElement, ButtonProps as RACButtonProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, Link as RACLink } from 'react-aria-components';\nimport { useRipple } from '../../hooks/useRipple';\nimport { ariaAttributesOf, buttonRenderer, linkRenderer } from '../../render/aria';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, shadows, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport ProgressIndicator from '../progress-indicator';\n\n// Each variant composites its label colour over its container at the\n// interaction state's opacity, rather than swapping in a separate\n// hover/pressed color: filled and tonal paint the 'on-color' over the\n// container, outlined, text and elevated paint the label colour over their\n// own. The pairs are the buttons spec page's newer values: tonal on\n// secondary container, outlined with an outline variant border and an\n// on-surface-variant label, text on primary, elevated on surface container\n// low with a primary label.\n//\n// **Elevated is the one variant whose shadow is part of its identity.** The\n// page rests it at elevation 1 rather than flat, raises it on hover and\n// returns it to 1 while pressed — where filled and tonal rest flat and lift\n// only on hover. Disabled drops it to none, since a shadow says a control is\n// available to press.\n// calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined rather than factored into a helper:\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values, and a call to an externally-defined function\n// isn't one of them.\n//\n// Disabled is a style of its own per variant rather than a `:disabled`\n// branch inside each property: a button given `href` renders as a link,\n// which React Aria turns into a <span> while disabled, and neither matches\n// the pseudo-class. The disabled styles are applied last from the render\n// state's `isDisabled`, and StyleX replaces a property whole, so they also\n// take the hover and pressed branches with them — which is what keeps a\n// hovered disabled button from lighting up.\n//\n// Two independent axes, applied base -> variant -> size. The order is what\n// lets `text` keep its tighter inline padding at the default size while the\n// other sizes still set their own: `md` deliberately declares no\n// paddingInline, so a medium button falls through to whatever its variant\n// asked for, and every other size overrides it. That mirrors the source\n// design's own cascade, where the size classes are declared after the\n// variant ones and win on padding for exactly the same reason.\ntype Ripple = ReturnType<typeof useRipple<FocusableElement>>;\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x3y1ksm\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"x126z3so\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    $$css: true\n  },\n  disabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  elevated: {\n    kWkggS: \"x1k1wbbp x3k5p2v xf9j7ge x1vnz5z6\",\n    kGVxlE: \"x1g60mc1 x1fzngjt x19efjv6\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  elevatedDisabled: {\n    kWkggS: \"xepofeg\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xpky1to x16z974x xyf7a0q xnety89\",\n    kGVxlE: \"xpk4wdd x1955hzl x1gnnqk1\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  filledDisabled: {\n    kWkggS: \"xepofeg\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  label: {\n    k1xSpc: \"xjp7ctv\",\n    $$css: true\n  },\n  labelPending: {\n    k33iCy: \"xlshs6z\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xnnlda6\",\n    kMv6JI: \"x46eyla\",\n    kGuDYH: \"x5ehqhr\",\n    k63SB2: \"xrf6cl6\",\n    kb6lSQ: \"x1g135zh\",\n    kLWn49: \"x1ggk5va\",\n    kg3NbH: \"xg0ps1x\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1vqgdyp\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x1dg9itu x1yu1589 x1728qcm xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  outlinedDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  pending: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kpwlN0: \"x10a8y8t\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  text: {\n    kWkggS: \"x12vej0r x598nmq x14dcer4 xjbqb8w\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  textDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"xnqsvhv xc87fxa xlizrex x15dekr4\",\n    kGVxlE: \"xpk4wdd x1955hzl x1gnnqk1\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  tonalDisabled: {\n    kWkggS: \"xepofeg\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  xl: {\n    kZKoxP: \"xjp8j0k\",\n    kMv6JI: \"x1fz0g89\",\n    kGuDYH: \"xkb6epg\",\n    k63SB2: \"x76yrz5\",\n    kOIVth: \"x1gka490\",\n    kb6lSQ: \"x1s1qhaa\",\n    kLWn49: \"x1voeury\",\n    kg3NbH: \"x1sdxjpb\",\n    $$css: true\n  },\n  xs: {\n    kZKoxP: \"x10w6t97\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  xxl: {\n    kZKoxP: \"xn866dk\",\n    kMv6JI: \"x1vsmgmf\",\n    kGuDYH: \"xh9c4x\",\n    k63SB2: \"x1y15vu6\",\n    kOIVth: \"xxj4525\",\n    kb6lSQ: \"xoqu3bc\",\n    kLWn49: \"x10x9d6x\",\n    kg3NbH: \"x1dao9b2\",\n    $$css: true\n  }\n};\n\n// The outlined button's border thickens with the size, as the page's size\n// tokens have it: 1dp up to M, 2dp at L, 3dp at XL. A style per size rather\n// than a value in the size style, since a border on a filled button would\n// draw in the label colour.\nconst outlineWidths = {\n  lg: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  md: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  xl: {\n    kMzoRj: \"xdh2fpr\",\n    $$css: true\n  },\n  xs: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  xxl: {\n    kMzoRj: \"x9r2w2z\",\n    $$css: true\n  }\n};\nconst disabledStyles = {\n  elevated: styles.elevatedDisabled,\n  filled: styles.filledDisabled,\n  outlined: styles.outlinedDisabled,\n  text: styles.textDisabled,\n  tonal: styles.tonalDisabled\n};\ntype ButtonDOMProps = Omit<RACButtonProps, 'children' | 'className' | 'style' | GlobalEventKey> & Pick<DOMAttributes<HTMLElement>, GlobalEventKey>;\ntype ButtonProps = {\n  children?: ReactNode;\n  /** A function may compute the class from the button's render state. */\n  className?: ClassNameOrFunction<ButtonState>;\n  /**\n   * Disables the press ripple. The hover/pressed background state layer is\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * Where the button leads. Given one, the button is rendered as a link —\n   * an `<a>`, announced as the link it is — with the same styles and ripple.\n   * `render`, `type`, and the form and pending props apply to the button\n   * form only.\n   */\n  href?: string;\n  /**\n   * The name of the ring shown while the button is pending, for a screen\n   * reader. The label it replaces is hidden while it shows.\n   * @default 'Loading'\n   */\n  pendingLabel?: string;\n  /** The link's `rel`, when `href` is set. */\n  rel?: string;\n  /**\n   * Control height: `xs` 32px, `md` 40px, `lg` 56px, `xl` 96px, `xxl` 136px —\n   * the buttons spec page's XS, S, M, L and XL, each with its own inline\n   * padding and type role. `md` is the page's default.\n   * @default 'md'\n   */\n  size?: ButtonSize;\n  /** A function may compute the style from the button's render state. */\n  style?: StyleOrFunction<ButtonState>;\n  /** The link's `target`, when `href` is set. */\n  target?: string;\n  /**\n   * How much weight the button pulls. `filled` and `tonal` carry a container\n   * of their own; `outlined` and `text` sit on the page; `elevated` sits on\n   * a low surface and lifts off it with a shadow, for a button that has to\n   * separate from a busy background rather than from the page.\n   * @default 'filled'\n   */\n  variant?: ButtonVariant;\n} & ButtonDOMProps;\ntype ButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';\n\n// The render state both of React Aria's elements share. A className or\n// style function written against it serves the button and the link alike;\n// `isPending` belongs to the button alone, and `isCurrent` to the link, so\n// neither is here: a `className` written against this state serves both\n// elements. What the button draws while pending is decided in\n// `buttonContent`, which sees React Aria's own state rather than this one.\ntype ButtonState = Pick<ButtonRenderProps, 'isDisabled' | 'isFocused' | 'isFocusVisible' | 'isHovered' | 'isPressed'>;\ntype ButtonVariant = 'elevated' | 'filled' | 'outlined' | 'text' | 'tonal';\n\n// React Aria types the global DOM events — pointer, mouse, touch, wheel and\n// the rest — against the element each component renders, and a handler\n// written for a <button> does not type-check against an <a>. The keys are\n// retyped against HTMLElement here so one set of props serves both forms;\n// the events React Aria defines itself (press, focus, keyboard) keep its\n// types, since it hands those its own event objects.\ntype GlobalEventKey = Exclude<keyof DOMAttributes<HTMLElement> & keyof RACButtonProps, 'onBlur' | 'onClick' | 'onFocus'>;\n\n/**\n * The design's button, at five emphasis levels and five control heights.\n * Given `href` it is a link with the same appearance. Every `aria-*` prop is\n * forwarded to the element; React Aria alone would keep only the labelling\n * ones.\n */\nfunction Button({\n  children,\n  disableRipple = false,\n  href,\n  isDisabled = false,\n  onClick,\n  onContextMenu,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  pendingLabel = 'Loading',\n  rel,\n  render,\n  size = 'md',\n  target,\n  variant = 'filled',\n  ...props\n}: ButtonProps) {\n  // `props` (className/style, etc.) is spread separately: `className` and\n  // `style` there may be functions of render state, which ripple's own\n  // handler-only merge doesn't need to know about. It is also why the styles\n  // below merge through mergeStatefulStyles rather than the plain\n  // mergeStyles. The ripple is off while disabled: React Aria still forwards\n  // pointer events to a disabled element, and a press that changes nothing\n  // should not look like one.\n  const ripple = useRipple<FocusableElement>(!disableRipple && !isDisabled, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  const styleProps = mergeStatefulStyles((state: ButtonState) => stylex.props(styles.base, styles[variant], styles[size], variant === 'outlined' && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]), props);\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n  if (href !== undefined) {\n    return <RACLink href={href} isDisabled={isDisabled} rel={rel} render={linkRenderer(element)} target={target} {...ripple.handlers} {...props} {...styleProps}>\n        {children}\n        {ripple.surface}\n      </RACLink>;\n  }\n  return <RACButton isDisabled={isDisabled} render={buttonRenderer(element, render)} {...ripple.handlers} {...props} {...styleProps}>\n      {buttonContent(children, pendingLabel, ripple)}\n    </RACButton>;\n}\n// What the button draws: its label, hidden while the button is pending, with\n// the ring over it. The ring takes the button's own content colour rather\n// than the progress page's primary, which on a filled button is the fill\n// itself and so invisible. The label stays in the flow so the button keeps its\n// width, which is what stops a form jumping the moment it is submitted.\n// React Aria wants the progress bar in the accessibility tree as soon as the\n// button goes pending, so it is rendered from the render state rather than\n// after a delay.\n//\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler\n// memoises the result on its inputs.\nfunction buttonContent(children: ReactNode, pendingLabel: string, ripple: Ripple) {\n  return (state: ButtonRenderProps) => <>\n      <span {...{\n      0: {\n        className: \"xjp7ctv\"\n      },\n      1: {\n        className: \"xjp7ctv xlshs6z\"\n      }\n    }[!!state.isPending << 0]}>\n        {children}\n      </span>\n      {state.isPending ? <span className=\"x6s0dn4 x78zum5 x10a8y8t xl56j7k x10l6tqk\">\n          <ProgressIndicator aria-label={pendingLabel} isIndeterminate size=\"1em\" tone=\"inherit\" variant=\"circular\" />\n        </span> : null}\n      {ripple.surface}\n    </>;\n}\nexport type { ButtonDOMProps, ButtonProps, ButtonSize, ButtonState, ButtonVariant };\nexport default Button;"],"mappings":"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"}

package/dist/components/calendar/index.js

@@ -3,8 +3,8 @@ import { mergeStatefulStyles } from "../../styles/merge.js";
 import { calendarStyles } from "../../calendar/styles.js";
 import { CalendarGridHeader as CalendarGridHeader$1, CalendarHeader } from "../../calendar/index.js";
 import { monthOffsets } from "../../calendar/months.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Calendar, CalendarCell, CalendarGrid, CalendarGridBody } from "react-aria-components";
 //#region src/components/calendar/index.tsx
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["offset","gridCell"],"sources":["../../../src/components/calendar/index.tsx"],"sourcesContent":["import type { CalendarDate } from '@internationalized/date';\nimport type { ReactElement } from 'react';\nimport type { DateValue, CalendarProps as RACCalendarProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Calendar as RACCalendar, CalendarCell as RACCalendarCell, CalendarGrid as RACCalendarGrid, CalendarGridBody as RACCalendarGridBody } from 'react-aria-components';\nimport { CalendarGridHeader, CalendarHeader } from '../../calendar';\nimport { monthOffsets } from '../../calendar/months';\nimport { calendarStyles } from '../../calendar/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The date pickers page's docked calendar: a month grid with a circle on the\n// selected date and an outline on today. Its values are that page's — a\n// 360dp container on the high surface container, 48dp date cells with a 40dp\n// state layer inside them, body-large for both the weekday row and the dates,\n// primary for the selected circle and for today's outline.\n//\n// The page's container is 456dp tall, which this does not fix: that height is\n// a picker's, counting a headline and an action row the calendar itself does\n// not draw. A month grid is as tall as its weeks, and six-week months are\n// taller than five-week ones — pinning 456 would crop one or pad the other.\n//\n// Three things are this component's own.\n//\n// **The cell is a circle in a square.** The page gives the date a 48dp\n// container and a 40dp state layer, which is a 40dp circle with 4dp of room\n// around it. The grid's `border-spacing` is what supplies that room, so the\n// circle is the element and the square is the space between circles — rather\n// than a 48dp box with a 40dp box inside it.\n//\n// **A date from the month either side is faded because it is disabled, not\n// because it is outside.** React Aria marks those cells `data-outside-month`\n// and disables them in the same breath, so a treatment keyed on the first\n// would never draw anything the second had not already drawn. The disabled\n// fade is the page's 38% either way.\n//\n// **Today reads as today whether or not it is selected.** The page gives it\n// an outline and the primary label; selected gives it a filled circle and the\n// on-primary label. A selected today takes the fill, since a circle already\n// says where you are and two rings would say it twice.\n//\n// **The month is moved by IconButton's shape rather than by IconButton.**\n// React Aria wires `slot=\"previous\"` and `slot=\"next\"` on its own `Button`,\n// and IconButton renders React Aria's `Button` too — so nesting one inside\n// the slot would put two buttons where the page draws one. The chevrons take\n// the standard icon button's 40dp square and its state layer instead.\n\ntype CalendarProps<T extends DateValue> = Omit<RACCalendarProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the calendar's render state. */\n  className?: RACCalendarProps<T>['className'];\n  /** A function may compute the style from the calendar's render state. */\n  style?: RACCalendarProps<T>['style'];\n};\n\n/**\n * A month calendar for picking a date. The value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep its\n * own, both as an `@internationalized/date` value from this package's\n * `./date` subpath.\n *\n * ```tsx\n * import { today, getLocalTimeZone } from '@kanso-labs/kanso-ui/date'\n *\n * <Calendar aria-label=\"Label\" defaultValue={today(getLocalTimeZone())} />\n * ```\n *\n * `minValue` and `maxValue` bound it, `isDateUnavailable` rules individual\n * dates out, and `visibleDuration` of `{ months: 2 }` draws two months side\n * by side. Name it with `aria-label` or `aria-labelledby`; React Aria\n * composes the visible month into that name itself.\n *\n * The call site's `className` and `style` land on the container, which is the\n * element a layout positions.\n */\nfunction Calendar<T extends DateValue>(props: CalendarProps<T>) {\n  return <RACCalendar<T> {...props} {...mergeStatefulStyles(stylex.props(calendarStyles.root), props)}>\n      <CalendarHeader />\n      <div {...stylex.props(calendarStyles.months)}>\n        {monthOffsets(props.visibleDuration?.months ?? 1).map(offset => <RACCalendarGrid key={offset.months} offset={offset} {...stylex.props(calendarStyles.grid)}>\n            <CalendarGridHeader />\n            <RACCalendarGridBody>{gridCell}</RACCalendarGridBody>\n          </RACCalendarGrid>)}\n      </div>\n    </RACCalendar>;\n}\n\n// A date's classes, from React Aria's render state. StyleX cannot target\n// `[data-selected]` on the element it is styling, so the state comes from\n// what React Aria hands the className.\n//\n// The order matters. `selected` is applied after `today`, so a selected today\n// takes the fill rather than the outline — a circle already says where you\n// are, and two rings would say it twice. `disabled` is last of all, and\n// StyleX replaces a property whole, so it takes the hover branches with it.\nfunction cellClassName(state: {\n  isDisabled: boolean;\n  isSelected: boolean;\n  isToday: boolean;\n}) {\n  return stylex.props(calendarStyles.cell, state.isToday && calendarStyles.cellToday, state.isSelected && calendarStyles.cellSelected, state.isDisabled && calendarStyles.cellDisabled).className ?? '';\n}\nfunction gridCell(date: CalendarDate): ReactElement {\n  return <RACCalendarCell className={cellClassName} date={date} />;\n}\nexport type { CalendarProps };\nexport default Calendar;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyEA,SAAA,WAAA,SAAA;CAAA,MAAA,IAAA,EAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,SAAA;EACwC,KAAA,oBAAoB,MAAa,eAAc,IAAK,GAAG,OAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EAC/F,KAAA,oBAAC,gBAAD,CAAe,CAAA;EACN,KAAA,MAAa,eAAc,MAAO;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,QAAA,iBAAA,QAAA;EACzC,KAAA,aAAa,QAAK,iBAAwB,UAA7B,CAAkC,CAAC,CAAA,IAAK,KAGlC;EAAC,EAAA,KAAA,QAAA,iBAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAJvB,KAAA,oBAAA,OAAA;GAKM,GALG;GACN,UAAA;EAIG,CAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,WAAA,EAAA,OAAA,MAAA,EAAA,QAAA,IAAA;EAPH,KAAA,qBAAC,UAAD;GAAY,GAAQ;GAAK,GAAM;GAA/B,UAAA,CACH,IACA,EAFe;;EAQH,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OART;AAQS;AATlB,SAAA,MAAA,QAAA;CAAA,OAIwE,qBAAC,cAAD;EAA6C;EAAM,GAAM,MAAa,eAAc,IAAK;EAAzF,UAAA,CAC5D,oBAAC,sBAAD,CAAmB,CAAA,GACnB,oBAAC,kBAAD,EAAA,UAAsB,SAAF,CAAA,CAFwD;CAAM,GAAA,OAAM,MAAZ;AAG5D;AAa5B,SAAS,cAAc,OAIpB;CACD,OAAO,MAAa,eAAe,MAAM,MAAM,WAAW,eAAe,WAAW,MAAM,cAAc,eAAe,cAAc,MAAM,cAAc,eAAe,YAAY,CAAC,CAAC,aAAa;AACrM;AACA,SAAS,SAAS,MAAkC;CAClD,OAAO,oBAAC,cAAD;EAAiB,WAAW;EAAqB;CAAK,CAAA;AAC/D"}
+{"version":3,"file":"index.js","names":["CalendarDate","ReactElement","DateValue","CalendarProps","RACCalendarProps","stylex","Calendar","RACCalendar","CalendarCell","RACCalendarCell","CalendarGrid","RACCalendarGrid","CalendarGridBody","RACCalendarGridBody","CalendarGridHeader","CalendarHeader","monthOffsets","calendarStyles","mergeStatefulStyles","Omit","T","className","style","props","$","_c","t0","root","t1","t2","Symbol","for","months","t3","visibleDuration","map","_temp","t4","t5","offset","grid","gridCell","cellClassName","state","isDisabled","isSelected","isToday","cell","cellToday","cellSelected","cellDisabled","date"],"sources":["../../../src/components/calendar/index.tsx"],"sourcesContent":["import type { CalendarDate } from '@internationalized/date';\nimport type { ReactElement } from 'react';\nimport type { DateValue, CalendarProps as RACCalendarProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Calendar as RACCalendar, CalendarCell as RACCalendarCell, CalendarGrid as RACCalendarGrid, CalendarGridBody as RACCalendarGridBody } from 'react-aria-components';\nimport { CalendarGridHeader, CalendarHeader } from '../../calendar';\nimport { monthOffsets } from '../../calendar/months';\nimport { calendarStyles } from '../../calendar/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The date pickers page's docked calendar: a month grid with a circle on the\n// selected date and an outline on today. Its values are that page's — a\n// 360dp container on the high surface container, 48dp date cells with a 40dp\n// state layer inside them, body-large for both the weekday row and the dates,\n// primary for the selected circle and for today's outline.\n//\n// The page's container is 456dp tall, which this does not fix: that height is\n// a picker's, counting a headline and an action row the calendar itself does\n// not draw. A month grid is as tall as its weeks, and six-week months are\n// taller than five-week ones — pinning 456 would crop one or pad the other.\n//\n// Three things are this component's own.\n//\n// **The cell is a circle in a square.** The page gives the date a 48dp\n// container and a 40dp state layer, which is a 40dp circle with 4dp of room\n// around it. The grid's `border-spacing` is what supplies that room, so the\n// circle is the element and the square is the space between circles — rather\n// than a 48dp box with a 40dp box inside it.\n//\n// **A date from the month either side is faded because it is disabled, not\n// because it is outside.** React Aria marks those cells `data-outside-month`\n// and disables them in the same breath, so a treatment keyed on the first\n// would never draw anything the second had not already drawn. The disabled\n// fade is the page's 38% either way.\n//\n// **Today reads as today whether or not it is selected.** The page gives it\n// an outline and the primary label; selected gives it a filled circle and the\n// on-primary label. A selected today takes the fill, since a circle already\n// says where you are and two rings would say it twice.\n//\n// **The month is moved by IconButton's shape rather than by IconButton.**\n// React Aria wires `slot=\"previous\"` and `slot=\"next\"` on its own `Button`,\n// and IconButton renders React Aria's `Button` too — so nesting one inside\n// the slot would put two buttons where the page draws one. The chevrons take\n// the standard icon button's 40dp square and its state layer instead.\n\ntype CalendarProps<T extends DateValue> = Omit<RACCalendarProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the calendar's render state. */\n  className?: RACCalendarProps<T>['className'];\n  /** A function may compute the style from the calendar's render state. */\n  style?: RACCalendarProps<T>['style'];\n};\n\n/**\n * A month calendar for picking a date. The value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep its\n * own, both as an `@internationalized/date` value from this package's\n * `./date` subpath.\n *\n * ```tsx\n * import { today, getLocalTimeZone } from '@kanso-labs/kanso-ui/date'\n *\n * <Calendar aria-label=\"Label\" defaultValue={today(getLocalTimeZone())} />\n * ```\n *\n * `minValue` and `maxValue` bound it, `isDateUnavailable` rules individual\n * dates out, and `visibleDuration` of `{ months: 2 }` draws two months side\n * by side. Name it with `aria-label` or `aria-labelledby`; React Aria\n * composes the visible month into that name itself.\n *\n * The call site's `className` and `style` land on the container, which is the\n * element a layout positions.\n */\nfunction Calendar<T extends DateValue>(props: CalendarProps<T>) {\n  return <RACCalendar<T> {...props} {...mergeStatefulStyles(stylex.props(calendarStyles.root), props)}>\n      <CalendarHeader />\n      <div {...stylex.props(calendarStyles.months)}>\n        {monthOffsets(props.visibleDuration?.months ?? 1).map(offset => <RACCalendarGrid key={offset.months} offset={offset} {...stylex.props(calendarStyles.grid)}>\n            <CalendarGridHeader />\n            <RACCalendarGridBody>{gridCell}</RACCalendarGridBody>\n          </RACCalendarGrid>)}\n      </div>\n    </RACCalendar>;\n}\n\n// A date's classes, from React Aria's render state. StyleX cannot target\n// `[data-selected]` on the element it is styling, so the state comes from\n// what React Aria hands the className.\n//\n// The order matters. `selected` is applied after `today`, so a selected today\n// takes the fill rather than the outline — a circle already says where you\n// are, and two rings would say it twice. `disabled` is last of all, and\n// StyleX replaces a property whole, so it takes the hover branches with it.\nfunction cellClassName(state: {\n  isDisabled: boolean;\n  isSelected: boolean;\n  isToday: boolean;\n}) {\n  return stylex.props(calendarStyles.cell, state.isToday && calendarStyles.cellToday, state.isSelected && calendarStyles.cellSelected, state.isDisabled && calendarStyles.cellDisabled).className ?? '';\n}\nfunction gridCell(date: CalendarDate): ReactElement {\n  return <RACCalendarCell className={cellClassName} date={date} />;\n}\nexport type { CalendarProps };\nexport default Calendar;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyEA,SAAAM,WAAAiB,SAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAD,SAAA;EACwCG,KAAAR,oBAAoBb,MAAaY,eAAcU,IAAK,GAAGJ,OAAK;EAACC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,IAAAI;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAM,OAAAC,IAAA,2BAAA,GAAA;EAC/FH,KAAA,oBAAC,gBAAD,CAAe,CAAA;EACNC,KAAAxB,MAAaY,eAAce,MAAO;EAACR,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAD,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAD,QAAAW,iBAAAF,QAAA;EACzCC,KAAAjB,aAAaO,QAAKW,iBAAwBF,UAA7B,CAAkC,CAAC,CAAAG,IAAKC,KAGlC;EAACZ,EAAA,KAAAD,QAAAW,iBAAAF;EAAAR,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,OAAAS,IAAA;EAJvBI,KAAA,oBAAA,OAAA;GAKM,GALGR;GACNI,UAAAA;EAIG,CAAA;EAAAT,EAAA,KAAAS;EAAAT,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAc;CAAA,IAAAd,EAAA,OAAAD,WAAAC,EAAA,OAAAE,MAAAF,EAAA,QAAAa,IAAA;EAPHC,KAAA,qBAAC,UAAD;GAAY,GAAQf;GAAK,GAAMG;GAA/B,UAAA,CACHE,IACAS,EAFe;;EAQHb,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,MAAAa;EAAAb,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,OARTc;AAQS;AATlB,SAAAF,MAAAG,QAAA;CAAA,OAIwE,qBAAC,cAAD;EAA6CA;EAAM,GAAMlC,MAAaY,eAAcuB,IAAK;EAAzF,UAAA,CAC5D,oBAAC,sBAAD,CAAmB,CAAA,GACnB,oBAAC,kBAAD,EAAA,UAAsBC,SAAF,CAAA,CAFwD;CAAMF,GAAAA,OAAMP,MAAZ;AAG5D;AAa5B,SAASU,cAAcC,OAIpB;CACD,OAAOtC,MAAaY,eAAe8B,MAAMJ,MAAMG,WAAW7B,eAAe+B,WAAWL,MAAME,cAAc5B,eAAegC,cAAcN,MAAMC,cAAc3B,eAAeiC,YAAY,CAAC,CAAC7B,aAAa;AACrM;AACA,SAASoB,SAASU,MAAkC;CAClD,OAAO,oBAAC,cAAD;EAAiB,WAAWT;EAAqBS;CAAK,CAAA;AAC/D"}

package/dist/components/card/index.js

@@ -2,6 +2,7 @@ import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { useRender } from "../../render/useRender.js";
 import { mergeStyles } from "../../styles/merge.js";
 import { useRipple } from "../../hooks/useRipple.js";
+import { c } from "react/compiler-runtime";
 import { Fragment, jsxs } from "react/jsx-runtime";
 //#region src/components/card/index.tsx
 const styles = {
@@ -79,27 +80,78 @@ const interactionStyles = {
 * `<button>`, which is the right default for one that acts rather than
 * navigates.
 */
-function Card({ children, interactive = false, onClick, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, padding = "default", render, variant = "elevated", ...props$1 }) {
-	const ripple = useRipple(interactive, {
-		onClick,
-		onContextMenu,
-		onPointerCancel,
-		onPointerDown,
-		onPointerLeave,
-		onPointerUp
-	});
+function Card(t0) {
+	const $ = c(23);
+	const { children, interactive: t1, onClick, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, padding: t2, render, variant: t3, ...props$1 } = t0;
+	const interactive = t1 === void 0 ? false : t1;
+	const padding = t2 === void 0 ? "default" : t2;
+	const variant = t3 === void 0 ? "elevated" : t3;
+	let t4;
+	if ($[0] !== onClick || $[1] !== onContextMenu || $[2] !== onPointerCancel || $[3] !== onPointerDown || $[4] !== onPointerLeave || $[5] !== onPointerUp) {
+		t4 = {
+			onClick,
+			onContextMenu,
+			onPointerCancel,
+			onPointerDown,
+			onPointerLeave,
+			onPointerUp
+		};
+		$[0] = onClick;
+		$[1] = onContextMenu;
+		$[2] = onPointerCancel;
+		$[3] = onPointerDown;
+		$[4] = onPointerLeave;
+		$[5] = onPointerUp;
+		$[6] = t4;
+	} else t4 = $[6];
+	const ripple = useRipple(interactive, t4);
 	const padded = padding === "none" ? styles.paddingNone : styles.paddingDefault;
-	return useRender({
-		defaultTagName: interactive ? "button" : "div",
-		props: {
+	const t5 = interactive ? "button" : "div";
+	let t6;
+	if ($[7] !== interactive || $[8] !== render) {
+		t6 = interactive && render === void 0 ? { type: "button" } : void 0;
+		$[7] = interactive;
+		$[8] = render;
+		$[9] = t6;
+	} else t6 = $[9];
+	const t7 = ripple.handlers;
+	let t8;
+	if ($[10] !== children || $[11] !== ripple.surface) {
+		t8 = /* @__PURE__ */ jsxs(Fragment, { children: [children, ripple.surface] });
+		$[10] = children;
+		$[11] = ripple.surface;
+		$[12] = t8;
+	} else t8 = $[12];
+	const t9 = mergeStyles(props(styles.base, styles[variant], padded, interactive && styles.interactive, interactive && interactionStyles[variant]), props$1);
+	let t10;
+	if ($[13] !== props$1 || $[14] !== ripple.handlers || $[15] !== t6 || $[16] !== t8 || $[17] !== t9) {
+		t10 = {
 			...props$1,
-			...interactive && render === void 0 ? { type: "button" } : void 0,
-			...ripple.handlers,
-			children: /* @__PURE__ */ jsxs(Fragment, { children: [children, ripple.surface] }),
-			...mergeStyles(props(styles.base, styles[variant], padded, interactive && styles.interactive, interactive && interactionStyles[variant]), props$1)
-		},
-		render
-	});
+			...t6,
+			...t7,
+			children: t8,
+			...t9
+		};
+		$[13] = props$1;
+		$[14] = ripple.handlers;
+		$[15] = t6;
+		$[16] = t8;
+		$[17] = t9;
+		$[18] = t10;
+	} else t10 = $[18];
+	let t11;
+	if ($[19] !== render || $[20] !== t10 || $[21] !== t5) {
+		t11 = {
+			defaultTagName: t5,
+			props: t10,
+			render
+		};
+		$[19] = render;
+		$[20] = t10;
+		$[21] = t5;
+		$[22] = t11;
+	} else t11 = $[22];
+	return useRender(t11);
 }
 //#endregion
 export { Card as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/card/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRipple } from '../../hooks/useRipple';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, shadows, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The three variants differ only in how they separate themselves from the\n// page: a shadow, a darker fill, or a border. Each therefore sits on a\n// different background, which is why the interaction styles below are keyed\n// by variant too — a state layer composites an 'on-color' over whatever the\n// container already is, so it cannot be written once for all three.\n//\n// color-mix() is inlined at each property rather than factored into a helper:\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values. Button's header comment records the same\n// constraint, and the :not(:disabled) guard there applies here for the same\n// reason — stylex's fixed pseudo-class ordering puts :hover after :disabled.\nconst styles = {\n  base: {\n    kaIpWk: \"x62ce2h\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    k1xSpc: \"x1lliihq\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    $$css: true\n  },\n  elevated: {\n    kWkggS: \"x1vnz5z6\",\n    kGVxlE: \"x19efjv6\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"x1rrhr5q\",\n    $$css: true\n  },\n  interactive: {\n    kkrTdU: \"x1ypdohk\",\n    kVVagm: \"xln7xf2\",\n    kzqmXN: \"xh8yej3\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    k9WMMc: \"x1yc453h\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x14s9m32\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  paddingDefault: {\n    kmVPX3: \"xgc26li\",\n    $$css: true\n  },\n  paddingNone: {\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  }\n};\nconst interactionStyles = {\n  elevated: {\n    kWkggS: \"xu5m21g x5r8g2b x1vnz5z6\",\n    kGVxlE: \"x1g60mc1 x1fzngjt x19efjv6\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"x1w49kxs xovjh5a x1rrhr5q\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x1jqfdmz x1dmgsxd x14s9m32\",\n    $$css: true\n  }\n};\n\n// Typed as the attributes a <div> accepts, because that is the surface every\n// element this can render shares. Anything element-specific — a button's\n// `type`, an anchor's `href` — would be wrong for the others, and does not\n// need to be here anyway: those are written on the element handed to\n// `render`, where TypeScript checks them against that element's own props.\ntype CardProps = {\n  /**\n   * Makes the card the thing you press: it ripples, lifts on hover, and takes\n   * a focus ring. Renders a `<button>` unless `render` says otherwise. Leave\n   * it off for a card that merely holds content, including one containing its\n   * own buttons.\n   * @default false\n   */\n  interactive?: boolean;\n  /**\n   * `none` removes the card's own padding, for a card whose children run to\n   * its edges — a list of rows separated by rules.\n   * @default 'default'\n   */\n  padding?: 'default' | 'none';\n  /**\n   * How the card separates itself from the page: `elevated` casts a shadow,\n   * `filled` sits on a darker surface, `outlined` draws a border.\n   * @default 'elevated'\n   */\n  variant?: CardVariant;\n} & RenderComponentProps<'div'>;\ntype CardVariant = 'elevated' | 'filled' | 'outlined';\n\n/**\n * A surface holding related content. `render` decides which element that\n * surface is, so a card that navigates can be a real `<a href>` — announced\n * as a link and opening in a new tab on a modifier click, which a `<button>`\n * with an onClick does neither of.\n *\n * `interactive` and `render` are separate axes. `interactive` says the card\n * is pressable and gives it the ripple, the hover lift, and a focus ring;\n * `render` says what it is. A pressable card with no `render` is a\n * `<button>`, which is the right default for one that acts rather than\n * navigates.\n */\nfunction Card({\n  children,\n  interactive = false,\n  onClick,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  padding = 'default',\n  render,\n  variant = 'elevated',\n  ...props\n}: CardProps) {\n  // The consumer's own pointer handlers are handed to useRipple to merge\n  // rather than spread over its handlers afterwards, which is what Button\n  // does and for the same reason: a plain spread means whichever object\n  // comes last silently wins, so an onPointerDown on the call site would\n  // replace the one driving the ripple and the card would stop rippling.\n  const ripple = useRipple(interactive, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  const padded = padding === 'none' ? styles.paddingNone : styles.paddingDefault;\n  return useRender({\n    defaultTagName: interactive ? 'button' : 'div',\n    props: {\n      ...props,\n      // Only when the default <button> is what renders. On an element the\n      // call site chose, `type` is either meaningless or wrong — an <a>'s\n      // `type` is a hint about the MIME type of what it links to — and that\n      // element's own attributes are the call site's to write.\n      ...(interactive && render === undefined ? {\n        type: 'button'\n      } : undefined),\n      ...ripple.handlers,\n      children: <>\n          {children}\n          {ripple.surface}\n        </>,\n      ...mergeStyles(stylex.props(styles.base, styles[variant], padded, interactive && styles.interactive, interactive && interactionStyles[variant]), props)\n    },\n    render\n  });\n}\nexport type { CardProps };\nexport default Card;"],"mappings":";;;;;;AAmBA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAM,oBAAoB;CACxB,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;AACF;;;;;;;;;;;;;AA2CA,SAAS,KAAK,EACZ,UACA,cAAc,OACd,SACA,eACA,iBACA,eACA,gBACA,aACA,UAAU,WACV,QACA,UAAU,YACV,GAAG,WACS;CAMZ,MAAM,SAAS,UAAU,aAAa;EACpC;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,MAAM,SAAS,YAAY,SAAS,OAAO,cAAc,OAAO;CAChE,OAAO,UAAU;EACf,gBAAgB,cAAc,WAAW;EACzC,OAAO;GACL,GAAG;GAKH,GAAI,eAAe,WAAW,KAAA,IAAY,EACxC,MAAM,SACR,IAAI,KAAA;GACJ,GAAG,OAAO;GACV,UAAU,qBAAA,UAAA,EAAA,UAAA,CACL,UACA,OAAO,OACV,EAAA,CAAA;GACF,GAAG,YAAY,MAAa,OAAO,MAAM,OAAO,UAAU,QAAQ,eAAe,OAAO,aAAa,eAAe,kBAAkB,QAAQ,GAAG,OAAK;EACxJ;EACA;CACF,CAAC;AACH"}
+{"version":3,"file":"index.js","names":["stylex","RenderComponentProps","useRipple","useRender","mergeStyles","colors","radii","shadows","spacing","stateLayerOpacity","styles","base","kaIpWk","kMzoRj","kB7OPa","kMwMTN","k1xSpc","kVQacm","kVAEAm","kybGjl","$$css","elevated","kWkggS","kGVxlE","filled","interactive","kkrTdU","kVVagm","kzqmXN","kjBf7l","kInvED","k3XXqK","kMeerF","k9WMMc","outlined","kVAM5u","ksu8eU","paddingDefault","kmVPX3","paddingNone","interactionStyles","CardProps","padding","variant","CardVariant","Card","t0","$","_c","children","t1","onClick","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","t2","render","t3","props","undefined","t4","ripple","padded","t5","t6","type","t7","handlers","t8","surface","t9","t10","t11","defaultTagName"],"sources":["../../../src/components/card/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRipple } from '../../hooks/useRipple';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, shadows, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The three variants differ only in how they separate themselves from the\n// page: a shadow, a darker fill, or a border. Each therefore sits on a\n// different background, which is why the interaction styles below are keyed\n// by variant too — a state layer composites an 'on-color' over whatever the\n// container already is, so it cannot be written once for all three.\n//\n// color-mix() is inlined at each property rather than factored into a helper:\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values. Button's header comment records the same\n// constraint, and the :not(:disabled) guard there applies here for the same\n// reason — stylex's fixed pseudo-class ordering puts :hover after :disabled.\nconst styles = {\n  base: {\n    kaIpWk: \"x62ce2h\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    k1xSpc: \"x1lliihq\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    $$css: true\n  },\n  elevated: {\n    kWkggS: \"x1vnz5z6\",\n    kGVxlE: \"x19efjv6\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"x1rrhr5q\",\n    $$css: true\n  },\n  interactive: {\n    kkrTdU: \"x1ypdohk\",\n    kVVagm: \"xln7xf2\",\n    kzqmXN: \"xh8yej3\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    k9WMMc: \"x1yc453h\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x14s9m32\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  paddingDefault: {\n    kmVPX3: \"xgc26li\",\n    $$css: true\n  },\n  paddingNone: {\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  }\n};\nconst interactionStyles = {\n  elevated: {\n    kWkggS: \"xu5m21g x5r8g2b x1vnz5z6\",\n    kGVxlE: \"x1g60mc1 x1fzngjt x19efjv6\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"x1w49kxs xovjh5a x1rrhr5q\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x1jqfdmz x1dmgsxd x14s9m32\",\n    $$css: true\n  }\n};\n\n// Typed as the attributes a <div> accepts, because that is the surface every\n// element this can render shares. Anything element-specific — a button's\n// `type`, an anchor's `href` — would be wrong for the others, and does not\n// need to be here anyway: those are written on the element handed to\n// `render`, where TypeScript checks them against that element's own props.\ntype CardProps = {\n  /**\n   * Makes the card the thing you press: it ripples, lifts on hover, and takes\n   * a focus ring. Renders a `<button>` unless `render` says otherwise. Leave\n   * it off for a card that merely holds content, including one containing its\n   * own buttons.\n   * @default false\n   */\n  interactive?: boolean;\n  /**\n   * `none` removes the card's own padding, for a card whose children run to\n   * its edges — a list of rows separated by rules.\n   * @default 'default'\n   */\n  padding?: 'default' | 'none';\n  /**\n   * How the card separates itself from the page: `elevated` casts a shadow,\n   * `filled` sits on a darker surface, `outlined` draws a border.\n   * @default 'elevated'\n   */\n  variant?: CardVariant;\n} & RenderComponentProps<'div'>;\ntype CardVariant = 'elevated' | 'filled' | 'outlined';\n\n/**\n * A surface holding related content. `render` decides which element that\n * surface is, so a card that navigates can be a real `<a href>` — announced\n * as a link and opening in a new tab on a modifier click, which a `<button>`\n * with an onClick does neither of.\n *\n * `interactive` and `render` are separate axes. `interactive` says the card\n * is pressable and gives it the ripple, the hover lift, and a focus ring;\n * `render` says what it is. A pressable card with no `render` is a\n * `<button>`, which is the right default for one that acts rather than\n * navigates.\n */\nfunction Card({\n  children,\n  interactive = false,\n  onClick,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  padding = 'default',\n  render,\n  variant = 'elevated',\n  ...props\n}: CardProps) {\n  // The consumer's own pointer handlers are handed to useRipple to merge\n  // rather than spread over its handlers afterwards, which is what Button\n  // does and for the same reason: a plain spread means whichever object\n  // comes last silently wins, so an onPointerDown on the call site would\n  // replace the one driving the ripple and the card would stop rippling.\n  const ripple = useRipple(interactive, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  const padded = padding === 'none' ? styles.paddingNone : styles.paddingDefault;\n  return useRender({\n    defaultTagName: interactive ? 'button' : 'div',\n    props: {\n      ...props,\n      // Only when the default <button> is what renders. On an element the\n      // call site chose, `type` is either meaningless or wrong — an <a>'s\n      // `type` is a hint about the MIME type of what it links to — and that\n      // element's own attributes are the call site's to write.\n      ...(interactive && render === undefined ? {\n        type: 'button'\n      } : undefined),\n      ...ripple.handlers,\n      children: <>\n          {children}\n          {ripple.surface}\n        </>,\n      ...mergeStyles(stylex.props(styles.base, styles[variant], padded, interactive && styles.interactive, interactive && interactionStyles[variant]), props)\n    },\n    render\n  });\n}\nexport type { CardProps };\nexport default Card;"],"mappings":";;;;;;;AAmBA,MAAMU,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRC,QAAQ;EACRC,QAAQ;EACRH,OAAO;CACT;CACAI,QAAQ;EACNF,QAAQ;EACRF,OAAO;CACT;CACAK,aAAa;EACXC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRb,OAAO;CACT;CACAc,UAAU;EACRZ,QAAQ;EACRa,QAAQ;EACRC,QAAQ;EACRvB,QAAQ;EACRO,OAAO;CACT;CACAiB,gBAAgB;EACdC,QAAQ;EACRlB,OAAO;CACT;CACAmB,aAAa;EACXD,QAAQ;EACRlB,OAAO;CACT;AACF;AACA,MAAMoB,oBAAoB;CACxBnB,UAAU;EACRC,QAAQ;EACRC,QAAQ;EACRH,OAAO;CACT;CACAI,QAAQ;EACNF,QAAQ;EACRF,OAAO;CACT;CACAc,UAAU;EACRZ,QAAQ;EACRF,OAAO;CACT;AACF;;;;;;;;;;;;;AA2CA,SAAAyB,KAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAc,MAAA,EAAAC,UAAAxB,aAAAyB,IAAAC,SAAAC,eAAAC,iBAAAC,eAAAC,gBAAAC,aAAAd,SAAAe,IAAAC,QAAAf,SAAAgB,IAAA,GAAAC,YAAAd;CAEZ,MAAArB,cAAAyB,OAAAW,KAAAA,IAAA,QAAAX;CAOA,MAAAR,UAAAe,OAAAI,KAAAA,IAAA,YAAAJ;CAEA,MAAAd,UAAAgB,OAAAE,KAAAA,IAAA,aAAAF;CAAoB,IAAAG;CAAA,IAAAf,EAAA,OAAAI,WAAAJ,EAAA,OAAAK,iBAAAL,EAAA,OAAAM,mBAAAN,EAAA,OAAAO,iBAAAP,EAAA,OAAAQ,kBAAAR,EAAA,OAAAS,aAAA;EAQkBM,KAAA;GAAAX;GAAAC;GAAAC;GAAAC;GAAAC;GAAAC;EAOtC;EAACT,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;EAAAP,EAAA,KAAAQ;EAAAR,EAAA,KAAAS;EAAAT,EAAA,KAAAe;CAAA,OAAAA,KAAAf,EAAA;CAPD,MAAAgB,SAAe7D,UAAUuB,aAAaqC,EAOrC;CACD,MAAAE,SAAetB,YAAY,SAAShC,OAAM6B,cAAe7B,OAAM2B;CAE7C,MAAA4B,KAAAxC,cAAA,WAAA;CAA8B,IAAAyC;CAAA,IAAAnB,EAAA,OAAAtB,eAAAsB,EAAA,OAAAW,QAAA;EAOxCQ,KAAAzC,eAAeiC,WAAWG,KAAAA,IAA1B,EAAAM,MACI,SACI,IAFRN,KAAAA;EAESd,EAAA,KAAAtB;EAAAsB,EAAA,KAAAW;EAAAX,EAAA,KAAAmB;CAAA,OAAAA,KAAAnB,EAAA;CACV,MAAAqB,KAAAL,OAAMM;CAAS,IAAAC;CAAA,IAAAvB,EAAA,QAAAE,YAAAF,EAAA,QAAAgB,OAAAQ,SAAA;EACRD,KAAA,qBAAA,UAAA,EAAA,UAAA,CACLrB,UACAc,OAAMQ,OAAQ,EAAA,CAAA;EACdxB,EAAA,MAAAE;EAAAF,EAAA,MAAAgB,OAAAQ;EAAAxB,EAAA,MAAAuB;CAAA,OAAAA,KAAAvB,EAAA;CACF,MAAAyB,KAAApE,YAAYJ,MAAaU,OAAMC,MAAOD,OAAOiC,UAAUqB,QAAQvC,eAAef,OAAMe,aAAcA,eAAee,kBAAkBG,QAAQ,GAAGiB,OAAK;CAAC,IAAAa;CAAA,IAAA1B,EAAA,QAAAa,WAAAb,EAAA,QAAAgB,OAAAM,YAAAtB,EAAA,QAAAmB,MAAAnB,EAAA,QAAAuB,MAAAvB,EAAA,QAAAyB,IAAA;EAdlJC,MAAA;GAAA,GACFb;GAAK,GAKJM;GAES,GACVE;GAAenB,UACRqB;GAGL,GACFE;EACL;EAACzB,EAAA,MAAAa;EAAAb,EAAA,MAAAgB,OAAAM;EAAAtB,EAAA,MAAAmB;EAAAnB,EAAA,MAAAuB;EAAAvB,EAAA,MAAAyB;EAAAzB,EAAA,MAAA0B;CAAA,OAAAA,MAAA1B,EAAA;CAAA,IAAA2B;CAAA,IAAA3B,EAAA,QAAAW,UAAAX,EAAA,QAAA0B,OAAA1B,EAAA,QAAAkB,IAAA;EAjBcS,MAAA;GAAAC,gBACCV;GAA8BL,OACvCa;GAeNf;EAEH;EAACX,EAAA,MAAAW;EAAAX,EAAA,MAAA0B;EAAA1B,EAAA,MAAAkB;EAAAlB,EAAA,MAAA2B;CAAA,OAAAA,MAAA3B,EAAA;CAAA,OAnBM5C,UAAUuE,GAmBhB;AAAC"}

package/dist/components/checkbox/index.js

@@ -4,8 +4,8 @@ import { CheckGlyph, IndeterminateGlyph } from "../../glyphs/index.js";
 import { useRipple } from "../../hooks/useRipple.js";
 import { invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
 import { FieldMessage } from "../../field/index.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CheckboxButton, CheckboxField } from "react-aria-components";
 //#region src/components/checkbox/index.tsx
 const styles = {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["description","error","validationBehavior"],"sources":["../../../src/components/checkbox/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { CheckboxButtonRenderProps, CheckboxFieldProps as RACCheckboxFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { CheckboxButton, CheckboxField } from 'react-aria-components';\nimport { FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CheckGlyph, IndeterminateGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The checkbox page: an 18dp box with a 2dp corner and an 18dp glyph, inside\n// a 40dp state layer, with a 48dp target. Unselected, the box is a 2dp rule\n// in on surface variant that turns on surface while hovered, pressed or\n// focused; selected or indeterminate, it fills with primary and the glyph\n// takes on primary. The error pair is error and on error, and disabled is\n// on surface at the disabled opacity for the rule or the fill, with the\n// glyph in surface. The state layer is on surface over an unselected box and\n// primary over a selected one while hovered, and the two swap once pressed.\n//\n// React Aria's `CheckboxField` is the root, a div holding the description\n// and error slots; its `CheckboxButton` is the label around a visually\n// hidden input, and everything drawn is that label's children, chosen from\n// the render state React Aria hands them. The field is a two-column grid —\n// the control, then the text — and the label is `display: contents`, so the\n// control and the label text each take a column and the description and\n// error line up under the text rather than under the box.\n//\n// The adjacent label is body-large on surface, which the page keeps the same\n// whether or not the box is selected. The corner is a literal: the page's\n// 2dp is a step the shape scale does not carry.\nconst styles = {\n  box: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xmix8c7\",\n    kVAM5u: \"x1is7jjm\",\n    kaIpWk: \"x1cum3z5\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xdh2fpr\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"xwjo7ld\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1xp8n7a\",\n    kjj79g: \"xl56j7k\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xts7igz\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  boxMarked: {\n    kWkggS: \"xnety89\",\n    kVAM5u: \"x9r1u3d\",\n    $$css: true\n  },\n  boxMarkedDisabled: {\n    kWkggS: \"x1crcgwy\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"xrpadme\",\n    $$css: true\n  },\n  boxMarkedError: {\n    kWkggS: \"xwi4nbo\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1l7c2jh\",\n    $$css: true\n  },\n  boxUnmarkedActive: {\n    kVAM5u: \"x1pacwz9\",\n    $$css: true\n  },\n  boxUnmarkedDisabled: {\n    kVAM5u: \"xp1r3on\",\n    $$css: true\n  },\n  boxUnmarkedError: {\n    kVAM5u: \"xx78ee7\",\n    $$css: true\n  },\n  control: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x100vrsf\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x15406qy\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  controlDisabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  controlFocused: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"xaatb59\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  controlReadOnly: {\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  }\n};\n\n// The state layer's colour follows the box: on surface over an unmarked box\n// and primary over a marked one while hovered, the two swapped once pressed,\n// and error throughout while invalid.\nconst hoverLayers = {\n  error: {\n    kWkggS: \"x55e1u4\",\n    $$css: true\n  },\n  marked: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  },\n  unmarked: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  }\n};\nconst pressedLayers = {\n  error: {\n    kWkggS: \"x3czxiy\",\n    $$css: true\n  },\n  marked: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  unmarked: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  }\n};\ntype CheckboxProps = {\n  /**\n   * The label, beside the box. A checkbox that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  children?: ReactNode;\n  /**\n   * A hint under the label. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the checkbox in its error state — the message, the error colours and\n   * `aria-invalid` all follow from it.\n   */\n  error?: string;\n} & Omit<RACCheckboxFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\ntype Ripple = ReturnType<typeof useRipple<HTMLSpanElement>>;\ntype Tone = 'error' | 'marked' | 'unmarked';\n\n// What the label draws, chosen from the render state React Aria hands it.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs. The ripple's handlers and surface go on the\n// control while the checkbox can change, and are left off while it cannot,\n// since a press that changes nothing should not look like one.\nfunction buttonContent(children: ReactNode, ripple: Ripple) {\n  return (state: CheckboxButtonRenderProps) => {\n    const marked = state.isSelected || state.isIndeterminate;\n    const interactive = !state.isDisabled && !state.isReadOnly;\n    const tone: Tone = state.isInvalid ? 'error' : marked ? 'marked' : 'unmarked';\n    const active = state.isHovered || state.isPressed || state.isFocusVisible;\n    return <>\n        <span {...interactive ? ripple.handlers : {}} {...stylex.props(styles.control, state.isReadOnly && styles.controlReadOnly, state.isDisabled && styles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && styles.controlFocused)}>\n          <span {...stylex.props(styles.box, marked && styles.boxMarked, !marked && state.isInvalid && styles.boxUnmarkedError, !marked && !state.isInvalid && interactive && active && styles.boxUnmarkedActive, marked && state.isInvalid && styles.boxMarkedError, state.isDisabled && (marked ? styles.boxMarkedDisabled : styles.boxUnmarkedDisabled))}>\n            {state.isIndeterminate ? <IndeterminateGlyph className=\"xmix8c7 x1lliihq x1xp8n7a\" /> : state.isSelected ? <CheckGlyph className=\"xmix8c7 x1lliihq x1xp8n7a\" /> : null}\n          </span>\n          {interactive ? ripple.surface : null}\n        </span>\n        {children === undefined ? null : <span {...{\n        0: {\n          className: \"x9f619 x139gbkf x1ypdohk x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll\"\n        },\n        2: {\n          className: \"x9f619 x139gbkf x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll xt0e3qv\"\n        },\n        1: {\n          className: \"x9f619 x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll x1xj74d8 x1h6gzvc\"\n        },\n        3: {\n          className: \"x9f619 x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll x1xj74d8 x1h6gzvc\"\n        }\n      }[!!state.isReadOnly << 1 | !!state.isDisabled << 0]}>\n            {children}\n          </span>}\n      </>;\n  };\n}\n\n/**\n * A checkbox with its label, and optionally a description or an error under\n * it. Its state is React Aria's: pass `isSelected` with `onChange` to\n * control it, or `defaultSelected` to let it keep its own; `isIndeterminate`\n * draws the dash for a box that stands for a partly selected set. Inside a\n * `CheckboxGroup` it takes its `value` and the group's selection instead.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction Checkbox({\n  children,\n  description,\n  error,\n  ...props\n}: CheckboxProps) {\n  const ripple = useRipple<HTMLSpanElement>();\n  const validationBehavior = useFieldValidationBehavior();\n  return <CheckboxField isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles({\n    className: \"x7a106z x9f619 xpr5407 xrvj5dj x1pmbctz\"\n  }, props)}>\n      <CheckboxButton className=\"xjp7ctv\">\n        {buttonContent(children, ripple)}\n      </CheckboxButton>\n      <div className=\"x1xdureb\">\n        <FieldMessage description={description} error={error} inset={false} />\n      </div>\n    </CheckboxField>;\n}\nexport type { CheckboxProps };\nexport default Checkbox;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","CheckboxButtonRenderProps","CheckboxFieldProps","RACCheckboxFieldProps","stylex","CheckboxButton","CheckboxField","FieldMessage","invalidFrom","useFieldValidationBehavior","CheckGlyph","IndeterminateGlyph","useRipple","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","typography","styles","box","kGNEyG","kWkggS","kZKoxP","kVAM5u","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kMwMTN","k1xSpc","kzqmXN","kjj79g","kIyJzY","k1ekBW","kAMwcw","$$css","boxMarked","boxMarkedDisabled","boxMarkedError","boxUnmarkedActive","boxUnmarkedDisabled","boxUnmarkedError","control","kkrTdU","kmuXW","kVAEAm","controlDisabled","controlFocused","kjBf7l","kInvED","k3XXqK","kMeerF","controlReadOnly","hoverLayers","error","marked","unmarked","pressedLayers","CheckboxProps","children","description","Omit","Ripple","ReturnType","HTMLSpanElement","Tone","buttonContent","ripple","state","isSelected","isIndeterminate","interactive","isDisabled","isReadOnly","tone","isInvalid","active","isHovered","isPressed","isFocusVisible","handlers","props","surface","undefined","className","Checkbox","t0","$","_c","validationBehavior","T0","t1","t2","t3","t4","t5","t6"],"sources":["../../../src/components/checkbox/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { CheckboxButtonRenderProps, CheckboxFieldProps as RACCheckboxFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { CheckboxButton, CheckboxField } from 'react-aria-components';\nimport { FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CheckGlyph, IndeterminateGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The checkbox page: an 18dp box with a 2dp corner and an 18dp glyph, inside\n// a 40dp state layer, with a 48dp target. Unselected, the box is a 2dp rule\n// in on surface variant that turns on surface while hovered, pressed or\n// focused; selected or indeterminate, it fills with primary and the glyph\n// takes on primary. The error pair is error and on error, and disabled is\n// on surface at the disabled opacity for the rule or the fill, with the\n// glyph in surface. The state layer is on surface over an unselected box and\n// primary over a selected one while hovered, and the two swap once pressed.\n//\n// React Aria's `CheckboxField` is the root, a div holding the description\n// and error slots; its `CheckboxButton` is the label around a visually\n// hidden input, and everything drawn is that label's children, chosen from\n// the render state React Aria hands them. The field is a two-column grid —\n// the control, then the text — and the label is `display: contents`, so the\n// control and the label text each take a column and the description and\n// error line up under the text rather than under the box.\n//\n// The adjacent label is body-large on surface, which the page keeps the same\n// whether or not the box is selected. The corner is a literal: the page's\n// 2dp is a step the shape scale does not carry.\nconst styles = {\n  box: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xmix8c7\",\n    kVAM5u: \"x1is7jjm\",\n    kaIpWk: \"x1cum3z5\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xdh2fpr\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"xwjo7ld\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1xp8n7a\",\n    kjj79g: \"xl56j7k\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xts7igz\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  boxMarked: {\n    kWkggS: \"xnety89\",\n    kVAM5u: \"x9r1u3d\",\n    $$css: true\n  },\n  boxMarkedDisabled: {\n    kWkggS: \"x1crcgwy\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"xrpadme\",\n    $$css: true\n  },\n  boxMarkedError: {\n    kWkggS: \"xwi4nbo\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1l7c2jh\",\n    $$css: true\n  },\n  boxUnmarkedActive: {\n    kVAM5u: \"x1pacwz9\",\n    $$css: true\n  },\n  boxUnmarkedDisabled: {\n    kVAM5u: \"xp1r3on\",\n    $$css: true\n  },\n  boxUnmarkedError: {\n    kVAM5u: \"xx78ee7\",\n    $$css: true\n  },\n  control: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x100vrsf\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x15406qy\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  controlDisabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  controlFocused: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"xaatb59\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  controlReadOnly: {\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  }\n};\n\n// The state layer's colour follows the box: on surface over an unmarked box\n// and primary over a marked one while hovered, the two swapped once pressed,\n// and error throughout while invalid.\nconst hoverLayers = {\n  error: {\n    kWkggS: \"x55e1u4\",\n    $$css: true\n  },\n  marked: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  },\n  unmarked: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  }\n};\nconst pressedLayers = {\n  error: {\n    kWkggS: \"x3czxiy\",\n    $$css: true\n  },\n  marked: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  unmarked: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  }\n};\ntype CheckboxProps = {\n  /**\n   * The label, beside the box. A checkbox that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  children?: ReactNode;\n  /**\n   * A hint under the label. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the checkbox in its error state — the message, the error colours and\n   * `aria-invalid` all follow from it.\n   */\n  error?: string;\n} & Omit<RACCheckboxFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\ntype Ripple = ReturnType<typeof useRipple<HTMLSpanElement>>;\ntype Tone = 'error' | 'marked' | 'unmarked';\n\n// What the label draws, chosen from the render state React Aria hands it.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs. The ripple's handlers and surface go on the\n// control while the checkbox can change, and are left off while it cannot,\n// since a press that changes nothing should not look like one.\nfunction buttonContent(children: ReactNode, ripple: Ripple) {\n  return (state: CheckboxButtonRenderProps) => {\n    const marked = state.isSelected || state.isIndeterminate;\n    const interactive = !state.isDisabled && !state.isReadOnly;\n    const tone: Tone = state.isInvalid ? 'error' : marked ? 'marked' : 'unmarked';\n    const active = state.isHovered || state.isPressed || state.isFocusVisible;\n    return <>\n        <span {...interactive ? ripple.handlers : {}} {...stylex.props(styles.control, state.isReadOnly && styles.controlReadOnly, state.isDisabled && styles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && styles.controlFocused)}>\n          <span {...stylex.props(styles.box, marked && styles.boxMarked, !marked && state.isInvalid && styles.boxUnmarkedError, !marked && !state.isInvalid && interactive && active && styles.boxUnmarkedActive, marked && state.isInvalid && styles.boxMarkedError, state.isDisabled && (marked ? styles.boxMarkedDisabled : styles.boxUnmarkedDisabled))}>\n            {state.isIndeterminate ? <IndeterminateGlyph className=\"xmix8c7 x1lliihq x1xp8n7a\" /> : state.isSelected ? <CheckGlyph className=\"xmix8c7 x1lliihq x1xp8n7a\" /> : null}\n          </span>\n          {interactive ? ripple.surface : null}\n        </span>\n        {children === undefined ? null : <span {...{\n        0: {\n          className: \"x9f619 x139gbkf x1ypdohk x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll\"\n        },\n        2: {\n          className: \"x9f619 x139gbkf x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll xt0e3qv\"\n        },\n        1: {\n          className: \"x9f619 x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll x1xj74d8 x1h6gzvc\"\n        },\n        3: {\n          className: \"x9f619 x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll x1xj74d8 x1h6gzvc\"\n        }\n      }[!!state.isReadOnly << 1 | !!state.isDisabled << 0]}>\n            {children}\n          </span>}\n      </>;\n  };\n}\n\n/**\n * A checkbox with its label, and optionally a description or an error under\n * it. Its state is React Aria's: pass `isSelected` with `onChange` to\n * control it, or `defaultSelected` to let it keep its own; `isIndeterminate`\n * draws the dash for a box that stands for a partly selected set. Inside a\n * `CheckboxGroup` it takes its `value` and the group's selection instead.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction Checkbox({\n  children,\n  description,\n  error,\n  ...props\n}: CheckboxProps) {\n  const ripple = useRipple<HTMLSpanElement>();\n  const validationBehavior = useFieldValidationBehavior();\n  return <CheckboxField isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles({\n    className: \"x7a106z x9f619 xpr5407 xrvj5dj x1pmbctz\"\n  }, props)}>\n      <CheckboxButton className=\"xjp7ctv\">\n        {buttonContent(children, ripple)}\n      </CheckboxButton>\n      <div className=\"x1xdureb\">\n        <FieldMessage description={description} error={error} inset={false} />\n      </div>\n    </CheckboxField>;\n}\nexport type { CheckboxProps };\nexport default Checkbox;"],"mappings":"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"}

package/dist/components/checkbox-group/index.js

@@ -1,8 +1,8 @@
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
 import { FieldLabel, FieldMessage } from "../../field/index.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CheckboxGroup } from "react-aria-components";
 //#region src/components/checkbox-group/index.tsx
 /**