@kanso-labs/kanso-ui 0.32.0 → 0.34.0

package/dist/components/token-field/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","TokenFieldProps","RACTokenFieldProps","TokenInputProps","RACTokenInputProps","stylex","useState","Token","RACToken","TokenField","RACTokenField","TokenInput","RACTokenInput","TokenFieldValue","FieldVariant","chipStyles","FieldBox","FieldMessage","fieldStyles","invalidFrom","focus","mergeStatefulStyles","colors","typography","TOKEN_LINE","styles","token","kfSwDN","kXLuUW","$$css","className","T","description","error","floatingLabel","label","leadingIcon","renderToken","segment","TokenSegment","style","trailingIcon","variant","Omit","Parameters","changeHandler","setHeld","value","onChange","isPopulated","undefined","segments","some","text","length","tokenContent","props","base","ring","unselected","t0","$","_c","t1","t2","held","defaultValue","populated","T0","t3","t4","root","t5","isDisabled","t6","t7","Symbol","for","0","1","t8","t9","t10","t11","t12","t13"],"sources":["../../../src/components/token-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TokenFieldProps as RACTokenFieldProps, TokenInputProps as RACTokenInputProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useState } from 'react';\nimport { Token as RACToken, TokenField as RACTokenField, TokenInput as RACTokenInput, TokenFieldValue } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { chipStyles } from '../../chip/styles';\nimport { FieldBox, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom } from '../../field/root';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\n\n// The chips page's input chips inside a text field: a field whose value is\n// text with pills in it — a tag input, a mention field, a structured search\n// box. The box, label, supporting line and error are the field chrome in\n// `src/field`, shared with every other field; the pill is the chip module's\n// in `src/chip`, shared with Chip and ChipGroup. What is here is React Aria's\n// `TokenField` around them.\n//\n// The value is React Aria's `TokenFieldValue`, a list of text and token\n// segments rather than a string, and this component does not wrap it. What\n// counts as a token is the whole question a token field exists to answer — a\n// hash tag, an @ mention, a chosen contact — and a wrapper would be a second\n// place to decide it. The class is re-exported from the package so a call\n// site can subclass it and override `tokenize`.\n//\n// Three things are worth knowing.\n//\n// **The editable area is not an input.** React Aria draws a contenteditable\n// element, since a token cannot live inside an `<input>`. So the box is drawn\n// `multiline` and grows with what it holds, and the chrome is told whether it\n// is populated rather than reading an input's value — a token field is the\n// third control the chrome cannot ask, after a select and a picker.\n//\n// **The box's whole height is the editable area.** A press anywhere in the\n// box has to put the caret in the text, so the box is not covered by a press\n// target the way Select's is; React Aria's own element fills the control's\n// place and takes the press.\n//\n// **A token is drawn by the call site, or by this.** `renderToken` takes a\n// segment and returns what the pill holds; without it the pill holds the\n// segment's own text. Either way the pill is the page's, so a token here and\n// a chip elsewhere cannot drift.\n\n// A token's pill is 32dp tall inside a body line of 24, so the control's\n// line makes room for it or the pills overlap once the value wraps. Stated\n// once because the control's floor and its line have to agree, and the\n// clearance under the label is measured from it.\nconst TOKEN_LINE = '32px';\nconst styles = {\n  token: {\n    kfSwDN: \"x87ps6o\",\n    kXLuUW: \"xxymvpz\",\n    $$css: true\n  }\n};\ntype TokenFieldProps<T extends TokenFieldValue = TokenFieldValue> = {\n  /** A function may compute the class from the field's render state. */\n  className?: RACTokenFieldProps<T>['className'];\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message and the red underline both\n   * follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds something. `false` keeps it small at the top in\n   * every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a field with no\n   * label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * An icon at the start of the box, before the label and the value: the\n   * page's 24dp leading icon, in the muted role. An icon drawn in `em` takes\n   * that size from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * What each token holds. Given a segment, return what to draw inside its\n   * pill; without it the pill holds the segment's own text.\n   */\n  renderToken?: (segment: TokenSegment) => ReactNode;\n  /** A function may compute the style from the field's render state. */\n  style?: RACTokenFieldProps<T>['style'];\n  /**\n   * An icon at the end of the box, after the value: the page's 24dp trailing\n   * icon, in the muted role and the error role once the field has an error.\n   * An icon drawn in `em` takes that size from the slot.\n   */\n  trailingIcon?: ReactNode;\n  /**\n   * The filled box, or the outlined one, as the text fields page draws them.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACTokenFieldProps<T>, 'children' | 'className' | 'style'>;\n\n// One token, as React Aria hands it to the editable area's render function.\n// Taken from that prop rather than imported, since the type lives in\n// `react-stately`, which this package does not depend on directly.\ntype TokenSegment = Parameters<RACTokenInputProps['children']>[0];\n\n// Keeps the mirrored copy in step and then hands the change on to the call\n// site. 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 input.\nfunction changeHandler<T extends TokenFieldValue>(setHeld: (value: T) => void, onChange: ((value: T) => void) | undefined) {\n  return (value: T) => {\n    setHeld(value);\n    onChange?.(value);\n  };\n}\n\n// Whether the field holds anything, for the floating label. A token field's\n// editable area is a contenteditable element rather than an input, so the\n// chrome cannot read a value off it and is told instead.\nfunction isPopulated(value: TokenFieldValue | undefined) {\n  if (value === undefined) {\n    return undefined;\n  }\n  return value.segments.some(segment => segment.text.length > 0);\n}\n\n// What each token draws. Built by a call rather than written inline at the\n// prop, which is what react-perf's no-new-function-as-prop is after; the\n// React Compiler memoises the result on its input.\nfunction tokenContent(renderToken: TokenFieldProps['renderToken']) {\n  return (segment: TokenSegment) => <RACToken {...stylex.props(chipStyles.base, focus.ring, chipStyles.unselected, styles.token)}>\n      {renderToken === undefined ? segment.text : renderToken(segment)}\n    </RACToken>;\n}\n\n/**\n * A labelled field whose value is text with inline tokens — a tag input, a\n * mention field, a structured search box. Its value is React Aria's\n * `TokenFieldValue`: pass `value` with `onChange` to control it, or\n * `defaultValue` to let it keep its own.\n *\n * ```tsx\n * const [value, setValue] = useState(new TokenFieldValue([]))\n *\n * <TokenField label=\"Label\" onChange={setValue} value={value} />\n * ```\n *\n * What counts as a token is the call site's: subclass `TokenFieldValue` and\n * override `tokenize`, which the package re-exports for that. `renderToken`\n * decides what each pill holds; without it, the segment's own text.\n *\n * The box, label, supporting line and error are the field chrome in\n * `src/field`, and the pill is the chip module's, shared with Chip and\n * ChipGroup.\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 TokenField<T extends TokenFieldValue = TokenFieldValue>({\n  description,\n  error,\n  floatingLabel = true,\n  label,\n  leadingIcon,\n  renderToken,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: TokenFieldProps<T>) {\n  // A copy of what the field holds, kept only so the label can float from\n  // it. React Aria's token field reports `isDisabled` and `isReadOnly`\n  // through its render props and not its value, and it hands its state down\n  // a context of its own that nothing outside the module can read — so an\n  // uncontrolled field has no other way to say what it is holding now.\n  //\n  // This mirrors rather than controls: `defaultValue` still goes through, so\n  // React Aria keeps owning the value and the editing it does with it. A\n  // controlled field is read straight off the prop, which already moves.\n  const [held, setHeld] = useState(props.defaultValue);\n  const populated = isPopulated(props.value ?? held);\n  return <RACTokenField<T> {...props} onChange={changeHandler(setHeld, props.onChange)} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // React Aria's `TextField` hands its group the field's disabled and\n    // invalid state through context; its `TokenField` does not, so the\n    // box is told outright or its label and its underline never turn.\n    isDisabled={props.isDisabled} isInvalid={invalidFrom(error)} isPopulated={populated} label={label} leading={leadingIcon} multiline trailing={trailingIcon} variant={variant}>\n        <RACTokenInput<T> {...{\n        0: {\n          className: \"x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x21xpn4 x1t137rt x126k92a\"\n        },\n        1: {\n          className: \"x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x1t137rt x126k92a xhm3zzy xczxdwi\"\n        }\n      }[!!(variant === 'filled') << 0]}>\n          {tokenContent(renderToken)}\n        </RACTokenInput>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACTokenField>;\n}\nexport type { TokenFieldProps, TokenSegment };\nexport default TokenField;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","TokenFieldProps","RACTokenFieldProps","TokenInputProps","RACTokenInputProps","stylex","useState","Token","RACToken","TokenField","RACTokenField","TokenInput","RACTokenInput","TokenFieldValue","FieldVariant","chipLabel","chipStyles","FieldBox","FieldMessage","fieldStyles","invalidFrom","focus","mergeStatefulStyles","colors","typography","TOKEN_LINE","styles","token","kfSwDN","kXLuUW","$$css","className","T","description","error","floatingLabel","label","leadingIcon","renderToken","segment","TokenSegment","style","trailingIcon","variant","Omit","Parameters","changeHandler","setHeld","value","onChange","isPopulated","undefined","segments","some","text","length","tokenContent","props","base","ring","unselected","t0","$","_c","t1","t2","held","defaultValue","populated","T0","t3","t4","root","t5","isDisabled","t6","t7","Symbol","for","0","1","t8","t9","t10","t11","t12","t13"],"sources":["../../../src/components/token-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TokenFieldProps as RACTokenFieldProps, TokenInputProps as RACTokenInputProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useState } from 'react';\nimport { Token as RACToken, TokenField as RACTokenField, TokenInput as RACTokenInput, TokenFieldValue } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { chipLabel } from '../../chip';\nimport { chipStyles } from '../../chip/styles';\nimport { FieldBox, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom } from '../../field/root';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\n\n// The chips page's input chips inside a text field: a field whose value is\n// text with pills in it — a tag input, a mention field, a structured search\n// box. The box, label, supporting line and error are the field chrome in\n// `src/field`, shared with every other field; the pill is the chip module's\n// in `src/chip`, shared with Chip and ChipGroup. What is here is React Aria's\n// `TokenField` around them.\n//\n// The value is React Aria's `TokenFieldValue`, a list of text and token\n// segments rather than a string, and this component does not wrap it. What\n// counts as a token is the whole question a token field exists to answer — a\n// hash tag, an @ mention, a chosen contact — and a wrapper would be a second\n// place to decide it. The class is re-exported from the package so a call\n// site can subclass it and override `tokenize`.\n//\n// Three things are worth knowing.\n//\n// **The editable area is not an input.** React Aria draws a contenteditable\n// element, since a token cannot live inside an `<input>`. So the box is drawn\n// `multiline` and grows with what it holds, and the chrome is told whether it\n// is populated rather than reading an input's value — a token field is the\n// third control the chrome cannot ask, after a select and a picker.\n//\n// **The box's whole height is the editable area.** A press anywhere in the\n// box has to put the caret in the text, so the box is not covered by a press\n// target the way Select's is; React Aria's own element fills the control's\n// place and takes the press.\n//\n// **A token is drawn by the call site, or by this.** `renderToken` takes a\n// segment and returns what the pill holds; without it the pill holds the\n// segment's own text. Either way the pill is the page's, so a token here and\n// a chip elsewhere cannot drift.\n\n// A token's pill is 32dp tall inside a body line of 24, so the control's\n// line makes room for it or the pills overlap once the value wraps. Stated\n// once because the control's floor and its line have to agree, and the\n// clearance under the label is measured from it.\nconst TOKEN_LINE = '32px';\nconst styles = {\n  token: {\n    kfSwDN: \"x87ps6o\",\n    kXLuUW: \"xxymvpz\",\n    $$css: true\n  }\n};\ntype TokenFieldProps<T extends TokenFieldValue = TokenFieldValue> = {\n  /** A function may compute the class from the field's render state. */\n  className?: RACTokenFieldProps<T>['className'];\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message and the red underline both\n   * follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds something. `false` keeps it small at the top in\n   * every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a field with no\n   * label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * An icon at the start of the box, before the label and the value: the\n   * page's 24dp leading icon, in the muted role. An icon drawn in `em` takes\n   * that size from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * What each token holds. Given a segment, return what to draw inside its\n   * pill; without it the pill holds the segment's own text.\n   */\n  renderToken?: (segment: TokenSegment) => ReactNode;\n  /** A function may compute the style from the field's render state. */\n  style?: RACTokenFieldProps<T>['style'];\n  /**\n   * An icon at the end of the box, after the value: the page's 24dp trailing\n   * icon, in the muted role and the error role once the field has an error.\n   * An icon drawn in `em` takes that size from the slot.\n   */\n  trailingIcon?: ReactNode;\n  /**\n   * The filled box, or the outlined one, as the text fields page draws them.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACTokenFieldProps<T>, 'children' | 'className' | 'style'>;\n\n// One token, as React Aria hands it to the editable area's render function.\n// Taken from that prop rather than imported, since the type lives in\n// `react-stately`, which this package does not depend on directly.\ntype TokenSegment = Parameters<RACTokenInputProps['children']>[0];\n\n// Keeps the mirrored copy in step and then hands the change on to the call\n// site. 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 input.\nfunction changeHandler<T extends TokenFieldValue>(setHeld: (value: T) => void, onChange: ((value: T) => void) | undefined) {\n  return (value: T) => {\n    setHeld(value);\n    onChange?.(value);\n  };\n}\n\n// Whether the field holds anything, for the floating label. A token field's\n// editable area is a contenteditable element rather than an input, so the\n// chrome cannot read a value off it and is told instead.\nfunction isPopulated(value: TokenFieldValue | undefined) {\n  if (value === undefined) {\n    return undefined;\n  }\n  return value.segments.some(segment => segment.text.length > 0);\n}\n\n// What each token draws. Built by a call rather than written inline at the\n// prop, which is what react-perf's no-new-function-as-prop is after; the\n// React Compiler memoises the result on its input.\nfunction tokenContent(renderToken: TokenFieldProps['renderToken']) {\n  return (segment: TokenSegment) => <RACToken {...stylex.props(chipStyles.base, focus.ring, chipStyles.unselected, styles.token)}>\n      {chipLabel(renderToken === undefined ? segment.text : renderToken(segment))}\n    </RACToken>;\n}\n\n/**\n * A labelled field whose value is text with inline tokens — a tag input, a\n * mention field, a structured search box. Its value is React Aria's\n * `TokenFieldValue`: pass `value` with `onChange` to control it, or\n * `defaultValue` to let it keep its own.\n *\n * ```tsx\n * const [value, setValue] = useState(new TokenFieldValue([]))\n *\n * <TokenField label=\"Label\" onChange={setValue} value={value} />\n * ```\n *\n * What counts as a token is the call site's: subclass `TokenFieldValue` and\n * override `tokenize`, which the package re-exports for that. `renderToken`\n * decides what each pill holds; without it, the segment's own text.\n *\n * The box, label, supporting line and error are the field chrome in\n * `src/field`, and the pill is the chip module's, shared with Chip and\n * ChipGroup.\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 TokenField<T extends TokenFieldValue = TokenFieldValue>({\n  description,\n  error,\n  floatingLabel = true,\n  label,\n  leadingIcon,\n  renderToken,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: TokenFieldProps<T>) {\n  // A copy of what the field holds, kept only so the label can float from\n  // it. React Aria's token field reports `isDisabled` and `isReadOnly`\n  // through its render props and not its value, and it hands its state down\n  // a context of its own that nothing outside the module can read — so an\n  // uncontrolled field has no other way to say what it is holding now.\n  //\n  // This mirrors rather than controls: `defaultValue` still goes through, so\n  // React Aria keeps owning the value and the editing it does with it. A\n  // controlled field is read straight off the prop, which already moves.\n  const [held, setHeld] = useState(props.defaultValue);\n  const populated = isPopulated(props.value ?? held);\n  return <RACTokenField<T> {...props} onChange={changeHandler(setHeld, props.onChange)} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // React Aria's `TextField` hands its group the field's disabled and\n    // invalid state through context; its `TokenField` does not, so the\n    // box is told outright or its label and its underline never turn.\n    isDisabled={props.isDisabled} isInvalid={invalidFrom(error)} isPopulated={populated} label={label} leading={leadingIcon} multiline trailing={trailingIcon} variant={variant}>\n        <RACTokenInput<T> {...{\n        0: {\n          className: \"x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x21xpn4 x1t137rt x126k92a\"\n        },\n        1: {\n          className: \"x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x1t137rt x126k92a xhm3zzy xczxdwi\"\n        }\n      }[!!(variant === 'filled') << 0]}>\n          {tokenContent(renderToken)}\n        </RACTokenInput>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACTokenField>;\n}\nexport type { TokenFieldProps, TokenSegment };\nexport default TokenField;"],"mappings":"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"}

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

@@ -9,14 +9,15 @@ type ToolbarProps$1 = Omit<ToolbarProps, 'children' | 'className' | 'style'> & {
   /** A function may compute the style from the toolbar's render state. */
   style?: ToolbarProps['style'];
   /**
-   * Which of the page's two colour schemes the bar takes. `standard` is the
-   * surface container it draws by default; `vibrant` moves it to primary
-   * container, for a bar meant to carry the page's accent.
-   * @default 'standard'
+   * Which of the page's two colour schemes the bar takes. `neutral` is the
+   * page's standard scheme, the surface container it draws by default;
+   * `vibrant` moves it to primary container, for a bar meant to carry the
+   * page's accent.
+   * @default 'neutral'
    */
   tone?: ToolbarTone;
 };
-type ToolbarTone = 'standard' | 'vibrant';
+type ToolbarTone = 'neutral' | 'vibrant';
 /**
  * A container for a set of controls, announced as a toolbar so a screen
  * reader reads them as one group, with the arrow keys moving between them.

package/dist/components/toolbar/index.js

@@ -24,7 +24,7 @@ const styles = {
 		kg3NbH: "x790zyz",
 		$$css: true
 	},
-	standard: {
+	neutral: {
 		kWkggS: "x1mjdul6",
 		$$css: true
 	},
@@ -80,7 +80,7 @@ function Toolbar$1(t0) {
 	if ($[0] !== t0) {
 		const { orientation: t5, tone: t6, ...props$1 } = t0;
 		const orientation = t5 === void 0 ? "horizontal" : t5;
-		const tone = t6 === void 0 ? "standard" : t6;
+		const tone = t6 === void 0 ? "neutral" : t6;
 		const t7 = orientation === "horizontal" ? "vertical" : "horizontal";
 		let t8;
 		if ($[7] !== t7) {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ToolbarProps","RACToolbarProps","SeparatorProps","stylex","useMemo","Toolbar","RACToolbar","SeparatorContext","mergeStatefulStyles","colors","radii","spacing","styles","base","kGNEyG","kaIpWk","kB7OPa","kMwMTN","k1xSpc","kOIVth","kjj79g","k3XXqK","$$css","horizontal","kXwgrk","kAzted","k8WAf4","kg3NbH","standard","kWkggS","vertical","k7Eaqz","vibrant","Omit","children","className","style","tone","ToolbarTone","t0","$","_c","T0","T1","t1","t2","t3","t4","orientation","t5","t6","props","undefined","t7","t8","separator"],"sources":["../../../src/components/toolbar/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ToolbarProps as RACToolbarProps, SeparatorProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useMemo } from 'react';\nimport { Toolbar as RACToolbar, SeparatorContext } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing } from '../../tokens/design.tokens.stylex';\n\n// The toolbars page's container: a row of frequently used controls, on a\n// surface of its own, with the arrow keys moving between them rather than\n// Tab. The page calls it \"a container with configurable slots\", so nothing\n// here says what goes in one — an icon button, a button, a field or a rule\n// are all the call site's to place.\n//\n// The measurements are the page's, stated there in words: 64dp tall,\n// centred, 8dp between items and 16dp of padding outside them. The two\n// colour schemes are its own too — standard on surface container, vibrant on\n// primary container — and both put the muted content role on what they hold.\n//\n// Two things are this component's own.\n//\n// **A rule inside it runs across the row, not along it.** React Aria's\n// `Toolbar` sets its orientation on itself and nowhere else, so a\n// `Separator` written among the controls would draw the way it does anywhere\n// else — along the row, where it is invisible. This provides React Aria's\n// separator context with the perpendicular orientation, and `Separator`\n// reads it, so a rule between two controls is correct without the call site\n// saying which way it runs.\n//\n// **Arrow-key navigation is React Aria's and is not wrapped.** The arrows\n// move between the controls, and — worth knowing, since the pattern usually\n// implies otherwise — React Aria leaves every control tabbable rather than\n// giving the bar a roving tabindex, so Tab still steps through them one by\n// one. What the bar adds is the toolbar role, which tells a screen reader\n// the controls belong together, and a second way to move between them.\n//\n// One departure, and it is about the shape. The page gives the container's\n// corner as a token its widget draws rather than writes, so there is no\n// value to read: what it states in words is the height, the alignment and\n// the padding, and nothing else. The fully rounded corner here, and the\n// inline box that goes with it, are the library's own choice for a bar that\n// floats over a page rather than docking to its edge — a docked one spans\n// its container and squares its corner, both from the call site.\n\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x1dkaolv\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    k1xSpc: \"x3nfvp2\",\n    kOIVth: \"x126z3so\",\n    kjj79g: \"xl56j7k\",\n    k3XXqK: \"x1t137rt\",\n    $$css: true\n  },\n  horizontal: {\n    kXwgrk: \"x1q0g3np\",\n    kAzted: \"x8nclml\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  standard: {\n    kWkggS: \"x1mjdul6\",\n    $$css: true\n  },\n  vertical: {\n    kXwgrk: \"xdt5ytf\",\n    k7Eaqz: \"x4m7ku4\",\n    k8WAf4: \"xp6hjv6\",\n    kg3NbH: \"xn60lsn\",\n    $$css: true\n  },\n  vibrant: {\n    kWkggS: \"xp89om9\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  }\n};\ntype ToolbarProps = Omit<RACToolbarProps, 'children' | 'className' | 'style'> & {\n  /** The controls, and any rule between them. */\n  children?: ReactNode;\n  /** A function may compute the class from the toolbar's render state. */\n  className?: RACToolbarProps['className'];\n  /** A function may compute the style from the toolbar's render state. */\n  style?: RACToolbarProps['style'];\n  /**\n   * Which of the page's two colour schemes the bar takes. `standard` is the\n   * surface container it draws by default; `vibrant` moves it to primary\n   * container, for a bar meant to carry the page's accent.\n   * @default 'standard'\n   */\n  tone?: ToolbarTone;\n};\ntype ToolbarTone = 'standard' | 'vibrant';\n\n/**\n * A container for a set of controls, announced as a toolbar so a screen\n * reader reads them as one group, with the arrow keys moving between them.\n * Tab still steps through each control: React Aria's toolbar adds the arrows\n * rather than replacing what Tab does.\n *\n * ```tsx\n * <Toolbar aria-label=\"Label\">\n *   <IconButton aria-label=\"First item\">\n *     <FirstIcon />\n *   </IconButton>\n *   <Separator />\n *   <IconButton aria-label=\"Second item\">\n *     <SecondIcon />\n *   </IconButton>\n * </Toolbar>\n * ```\n *\n * Name it with `aria-label` or `aria-labelledby` — nothing here labels it for\n * you, and a toolbar with no name is a group a screen reader cannot announce.\n *\n * `orientation` is React Aria's, and it decides both which arrows move and\n * which way the bar runs. A `Separator` inside draws across that direction\n * without being told.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction Toolbar({\n  orientation = 'horizontal',\n  tone = 'standard',\n  ...props\n}: ToolbarProps) {\n  // The rule runs across the toolbar rather than along it. Memoised because\n  // a fresh object here would be a new context value on every render, which\n  // is what react-perf's no-new-object-as-prop is after.\n  const separator = useMemo<SeparatorProps>(() => ({\n    orientation: orientation === 'horizontal' ? 'vertical' : 'horizontal'\n  }), [orientation]);\n  return <SeparatorContext value={separator}>\n      <RACToolbar orientation={orientation} {...props} {...mergeStatefulStyles(stylex.props(styles.base, styles[orientation], styles[tone]), props)} />\n    </SeparatorContext>;\n}\nexport type { ToolbarProps, ToolbarTone };\nexport default Toolbar;"],"mappings":";;;;;;;AA6CA,MAAMa,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,YAAY;EACVC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAM,UAAU;EACRC,QAAQ;EACRP,OAAO;CACT;CACAQ,UAAU;EACRN,QAAQ;EACRO,QAAQ;EACRL,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAU,SAAS;EACPH,QAAQ;EACRZ,QAAQ;EACRK,OAAO;CACT;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,SAAAjB,UAAAkC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAP,EAAA,OAAAD,IAAA;EAAiB,MAAA,EAAAS,aAAAC,IAAAZ,MAAAa,IAAA,GAAAC,YAAAZ;EACf,MAAAS,cAAAC,OAAAG,KAAAA,IAAA,eAAAH;EACA,MAAAZ,OAAAa,OAAAE,KAAAA,IAAA,aAAAF;EAOe,MAAAG,KAAAL,gBAAgB,eAAhB,aAAA;EAAwD,IAAAM;EAAA,IAAAd,EAAA,OAAAa,IAAA;GADtBC,KAAA,EAAAN,aAClCK,GACf;GAACb,EAAA,KAAAa;GAAAb,EAAA,KAAAc;EAAA,OAAAA,KAAAd,EAAA;EAFD,MAAAe,YAAiDD;EAGzCX,KAAApC;EAAwBgD,KAAAA;EAC3Bb,KAAApC;EAAwB0C,KAAAA;EAAiBG,KAAAA;EAAWL,KAAAtC,oBAAoBL,MAAaS,OAAMC,MAAOD,OAAOoC,cAAcpC,OAAOyB,KAAK,GAAGc,OAAK;EAACX,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;CAAA,OAAA;EAAAL,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;EAAAO,KAAAP,EAAA;CAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAE,MAAAF,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,MAAAL,EAAA,QAAAM,IAAA;EAA7IG,KAAA,oBAAC,IAAD;GAAyBD,aAAAA;GAAW,GAAMG;GAAK,GAAML;EAAwF,CAAA;EAAIN,EAAA,KAAAE;EAAAF,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,QAAAG,MAAAH,EAAA,QAAAO,MAAAP,EAAA,QAAAS,IAAA;EAD9IC,KAAA,oBAAC,IAAD;GAAyBK,OAAAA;GAC5BN,UAAAA;EADoB,CAAA;EAEHT,EAAA,MAAAG;EAAAH,EAAA,MAAAO;EAAAP,EAAA,MAAAS;EAAAT,EAAA,MAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,OAFdU;AAEc"}
+{"version":3,"file":"index.js","names":["ReactNode","ToolbarProps","RACToolbarProps","SeparatorProps","stylex","useMemo","Toolbar","RACToolbar","SeparatorContext","mergeStatefulStyles","colors","radii","spacing","styles","base","kGNEyG","kaIpWk","kB7OPa","kMwMTN","k1xSpc","kOIVth","kjj79g","k3XXqK","$$css","horizontal","kXwgrk","kAzted","k8WAf4","kg3NbH","neutral","kWkggS","vertical","k7Eaqz","vibrant","Omit","children","className","style","tone","ToolbarTone","t0","$","_c","T0","T1","t1","t2","t3","t4","orientation","t5","t6","props","undefined","t7","t8","separator"],"sources":["../../../src/components/toolbar/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ToolbarProps as RACToolbarProps, SeparatorProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useMemo } from 'react';\nimport { Toolbar as RACToolbar, SeparatorContext } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing } from '../../tokens/design.tokens.stylex';\n\n// The toolbars page's container: a row of frequently used controls, on a\n// surface of its own, with the arrow keys moving between them rather than\n// Tab. The page calls it \"a container with configurable slots\", so nothing\n// here says what goes in one — an icon button, a button, a field or a rule\n// are all the call site's to place.\n//\n// The measurements are the page's, stated there in words: 64dp tall,\n// centred, 8dp between items and 16dp of padding outside them. The two\n// colour schemes are its own too — standard on surface container, vibrant on\n// primary container — and both put the muted content role on what they hold.\n// `tone` spells the standard one `neutral` rather than by the page's name,\n// since that is the word every `tone` in the library uses for its neutral\n// role.\n//\n// Two things are this component's own.\n//\n// **A rule inside it runs across the row, not along it.** React Aria's\n// `Toolbar` sets its orientation on itself and nowhere else, so a\n// `Separator` written among the controls would draw the way it does anywhere\n// else — along the row, where it is invisible. This provides React Aria's\n// separator context with the perpendicular orientation, and `Separator`\n// reads it, so a rule between two controls is correct without the call site\n// saying which way it runs.\n//\n// **Arrow-key navigation is React Aria's and is not wrapped.** The arrows\n// move between the controls, and — worth knowing, since the pattern usually\n// implies otherwise — React Aria leaves every control tabbable rather than\n// giving the bar a roving tabindex, so Tab still steps through them one by\n// one. What the bar adds is the toolbar role, which tells a screen reader\n// the controls belong together, and a second way to move between them.\n//\n// One departure, and it is about the shape. The page gives the container's\n// corner as a token its widget draws rather than writes, so there is no\n// value to read: what it states in words is the height, the alignment and\n// the padding, and nothing else. The fully rounded corner here, and the\n// inline box that goes with it, are the library's own choice for a bar that\n// floats over a page rather than docking to its edge — a docked one spans\n// its container and squares its corner, both from the call site.\n\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x1dkaolv\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    k1xSpc: \"x3nfvp2\",\n    kOIVth: \"x126z3so\",\n    kjj79g: \"xl56j7k\",\n    k3XXqK: \"x1t137rt\",\n    $$css: true\n  },\n  horizontal: {\n    kXwgrk: \"x1q0g3np\",\n    kAzted: \"x8nclml\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  neutral: {\n    kWkggS: \"x1mjdul6\",\n    $$css: true\n  },\n  vertical: {\n    kXwgrk: \"xdt5ytf\",\n    k7Eaqz: \"x4m7ku4\",\n    k8WAf4: \"xp6hjv6\",\n    kg3NbH: \"xn60lsn\",\n    $$css: true\n  },\n  vibrant: {\n    kWkggS: \"xp89om9\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  }\n};\ntype ToolbarProps = Omit<RACToolbarProps, 'children' | 'className' | 'style'> & {\n  /** The controls, and any rule between them. */\n  children?: ReactNode;\n  /** A function may compute the class from the toolbar's render state. */\n  className?: RACToolbarProps['className'];\n  /** A function may compute the style from the toolbar's render state. */\n  style?: RACToolbarProps['style'];\n  /**\n   * Which of the page's two colour schemes the bar takes. `neutral` is the\n   * page's standard scheme, the surface container it draws by default;\n   * `vibrant` moves it to primary container, for a bar meant to carry the\n   * page's accent.\n   * @default 'neutral'\n   */\n  tone?: ToolbarTone;\n};\ntype ToolbarTone = 'neutral' | 'vibrant';\n\n/**\n * A container for a set of controls, announced as a toolbar so a screen\n * reader reads them as one group, with the arrow keys moving between them.\n * Tab still steps through each control: React Aria's toolbar adds the arrows\n * rather than replacing what Tab does.\n *\n * ```tsx\n * <Toolbar aria-label=\"Label\">\n *   <IconButton aria-label=\"First item\">\n *     <FirstIcon />\n *   </IconButton>\n *   <Separator />\n *   <IconButton aria-label=\"Second item\">\n *     <SecondIcon />\n *   </IconButton>\n * </Toolbar>\n * ```\n *\n * Name it with `aria-label` or `aria-labelledby` — nothing here labels it for\n * you, and a toolbar with no name is a group a screen reader cannot announce.\n *\n * `orientation` is React Aria's, and it decides both which arrows move and\n * which way the bar runs. A `Separator` inside draws across that direction\n * without being told.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction Toolbar({\n  orientation = 'horizontal',\n  tone = 'neutral',\n  ...props\n}: ToolbarProps) {\n  // The rule runs across the toolbar rather than along it. Memoised because\n  // a fresh object here would be a new context value on every render, which\n  // is what react-perf's no-new-object-as-prop is after.\n  const separator = useMemo<SeparatorProps>(() => ({\n    orientation: orientation === 'horizontal' ? 'vertical' : 'horizontal'\n  }), [orientation]);\n  return <SeparatorContext value={separator}>\n      <RACToolbar orientation={orientation} {...props} {...mergeStatefulStyles(stylex.props(styles.base, styles[orientation], styles[tone]), props)} />\n    </SeparatorContext>;\n}\nexport type { ToolbarProps, ToolbarTone };\nexport default Toolbar;"],"mappings":";;;;;;;AAgDA,MAAMa,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,YAAY;EACVC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAM,SAAS;EACPC,QAAQ;EACRP,OAAO;CACT;CACAQ,UAAU;EACRN,QAAQ;EACRO,QAAQ;EACRL,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAU,SAAS;EACPH,QAAQ;EACRZ,QAAQ;EACRK,OAAO;CACT;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,SAAAjB,UAAAkC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAP,EAAA,OAAAD,IAAA;EAAiB,MAAA,EAAAS,aAAAC,IAAAZ,MAAAa,IAAA,GAAAC,YAAAZ;EACf,MAAAS,cAAAC,OAAAG,KAAAA,IAAA,eAAAH;EACA,MAAAZ,OAAAa,OAAAE,KAAAA,IAAA,YAAAF;EAOe,MAAAG,KAAAL,gBAAgB,eAAhB,aAAA;EAAwD,IAAAM;EAAA,IAAAd,EAAA,OAAAa,IAAA;GADtBC,KAAA,EAAAN,aAClCK,GACf;GAACb,EAAA,KAAAa;GAAAb,EAAA,KAAAc;EAAA,OAAAA,KAAAd,EAAA;EAFD,MAAAe,YAAiDD;EAGzCX,KAAApC;EAAwBgD,KAAAA;EAC3Bb,KAAApC;EAAwB0C,KAAAA;EAAiBG,KAAAA;EAAWL,KAAAtC,oBAAoBL,MAAaS,OAAMC,MAAOD,OAAOoC,cAAcpC,OAAOyB,KAAK,GAAGc,OAAK;EAACX,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;CAAA,OAAA;EAAAL,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;EAAAO,KAAAP,EAAA;CAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAE,MAAAF,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,MAAAL,EAAA,QAAAM,IAAA;EAA7IG,KAAA,oBAAC,IAAD;GAAyBD,aAAAA;GAAW,GAAMG;GAAK,GAAML;EAAwF,CAAA;EAAIN,EAAA,KAAAE;EAAAF,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,QAAAG,MAAAH,EAAA,QAAAO,MAAAP,EAAA,QAAAS,IAAA;EAD9IC,KAAA,oBAAC,IAAD;GAAyBK,OAAAA;GAC5BN,UAAAA;EADoB,CAAA;EAEHT,EAAA,MAAAG;EAAAH,EAAA,MAAAO;EAAAP,EAAA,MAAAS;EAAAT,EAAA,MAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,OAFdU;AAEc"}

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

@@ -1,7 +1,8 @@
+import { OverlayAlign, OverlaySide } from "../../styles/overlay.js";
 import { ReactNode } from "react";
 import { ClassNameOrFunction, StyleOrFunction, TooltipRenderProps, TooltipTriggerComponentProps } from "react-aria-components";
 //#region src/components/tooltip/index.d.ts
-type TooltipAlign = 'center' | 'end' | 'start';
+type TooltipAlign = OverlayAlign;
 type TooltipProps = {
   /**
    * Where the tooltip sits along the side it opens on.
@@ -40,7 +41,7 @@ type TooltipProps = {
   /** A function may compute the style from the tooltip's render state. */
   style?: StyleOrFunction<TooltipRenderProps>;
 } & Omit<TooltipTriggerComponentProps, 'children'>;
-type TooltipSide = 'bottom' | 'left' | 'right' | 'top';
+type TooltipSide = OverlaySide;
 /**
  * A label for the element it wraps, shown while that element is hovered or
  * focused — the tooltips page's plain tooltip. Its open state is React

package/dist/components/tooltip/index.js

@@ -1,6 +1,6 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
-import { overlay, popupOrigin } from "../../styles/overlay.js";
+import { overlay, placementOf, popupOrigin } from "../../styles/overlay.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip, TooltipTrigger } from "react-aria-components";
@@ -22,11 +22,6 @@ const styles = { container: {
 	$$css: true
 } };
 const DEFAULT_SIDE_OFFSET = 8;
-function placementOf(side, align) {
-	if (align === "center") return side;
-	if (side === "top" || side === "bottom") return `${side} ${align}`;
-	return `${side} ${align === "start" ? "top" : "bottom"}`;
-}
 /**
 * A label for the element it wraps, shown while that element is hovered or
 * focused — the tooltips page's plain tooltip. Its open state is React

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ClassNameOrFunction","StyleOrFunction","TooltipRenderProps","TooltipTriggerComponentProps","stylex","Tooltip","RACTooltip","TooltipTrigger","mergeStatefulStyles","overlay","popupOrigin","colors","radii","spacing","typography","styles","container","kWkggS","kaIpWk","kB7OPa","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","ks0D6T","kAzted","k8WAf4","kg3NbH","$$css","DEFAULT_SIDE_OFFSET","TooltipAlign","TooltipProps","align","alignOffset","children","className","Element","label","side","TooltipSide","sideOffset","style","Omit","placementOf","const","t0","$","_c","props","t1","t2","t3","undefined","t4","t5","_temp","t6","t7","state","popup","placement"],"sources":["../../../src/components/tooltip/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ClassNameOrFunction, StyleOrFunction, TooltipRenderProps, TooltipTriggerComponentProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Tooltip as RACTooltip, TooltipTrigger } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay, popupOrigin } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// The tooltips page's plain tooltip: a 24dp container on inverse surface\n// with 8dp of padding, holding one line of supporting text in inverse on\n// surface at 12 over 16, which is the body-small role. The page names a\n// shape token for the container without giving its value, so the container\n// takes the smallest corner the library has — a 24dp box has room for no\n// more.\n//\n// The rich tooltip on the same page is a hover-triggered `Popover`, which is\n// where its subhead, supporting text and buttons already live; this one is\n// text and nothing else, which is why it takes its label as a string rather\n// than as parts.\n//\n// The entry is the overlay module's, shared with every anchored surface, and\n// so is the origin it grows from — the tooltip comes out of the thing it\n// describes. The surface itself is not: a tooltip inverts the page's colours\n// where a popover sits on a container role, so it draws its own.\nconst styles = {\n  container: {\n    kWkggS: \"x1c5gpgi\",\n    kaIpWk: \"x1tfhd1\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1girmi0\",\n    kMv6JI: \"x1yicsit\",\n    kGuDYH: \"x1b35g6e\",\n    k63SB2: \"x9d6959\",\n    kb6lSQ: \"xwth0xh\",\n    kLWn49: \"xybisxh\",\n    ks0D6T: \"x10u2fgw\",\n    kAzted: \"xjwf9q1\",\n    k8WAf4: \"xmqoko8\",\n    kg3NbH: \"xn60lsn\",\n    $$css: true\n  }\n};\n\n// The gap between the anchor and the tooltip. A number rather than a token,\n// because React Aria computes the position in JavaScript and so cannot read\n// a custom property — the same one place `Popover` spells a step out.\nconst DEFAULT_SIDE_OFFSET = 8;\ntype TooltipAlign = 'center' | 'end' | 'start';\ntype TooltipProps = {\n  /**\n   * Where the tooltip sits along the side it opens on.\n   * @default 'center'\n   */\n  align?: TooltipAlign;\n  /** Shifts the tooltip along that side, in pixels. */\n  alignOffset?: number;\n  /**\n   * The element the tooltip describes, and nothing else. It has to be able\n   * to take focus, since a tooltip a keyboard cannot reach is one most\n   * people never see — wrap anything that cannot in `Focusable`, which this\n   * package re-exports.\n   */\n  children?: ReactNode;\n  /** A function may compute the class from the tooltip's render state. */\n  className?: ClassNameOrFunction<TooltipRenderProps>;\n  /**\n   * Where to portal the tooltip. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the tooltip renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /** What the tooltip says. Text, since the page's plain tooltip is text. */\n  label: ReactNode;\n  /**\n   * Which side of the element the tooltip opens on. It flips to the opposite\n   * side on its own when there is no room.\n   * @default 'top'\n   */\n  side?: TooltipSide;\n  /** The gap between the element and the tooltip, in pixels. */\n  sideOffset?: number;\n  /** A function may compute the style from the tooltip's render state. */\n  style?: StyleOrFunction<TooltipRenderProps>;\n} & Omit<TooltipTriggerComponentProps, 'children'>;\ntype TooltipSide = 'bottom' | 'left' | 'right' | 'top';\n\n// React Aria names a placement by the side and, along it, the end the\n// tooltip is aligned to — the same mapping `Popover` makes, kept identical\n// so the two agree on what `side` and `align` mean.\nfunction placementOf(side: TooltipSide, align: TooltipAlign) {\n  if (align === 'center') {\n    return side;\n  }\n  if (side === 'top' || side === 'bottom') {\n    return `${side} ${align}` as const;\n  }\n  return `${side} ${align === 'start' ? 'top' : 'bottom'}` as const;\n}\n\n/**\n * A label for the element it wraps, shown while that element is hovered or\n * focused — the tooltips page's plain tooltip. Its open state is React\n * Aria's: pass `isOpen` with `onOpenChange` to control it, `defaultOpen` to\n * let it keep its own, and `delay` and `closeDelay` for how long a pointer\n * has to rest before it appears and after it leaves.\n *\n * A tooltip is not a place to put anything a person has to read or reach:\n * it is skipped by touch entirely and dismissed by Escape, so what it says\n * has to be a repeat of what the element already means. Anything with a\n * button in it, or worth reading twice, is a `Popover`.\n *\n * The call site's `className` and `style` land on the tooltip itself.\n */\nfunction Tooltip({\n  align = 'center',\n  alignOffset,\n  children,\n  className,\n  container,\n  label,\n  side = 'top',\n  sideOffset = DEFAULT_SIDE_OFFSET,\n  style,\n  ...props\n}: TooltipProps) {\n  return <TooltipTrigger {...props}>\n      {children}\n      <RACTooltip crossOffset={alignOffset} offset={sideOffset} placement={placementOf(side, align)}\n    // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n    UNSTABLE_portalContainer={container} {...mergeStatefulStyles((state: TooltipRenderProps) => stylex.props(overlay.popup, styles.container, popupOrigin(state.placement)), {\n      className,\n      style\n    })}>\n        {label}\n      </RACTooltip>\n    </TooltipTrigger>;\n}\nexport type { TooltipAlign, TooltipProps, TooltipSide };\nexport default Tooltip;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","ClassNameOrFunction","StyleOrFunction","TooltipRenderProps","TooltipTriggerComponentProps","stylex","Tooltip","RACTooltip","TooltipTrigger","OverlayAlign","OverlaySide","mergeStatefulStyles","overlay","placementOf","popupOrigin","colors","radii","spacing","typography","styles","container","kWkggS","kaIpWk","kB7OPa","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","ks0D6T","kAzted","k8WAf4","kg3NbH","$$css","DEFAULT_SIDE_OFFSET","TooltipAlign","TooltipProps","align","alignOffset","children","className","Element","label","side","TooltipSide","sideOffset","style","Omit","t0","$","_c","props","t1","t2","t3","undefined","t4","t5","_temp","t6","t7","state","popup","placement"],"sources":["../../../src/components/tooltip/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ClassNameOrFunction, StyleOrFunction, TooltipRenderProps, TooltipTriggerComponentProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Tooltip as RACTooltip, TooltipTrigger } from 'react-aria-components';\nimport type { OverlayAlign, OverlaySide } from '../../styles/overlay';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay, placementOf, popupOrigin } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// The tooltips page's plain tooltip: a 24dp container on inverse surface\n// with 8dp of padding, holding one line of supporting text in inverse on\n// surface at 12 over 16, which is the body-small role. The page names a\n// shape token for the container without giving its value, so the container\n// takes the smallest corner the library has — a 24dp box has room for no\n// more.\n//\n// The rich tooltip on the same page is a hover-triggered `Popover`, which is\n// where its subhead, supporting text and buttons already live; this one is\n// text and nothing else, which is why it takes its label as a string rather\n// than as parts.\n//\n// The entry is the overlay module's, shared with every anchored surface, and\n// so is the origin it grows from — the tooltip comes out of the thing it\n// describes. The surface itself is not: a tooltip inverts the page's colours\n// where a popover sits on a container role, so it draws its own.\nconst styles = {\n  container: {\n    kWkggS: \"x1c5gpgi\",\n    kaIpWk: \"x1tfhd1\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1girmi0\",\n    kMv6JI: \"x1yicsit\",\n    kGuDYH: \"x1b35g6e\",\n    k63SB2: \"x9d6959\",\n    kb6lSQ: \"xwth0xh\",\n    kLWn49: \"xybisxh\",\n    ks0D6T: \"x10u2fgw\",\n    kAzted: \"xjwf9q1\",\n    k8WAf4: \"xmqoko8\",\n    kg3NbH: \"xn60lsn\",\n    $$css: true\n  }\n};\n\n// The gap between the anchor and the tooltip. A number rather than a token,\n// because React Aria computes the position in JavaScript and so cannot read\n// a custom property — the same one place `Popover` spells a step out.\nconst DEFAULT_SIDE_OFFSET = 8;\n\n// The overlay module's, since which side a surface opens on is the same\n// question for every anchored overlay, and `Popover` and `Menu` ask it\n// there too. Aliased rather than re-declared so the names a call site\n// imports stay this component's.\ntype TooltipAlign = OverlayAlign;\ntype TooltipProps = {\n  /**\n   * Where the tooltip sits along the side it opens on.\n   * @default 'center'\n   */\n  align?: TooltipAlign;\n  /** Shifts the tooltip along that side, in pixels. */\n  alignOffset?: number;\n  /**\n   * The element the tooltip describes, and nothing else. It has to be able\n   * to take focus, since a tooltip a keyboard cannot reach is one most\n   * people never see — wrap anything that cannot in `Focusable`, which this\n   * package re-exports.\n   */\n  children?: ReactNode;\n  /** A function may compute the class from the tooltip's render state. */\n  className?: ClassNameOrFunction<TooltipRenderProps>;\n  /**\n   * Where to portal the tooltip. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the tooltip renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /** What the tooltip says. Text, since the page's plain tooltip is text. */\n  label: ReactNode;\n  /**\n   * Which side of the element the tooltip opens on. It flips to the opposite\n   * side on its own when there is no room.\n   * @default 'top'\n   */\n  side?: TooltipSide;\n  /** The gap between the element and the tooltip, in pixels. */\n  sideOffset?: number;\n  /** A function may compute the style from the tooltip's render state. */\n  style?: StyleOrFunction<TooltipRenderProps>;\n} & Omit<TooltipTriggerComponentProps, 'children'>;\ntype TooltipSide = OverlaySide;\n\n/**\n * A label for the element it wraps, shown while that element is hovered or\n * focused — the tooltips page's plain tooltip. Its open state is React\n * Aria's: pass `isOpen` with `onOpenChange` to control it, `defaultOpen` to\n * let it keep its own, and `delay` and `closeDelay` for how long a pointer\n * has to rest before it appears and after it leaves.\n *\n * A tooltip is not a place to put anything a person has to read or reach:\n * it is skipped by touch entirely and dismissed by Escape, so what it says\n * has to be a repeat of what the element already means. Anything with a\n * button in it, or worth reading twice, is a `Popover`.\n *\n * The call site's `className` and `style` land on the tooltip itself.\n */\nfunction Tooltip({\n  align = 'center',\n  alignOffset,\n  children,\n  className,\n  container,\n  label,\n  side = 'top',\n  sideOffset = DEFAULT_SIDE_OFFSET,\n  style,\n  ...props\n}: TooltipProps) {\n  return <TooltipTrigger {...props}>\n      {children}\n      <RACTooltip crossOffset={alignOffset} offset={sideOffset} placement={placementOf(side, align)}\n    // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n    UNSTABLE_portalContainer={container} {...mergeStatefulStyles((state: TooltipRenderProps) => stylex.props(overlay.popup, styles.container, popupOrigin(state.placement)), {\n      className,\n      style\n    })}>\n        {label}\n      </RACTooltip>\n    </TooltipTrigger>;\n}\nexport type { TooltipAlign, TooltipProps, TooltipSide };\nexport default Tooltip;"],"mappings":"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"}