@kanso-labs/kanso-ui 0.35.0 → 0.37.0

package/README.md

@@ -128,6 +128,37 @@ import {
 is a subpath rather than part of the main entry so an app with no date component
 pays nothing for it.
 
+### Localisation
+
+Wrap the app in `I18nProvider`, which this package re-exports, and every word
+the components write follows its locale. React Aria names most of the controls
+they draw, in some thirty languages: an overlay's dismiss button, a field's
+clear button and steppers, a snackbar's close, a chip's remove, a row's
+selection box, a column's resize handle, a picker's trigger and a colour
+picker's strips.
+
+Five strings have no word in React Aria, so this package carries them in the
+same locales React Aria ships:
+
+- the ring a pending `Button` or `IconButton` shows,
+- a collection's loading-more row,
+- `CopyField`'s button and what it announces once it has copied,
+- and a field's character limit.
+
+These translations are the package's own, and a wrong one is worth an issue.
+Every string sits behind a prop for the call site's own words: `pendingLabel`, a
+`LoadMore`'s `label`, `copyLabel`, `copiedLabel` and `characterLimitLabel`. The
+names React Aria gives sit behind `clearLabel`, `closeLabel` and the rest.
+
+Numbers follow the provider too: `Currency` writes its amount, and a field its
+character count, in the locale's digits and grouping.
+
+A bundler includes every language unless told which ones the app supports. React
+Aria's
+[`@react-aria/optimize-locales-plugin`](https://www.npmjs.com/package/@react-aria/optimize-locales-plugin)
+is how an app says so for React Aria's own tables. This package's table is one
+small module, included whole.
+
 ### Layout
 
 `Container` centres content at a measure, and `Stack` puts one gap from the
@@ -233,10 +264,8 @@ content given `slot="close"`:
 ```
 
 An open overlay carries a visually hidden dismiss button for screen readers,
-whose label React Aria ships in some thirty languages. A bundler includes all of
-them unless told which the app supports; React Aria's
-[`@react-aria/optimize-locales-plugin`](https://www.npmjs.com/package/@react-aria/optimize-locales-plugin)
-is how an app says so.
+named in the reader's language like every other control here; see
+[Localisation](#localisation).
 
 ### Icons
 
@@ -272,9 +301,12 @@ the icon inherits it:
 
 | Slot                                       | Size an `em` icon takes                              |
 | ------------------------------------------ | ---------------------------------------------------- |
+| `Button`'s `icon`                          | 20px, 20px, 24px, 32px and 40px across `xs` to `xxl` |
+| `Chip`'s and `ChipGroup.Chip`'s `icon`     | 18px                                                 |
 | `IconButton`                               | 20px, 24px, 24px, 32px and 40px across `xs` to `xxl` |
 | A field's `leadingIcon` and `trailingIcon` | 24px                                                 |
 | `SegmentedButton.Segment`'s `icon`         | 18px                                                 |
+| `Tabs.Tab`'s `icon`                        | 24px                                                 |
 
 **The `leading` and `trailing` slots on a row are different.** A list item, a
 menu item, a tree item and an app bar set no icon size, so an icon there takes
@@ -287,8 +319,8 @@ those a size of its own:
 
 An SVG with a `viewBox` and no size at all has no size to shrink from, so what
 it does next belongs to the slot rather than to the icon. In an `IconButton` it
-fills the button edge to edge; in a field's icon slot it collapses and draws
-nothing. Sizing it is what avoids both.
+fills the button edge to edge; in a field's icon slot or a `Button`'s it
+collapses and draws nothing. Sizing it is what avoids both.
 
 ### Server components
 
@@ -311,9 +343,29 @@ Four things follow from where that boundary falls.
   `onPress` and a `render` callback belong in a client component of your own.
   Neither does a class instance, so a `CalendarDate` for a date component is
   built on the client side too.
-- **A sub-part is reached through its component**, as in `Dialog.Title` or
-  `Menu.Item`, and a server component cannot reach into a client module that
-  way. Compose those in a client component and render that.
+- **A sub-part is rendered by its own name**, as in `DialogTitle` or `MenuItem`.
+  A server component cannot reach into a client module through a property, so
+  `<Dialog.Title>` works only from a client component, while every part is also
+  exported as its component's name followed by the part's: `SheetContent`,
+  `TableRow`, `NavigationTreeItem`. `List.Item` is `ListRow`, since the
+  standalone `ListItem` already has that name:
+
+  ```tsx
+  // app/settings/page.tsx
+  import { Button, Sheet, SheetContent, SheetTitle } from '@kanso-labs/kanso-ui'
+
+  export default function Page() {
+    return (
+      <Sheet>
+        <Button>Open</Button>
+        <SheetContent>
+          <SheetTitle>Headline</SheetTitle>
+        </SheetContent>
+      </Sheet>
+    )
+  }
+  ```
+
 - **The React Aria utilities the package re-exports are client-only** —
   `I18nProvider`, `useListData`, `parseColor` and the rest. `collectionSizes` is
   a plain value and works on either side.
@@ -357,6 +409,35 @@ default value — useful for discovering names, not required at runtime
 import '@kanso-labs/kanso-ui/tokens.css'
 ```
 
+### Pinning light or dark
+
+The colours follow the reader's OS through `prefers-color-scheme` unless the app
+says otherwise. An app with a theme switch of its own pins a scheme with
+`colorScheme`, two class names: put `colorScheme.light` or `colorScheme.dark` on
+the `<html>` element, and remove both to follow the OS again. The `<html>`
+element is the place for it, since overlays are portalled to the body and still
+sit inside it.
+
+Its shape is the one next-themes takes for class names, so a provider is all it
+needs:
+
+```tsx
+import { ThemeProvider } from 'next-themes'
+import { colorScheme } from '@kanso-labs/kanso-ui'
+
+function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider attribute="class" value={colorScheme}>
+      {children}
+    </ThemeProvider>
+  )
+}
+```
+
+A `--kui-color-*` override on `:root` still applies under a pinned scheme. To
+give one scheme a value of its own, key the override on an attribute your switch
+sets beside the class, since the class names are generated.
+
 ### For StyleX consumers
 
 If your app also uses StyleX, theme with

package/dist/button/context.js

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+//#region src/button/context.ts
+const ButtonGroupItemContext = createContext(null);
+//#endregion
+export { ButtonGroupItemContext };
+
+//# sourceMappingURL=context.js.map

package/dist/button/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":["stylex","createContext","ButtonState","ButtonGroupItem","onPressEnd","onPressStart","width","shift","size","GroupSize","styles","state","StyleXStyles","ButtonGroupItemContext"],"sources":["../../src/button/context.ts"],"sourcesContent":["import type * as stylex from '@stylexjs/stylex';\nimport { createContext } from 'react';\nimport type { ButtonState } from '.';\n\n// What a group hands each Button or IconButton in it: ButtonGroup's two\n// variants and SplitButton's two halves. Apart from ./index.tsx so that file\n// exports components alone, which is what keeps fast refresh working for it.\n\ntype ButtonGroupItem = {\n  /** Called as a press on the button ends, so the group lets go of it. */\n  onPressEnd?: () => void;\n  /**\n   * Called as a press on the button starts, with its width, so a standard\n   * group can widen it and narrow its neighbours.\n   */\n  onPressStart?: (width: number) => void;\n  /**\n   * How far the button's width moves while it or a neighbour is pressed, in\n   * pixels: the pressed button's gain, or a neighbour's loss as a negative.\n   * Zero at rest.\n   */\n  shift: number;\n  /** The group's size, which a button takes unless it names its own. */\n  size: GroupSize | undefined;\n  /**\n   * Styles the group lays over the button's own, from its render state: a\n   * connected group's inner corners, a split button's paddings. Applied\n   * after the button's own shape and before its disabled styles.\n   */\n  styles?: (state: ButtonState) => stylex.StyleXStyles[];\n};\n\n/** The five sizes Button and IconButton share. */\ntype GroupSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';\nconst ButtonGroupItemContext = createContext<ButtonGroupItem | null>(null);\nexport type { ButtonGroupItem, GroupSize };\nexport { ButtonGroupItemContext };"],"mappings":";;AAkCA,MAAMa,yBAAyBZ,cAAsC,IAAI"}

package/dist/button/group.js

@@ -0,0 +1,25 @@
+//#region src/button/group.ts
+/**
+* The press handlers a button inside a group that tracks presses takes: its
+* own, with the group told first. Empty anywhere else, which leaves the
+* call site's own handlers on the button untouched.
+*/
+function groupPressHandlers(group, onPressStart, onPressEnd) {
+	const start = group?.onPressStart;
+	if (start === void 0) return {};
+	const end = group?.onPressEnd;
+	return {
+		onPressEnd: (event) => {
+			end?.();
+			onPressEnd?.(event);
+		},
+		onPressStart: (event) => {
+			start(event.target.getBoundingClientRect().width);
+			onPressStart?.(event);
+		}
+	};
+}
+//#endregion
+export { groupPressHandlers };
+
+//# sourceMappingURL=group.js.map

package/dist/button/group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.js","names":["PressEvent","ButtonGroupItem","groupPressHandlers","group","onPressStart","event","onPressEnd","start","undefined","end","target","getBoundingClientRect","width"],"sources":["../../src/button/group.ts"],"sourcesContent":["import type { PressEvent } from 'react-aria-components'\n\nimport type { ButtonGroupItem } from './context'\n\n// What a button in a standard ButtonGroup does about its own presses: tell\n// the group when one starts, with its width, and when it ends, so the group\n// can widen it and narrow its neighbours. Apart from ./index.tsx so that file\n// exports components alone, which is what keeps fast refresh working for it.\n\n/**\n * The press handlers a button inside a group that tracks presses takes: its\n * own, with the group told first. Empty anywhere else, which leaves the\n * call site's own handlers on the button untouched.\n */\nfunction groupPressHandlers(\n  group: ButtonGroupItem | null,\n  onPressStart: ((event: PressEvent) => void) | undefined,\n  onPressEnd: ((event: PressEvent) => void) | undefined,\n) {\n  const start = group?.onPressStart\n  if (start === undefined) {\n    return {}\n  }\n  const end = group?.onPressEnd\n\n  return {\n    onPressEnd: (event: PressEvent) => {\n      end?.()\n      onPressEnd?.(event)\n    },\n    onPressStart: (event: PressEvent) => {\n      start(event.target.getBoundingClientRect().width)\n      onPressStart?.(event)\n    },\n  }\n}\n\nexport { groupPressHandlers }\n"],"mappings":";;;;;;AAcA,SAASE,mBACPC,OACAC,cACAE,YACA;CACA,MAAMC,QAAQJ,OAAOC;CACrB,IAAIG,UAAUC,KAAAA,GACZ,OAAO,CAAC;CAEV,MAAMC,MAAMN,OAAOG;CAEnB,OAAO;EACLA,aAAaD,UAAsB;GACjCI,MAAM;GACNH,aAAaD,KAAK;EACpB;EACAD,eAAeC,UAAsB;GACnCE,MAAMF,MAAMK,OAAOC,sBAAsB,CAAC,CAACC,KAAK;GAChDR,eAAeC,KAAK;EACtB;CACF;AACF"}

package/dist/button/hooks.js

@@ -0,0 +1,81 @@
+import { ariaAttributesOf } from "../render/aria.js";
+import { useRipple } from "../hooks/useRipple.js";
+import { refCallback } from "../render/ref.js";
+import { c } from "react/compiler-runtime";
+import { ButtonContext, useSlottedContext } from "react-aria-components";
+//#region src/button/hooks.ts
+/**
+* What a button does past React Aria, whichever of its elements it renders:
+* the disabled state a parent's context sets, the ripple, and the `aria-*`
+* props and keyboard handlers React Aria would drop or wrap. Hands back the
+* props it did not take, for the element.
+*
+* Shared by ButtonBase and by IconButton's toggle, which is React Aria's
+* `ToggleButton` rather than either element ButtonBase renders.
+*/
+function useButtonBase(input, isPending) {
+	const $ = c(19);
+	const { disableRipple: t0, isDisabled, onClick, onContextMenu, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, ref, ...props } = input;
+	const disableRipple = t0 === void 0 ? false : t0;
+	const context = useSlottedContext(ButtonContext, input.slot);
+	const disabled = isDisabled ?? context?.isDisabled ?? false;
+	let t1;
+	if ($[0] !== onClick || $[1] !== onContextMenu || $[2] !== onPointerCancel || $[3] !== onPointerDown || $[4] !== onPointerLeave || $[5] !== onPointerUp) {
+		t1 = {
+			onClick,
+			onContextMenu,
+			onPointerCancel,
+			onPointerDown,
+			onPointerLeave,
+			onPointerUp
+		};
+		$[0] = onClick;
+		$[1] = onContextMenu;
+		$[2] = onPointerCancel;
+		$[3] = onPointerDown;
+		$[4] = onPointerLeave;
+		$[5] = onPointerUp;
+		$[6] = t1;
+	} else t1 = $[6];
+	const ripple = useRipple(!disableRipple && !disabled && !isPending, t1);
+	const t2 = ariaAttributesOf(props);
+	let t3;
+	if ($[7] !== onKeyDown || $[8] !== onKeyUp || $[9] !== t2) {
+		t3 = {
+			aria: t2,
+			onKeyDown,
+			onKeyUp
+		};
+		$[7] = onKeyDown;
+		$[8] = onKeyUp;
+		$[9] = t2;
+		$[10] = t3;
+	} else t3 = $[10];
+	let t4;
+	if ($[11] !== ref) {
+		t4 = refCallback(ref);
+		$[11] = ref;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== disabled || $[14] !== props || $[15] !== ripple || $[16] !== t3 || $[17] !== t4) {
+		t5 = {
+			disabled,
+			element: t3,
+			props,
+			ref: t4,
+			ripple
+		};
+		$[13] = disabled;
+		$[14] = props;
+		$[15] = ripple;
+		$[16] = t3;
+		$[17] = t4;
+		$[18] = t5;
+	} else t5 = $[18];
+	return t5;
+}
+//#endregion
+export { useButtonBase };
+
+//# sourceMappingURL=hooks.js.map

package/dist/button/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","names":["Ref","FocusableElement","ButtonContext","useSlottedContext","ButtonDOMProps","useRipple","ariaAttributesOf","refCallback","ButtonBaseInput","Pick","disableRipple","ref","HTMLAnchorElement","HTMLButtonElement","useButtonBase","input","isPending","$","_c","t0","isDisabled","onClick","onContextMenu","onKeyDown","onKeyUp","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","props","undefined","context","slot","disabled","t1","ripple","t2","t3","aria","t4","t5","element","_c"],"sources":["../../src/button/hooks.ts"],"sourcesContent":["import type { Ref } from 'react'\nimport type { FocusableElement } from 'react-aria-components'\n\nimport { ButtonContext, useSlottedContext } from 'react-aria-components'\n\nimport type { ButtonDOMProps } from '.'\n\nimport { useRipple } from '../hooks/useRipple'\nimport { ariaAttributesOf } from '../render/aria'\nimport { refCallback } from '../render/ref'\n\n// The hook half of `src/button`, apart from ./index.tsx so that file exports\n// components alone — which is what keeps fast refresh working for it, the\n// same arrangement `src/drag` uses.\n\n/** What {@link useButtonBase} takes off a button's props for itself. */\ntype ButtonBaseInput = Pick<\n  ButtonDOMProps,\n  | 'isDisabled'\n  | 'onClick'\n  | 'onContextMenu'\n  | 'onKeyDown'\n  | 'onKeyUp'\n  | 'onPointerCancel'\n  | 'onPointerDown'\n  | 'onPointerLeave'\n  | 'onPointerUp'\n  | 'slot'\n> & {\n  disableRipple?: boolean\n  ref?: Ref<HTMLAnchorElement | HTMLButtonElement>\n}\n\n/**\n * What a button does past React Aria, whichever of its elements it renders:\n * the disabled state a parent's context sets, the ripple, and the `aria-*`\n * props and keyboard handlers React Aria would drop or wrap. Hands back the\n * props it did not take, for the element.\n *\n * Shared by ButtonBase and by IconButton's toggle, which is React Aria's\n * `ToggleButton` rather than either element ButtonBase renders.\n */\nfunction useButtonBase<Props extends ButtonBaseInput>(\n  input: Props,\n  isPending: boolean,\n) {\n  const {\n    disableRipple = false,\n    isDisabled,\n    onClick,\n    onContextMenu,\n    onKeyDown,\n    onKeyUp,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp,\n    ref,\n    ...props\n  } = input\n\n  // A parent's context may disable the button — React Aria's own fields\n  // disable the buttons they hold with them, a number field's stepper at the\n  // end of its range and a search field's clear button with the field — and\n  // React Aria takes a prop over its context, so a default of `false` here\n  // would keep the button enabled whatever the parent said. The call site's\n  // own prop still wins where it is given; the context is read for the\n  // ripple, which has to know before the render state does.\n  const context = useSlottedContext(ButtonContext, input.slot)\n  const disabled = isDisabled ?? context?.isDisabled ?? false\n\n  // The rest of the props (className/style, etc.) are handed back rather\n  // than given to the ripple: `className` and `style` there may be functions\n  // of render state, which the ripple's own handler-only merge doesn't need\n  // to know about. It is also why ButtonBase merges the styles through\n  // mergeStatefulStyles rather than the plain mergeStyles. The ripple is off\n  // while disabled: React Aria still forwards pointer events to a disabled\n  // element, and a press that changes nothing should not look like one.\n  //\n  // Off while pending for the same reason, and for a second one. React Aria\n  // nulls out the handlers it derived itself while pending — the click among\n  // them — but not the separate copy of the global pointer events that\n  // carries ours, so a press still reached the ripple and started it while\n  // the click that would have ended it never arrived. The ripple stayed at\n  // its pressed opacity until some later press completed a cycle of its own.\n  const ripple = useRipple<FocusableElement>(\n    !disableRipple && !disabled && !isPending,\n    {\n      onClick,\n      onContextMenu,\n      onPointerCancel,\n      onPointerDown,\n      onPointerLeave,\n      onPointerUp,\n    },\n  )\n\n  return {\n    disabled,\n    element: { aria: ariaAttributesOf(props), onKeyDown, onKeyUp },\n    props,\n    // The element is a button, a link or IconButton's toggle, so the ref is\n    // typed as a link or a button and handed to each as the callback all\n    // three accept — see src/render/ref.ts.\n    ref: refCallback(ref),\n    ripple,\n  }\n}\n\nexport { useButtonBase }\n"],"mappings":";;;;;;;;;;;;;;;AA0CA,SAAAc,cAAAC,OAAAC,WAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAIE,MAAA,EAAAR,eAAAS,IAAAC,YAAAC,SAAAC,eAAAC,WAAAC,SAAAC,iBAAAC,eAAAC,gBAAAC,aAAAjB,KAAA,GAAAkB,UAaId;CAZF,MAAAL,gBAAAS,OAAAW,KAAAA,IAAA,QAAAX;CAqBF,MAAAY,UAAgB5B,kBAAkBD,eAAea,MAAKiB,IAAK;CAC3D,MAAAC,WAAiBb,cAAcW,SAAOX,cAArB;CAA0C,IAAAc;CAAA,IAAAjB,EAAA,OAAAI,WAAAJ,EAAA,OAAAK,iBAAAL,EAAA,OAAAQ,mBAAAR,EAAA,OAAAS,iBAAAT,EAAA,OAAAU,kBAAAV,EAAA,OAAAW,aAAA;EAkBzDM,KAAA;GAAAb;GAAAC;GAAAG;GAAAC;GAAAC;GAAAC;EAOA;EAACX,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAQ;EAAAR,EAAA,KAAAS;EAAAT,EAAA,KAAAU;EAAAV,EAAA,KAAAW;EAAAX,EAAA,KAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CATH,MAAAkB,SAAe9B,UACb,CAACK,iBAAD,CAAmBuB,YAAnB,CAAgCjB,WAChCkB,EAQF;CAImB,MAAAE,KAAA9B,iBAAiBuB,KAAK;CAAC,IAAAQ;CAAA,IAAApB,EAAA,OAAAM,aAAAN,EAAA,OAAAO,WAAAP,EAAA,OAAAmB,IAAA;EAA/BC,KAAA;GAAAC,MAAQF;GAAuBb;GAAAC;EAAqB;EAACP,EAAA,KAAAM;EAAAN,EAAA,KAAAO;EAAAP,EAAA,KAAAmB;EAAAnB,EAAA,MAAAoB;CAAA,OAAAA,KAAApB,EAAA;CAAA,IAAAsB;CAAA,IAAAtB,EAAA,QAAAN,KAAA;EAKzD4B,KAAAhC,YAAYI,GAAG;EAACM,EAAA,MAAAN;EAAAM,EAAA,MAAAsB;CAAA,OAAAA,KAAAtB,EAAA;CAAA,IAAAuB;CAAA,IAAAvB,EAAA,QAAAgB,YAAAhB,EAAA,QAAAY,SAAAZ,EAAA,QAAAkB,UAAAlB,EAAA,QAAAoB,MAAApB,EAAA,QAAAsB,IAAA;EAPhBC,KAAA;GAAAP;GAAAQ,SAEIJ;GAAqDR;GAAAlB,KAKzD4B;GAAgBJ;EAEvB;EAAClB,EAAA,MAAAgB;EAAAhB,EAAA,MAAAY;EAAAZ,EAAA,MAAAkB;EAAAlB,EAAA,MAAAoB;EAAApB,EAAA,MAAAsB;EAAAtB,EAAA,MAAAuB;CAAA,OAAAA,KAAAvB,EAAA;CAAA,OATMuB;AASN"}

package/dist/button/index.d.ts

@@ -0,0 +1,11 @@
+import { DOMAttributes, ReactNode, RefAttributes } from "react";
+import { ButtonProps, ButtonRenderProps, ClassNameOrFunction, StyleOrFunction } from "react-aria-components";
+//#region src/button/index.d.ts
+type ButtonDOMProps = Omit<ButtonProps, 'children' | 'className' | 'style' | GlobalEventKey> & Pick<DOMAttributes<HTMLElement>, GlobalEventKey>;
+type ButtonState = Pick<ButtonRenderProps, 'isDisabled' | 'isFocused' | 'isFocusVisible' | 'isHovered' | 'isPressed'> & {
+  isSelected?: boolean;
+};
+type GlobalEventKey = Exclude<keyof DOMAttributes<HTMLElement> & keyof ButtonProps, 'onBlur' | 'onClick' | 'onFocus'>;
+//#endregion
+export type { ButtonDOMProps, ButtonState };
+//# sourceMappingURL=index.d.ts.map

package/dist/button/index.js

@@ -0,0 +1,273 @@
+import { props } from "../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { mergeStatefulStyles } from "../styles/merge.js";
+import { buttonRenderer, linkRenderer, toggleButtonRenderer } from "../render/aria.js";
+import ProgressIndicator from "../components/progress-indicator/index.js";
+import { useToggleGroupDisabled } from "../hooks/useToggleGroupDisabled.js";
+import { useMessages } from "../i18n/index.js";
+import { useButtonBase } from "./hooks.js";
+import { buttonBaseStyles } from "./styles.js";
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, Link, ToggleButton } from "react-aria-components";
+//#region src/button/index.tsx
+/**
+* A button drawn with the classes a component hands it: React Aria's
+* `Button`, or its `Link` given `href`. See the header.
+*/
+function ButtonBase(t0) {
+	const $ = c(43);
+	let children;
+	let classes;
+	let href;
+	let input;
+	let pendingLabel;
+	let rel;
+	let render;
+	let t1;
+	let target;
+	if ($[0] !== t0) {
+		({children, classes, href, isPending: t1, pendingLabel, rel, render, target, ...input} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = classes;
+		$[3] = href;
+		$[4] = input;
+		$[5] = pendingLabel;
+		$[6] = rel;
+		$[7] = render;
+		$[8] = t1;
+		$[9] = target;
+	} else {
+		children = $[1];
+		classes = $[2];
+		href = $[3];
+		input = $[4];
+		pendingLabel = $[5];
+		rel = $[6];
+		render = $[7];
+		t1 = $[8];
+		target = $[9];
+	}
+	const isPending = t1 === void 0 ? false : t1;
+	const messages = useMessages();
+	const { disabled, element, props, ref, ripple } = useButtonBase(input, isPending);
+	let t2;
+	if ($[10] !== classes || $[11] !== props) {
+		t2 = mergeStatefulStyles(classes, props);
+		$[10] = classes;
+		$[11] = props;
+		$[12] = t2;
+	} else t2 = $[12];
+	const styleProps = t2;
+	if (href !== void 0) {
+		let t3;
+		if ($[13] !== element) {
+			t3 = linkRenderer(element);
+			$[13] = element;
+			$[14] = t3;
+		} else t3 = $[14];
+		let t4;
+		if ($[15] !== children || $[16] !== disabled || $[17] !== href || $[18] !== props || $[19] !== ref || $[20] !== rel || $[21] !== ripple.handlers || $[22] !== ripple.surface || $[23] !== styleProps || $[24] !== t3 || $[25] !== target) {
+			t4 = /* @__PURE__ */ jsxs(Link, {
+				href,
+				isDisabled: disabled,
+				ref,
+				rel,
+				render: t3,
+				target,
+				...ripple.handlers,
+				...props,
+				...styleProps,
+				children: [children, ripple.surface]
+			});
+			$[15] = children;
+			$[16] = disabled;
+			$[17] = href;
+			$[18] = props;
+			$[19] = ref;
+			$[20] = rel;
+			$[21] = ripple.handlers;
+			$[22] = ripple.surface;
+			$[23] = styleProps;
+			$[24] = t3;
+			$[25] = target;
+			$[26] = t4;
+		} else t4 = $[26];
+		return t4;
+	}
+	let t3;
+	if ($[27] !== element || $[28] !== render) {
+		t3 = buttonRenderer(element, render);
+		$[27] = element;
+		$[28] = render;
+		$[29] = t3;
+	} else t3 = $[29];
+	const t4 = ripple.handlers;
+	const t5 = pendingLabel ?? messages.loading;
+	let t6;
+	if ($[30] !== children || $[31] !== ripple.surface || $[32] !== t5) {
+		t6 = buttonContent(children, t5, ripple.surface);
+		$[30] = children;
+		$[31] = ripple.surface;
+		$[32] = t5;
+		$[33] = t6;
+	} else t6 = $[33];
+	let t7;
+	if ($[34] !== disabled || $[35] !== isPending || $[36] !== props || $[37] !== ref || $[38] !== ripple.handlers || $[39] !== styleProps || $[40] !== t3 || $[41] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Button, {
+			isDisabled: disabled,
+			isPending,
+			ref,
+			render: t3,
+			...t4,
+			...props,
+			...styleProps,
+			children: t6
+		});
+		$[34] = disabled;
+		$[35] = isPending;
+		$[36] = props;
+		$[37] = ref;
+		$[38] = ripple.handlers;
+		$[39] = styleProps;
+		$[40] = t3;
+		$[41] = t6;
+		$[42] = t7;
+	} else t7 = $[42];
+	return t7;
+}
+function buttonContent(children, pendingLabel, surface) {
+	return (state) => /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("span", {
+			...props(buttonBaseStyles.label, state.isPending && buttonBaseStyles.labelPending),
+			children
+		}),
+		state.isPending ? /* @__PURE__ */ jsx("span", {
+			...props(buttonBaseStyles.pending),
+			children: /* @__PURE__ */ jsx(ProgressIndicator, {
+				"aria-label": pendingLabel,
+				isIndeterminate: true,
+				size: "1em",
+				tone: "inherit",
+				variant: "circular"
+			})
+		}) : null,
+		surface
+	] });
+}
+/**
+* A toggle drawn with the classes a component hands it: React Aria's
+* `ToggleButton`, which reports its state through `aria-pressed`. It is never
+* a link and never pending — React Aria's toggle takes neither, and neither
+* means anything for a control whose whole job is to report which of two
+* states it is in — so `isPending` reaches it only to keep the ripple off,
+* as it does for the plain button.
+*/
+function ToggleButtonBase(t0) {
+	const $ = c(32);
+	let children;
+	let classes;
+	let defaultSelected;
+	let input;
+	let isSelected;
+	let onChange;
+	let render;
+	let t1;
+	if ($[0] !== t0) {
+		({children, classes, defaultSelected, isPending: t1, isSelected, onChange, render, ...input} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = classes;
+		$[3] = defaultSelected;
+		$[4] = input;
+		$[5] = isSelected;
+		$[6] = onChange;
+		$[7] = render;
+		$[8] = t1;
+	} else {
+		children = $[1];
+		classes = $[2];
+		defaultSelected = $[3];
+		input = $[4];
+		isSelected = $[5];
+		onChange = $[6];
+		render = $[7];
+		t1 = $[8];
+	}
+	const isPending = t1 === void 0 ? false : t1;
+	const disabledByGroup = useToggleGroupDisabled(input.id);
+	let t2;
+	if ($[9] !== disabledByGroup || $[10] !== input) {
+		t2 = disabledByGroup ? {
+			...input,
+			isDisabled: true
+		} : input;
+		$[9] = disabledByGroup;
+		$[10] = input;
+		$[11] = t2;
+	} else t2 = $[11];
+	const { disabled, element, props, ref, ripple } = useButtonBase(t2, isPending);
+	let t3;
+	if ($[12] !== element || $[13] !== render) {
+		t3 = toggleButtonRenderer(element, toggleRender(render));
+		$[12] = element;
+		$[13] = render;
+		$[14] = t3;
+	} else t3 = $[14];
+	const t4 = ripple.handlers;
+	let t5;
+	if ($[15] !== classes || $[16] !== props) {
+		t5 = mergeStatefulStyles(classes, props);
+		$[15] = classes;
+		$[16] = props;
+		$[17] = t5;
+	} else t5 = $[17];
+	let t6;
+	if ($[18] !== children || $[19] !== ripple.surface) {
+		t6 = toggleContent(children, ripple.surface);
+		$[18] = children;
+		$[19] = ripple.surface;
+		$[20] = t6;
+	} else t6 = $[20];
+	let t7;
+	if ($[21] !== defaultSelected || $[22] !== disabled || $[23] !== isSelected || $[24] !== onChange || $[25] !== props || $[26] !== ref || $[27] !== ripple.handlers || $[28] !== t3 || $[29] !== t5 || $[30] !== t6) {
+		t7 = /* @__PURE__ */ jsx(ToggleButton, {
+			defaultSelected,
+			isDisabled: disabled,
+			isSelected,
+			onChange,
+			ref,
+			render: t3,
+			...t4,
+			...props,
+			...t5,
+			children: t6
+		});
+		$[21] = defaultSelected;
+		$[22] = disabled;
+		$[23] = isSelected;
+		$[24] = onChange;
+		$[25] = props;
+		$[26] = ref;
+		$[27] = ripple.handlers;
+		$[28] = t3;
+		$[29] = t5;
+		$[30] = t6;
+		$[31] = t7;
+	} else t7 = $[31];
+	return t7;
+}
+function toggleContent(children, surface) {
+	return () => /* @__PURE__ */ jsxs(Fragment, { children: [children, surface] });
+}
+function toggleRender(render) {
+	if (render === void 0) return;
+	return (props, state) => render(props, {
+		...state,
+		isPending: false
+	});
+}
+//#endregion
+export { ButtonBase, ToggleButtonBase };
+
+//# sourceMappingURL=index.js.map

package/dist/button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["DOMAttributes","ReactNode","RefAttributes","ButtonRenderProps","ClassNameOrFunction","ButtonProps","RACButtonProps","ToggleButtonProps","RACToggleButtonProps","StyleOrFunction","stylex","Button","RACButton","Link","RACLink","ToggleButton","RACToggleButton","ProgressIndicator","useToggleGroupDisabled","useMessages","buttonRenderer","linkRenderer","toggleButtonRenderer","mergeStatefulStyles","useButtonBase","buttonBaseStyles","ButtonBaseProps","children","classes","state","ButtonState","ReturnType","props","className","disableRipple","href","pendingLabel","rel","style","target","ButtonDOMProps","HTMLAnchorElement","HTMLButtonElement","Omit","GlobalEventKey","Pick","HTMLElement","isSelected","Exclude","ToggleButtonBaseProps","defaultSelected","onChange","ButtonBase","t0","$","_c","input","render","t1","isPending","undefined","messages","disabled","element","ref","ripple","t2","styleProps","t3","t4","handlers","surface","t5","loading","t6","buttonContent","t7","label","labelPending","pending","ToggleButtonBase","disabledByGroup","id","isDisabled","toggleRender","toggleContent","_c","RACLink","RACButton","stylex.props","RACToggleButton"],"sources":["../../src/button/index.tsx"],"sourcesContent":["import type { DOMAttributes, ReactNode, RefAttributes } from 'react';\nimport type { ButtonRenderProps, ClassNameOrFunction, ButtonProps as RACButtonProps, ToggleButtonProps as RACToggleButtonProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, Link as RACLink, ToggleButton as RACToggleButton } from 'react-aria-components';\nimport ProgressIndicator from '../components/progress-indicator';\nimport { useToggleGroupDisabled } from '../hooks/useToggleGroupDisabled';\nimport { useMessages } from '../i18n';\nimport { buttonRenderer, linkRenderer, toggleButtonRenderer } from '../render/aria';\nimport { mergeStatefulStyles } from '../styles/merge';\nimport { useButtonBase } from './hooks';\nimport { buttonBaseStyles } from './styles';\n\n// The press-button core Button and IconButton both render through. A button\n// is React Aria's `Button`, its `Link` once given `href`, or its\n// `ToggleButton` once it reports a state, and around each this adds what\n// React Aria leaves out: the ripple, the disabled state a parent's context\n// sets, the `aria-*` props and keyboard handlers it would drop or wrap, and\n// the ring drawn over the label while the button is pending. Each component\n// brings its own classes, as a function of the render state, and the call\n// site's `className` and `style` are merged over them.\n//\n// One module rather than a copy in each, since the copies had already drifted\n// once: IconButton read `ButtonContext` for a parent's disabled state and\n// Button did not. Not a component of the library's own and not exported from\n// the package; see `src/row` for the same arrangement around a list's row.\n\ntype ButtonBaseProps = {\n  children?: ReactNode;\n  /**\n   * The component's own classes, from the render state. The call site's\n   * `className` and `style` are merged over them.\n   */\n  classes: (state: ButtonState) => ReturnType<typeof stylex.props>;\n  className?: ClassNameOrFunction<ButtonState>;\n  disableRipple?: boolean;\n  href?: string;\n  pendingLabel?: string;\n  rel?: string;\n  style?: StyleOrFunction<ButtonState>;\n  target?: string;\n} & ButtonDOMProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>;\n\n// The props a button hands React Aria. React Aria types the global DOM events\n// — pointer, mouse, touch, wheel and the rest — against the element each\n// component renders, and a handler written for a <button> does not type-check\n// against an <a>. The keys are retyped against HTMLElement here so one set of\n// props serves both forms; the events React Aria defines itself (press,\n// focus, keyboard) keep its types, since it hands those its own event objects.\ntype ButtonDOMProps = Omit<RACButtonProps, 'children' | 'className' | 'style' | GlobalEventKey> & Pick<DOMAttributes<HTMLElement>, GlobalEventKey>;\n\n// The render state React Aria's three elements share. A className or style\n// function written against it serves the button, the link and the toggle\n// alike; `isPending` belongs to the button alone, and `isCurrent` to the\n// link, so neither is here. What the button draws while pending is decided\n// in `buttonContent`, which sees React Aria's own state rather than this one.\n//\n// `isSelected` is optional because only the toggle has one: React Aria hands\n// the button and the link a state without it and the toggle a state with\n// it, and a parameter type this wide accepts either.\ntype ButtonState = Pick<ButtonRenderProps, 'isDisabled' | 'isFocused' | 'isFocusVisible' | 'isHovered' | 'isPressed'> & {\n  isSelected?: boolean;\n};\ntype GlobalEventKey = Exclude<keyof DOMAttributes<HTMLElement> & keyof RACButtonProps, 'onBlur' | 'onClick' | 'onFocus'>;\ntype ToggleButtonBaseProps = {\n  children?: ReactNode;\n  /** As for ButtonBase, handed `isSelected` as well. */\n  classes: (state: ButtonState) => ReturnType<typeof stylex.props>;\n  className?: ClassNameOrFunction<ButtonState>;\n  defaultSelected?: boolean;\n  disableRipple?: boolean;\n  isSelected?: boolean;\n  onChange?: (isSelected: boolean) => void;\n  style?: StyleOrFunction<ButtonState>;\n} & ButtonDOMProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>;\n\n/**\n * A button drawn with the classes a component hands it: React Aria's\n * `Button`, or its `Link` given `href`. See the header.\n */\nfunction ButtonBase({\n  children,\n  classes,\n  href,\n  isPending = false,\n  pendingLabel,\n  rel,\n  render,\n  target,\n  ...input\n}: ButtonBaseProps) {\n  const messages = useMessages();\n  const {\n    disabled,\n    element,\n    props,\n    ref,\n    ripple\n  } = useButtonBase(input, isPending);\n  const styleProps = mergeStatefulStyles(classes, props);\n  if (href !== undefined) {\n    return <RACLink href={href} isDisabled={disabled} ref={ref} rel={rel} render={linkRenderer(element)} target={target} {...ripple.handlers} {...props} {...styleProps}>\n        {children}\n        {ripple.surface}\n      </RACLink>;\n  }\n  return <RACButton isDisabled={disabled} isPending={isPending} ref={ref} render={buttonRenderer(element, render)} {...ripple.handlers} {...props} {...styleProps}>\n      {buttonContent(children, pendingLabel ?? messages.loading, ripple.surface)}\n    </RACButton>;\n}\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, surface: ReactNode) {\n  return (state: ButtonRenderProps) => <>\n      <span {...stylex.props(buttonBaseStyles.label, state.isPending && buttonBaseStyles.labelPending)}>\n        {children}\n      </span>\n      {state.isPending ? <span {...stylex.props(buttonBaseStyles.pending)}>\n          <ProgressIndicator aria-label={pendingLabel} isIndeterminate size=\"1em\" tone=\"inherit\" variant=\"circular\" />\n        </span> : null}\n      {surface}\n    </>;\n}\n\n/**\n * A toggle drawn with the classes a component hands it: React Aria's\n * `ToggleButton`, which reports its state through `aria-pressed`. It is never\n * a link and never pending — React Aria's toggle takes neither, and neither\n * means anything for a control whose whole job is to report which of two\n * states it is in — so `isPending` reaches it only to keep the ripple off,\n * as it does for the plain button.\n */\nfunction ToggleButtonBase({\n  children,\n  classes,\n  defaultSelected,\n  isPending = false,\n  isSelected,\n  onChange,\n  render,\n  ...input\n}: ToggleButtonBaseProps) {\n  // A selecting ButtonGroup disables its toggles through React Aria's group\n  // state, which no prop here carries, so the ripple would stay on in a\n  // disabled group and answer a press with an animation. Handed on as the\n  // toggle's own `isDisabled`, which is what React Aria makes of it anyway.\n  const disabledByGroup = useToggleGroupDisabled(input.id);\n  const {\n    disabled,\n    element,\n    props,\n    ref,\n    ripple\n  } = useButtonBase(disabledByGroup ? {\n    ...input,\n    isDisabled: true\n  } : input, isPending);\n  return <RACToggleButton defaultSelected={defaultSelected} isDisabled={disabled} isSelected={isSelected} onChange={onChange} ref={ref} render={toggleButtonRenderer(element, toggleRender(render))} {...ripple.handlers} {...props} {...mergeStatefulStyles(classes, props)}>\n      {toggleContent(children, ripple.surface)}\n    </RACToggleButton>;\n}\n\n// What a toggle draws: its label and the ripple. No pending ring — see\n// ToggleButtonBase. Built by a call for the reason `buttonContent` is.\nfunction toggleContent(children: ReactNode, surface: ReactNode) {\n  return () => <>\n      {children}\n      {surface}\n    </>;\n}\n\n// A call site's `render` is written for React Aria's button, whose render\n// state says whether it is pending; a toggle's says nothing of it, and a\n// toggle never is. So the toggle hands that function its own state with\n// `isPending` filled in, which is what lets one `render` prop serve a button\n// whichever element it turns out to be.\nfunction toggleRender(render: RACButtonProps['render']): RACToggleButtonProps['render'] {\n  if (render === undefined) {\n    return undefined;\n  }\n  return (props, state) => render(props, {\n    ...state,\n    isPending: false\n  });\n}\nexport type { ButtonDOMProps, ButtonState };\nexport { ButtonBase, ToggleButtonBase };"],"mappings":"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"}

package/dist/button/styles.js

@@ -0,0 +1,23 @@
+//#region src/button/styles.ts
+const buttonBaseStyles = {
+	label: {
+		k1xSpc: "xjp7ctv",
+		$$css: true
+	},
+	labelPending: {
+		k33iCy: "xlshs6z",
+		$$css: true
+	},
+	pending: {
+		kGNEyG: "x6s0dn4",
+		k1xSpc: "x78zum5",
+		kpwlN0: "x10a8y8t",
+		kjj79g: "xl56j7k",
+		kVAEAm: "x10l6tqk",
+		$$css: true
+	}
+};
+//#endregion
+export { buttonBaseStyles };
+
+//# sourceMappingURL=styles.js.map

package/dist/button/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["stylex","buttonBaseStyles","label","k1xSpc","$$css","labelPending","k33iCy","pending","kGNEyG","kpwlN0","kjj79g","kVAEAm"],"sources":["../../src/button/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\n// What ButtonBase draws inside every button, whatever the component's own\n// container: the label, held in place while the button is pending, and the\n// ring over it. Apart from ./index.tsx so that file exports components alone,\n// which is what keeps fast refresh working for it.\nconst buttonBaseStyles = {\n  label: {\n    k1xSpc: \"xjp7ctv\",\n    $$css: true\n  },\n  labelPending: {\n    k33iCy: \"xlshs6z\",\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};\nexport { buttonBaseStyles };"],"mappings":";AAMA,MAAMC,mBAAmB;CACvBC,OAAO;EACLC,QAAQ;EACRC,OAAO;CACT;CACAC,cAAc;EACZC,QAAQ;EACRF,OAAO;CACT;CACAG,SAAS;EACPC,QAAQ;EACRL,QAAQ;EACRM,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRP,OAAO;CACT;AACF"}