@kanso-labs/kanso-ui 0.40.6 → 0.40.8

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","Ref","RefAttributes","ButtonRenderProps","NumberFieldProps","RACNumberFieldProps","stylex","Button","RACButton","NumberField","RACNumberField","FieldVariant","FieldBox","FieldInput","FieldMessage","fieldStyles","invalidFrom","useFieldValidationBehavior","MinusGlyph","PlusGlyph","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","typography","IconButton","BOX_HALF","sm","bodySmallLineHeight","bodyLargeLineHeight","BOX_OUTLINED_HALF","lg","styles","stepper","k6CgDc","kGNEyG","kWkggS","kZKoxP","kaIpWk","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kzqmXN","kjj79g","kjBf7l","kInvED","k3XXqK","kMeerF","kmVPX3","kIyJzY","k1ekBW","kAMwcw","$$css","stepperBottomOutlined","kT0f0o","stepperDisabled","stepperFocused","stepperHovered","stepperOutlined","stepperPressed","stepperTop","kfmiAY","decrementLabel","description","error","floatingLabel","incrementLabel","inputRef","HTMLInputElement","label","numeric","steppers","variant","Omit","t0","$","t1","isDisabled","t2","t3","t4","t5","props","undefined","inline","validationBehavior","T0","t6","t7","root","t8","Symbol","for","0","className","1","t9","t10","t11","2","3","t12","t13","t14","t15","t16","isRequired","t17","t18","StackedStepper","children","outlined","slot","stepperStyles","top","state","isHovered","isPressed","isFocusVisible","NumberField","_c","props","RACNumberField","stylex.props","RACButton"],"sources":["../../../src/components/number-field/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, Ref, RefAttributes } from 'react';\nimport type { ButtonRenderProps, NumberFieldProps as RACNumberFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, NumberField as RACNumberField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { MinusGlyph, PlusGlyph } from '../../glyphs';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport IconButton from '../icon-button';\n\n// The text fields page's field, holding a number: the same box, floating\n// label, underline and message as TextField, with the value in the mono\n// face and tabular figures by default, since a number is what those are\n// for, and two steppers at the trailing end.\n//\n// The steppers come in two layouts. Stacked, the plus over the minus, they\n// are a column flush with the box's top, end and bottom, each half of the\n// box's 56dp and 32dp wide, drawn here since the smallest icon button is\n// 32dp and two of those do not fit; the glyph is the icon buttons page's\n// 20dp for that size, and the hover, pressed, focus and disabled treatments\n// are the standard icon button's. Side by side, they are extra-small icon\n// buttons, the page's trailing icons in the library's own control, 12dp\n// from the end where the page puts a field's icons — the box's 16dp of\n// padding less the 4dp they pull back.\n//\n// **The stacked pair is the one control here that does not reach the 48dp\n// target**, and it is the layout rather than an oversight. Every other small\n// control in the library draws that target out of flow, over whatever sits\n// beside it — src/control/styles.ts carries the decision. These two have only\n// each other beside them: the column is 56dp tall in total, so two 48dp\n// targets inside it would overlap across most of their height, and the half\n// of a press that landed in the overlap would go to whichever box was\n// uppermost rather than to the glyph under the finger. Incrementing when a\n// reader meant to decrement is worse than a target that is short, so the\n// stacked layout keeps its 32 by 28 and the reader who needs the larger one\n// has `steppers=\"horizontal\"`, where each is an extra-small icon button and\n// gets the target from there — with the gap that keeps those two targets off\n// each other, which is the room the column has none of.\n//\n// React Aria's `NumberField` is the root and the box is its `Group`, which\n// is what names the box and the two steppers as one control; the steppers\n// are its increment and decrement buttons through context, disabled at the\n// ends of the range and kept out of the tab order, and the formatting is its\n// `formatOptions`.\n// Half the box, spelled from the same tokens the box derives its height\n// from rather than as the 28 that half of 56 comes to. A theme with a longer\n// body line makes the box taller — `Editorial` in src/theming/themes.ts does\n// — and a stated half leaves the pair short of the bottom edge they are\n// flush with.\n//\n// Written here rather than imported from src/field/styles.ts, which spells\n// the same two expressions: the StyleX compiler resolves a constant across\n// files only out of a `.stylex.ts` module, the same reason that file gives\n// for re-declaring the forced-colours query. The two have to move together.\nconst BOX_HALF = `calc((2 * ${spacing.sm} + ${typography.bodySmallLineHeight} + ${typography.bodyLargeLineHeight}) / 2)`;\nconst BOX_OUTLINED_HALF = `calc((2 * ${spacing.lg} + ${typography.bodyLargeLineHeight}) / 2)`;\nconst styles = {\n  stepper: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1viytl0\",\n    kaIpWk: \"x2u8bby\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1td3qas\",\n    kjj79g: \"xl56j7k\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xs2xxs2\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  stepperBottomOutlined: {\n    kT0f0o: \"x4gcak0\",\n    $$css: true\n  },\n  stepperDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  stepperFocused: {\n    k3XXqK: \"xaatb59\",\n    $$css: true\n  },\n  stepperHovered: {\n    kWkggS: \"x14noynh\",\n    $$css: true\n  },\n  stepperOutlined: {\n    kZKoxP: \"x1o675yb\",\n    $$css: true\n  },\n  stepperPressed: {\n    kWkggS: \"x123fei2\",\n    $$css: true\n  },\n  stepperTop: {\n    kfmiAY: \"xirz1nw\",\n    $$css: true\n  }\n};\ntype NumberFieldProps = {\n  /**\n   * The name of the stepper that lowers the value, for a screen reader. Left\n   * out, React Aria names it in the reader's locale, followed by the field's\n   * own label — \"Decrease Quantity\" in English.\n   */\n  decrementLabel?: string;\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, the red underline, and\n   * `aria-invalid` all 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 a value, as the text fields page draws it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * The name of the stepper that raises the value, for a screen reader. Left\n   * out, React Aria names it in the reader's locale, followed by the field's\n   * own label — \"Increase Quantity\" in English.\n   */\n  incrementLabel?: string;\n  /**\n   * A ref to the field's own `<input>`, which is the element a call site moves\n   * focus to — after a server's error, say. `ref` is the field as a whole.\n   */\n  inputRef?: Ref<HTMLInputElement>;\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   * Renders the value in the mono face with tabular figures, for amounts and\n   * other numbers meant to be compared down a column. On by default, since a\n   * number field holds nothing else.\n   * @default true\n   */\n  numeric?: boolean;\n  /**\n   * How the two steppers sit at the end of the box: stacked, the plus over\n   * the minus, flush with the box's edge, or side by side as extra-small\n   * icon buttons.\n   * @default 'vertical'\n   */\n  steppers?: 'horizontal' | 'vertical';\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats — the text fields page's two fields.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACNumberFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n/**\n * A labelled number input with steppers. Its value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep\n * its own — and `onChange` is handed the number, `NaN` while the field is\n * empty. `minValue`, `maxValue` and `step` shape it, and `formatOptions`\n * says how it reads, in the locale the page is in: a currency, a percentage,\n * a unit. Arrow keys step the value, and Page Up and Page Down by ten steps.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions. The box, label, input and message\n * are the field chrome in `src/field`, shared with every other field.\n */\nfunction NumberField({\n  decrementLabel,\n  description,\n  error,\n  floatingLabel = true,\n  incrementLabel,\n  inputRef,\n  isDisabled = false,\n  label,\n  numeric = true,\n  steppers = 'vertical',\n  variant = 'filled',\n  ...props\n}: NumberFieldProps & RefAttributes<HTMLDivElement>) {\n  const inline = steppers === 'horizontal';\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACNumberField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel} isRequired={props.isRequired} label={label} variant={variant}>\n        <div {...{\n        0: {\n          className: \"x1cy8zhl x9f619 x78zum5 x126z3so\"\n        },\n        1: {\n          className: \"x9f619 x78zum5 x126z3so x6s0dn4\"\n        }\n      }[!!inline << 0]}>\n          <FieldInput numeric={numeric} ref={inputRef} />\n          <div {...{\n          0: {\n            className: \"x78zum5 xdt5ytf x2lah0s x1motrhk xk4mfur\"\n          },\n          2: {\n            className: \"x78zum5 x2lah0s x1q0g3np x126z3so xdj266r x1tn5xpv\"\n          },\n          1: {\n            className: \"x78zum5 xdt5ytf x2lah0s xk4mfur x17v9ssf\"\n          },\n          3: {\n            className: \"x78zum5 x2lah0s x1q0g3np x126z3so x1tn5xpv x17v9ssf\"\n          }\n        }[!!inline << 1 | !!(!inline && variant === 'outlined') << 0]}>\n            {inline ? <>\n                <IconButton aria-label={decrementLabel} size=\"xs\" slot=\"decrement\">\n                  <MinusGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n                </IconButton>\n                <IconButton aria-label={incrementLabel} size=\"xs\" slot=\"increment\">\n                  <PlusGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n                </IconButton>\n              </> : <>\n                <StackedStepper label={incrementLabel} outlined={variant === 'outlined'} slot=\"increment\">\n                  <PlusGlyph className=\"x1qx5ct2 x1lliihq xw4jnvo\" />\n                </StackedStepper>\n                <StackedStepper label={decrementLabel} outlined={variant === 'outlined'} slot=\"decrement\">\n                  <MinusGlyph className=\"x1qx5ct2 x1lliihq xw4jnvo\" />\n                </StackedStepper>\n              </>}\n          </div>\n        </div>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACNumberField>;\n}\nfunction StackedStepper({\n  children,\n  label,\n  outlined,\n  slot\n}: {\n  children: ReactNode;\n  label: string | undefined;\n  outlined: boolean;\n  slot: 'decrement' | 'increment';\n}) {\n  return <RACButton aria-label={label} slot={slot} {...mergeStatefulStyles(stepperStyles(slot === 'increment', outlined), {})}>\n      {children}\n    </RACButton>;\n}\n\n// A stacked stepper: React Aria's button with the slot the field's context\n// looks for, drawn from its render state. Built by a call rather than\n// written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after.\nfunction stepperStyles(top: boolean, outlined: boolean) {\n  return (state: ButtonRenderProps) => stylex.props(styles.stepper, outlined && styles.stepperOutlined, top && styles.stepperTop, !top && outlined && styles.stepperBottomOutlined, state.isHovered && !state.isDisabled && styles.stepperHovered, state.isPressed && !state.isDisabled && styles.stepperPressed, state.isFocusVisible && styles.stepperFocused, state.isDisabled && styles.stepperDisabled);\n}\nexport type { NumberFieldProps };\nexport default NumberField;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","Ref","RefAttributes","ButtonRenderProps","NumberFieldProps","RACNumberFieldProps","stylex","Button","RACButton","NumberField","RACNumberField","FieldVariant","FieldBox","FieldInput","FieldMessage","fieldStyles","invalidFrom","useFieldValidationBehavior","MinusGlyph","PlusGlyph","mergeStatefulStyles","colors","motion","radii","sizing","spacing","stateLayerOpacity","typography","IconButton","BOX_HALF","sm","bodySmallLineHeight","bodyLargeLineHeight","BOX_OUTLINED_HALF","lg","STEPPER_REACH","controlXs","STACKED_INSET","INLINE_INSET","md","styles","stepper","k6CgDc","kGNEyG","kWkggS","kZKoxP","kaIpWk","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kzqmXN","kjj79g","kjBf7l","kInvED","k3XXqK","kMeerF","kmVPX3","kIyJzY","k1ekBW","kAMwcw","$$css","stepperBottomOutlined","kT0f0o","stepperDisabled","stepperFocused","stepperHovered","stepperOutlined","stepperPressed","stepperTop","kfmiAY","decrementLabel","description","error","floatingLabel","incrementLabel","inputRef","HTMLInputElement","isWheelDisabled","label","numeric","steppers","variant","Omit","t0","$","t1","isDisabled","t2","t3","t4","t5","t6","props","undefined","inline","validationBehavior","T0","t7","t8","root","t9","t10","Symbol","for","0","className","1","t11","t12","t13","2","3","t14","t15","t16","t17","t18","isRequired","t19","t20","StackedStepper","children","outlined","slot","stepperStyles","top","state","isHovered","isPressed","isFocusVisible","NumberField","_c","props","RACNumberField","stylex.props","RACButton"],"sources":["../../../src/components/number-field/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, Ref, RefAttributes } from 'react';\nimport type { ButtonRenderProps, NumberFieldProps as RACNumberFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, NumberField as RACNumberField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { MinusGlyph, PlusGlyph } from '../../glyphs';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport IconButton from '../icon-button';\n\n// The text fields page's field, holding a number: the same box, floating\n// label, underline and message as TextField, with the value in the mono\n// face and tabular figures by default, since a number is what those are\n// for, and two steppers at the trailing end.\n//\n// The steppers come in two layouts. Stacked, the plus over the minus, they\n// are a column flush with the box's top, end and bottom, each half of the\n// box's 56dp and 32dp wide, drawn here since the smallest icon button is\n// 32dp and two of those do not fit; the glyph is the icon buttons page's\n// 20dp for that size, and the hover, pressed, focus and disabled treatments\n// are the standard icon button's. Side by side, they are extra-small icon\n// buttons, the page's trailing icons in the library's own control, 12dp\n// from the end where the page puts a field's icons — the box's 16dp of\n// padding less the 4dp they pull back.\n//\n// **The stacked pair is the one control here that does not reach the 48dp\n// target**, and it is the layout rather than an oversight. Every other small\n// control in the library draws that target out of flow, over whatever sits\n// beside it — src/control/styles.ts carries the decision. These two have only\n// each other beside them: the column is 56dp tall in total, so two 48dp\n// targets inside it would overlap across most of their height, and the half\n// of a press that landed in the overlap would go to whichever box was\n// uppermost rather than to the glyph under the finger. Incrementing when a\n// reader meant to decrement is worse than a target that is short, so the\n// stacked layout keeps its 32 by 28 and the reader who needs the larger one\n// has `steppers=\"horizontal\"`, where each is an extra-small icon button and\n// gets the target from there — with the gap that keeps those two targets off\n// each other, which is the room the column has none of.\n//\n// React Aria's `NumberField` is the root and the box is its `Group`, which\n// is what names the box and the two steppers as one control; the steppers\n// are its increment and decrement buttons through context, disabled at the\n// ends of the range and kept out of the tab order, and the formatting is its\n// `formatOptions`.\n// Half the box, spelled from the same tokens the box derives its height\n// from rather than as the 28 that half of 56 comes to. A theme with a longer\n// body line makes the box taller — `Editorial` in src/theming/themes.ts does\n// — and a stated half leaves the pair short of the bottom edge they are\n// flush with.\n//\n// Written here rather than imported from src/field/styles.ts, which spells\n// the same two expressions: the StyleX compiler resolves a constant across\n// files only out of a `.stylex.ts` module, the same reason that file gives\n// for re-declaring the forced-colours query. The two have to move together.\nconst BOX_HALF = `calc((2 * ${spacing.sm} + ${typography.bodySmallLineHeight} + ${typography.bodyLargeLineHeight}) / 2)`;\nconst BOX_OUTLINED_HALF = `calc((2 * ${spacing.lg} + ${typography.bodyLargeLineHeight}) / 2)`;\n\n// How much of the end of the box's column the steppers take, with the 8dp\n// between them and the input, which the label stops short of — FieldBox's\n// `endInset`. Without it the label ran the column's width, under the\n// steppers, and a long one was cut short beneath them. Each is the input's\n// own end, so the label ends where the value does.\n//\n// Stacked, the 32dp column less the 16dp of the box's padding it reaches\n// into; side by side, the two extra-small buttons and the 8dp between them,\n// less the 4dp they reach into the padding.\n// How far a side-by-side stepper reaches past the control's line above and\n// below it: a negative margin, half the difference between the two.\nconst STEPPER_REACH = `calc((${typography.bodyLargeLineHeight} - ${sizing.controlXs}) / 2)`;\nconst STACKED_INSET = `calc(32px - ${spacing.lg} + ${spacing.sm})`;\nconst INLINE_INSET = `calc(2 * ${sizing.controlXs} + ${spacing.sm} + ${spacing.md} - ${spacing.lg} + ${spacing.sm})`;\nconst styles = {\n  stepper: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1viytl0\",\n    kaIpWk: \"x2u8bby\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1td3qas\",\n    kjj79g: \"xl56j7k\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xs2xxs2\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  stepperBottomOutlined: {\n    kT0f0o: \"x4gcak0\",\n    $$css: true\n  },\n  stepperDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  stepperFocused: {\n    k3XXqK: \"xaatb59\",\n    $$css: true\n  },\n  stepperHovered: {\n    kWkggS: \"x14noynh\",\n    $$css: true\n  },\n  stepperOutlined: {\n    kZKoxP: \"x1o675yb\",\n    $$css: true\n  },\n  stepperPressed: {\n    kWkggS: \"x123fei2\",\n    $$css: true\n  },\n  stepperTop: {\n    kfmiAY: \"xirz1nw\",\n    $$css: true\n  }\n};\ntype NumberFieldProps = {\n  /**\n   * The name of the stepper that lowers the value, for a screen reader. Left\n   * out, React Aria names it in the reader's locale, followed by the field's\n   * own label — \"Decrease Quantity\" in English.\n   */\n  decrementLabel?: string;\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, the red underline, and\n   * `aria-invalid` all 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 a value, as the text fields page draws it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * The name of the stepper that raises the value, for a screen reader. Left\n   * out, React Aria names it in the reader's locale, followed by the field's\n   * own label — \"Increase Quantity\" in English.\n   */\n  incrementLabel?: string;\n  /**\n   * A ref to the field's own `<input>`, which is the element a call site moves\n   * focus to — after a server's error, say. `ref` is the field as a whole.\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * Whether the mouse wheel and a trackpad's scroll leave the value alone.\n   * React Aria steps a focused number field's value with the wheel, so a\n   * reader scrolling a long form past a field they had left focused changed\n   * its value instead of moving the page. Stepping from the wheel is the\n   * call site's to ask for, with `false`.\n   * @default true\n   */\n  isWheelDisabled?: 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   * Renders the value in the mono face with tabular figures, for amounts and\n   * other numbers meant to be compared down a column. On by default, since a\n   * number field holds nothing else.\n   * @default true\n   */\n  numeric?: boolean;\n  /**\n   * How the two steppers sit at the end of the box: stacked, the plus over\n   * the minus, flush with the box's edge, or side by side as extra-small\n   * icon buttons.\n   * @default 'vertical'\n   */\n  steppers?: 'horizontal' | 'vertical';\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats — the text fields page's two fields.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACNumberFieldProps, 'children' | 'isInvalid' | 'isWheelDisabled' | 'validationBehavior'>;\n\n/**\n * A labelled number input with steppers. Its value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep\n * its own — and `onChange` is handed the number, `NaN` while the field is\n * empty. `minValue`, `maxValue` and `step` shape it, and `formatOptions`\n * says how it reads, in the locale the page is in: a currency, a percentage,\n * a unit. Arrow keys step the value, and Page Up and Page Down by ten steps.\n * The mouse wheel scrolls the page past it rather than stepping it, unless\n * `isWheelDisabled` is `false`.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions. The box, label, input and message\n * are the field chrome in `src/field`, shared with every other field.\n */\nfunction NumberField({\n  decrementLabel,\n  description,\n  error,\n  floatingLabel = true,\n  incrementLabel,\n  inputRef,\n  isDisabled = false,\n  isWheelDisabled = true,\n  label,\n  numeric = true,\n  steppers = 'vertical',\n  variant = 'filled',\n  ...props\n}: NumberFieldProps & RefAttributes<HTMLDivElement>) {\n  const inline = steppers === 'horizontal';\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACNumberField isDisabled={isDisabled} isInvalid={invalidFrom(error)} isWheelDisabled={isWheelDisabled} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox endInset={inline ? INLINE_INSET : STACKED_INSET} floatingLabel={floatingLabel} isRequired={props.isRequired} label={label} variant={variant}>\n        <div {...{\n        0: {\n          className: \"x1cy8zhl x9f619 x78zum5 x126z3so\"\n        },\n        1: {\n          className: \"x9f619 x78zum5 x126z3so x6s0dn4\"\n        }\n      }[!!inline << 0]}>\n          <FieldInput numeric={numeric} ref={inputRef} />\n          <div {...{\n          0: {\n            className: \"x9f619 x78zum5 xdt5ytf x2lah0s x1motrhk xk4mfur\"\n          },\n          2: {\n            className: \"x9f619 x78zum5 x2lah0s x1q0g3np x126z3so x1jblbm6 x6rec7h x1tn5xpv\"\n          },\n          1: {\n            className: \"x9f619 x78zum5 xdt5ytf x2lah0s xk4mfur x17v9ssf\"\n          },\n          3: {\n            className: \"x9f619 x78zum5 x2lah0s x1q0g3np x126z3so x1jblbm6 x1tn5xpv x17v9ssf\"\n          }\n        }[!!inline << 1 | !!(!inline && variant === 'outlined') << 0]}>\n            {inline ? <>\n                <IconButton aria-label={decrementLabel} size=\"xs\" slot=\"decrement\">\n                  <MinusGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n                </IconButton>\n                <IconButton aria-label={incrementLabel} size=\"xs\" slot=\"increment\">\n                  <PlusGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n                </IconButton>\n              </> : <>\n                <StackedStepper label={incrementLabel} outlined={variant === 'outlined'} slot=\"increment\">\n                  <PlusGlyph className=\"x1qx5ct2 x1lliihq xw4jnvo\" />\n                </StackedStepper>\n                <StackedStepper label={decrementLabel} outlined={variant === 'outlined'} slot=\"decrement\">\n                  <MinusGlyph className=\"x1qx5ct2 x1lliihq xw4jnvo\" />\n                </StackedStepper>\n              </>}\n          </div>\n        </div>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACNumberField>;\n}\nfunction StackedStepper({\n  children,\n  label,\n  outlined,\n  slot\n}: {\n  children: ReactNode;\n  label: string | undefined;\n  outlined: boolean;\n  slot: 'decrement' | 'increment';\n}) {\n  return <RACButton aria-label={label} slot={slot} {...mergeStatefulStyles(stepperStyles(slot === 'increment', outlined), {})}>\n      {children}\n    </RACButton>;\n}\n\n// A stacked stepper: React Aria's button with the slot the field's context\n// looks for, drawn from its render state. Built by a call rather than\n// written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after.\nfunction stepperStyles(top: boolean, outlined: boolean) {\n  return (state: ButtonRenderProps) => stylex.props(styles.stepper, outlined && styles.stepperOutlined, top && styles.stepperTop, !top && outlined && styles.stepperBottomOutlined, state.isHovered && !state.isDisabled && styles.stepperHovered, state.isPressed && !state.isDisabled && styles.stepperPressed, state.isFocusVisible && styles.stepperFocused, state.isDisabled && styles.stepperDisabled);\n}\nexport type { NumberFieldProps };\nexport default NumberField;"],"mappings":"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"}

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

@@ -114,10 +114,10 @@ function groupContent(label, children, description, error, horizontal) {
 */
 function Radio(t0) {
 	const $ = c(13);
-	const { children, description, ...props$1 } = t0;
+	const { children, description, ...props$2 } = t0;
 	const ripple = useRipple();
 	const T0 = RadioField;
-	const t1 = mergeStatefulStyles(props(controlStyles.field), props$1);
+	const t1 = mergeStatefulStyles(props(controlStyles.field), props$2);
 	let t2;
 	if ($[0] !== children || $[1] !== ripple) {
 		t2 = buttonContent(children, ripple);
@@ -141,14 +141,14 @@ function Radio(t0) {
 		$[6] = t4;
 	} else t4 = $[6];
 	let t5;
-	if ($[7] !== T0 || $[8] !== props$1 || $[9] !== t1 || $[10] !== t3 || $[11] !== t4) {
+	if ($[7] !== T0 || $[8] !== props$2 || $[9] !== t1 || $[10] !== t3 || $[11] !== t4) {
 		t5 = /* @__PURE__ */ jsxs(T0, {
-			...props$1,
+			...props$2,
 			...t1,
 			children: [t3, t4]
 		});
 		$[7] = T0;
-		$[8] = props$1;
+		$[8] = props$2;
 		$[9] = t1;
 		$[10] = t3;
 		$[11] = t4;
@@ -169,7 +169,7 @@ function Radio(t0) {
 */
 function RadioGroup$1(t0) {
 	const $ = c(16);
-	const { children, description, error, label, orientation: t1, ...props$2 } = t0;
+	const { children, description, error, label, orientation: t1, ...props$1 } = t0;
 	const orientation = t1 === void 0 ? "vertical" : t1;
 	const validationBehavior = useFieldValidationBehavior();
 	const T0 = RadioGroup;
@@ -179,7 +179,7 @@ function RadioGroup$1(t0) {
 		$[0] = error;
 		$[1] = t2;
 	} else t2 = $[1];
-	const t3 = mergeStatefulStyles(props(groupStyles.root), props$2);
+	const t3 = mergeStatefulStyles(props(groupStyles.root), props$1);
 	const t4 = orientation === "horizontal";
 	let t5;
 	if ($[2] !== children || $[3] !== description || $[4] !== error || $[5] !== label || $[6] !== t4) {
@@ -192,18 +192,18 @@ function RadioGroup$1(t0) {
 		$[7] = t5;
 	} else t5 = $[7];
 	let t6;
-	if ($[8] !== T0 || $[9] !== orientation || $[10] !== props$2 || $[11] !== t2 || $[12] !== t3 || $[13] !== t5 || $[14] !== validationBehavior) {
+	if ($[8] !== T0 || $[9] !== orientation || $[10] !== props$1 || $[11] !== t2 || $[12] !== t3 || $[13] !== t5 || $[14] !== validationBehavior) {
 		t6 = /* @__PURE__ */ jsx(T0, {
 			isInvalid: t2,
 			orientation,
 			validationBehavior,
-			...props$2,
+			...props$1,
 			...t3,
 			children: t5
 		});
 		$[8] = T0;
 		$[9] = orientation;
-		$[10] = props$2;
+		$[10] = props$1;
 		$[11] = t2;
 		$[12] = t3;
 		$[13] = t5;

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

@@ -53,7 +53,14 @@ declare function SheetBody({ ref: callerRef, ...props }: HTMLAttributes<HTMLDivE
  * over it, and React Aria's popovers and menus draw above both.
  */
 declare function SheetContent({ children, className, container, defaultOpen, isDismissable, isKeyboardDismissDisabled, isOpen, onOpenChange, ref, style, ...props }: RefAttributes<HTMLDivElement> & SheetContentProps): import("react").JSX.Element;
-declare function SheetFooter(props: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): import("react").JSX.Element;
+/**
+ * The sheet's actions. The panel is pinned to the window's bottom edge in
+ * both presentations, so they sit on that edge, and a toast rises clear of
+ * them while the sheet is open rather than lying over its buttons. A side
+ * sheet's are included: the toast is centred in the window, and on any
+ * window narrower than about 1376px its 576 reach into the sheet's 400.
+ */
+declare function SheetFooter({ ref: callerRef, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): import("react").JSX.Element;
 /**
  * The bottom sheets page's drag handle: a short bar above the sheet's
  * content, saying the panel is a bottom sheet. Place it first inside

package/dist/components/sheet/index.js

@@ -3,6 +3,7 @@ import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeRefs } from "../../render/ref.js";
 import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
 import { overlay } from "../../styles/overlay.js";
+import { useHoldBottomEdge } from "../../hooks/useBottomEdge.js";
 import { useScrollable } from "../../hooks/useScrollable.js";
 import { c } from "react/compiler-runtime";
 import { useRef } from "react";
@@ -221,25 +222,40 @@ function SheetContent(t0) {
 	} else t7 = $[31];
 	return t7;
 }
-function SheetFooter(props) {
-	const $ = c(5);
-	let t0;
-	if ($[0] !== props) {
-		t0 = mergeStyles({ className: "x12smttz x13fuv20 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x1nhvcw1 x1qafhyn x8i8c5o x1clyivc xg0ps1x" }, props);
-		$[0] = props;
-		$[1] = t0;
-	} else t0 = $[1];
-	let t1;
-	if ($[2] !== props || $[3] !== t0) {
-		t1 = /* @__PURE__ */ jsx("div", {
+/**
+* The sheet's actions. The panel is pinned to the window's bottom edge in
+* both presentations, so they sit on that edge, and a toast rises clear of
+* them while the sheet is open rather than lying over its buttons. A side
+* sheet's are included: the toast is centred in the window, and on any
+* window narrower than about 1376px its 576 reach into the sheet's 400.
+*/
+function SheetFooter(t0) {
+	const $ = c(6);
+	const { ref: callerRef, ...props } = t0;
+	const ref = useRef(null);
+	useHoldBottomEdge(ref, true);
+	const t1 = callerRef ?? void 0;
+	let t2;
+	if ($[0] !== t1) {
+		t2 = mergeRefs(ref, t1);
+		$[0] = t1;
+		$[1] = t2;
+	} else t2 = $[1];
+	const merged = t2;
+	const t3 = mergeStyles({ className: "x12smttz x13fuv20 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x1nhvcw1 x1qafhyn x8i8c5o x1clyivc xg0ps1x" }, props);
+	let t4;
+	if ($[2] !== merged || $[3] !== props || $[4] !== t3) {
+		t4 = /* @__PURE__ */ jsx("div", {
 			...props,
-			...t0
+			ref: merged,
+			...t3
 		});
-		$[2] = props;
-		$[3] = t0;
-		$[4] = t1;
-	} else t1 = $[4];
-	return t1;
+		$[2] = merged;
+		$[3] = props;
+		$[4] = t3;
+		$[5] = t4;
+	} else t4 = $[5];
+	return t4;
 }
 /**
 * The bottom sheets page's drag handle: a short bar above the sheet's

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","HTMLAttributes","ReactNode","RefAttributes","ClassNameOrFunction","DialogProps","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","StyleOrFunction","stylex","useMemo","useRef","Dialog","DialogTrigger","Heading","Modal","ModalOverlay","useScrollable","mergeRefs","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","spacing","typography","FORCED_COLORS","slideInFromEnd","slideInFromStart","slideInFromBottom","styles","body","kB7OPa","k1xSpc","kXwgrk","kzQI83","kOIVth","kORKVm","k8WAf4","kg3NbH","$$css","SheetProps","Omit","children","Sheet","t0","$","props","t1","SheetBody","ref","callerRef","scrollable","undefined","t2","merged","t3","t4","modalBodyRing","t5","SheetContent","className","container","defaultOpen","isKeyboardDismissDisabled","isOpen","onOpenChange","style","isDismissable","Symbol","for","scrim","modalDialog","t6","t7","SheetFooter","SheetHandle","SheetHeader","SheetTitle","Body","Content","Footer","Handle","Header","Title","SheetContentProps","Pick","Element","SheetTitleProps","_c","props","stylex.props"],"sources":["../../../src/components/sheet/index.tsx"],"sourcesContent":["'use client';\n\nimport type { HTMLAttributes, ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, DialogProps, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useMemo, useRef } from 'react';\nimport { Dialog, DialogTrigger, Heading, Modal, ModalOverlay } from 'react-aria-components';\nimport { useScrollable } from '../../hooks/useScrollable';\nimport { mergeRefs } from '../../render/ref';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, motion, radii, shadows, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n// One component, two presentations. Above the medium breakpoint it is a side\n// sheet pinned to the inline end of the viewport; below it, the same panel\n// becomes a bottom sheet. That is the pairing the Material Design pages draw\n// rather than two components: a sheet that stayed on the right at 375px would\n// be a drawer covering the whole screen.\n//\n// The two differ in five things and no more: which edges they are pinned to,\n// which two corners are rounded, which axis they arrive along, how much of\n// the viewport they may take, and the drag handle, which is the bottom\n// sheets page's element alone. Everything inside the panel — the 24 of start\n// and end padding, the 12 between the header's elements, the actions area —\n// comes from the side sheets page and is drawn the same in both.\n\n// The side sheet arrives along the inline axis, and it takes two keyframes to\n// do that rather than one. Which edge the panel rests against is logical —\n// `insetInlineEnd` puts it on the right under a left-to-right document and on\n// the left under a right-to-left one — but `translateX` is physical and flips\n// with nothing. One keyframe would therefore have the panel arrive from the\n// far side of where it comes to rest under one of the two.\nconst slideInFromEnd = \"x17cjob-B\";\nconst slideInFromStart = \"x18x3npg-B\";\nconst slideInFromBottom = \"x15b941j-B\";\n\n// Entry only, so there is no exit animation to wait for and closing is\n// immediate: React Aria keeps a closing panel mounted only while an animation\n// is running on it, and finds none. See the comment on `SheetContent` for why\n// that is a design call rather than a limit of StyleX.\n//\n// React Aria's overlay is three nested elements — the scrim, the panel, and\n// the dialog inside it — so the styles are split the same way: the overlay\n// module's scrim on the first, `content` on the panel, its modal dialog style\n// on the element that carries the role. The scrim and that dialog style are\n// shared with every modal overlay; the panel is the sheet's own, since which\n// edge it is pinned to is what makes it a sheet.\nconst styles = {\n  body: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kOIVth: \"xxj4525\",\n    kORKVm: \"x1odjw0f\",\n    k8WAf4: \"xp6hjv6\",\n    kg3NbH: \"xg0ps1x\",\n    $$css: true\n  }\n};\ntype SheetProps = Omit<DialogTriggerProps, 'children'> & {\n  children?: ReactNode;\n};\n\n/**\n * A modal panel that arrives from the edge of the screen — a side sheet on a\n * wide viewport, a bottom sheet on a narrow one. Open state is React Aria's:\n * pass `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it\n * keep its own.\n *\n * Composed rather than configured by props, because a sheet's header, body,\n * and footer all take arbitrary content — the parts are `Sheet.Content`,\n * `Sheet.Header`, `Sheet.Title`, `Sheet.Body`, and `Sheet.Footer`. A\n * `Button` or `IconButton` placed directly inside `Sheet` opens it, and one\n * given `slot=\"close\"` anywhere inside the content closes it; neither needs\n * a part of its own.\n *\n * `Sheet` is the trigger's half, so a sheet nothing on the page opens — one\n * a route shows, or a menu item raises — leaves it out and passes `isOpen`\n * and `onOpenChange` to `Sheet.Content` instead. Wrapped in `Sheet` with no\n * button inside it, React Aria warns that its press responder found nothing\n * to press.\n */\nfunction Sheet({\n  children,\n  ...props\n}: SheetProps) {\n  return <DialogTrigger {...props}>{children}</DialogTrigger>;\n}\nfunction SheetBody({\n  ref: callerRef,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  const ref = useRef<HTMLDivElement>(null);\n  // A body its content runs past is a tab stop, so a keyboard can scroll it\n  // when nothing inside it takes focus; a call site's own tabIndex still\n  // wins. See useScrollable.\n  const scrollable = useScrollable(ref);\n  // The body measures itself through its own ref, and the call site's lands\n  // on the same element.\n  const merged = useMemo(() => mergeRefs(ref, callerRef ?? undefined), [callerRef]);\n  return <div\n  // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- a scroll container with nothing focusable inside is otherwise out of a keyboard's reach, which axe's scrollable-region-focusable reports\n  tabIndex={scrollable ? 0 : undefined} {...props} ref={merged} {...mergeStyles(stylex.props(styles.body, overlay.modalBodyRing), props)} />;\n}\n\n/**\n * The panel itself, and the scrim behind it. Everything the sheet shows goes\n * in here; the trigger stays outside it, since the trigger lives in the page\n * while this is portalled out to the end of the body.\n *\n * A press on the scrim closes the sheet unless `isDismissable` says\n * otherwise — React Aria's own default is the reverse, and a sheet that\n * ignores a tap outside it reads as stuck.\n *\n * Inside `Sheet`, the open state is the trigger's. On its own, with no\n * trigger, it is this part's: `isOpen` with `onOpenChange` controls it, and\n * a `slot=\"close\"` button, Escape and the scrim all report through\n * `onOpenChange`, as they would to `Sheet`.\n *\n * The scrim draws at `z-index: 900`, over any page content layered below\n * that, such as a sticky header, and the panel draws inside it. A\n * `Snackbar` draws at 1000, so a toast raised from inside the sheet is read\n * over it, and React Aria's popovers and menus draw above both.\n */\nfunction SheetContent({\n  children,\n  className,\n  container,\n  defaultOpen,\n  isDismissable = true,\n  isKeyboardDismissDisabled,\n  isOpen,\n  onOpenChange,\n  ref,\n  style,\n  ...props\n}: RefAttributes<HTMLDivElement> & SheetContentProps) {\n  return <ModalOverlay defaultOpen={defaultOpen} isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled} isOpen={isOpen} onOpenChange={onOpenChange}\n  // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n  UNSTABLE_portalContainer={container} {...stylex.props(overlay.scrim)}>\n      <Modal\n    // The panel, where the call site's class and style land, rather than\n    // the dialog inside it, which takes the rest of the props.\n    ref={ref} {...mergeStatefulStyles({\n      className: \"x1n1nwrg x1u6grsq x1ioi8j8 xu2fq7p x18ihq2d x16dv9tl x1vnz5z6 x19dwuzr xuz63mn x1lym3mf xkducg2 xrzall9 xb0nsol xjslfuv x1gbqego x1cfajip xjg5lhu x1a37zkv xys6ro8 x6xk272 x9t1vth x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x1l2rt3b xwvxfow x1ey2m1c x13vifvy xmpip4z xtijo5x xhi6v0a x1upgybz x7ab17h x11ijow0 xb3r6kr x1a148e8 x1mrd0q x5ubeis x1lodr2j x1uhho1l x19b5e0v xg4bq00 xg4jtgg xsds98l xixxii4\"\n    }, {\n      className,\n      style\n    })}>\n        <Dialog {...props} {...stylex.props(overlay.modalDialog)}>\n          {children}\n        </Dialog>\n      </Modal>\n    </ModalOverlay>;\n}\nfunction SheetFooter(props: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x12smttz x13fuv20 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x1nhvcw1 x1qafhyn x8i8c5o x1clyivc xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * The bottom sheets page's drag handle: a short bar above the sheet's\n * content, saying the panel is a bottom sheet. Place it first inside\n * `Sheet.Content`; above the medium breakpoint the panel is a side sheet and\n * this draws nothing.\n *\n * It is decoration rather than a control, and hidden from assistive\n * technology. Material's own handle drags a sheet between a collapsed and an\n * expanded height and dismisses it from the collapsed one; this panel has\n * one height and cannot be dragged, so a control that only looked draggable\n * would promise what it cannot do. Closing is already the scrim, Escape, and\n * any button given `slot=\"close\"`.\n */\nfunction SheetHandle(props: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  return <div aria-hidden=\"true\" {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x1s85apg x37i4ze x2lah0s xl56j7k x1xg6qyv\"\n  }, props)}>\n      <span className=\"x1ccu2yh xwvh9j7 xqu0tyb x1dkaolv x9f619 x1g12otp x1td3qas\" />\n    </div>;\n}\nfunction SheetHeader(props: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 x1j6faob x1q0q8m5 xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib x1cmllll xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * Names the sheet. Rendered through React Aria's title slot, which is what\n * points the dialog's `aria-labelledby` at it — a sheet without one announces\n * itself as an unnamed dialog.\n */\nfunction SheetTitle(props: RefAttributes<HTMLHeadingElement> & SheetTitleProps) {\n  return <Heading slot=\"title\" {...props} {...mergeStyles({\n    className: \"x9f619 x1w5n3ug xdy5w5q xete2z3 x14ijtet xug9e1u x2divse x1ghz6dp\"\n  }, props)} />;\n}\nSheet.Body = SheetBody;\nSheet.Content = SheetContent;\nSheet.Footer = SheetFooter;\nSheet.Handle = SheetHandle;\nSheet.Header = SheetHeader;\nSheet.Title = SheetTitle;\n\n// The dialog's own props, plus the scrim's open state and dismissal settings\n// and the panel's styling. A call site has no reason to know there are three\n// elements: `className` and `style` reach the panel, which is the one worth\n// restyling and positioning, the open state and the dismissal settings reach\n// the scrim, and everything else lands on the dialog.\n//\n// `isDismissable` is declared here rather than picked with its siblings,\n// since the picked one carries React Aria's documentation, whose default is\n// the reverse of this component's.\ntype SheetContentProps = Omit<DialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'defaultOpen' | 'isKeyboardDismissDisabled' | 'isOpen' | 'onOpenChange'> & {\n  /** A function may compute the class from the panel's render state. */\n  className?: ClassNameOrFunction<ModalRenderProps>;\n  /**\n   * Where to portal the panel and scrim. Defaults to the container of the\n   * `ThemeScope` around it, which keeps the sheet on that scope's tokens, or\n   * to the end of `<body>` where there is none. A subtree themed through the\n   * `themeScope` class has no container of its own, so point this inside it,\n   * or the sheet renders outside and keeps the page's tokens.\n   */\n  container?: Element;\n  /**\n   * Whether a press on the scrim, outside the panel, closes the sheet.\n   * `true` here where React Aria's own default is `false`, since a sheet\n   * that ignores a tap outside it reads as stuck. Escape is\n   * `isKeyboardDismissDisabled`'s, and this says nothing about it.\n   * @default true\n   */\n  isDismissable?: boolean;\n  /** A function may compute the style from the panel's render state. */\n  style?: StyleOrFunction<ModalRenderProps>;\n};\ntype SheetTitleProps = HeadingProps;\nexport type { SheetContentProps, SheetProps, SheetTitleProps };\nexport { SheetBody, SheetContent, SheetFooter, SheetHandle, SheetHeader, SheetTitle };\nexport default Sheet;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","HTMLAttributes","ReactNode","RefAttributes","ClassNameOrFunction","DialogProps","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","StyleOrFunction","stylex","useMemo","useRef","Dialog","DialogTrigger","Heading","Modal","ModalOverlay","useHoldBottomEdge","useScrollable","mergeRefs","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","spacing","typography","FORCED_COLORS","slideInFromEnd","slideInFromStart","slideInFromBottom","styles","body","kB7OPa","k1xSpc","kXwgrk","kzQI83","kOIVth","kORKVm","k8WAf4","kg3NbH","$$css","SheetProps","Omit","children","Sheet","t0","$","props","t1","SheetBody","ref","callerRef","scrollable","undefined","t2","merged","t3","t4","modalBodyRing","t5","SheetContent","className","container","defaultOpen","isKeyboardDismissDisabled","isOpen","onOpenChange","style","isDismissable","Symbol","for","scrim","modalDialog","t6","t7","SheetFooter","SheetHandle","SheetHeader","SheetTitle","Body","Content","Footer","Handle","Header","Title","SheetContentProps","Pick","Element","SheetTitleProps","_c","props","stylex.props"],"sources":["../../../src/components/sheet/index.tsx"],"sourcesContent":["'use client';\n\nimport type { HTMLAttributes, ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, DialogProps, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useMemo, useRef } from 'react';\nimport { Dialog, DialogTrigger, Heading, Modal, ModalOverlay } from 'react-aria-components';\nimport { useHoldBottomEdge } from '../../hooks/useBottomEdge';\nimport { useScrollable } from '../../hooks/useScrollable';\nimport { mergeRefs } from '../../render/ref';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, motion, radii, shadows, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n// One component, two presentations. Above the medium breakpoint it is a side\n// sheet pinned to the inline end of the viewport; below it, the same panel\n// becomes a bottom sheet. That is the pairing the Material Design pages draw\n// rather than two components: a sheet that stayed on the right at 375px would\n// be a drawer covering the whole screen.\n//\n// The two differ in five things and no more: which edges they are pinned to,\n// which two corners are rounded, which axis they arrive along, how much of\n// the viewport they may take, and the drag handle, which is the bottom\n// sheets page's element alone. Everything inside the panel — the 24 of start\n// and end padding, the 12 between the header's elements, the actions area —\n// comes from the side sheets page and is drawn the same in both.\n\n// The side sheet arrives along the inline axis, and it takes two keyframes to\n// do that rather than one. Which edge the panel rests against is logical —\n// `insetInlineEnd` puts it on the right under a left-to-right document and on\n// the left under a right-to-left one — but `translateX` is physical and flips\n// with nothing. One keyframe would therefore have the panel arrive from the\n// far side of where it comes to rest under one of the two.\nconst slideInFromEnd = \"x17cjob-B\";\nconst slideInFromStart = \"x18x3npg-B\";\nconst slideInFromBottom = \"x15b941j-B\";\n\n// Entry only, so there is no exit animation to wait for and closing is\n// immediate: React Aria keeps a closing panel mounted only while an animation\n// is running on it, and finds none. See the comment on `SheetContent` for why\n// that is a design call rather than a limit of StyleX.\n//\n// React Aria's overlay is three nested elements — the scrim, the panel, and\n// the dialog inside it — so the styles are split the same way: the overlay\n// module's scrim on the first, `content` on the panel, its modal dialog style\n// on the element that carries the role. The scrim and that dialog style are\n// shared with every modal overlay; the panel is the sheet's own, since which\n// edge it is pinned to is what makes it a sheet.\nconst styles = {\n  body: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kOIVth: \"xxj4525\",\n    kORKVm: \"x1odjw0f\",\n    k8WAf4: \"xp6hjv6\",\n    kg3NbH: \"xg0ps1x\",\n    $$css: true\n  }\n};\ntype SheetProps = Omit<DialogTriggerProps, 'children'> & {\n  children?: ReactNode;\n};\n\n/**\n * A modal panel that arrives from the edge of the screen — a side sheet on a\n * wide viewport, a bottom sheet on a narrow one. Open state is React Aria's:\n * pass `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it\n * keep its own.\n *\n * Composed rather than configured by props, because a sheet's header, body,\n * and footer all take arbitrary content — the parts are `Sheet.Content`,\n * `Sheet.Header`, `Sheet.Title`, `Sheet.Body`, and `Sheet.Footer`. A\n * `Button` or `IconButton` placed directly inside `Sheet` opens it, and one\n * given `slot=\"close\"` anywhere inside the content closes it; neither needs\n * a part of its own.\n *\n * `Sheet` is the trigger's half, so a sheet nothing on the page opens — one\n * a route shows, or a menu item raises — leaves it out and passes `isOpen`\n * and `onOpenChange` to `Sheet.Content` instead. Wrapped in `Sheet` with no\n * button inside it, React Aria warns that its press responder found nothing\n * to press.\n */\nfunction Sheet({\n  children,\n  ...props\n}: SheetProps) {\n  return <DialogTrigger {...props}>{children}</DialogTrigger>;\n}\nfunction SheetBody({\n  ref: callerRef,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  const ref = useRef<HTMLDivElement>(null);\n  // A body its content runs past is a tab stop, so a keyboard can scroll it\n  // when nothing inside it takes focus; a call site's own tabIndex still\n  // wins. See useScrollable.\n  const scrollable = useScrollable(ref);\n  // The body measures itself through its own ref, and the call site's lands\n  // on the same element.\n  const merged = useMemo(() => mergeRefs(ref, callerRef ?? undefined), [callerRef]);\n  return <div\n  // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- a scroll container with nothing focusable inside is otherwise out of a keyboard's reach, which axe's scrollable-region-focusable reports\n  tabIndex={scrollable ? 0 : undefined} {...props} ref={merged} {...mergeStyles(stylex.props(styles.body, overlay.modalBodyRing), props)} />;\n}\n\n/**\n * The panel itself, and the scrim behind it. Everything the sheet shows goes\n * in here; the trigger stays outside it, since the trigger lives in the page\n * while this is portalled out to the end of the body.\n *\n * A press on the scrim closes the sheet unless `isDismissable` says\n * otherwise — React Aria's own default is the reverse, and a sheet that\n * ignores a tap outside it reads as stuck.\n *\n * Inside `Sheet`, the open state is the trigger's. On its own, with no\n * trigger, it is this part's: `isOpen` with `onOpenChange` controls it, and\n * a `slot=\"close\"` button, Escape and the scrim all report through\n * `onOpenChange`, as they would to `Sheet`.\n *\n * The scrim draws at `z-index: 900`, over any page content layered below\n * that, such as a sticky header, and the panel draws inside it. A\n * `Snackbar` draws at 1000, so a toast raised from inside the sheet is read\n * over it, and React Aria's popovers and menus draw above both.\n */\nfunction SheetContent({\n  children,\n  className,\n  container,\n  defaultOpen,\n  isDismissable = true,\n  isKeyboardDismissDisabled,\n  isOpen,\n  onOpenChange,\n  ref,\n  style,\n  ...props\n}: RefAttributes<HTMLDivElement> & SheetContentProps) {\n  return <ModalOverlay defaultOpen={defaultOpen} isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled} isOpen={isOpen} onOpenChange={onOpenChange}\n  // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n  UNSTABLE_portalContainer={container} {...stylex.props(overlay.scrim)}>\n      <Modal\n    // The panel, where the call site's class and style land, rather than\n    // the dialog inside it, which takes the rest of the props.\n    ref={ref} {...mergeStatefulStyles({\n      className: \"x1n1nwrg x1u6grsq x1ioi8j8 xu2fq7p x18ihq2d x16dv9tl x1vnz5z6 x19dwuzr xuz63mn x1lym3mf xkducg2 xrzall9 xb0nsol xjslfuv x1gbqego x1cfajip xjg5lhu x1a37zkv xys6ro8 x6xk272 x9t1vth x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x1l2rt3b xwvxfow x1ey2m1c x13vifvy xmpip4z xtijo5x xhi6v0a x1upgybz x7ab17h x11ijow0 xb3r6kr x1a148e8 x1mrd0q x5ubeis x1lodr2j x1uhho1l x19b5e0v xg4bq00 xg4jtgg xsds98l xixxii4\"\n    }, {\n      className,\n      style\n    })}>\n        <Dialog {...props} {...stylex.props(overlay.modalDialog)}>\n          {children}\n        </Dialog>\n      </Modal>\n    </ModalOverlay>;\n}\n\n/**\n * The sheet's actions. The panel is pinned to the window's bottom edge in\n * both presentations, so they sit on that edge, and a toast rises clear of\n * them while the sheet is open rather than lying over its buttons. A side\n * sheet's are included: the toast is centred in the window, and on any\n * window narrower than about 1376px its 576 reach into the sheet's 400.\n */\nfunction SheetFooter({\n  ref: callerRef,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  const ref = useRef<HTMLDivElement>(null);\n  useHoldBottomEdge(ref, true);\n  // The footer measures itself through its own ref, and the call site's\n  // lands on the same element.\n  const merged = useMemo(() => mergeRefs(ref, callerRef ?? undefined), [callerRef]);\n  return <div {...props} ref={merged} {...mergeStyles({\n    className: \"x12smttz x13fuv20 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x1nhvcw1 x1qafhyn x8i8c5o x1clyivc xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * The bottom sheets page's drag handle: a short bar above the sheet's\n * content, saying the panel is a bottom sheet. Place it first inside\n * `Sheet.Content`; above the medium breakpoint the panel is a side sheet and\n * this draws nothing.\n *\n * It is decoration rather than a control, and hidden from assistive\n * technology. Material's own handle drags a sheet between a collapsed and an\n * expanded height and dismisses it from the collapsed one; this panel has\n * one height and cannot be dragged, so a control that only looked draggable\n * would promise what it cannot do. Closing is already the scrim, Escape, and\n * any button given `slot=\"close\"`.\n */\nfunction SheetHandle(props: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  return <div aria-hidden=\"true\" {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x1s85apg x37i4ze x2lah0s xl56j7k x1xg6qyv\"\n  }, props)}>\n      <span className=\"x1ccu2yh xwvh9j7 xqu0tyb x1dkaolv x9f619 x1g12otp x1td3qas\" />\n    </div>;\n}\nfunction SheetHeader(props: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 x1j6faob x1q0q8m5 xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib x1cmllll xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * Names the sheet. Rendered through React Aria's title slot, which is what\n * points the dialog's `aria-labelledby` at it — a sheet without one announces\n * itself as an unnamed dialog.\n */\nfunction SheetTitle(props: RefAttributes<HTMLHeadingElement> & SheetTitleProps) {\n  return <Heading slot=\"title\" {...props} {...mergeStyles({\n    className: \"x9f619 x1w5n3ug xdy5w5q xete2z3 x14ijtet xug9e1u x2divse x1ghz6dp\"\n  }, props)} />;\n}\nSheet.Body = SheetBody;\nSheet.Content = SheetContent;\nSheet.Footer = SheetFooter;\nSheet.Handle = SheetHandle;\nSheet.Header = SheetHeader;\nSheet.Title = SheetTitle;\n\n// The dialog's own props, plus the scrim's open state and dismissal settings\n// and the panel's styling. A call site has no reason to know there are three\n// elements: `className` and `style` reach the panel, which is the one worth\n// restyling and positioning, the open state and the dismissal settings reach\n// the scrim, and everything else lands on the dialog.\n//\n// `isDismissable` is declared here rather than picked with its siblings,\n// since the picked one carries React Aria's documentation, whose default is\n// the reverse of this component's.\ntype SheetContentProps = Omit<DialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'defaultOpen' | 'isKeyboardDismissDisabled' | 'isOpen' | 'onOpenChange'> & {\n  /** A function may compute the class from the panel's render state. */\n  className?: ClassNameOrFunction<ModalRenderProps>;\n  /**\n   * Where to portal the panel and scrim. Defaults to the container of the\n   * `ThemeScope` around it, which keeps the sheet on that scope's tokens, or\n   * to the end of `<body>` where there is none. A subtree themed through the\n   * `themeScope` class has no container of its own, so point this inside it,\n   * or the sheet renders outside and keeps the page's tokens.\n   */\n  container?: Element;\n  /**\n   * Whether a press on the scrim, outside the panel, closes the sheet.\n   * `true` here where React Aria's own default is `false`, since a sheet\n   * that ignores a tap outside it reads as stuck. Escape is\n   * `isKeyboardDismissDisabled`'s, and this says nothing about it.\n   * @default true\n   */\n  isDismissable?: boolean;\n  /** A function may compute the style from the panel's render state. */\n  style?: StyleOrFunction<ModalRenderProps>;\n};\ntype SheetTitleProps = HeadingProps;\nexport type { SheetContentProps, SheetProps, SheetTitleProps };\nexport { SheetBody, SheetContent, SheetFooter, SheetHandle, SheetHeader, SheetTitle };\nexport default Sheet;"],"mappings":"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"}

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

@@ -114,6 +114,10 @@ declare class SnackbarQueue {
  *
  * The call site's `className` and `style` land on that region, which is the
  * element a layout positions.
+ *
+ * While a full-screen `Dialog` or a `Sheet` with a footer is open, the region
+ * rises to sit above those actions rather than over them, since they share
+ * the bottom edge of the window and the snackbar is drawn above both.
  */
 declare function Snackbar({ closeLabel, queue, ...props }: RefAttributes<HTMLDivElement> & SnackbarProps): import("react").JSX.Element;
 declare namespace Snackbar {

package/dist/components/snackbar/index.js

@@ -3,12 +3,18 @@ import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { CloseGlyph } from "../../glyphs/index.js";
 import { useRipple } from "../../hooks/useRipple.js";
+import { useBottomEdgeClearance } from "../../hooks/useBottomEdge.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button, Text, UNSTABLE_Toast, UNSTABLE_ToastContent, UNSTABLE_ToastQueue, UNSTABLE_ToastRegion } from "react-aria-components";
 //#region src/components/snackbar/index.tsx
 const MESSAGE_MS = 5e3;
 const UNTIL_CLOSED = 0;
+const _temp = {
+	krVfgx: "xiicpxy",
+	kGO01o: "xqf7pud",
+	"$$css": true
+};
 const styles = {
 	action: {
 		kMwMTN: "x16bex6i",
@@ -57,7 +63,26 @@ const styles = {
 	controlPressed: {
 		kWkggS: "xsykwg8",
 		$$css: true
-	}
+	},
+	region: {
+		kGNEyG: "x6s0dn4",
+		kB7OPa: "x9f619",
+		k1xSpc: "x78zum5",
+		kXwgrk: "xdt5ytf",
+		kOIVth: "x126z3so",
+		krVfgx: "x1ey2m1c",
+		kkqhue: "x17y0mx6",
+		k3XXqK: "x1t137rt",
+		kGO01o: "x1u7mh7p",
+		kLKAdn: "xi7mcox",
+		kE3dHu: "xbpsoft",
+		kpe85a: "xq5vm52",
+		kfzvcC: "x47corl",
+		kVAEAm: "xixxii4",
+		kY2c9j: "x1bk8fjm",
+		$$css: true
+	},
+	risen: (clearance) => [_temp, { "--x-insetBlockEnd": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(clearance) }]
 };
 /**
 * The queue a snackbar is shown from. Make one where the app can reach it —
@@ -135,61 +160,41 @@ function controlClassName(style) {
 *
 * The call site's `className` and `style` land on that region, which is the
 * element a layout positions.
+*
+* While a full-screen `Dialog` or a `Sheet` with a footer is open, the region
+* rises to sit above those actions rather than over them, since they share
+* the bottom edge of the window and the snackbar is drawn above both.
 */
 function Snackbar(t0) {
-	const $ = c(16);
-	let T0;
-	let closeLabel;
-	let queue;
-	let t1;
-	let t2;
+	const $ = c(9);
+	const { closeLabel, queue, ...props$1 } = t0;
+	const clearance = useBottomEdgeClearance();
+	const T0 = UNSTABLE_ToastRegion;
+	const t1 = queue.rac;
+	const t2 = mergeStatefulStyles(props(styles.region, clearance > 0 && styles.risen(`${clearance}px`)), props$1);
 	let t3;
-	if ($[0] !== t0) {
-		const { closeLabel: t4, queue: t5, ...props } = t0;
-		closeLabel = t4;
-		queue = t5;
-		T0 = UNSTABLE_ToastRegion;
-		t1 = queue.rac;
-		t2 = props;
-		t3 = mergeStatefulStyles({ className: "x6s0dn4 x9f619 x78zum5 xdt5ytf x126z3so x1ey2m1c x17y0mx6 x1t137rt x1u7mh7p xi7mcox xbpsoft xq5vm52 x47corl xixxii4 x1bk8fjm" }, props);
-		$[0] = t0;
-		$[1] = T0;
-		$[2] = closeLabel;
-		$[3] = queue;
-		$[4] = t1;
-		$[5] = t2;
-		$[6] = t3;
-	} else {
-		T0 = $[1];
-		closeLabel = $[2];
-		queue = $[3];
-		t1 = $[4];
-		t2 = $[5];
-		t3 = $[6];
-	}
+	if ($[0] !== closeLabel || $[1] !== queue) {
+		t3 = snackbarContent(queue, closeLabel);
+		$[0] = closeLabel;
+		$[1] = queue;
+		$[2] = t3;
+	} else t3 = $[2];
 	let t4;
-	if ($[7] !== closeLabel || $[8] !== queue) {
-		t4 = snackbarContent(queue, closeLabel);
-		$[7] = closeLabel;
-		$[8] = queue;
-		$[9] = t4;
-	} else t4 = $[9];
-	let t5;
-	if ($[10] !== T0 || $[11] !== t1 || $[12] !== t2 || $[13] !== t3 || $[14] !== t4) {
-		t5 = /* @__PURE__ */ jsx(T0, {
+	if ($[3] !== T0 || $[4] !== props$1 || $[5] !== queue.rac || $[6] !== t2 || $[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(T0, {
 			queue: t1,
+			...props$1,
 			...t2,
-			...t3,
-			children: t4
+			children: t3
 		});
-		$[10] = T0;
-		$[11] = t1;
-		$[12] = t2;
-		$[13] = t3;
-		$[14] = t4;
-		$[15] = t5;
-	} else t5 = $[15];
-	return t5;
+		$[3] = T0;
+		$[4] = props$1;
+		$[5] = queue.rac;
+		$[6] = t2;
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	return t4;
 }
 /**
 * One of the snackbar's two controls. React Aria's `Button` rather than the