@kanso-labs/kanso-ui 0.40.4 → 0.40.6

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","MouseEvent","ReactMouseEvent","ReactNode","PointerEvent","ReactPointerEvent","RefAttributes","SwitchFieldProps","RACSwitchFieldProps","SwitchButtonRenderProps","stylex","useCallback","useRef","useState","SwitchButton","SwitchField","ControlLabel","controlStyles","FieldMessage","invalidFrom","useFieldValidationBehavior","CheckGlyph","useRipple","focus","mergeStatefulStyles","colors","motion","radii","stateLayerOpacity","FORCED_COLORS","_temp","kLqNvP","styles","control","kgeoSG","kGOzcv","kpsdNU","kEoFBp","kGNEyG","kZKoxP","kB7OPa","kkrTdU","k1xSpc","kmuXW","kzqmXN","kjj79g","kVAEAm","$$css","handle","k6CgDc","kWkggS","kaIpWk","kMwMTN","kIyJzY","k1ekBW","kAMwcw","handleActive","handleDisabled","handleOn","handleOnActive","handleOnDisabled","handlePressed","layer","kpwlN0","seat","k87sOh","seatAt","offset","val","undefined","seatDraggable","kFalU9","seatDragging","seatOn","track","kVAM5u","ksu8eU","kMzoRj","trackDisabled","trackOn","trackOnDisabled","hoverLayers","off","on","focusLayers","pressedLayers","TRAVEL","DRAG_SLOP","Drag","ReturnType","useHandleDrag","Ripple","HTMLSpanElement","SwitchProps","children","description","error","icon","Omit","buttonContent","ripple","drag","state","interactive","isDisabled","isReadOnly","isSelected","dragging","active","isHovered","isPressed","isFocusVisible","props","controlReadOnly","controlDisabled","ringVisible","handlers","surface","Switch","t0","$","t1","validationBehavior","T0","t2","t3","field","t4","t5","t6","Symbol","for","messages","t7","t8","setOffset","origin","settled","cancelClick","current","onPointerCancel","event","preventDefault","stopPropagation","onClickCapture","event_0","from","along","rtl","x","clientX","Math","abs","next","min","max","base","onPointerMove","event_1","from_0","stopped","currentTarget","dispatchEvent","bubbles","pointerId","pointerType","input","closest","querySelector","click","onPointerUp","onPointerDown","event_2","button","getComputedStyle","direction","setPointerCapture","stylex.props","_c","props"],"sources":["../../../src/components/switch/index.tsx"],"sourcesContent":["'use client';\n\n// React's event types are aliased because `useHandleDrag` also constructs a\n// DOM `PointerEvent`. Imported unaliased, the name shadows that constructor:\n// TypeScript still resolves the call to the global, since a type-only import\n// takes no value name, but a reader and a static analyser alike read it as\n// React's type, which has no runtime value behind it at all.\nimport type { MouseEvent as ReactMouseEvent, ReactNode, PointerEvent as ReactPointerEvent, RefAttributes } from 'react';\nimport type { SwitchFieldProps as RACSwitchFieldProps, SwitchButtonRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useCallback, useRef, useState } from 'react';\nimport { SwitchButton, SwitchField } from 'react-aria-components';\nimport { ControlLabel } from '../../control';\nimport { controlStyles } from '../../control/styles';\nimport { FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CheckGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The switch page: a 52 by 32dp track with a 2dp outline and a full corner,\n// a handle that is 16dp off, 24dp on and 28dp while pressed, a 16dp icon in\n// the handle when asked for, a 40dp state layer around the handle and a 48dp\n// target. Off, the track is surface container highest inside an outline\n// rule and the handle is outline, turning on surface variant while hovered,\n// pressed or focused; on, the track is primary and the handle on primary,\n// turning primary container in the same states, with the icon in on primary\n// container. Disabled, the track and its rule are on surface at the\n// disabled container opacity and the handle on surface at the disabled\n// content opacity, or surface when on. The state layer is on surface off and\n// primary on.\n//\n// React Aria's `SwitchField` is the root, a div holding the description and\n// error slots; its `SwitchButton` is the label around a visually hidden\n// input, and everything drawn is that label's children, chosen from the\n// render state React Aria hands them. The field is the two-column grid the\n// checkbox uses, with the label `display: contents`, so the description and\n// error line up under the text.\n//\n// The handle travels between the two ends of the track and grows between\n// its three sizes on the same transition, `motion.durationShort2` with the\n// standard easing; the state layer and the ripple sit on a 40dp disc centred\n// on the handle, so they move with it. The adjacent label is body-large on\n// surface, which the page keeps the same whichever way the switch is.\n//\n// The page's pressed handle follows the pointer: it grows, travels with the\n// drag, and the switch flips when it is released past the middle of the\n// track or springs back when it is not. React Aria's `SwitchButton` has no\n// drag of its own, so the travel is this component's — see `useHandleDrag`.\n//\n// Under forced colours the switch names system colours for its fills. That\n// mode paints an author's fill in the page's own `Canvas`, so the handle\n// vanished and on and off drew the same empty pill; a system colour is kept\n// rather than repainted. Off is a `ButtonText` handle in an empty track with\n// a `ButtonText` rule. On is a `HighlightText` handle in a track filled with\n// `Highlight`, the pair the mode gives whatever is chosen, with the check in\n// `Highlight` over the handle. Disabled, the same shapes are `GrayText`, and\n// the handle of a switch that is on is emptied to `Canvas` so it still shows\n// against its track. Every style that sets a fill repeats its branch, since\n// one written without the query replaces the property whole, branch and all.\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)';\nconst _temp = {\n  kLqNvP: \"x1lxsm33\",\n  \"$$css\": true\n};\nconst styles = {\n  control: {\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"x1fb0czk\",\n    kpsdNU: \"xm4btww\",\n    kEoFBp: \"x1hmns74\",\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x1vqgdyp\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"xvni27\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  handle: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xp2scj5 x1tt9vl1\",\n    kZKoxP: \"xlup9mm\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"xscdzaa x6jt684\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1kky2od\",\n    kjj79g: \"xl56j7k\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x7okvu4\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  handleActive: {\n    kWkggS: \"x1ccu2yh x1tt9vl1\",\n    $$css: true\n  },\n  handleDisabled: {\n    kWkggS: \"x1crcgwy x1o55y2u\",\n    $$css: true\n  },\n  handleOn: {\n    kWkggS: \"x1ntwmx2 x1sir5s4\",\n    kZKoxP: \"xxk0z11\",\n    kzqmXN: \"xvy4d1p\",\n    $$css: true\n  },\n  handleOnActive: {\n    kWkggS: \"xp89om9 x1sir5s4\",\n    $$css: true\n  },\n  handleOnDisabled: {\n    kWkggS: \"x14s9m32 x9yvj25\",\n    kMwMTN: \"x1gpw424 x1bhcspo\",\n    $$css: true\n  },\n  handlePressed: {\n    kZKoxP: \"x1fgtraw\",\n    kzqmXN: \"xgd8bvy\",\n    $$css: true\n  },\n  layer: {\n    k6CgDc: \"x12w9bfk\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    kzqmXN: \"x100vrsf\",\n    kpwlN0: \"x1qx2jxi\",\n    kVAEAm: \"x10l6tqk\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x15406qy\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  seat: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x1fgtraw\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"xgd8bvy\",\n    k87sOh: \"x13vifvy\",\n    kLqNvP: \"x1o0tod\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x10l6tqk\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x2hifos\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  seatAt: (offset: number) => [_temp, {\n    \"--x-insetInlineStart\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(`${offset}px`)\n  }],\n  seatDraggable: {\n    kFalU9: \"x5ve5x3\",\n    $$css: true\n  },\n  seatDragging: {\n    kIyJzY: \"x1mq3mr6\",\n    $$css: true\n  },\n  seatOn: {\n    kLqNvP: \"x1n8ud3w\",\n    $$css: true\n  },\n  track: {\n    k6CgDc: \"x12w9bfk\",\n    kWkggS: \"x1rrhr5q x9yvj25\",\n    kZKoxP: \"x10w6t97\",\n    kVAM5u: \"x1fwvt7v x1ylmb6m\",\n    kaIpWk: \"x1dkaolv\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xdh2fpr\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"xvni27\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xts7igz\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  trackDisabled: {\n    kWkggS: \"x1trd85j x9yvj25\",\n    kVAM5u: \"xrh88j3 xmnqt3w\",\n    $$css: true\n  },\n  trackOn: {\n    kWkggS: \"xnety89 x1jzqe4\",\n    kVAM5u: \"x1uajy3w x1n2ykn\",\n    $$css: true\n  },\n  trackOnDisabled: {\n    kWkggS: \"x19v6zzp x1o55y2u\",\n    kVAM5u: \"x9r1u3d xmnqt3w\",\n    $$css: true\n  }\n};\n\n// The state layer over the handle: on surface while the switch is off and\n// primary while it is on, at the hover or the pressed opacity.\nconst hoverLayers = {\n  off: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  },\n  on: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  }\n};\n\n// A keyboard's focus draws the hover layer's colour at the focus opacity.\nconst focusLayers = {\n  off: {\n    kWkggS: \"xwqhyid\",\n    $$css: true\n  },\n  on: {\n    kWkggS: \"x1sog3nf\",\n    $$css: true\n  }\n};\nconst pressedLayers = {\n  off: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  on: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  }\n};\n\n// How far the seat travels: the track's 48dp inside its 2dp rule, less the\n// seat's own 28dp.\nconst TRAVEL = 20;\n\n// How far a press has to move before it is a drag: a quarter of the travel.\n// A finger, a mouse and a pen all move a pixel or two between pressing and\n// lifting, and a press inside this is still a tap, which flips the switch.\nconst DRAG_SLOP = TRAVEL / 4;\ntype Drag = ReturnType<typeof useHandleDrag>;\ntype Ripple = ReturnType<typeof useRipple<HTMLSpanElement>>;\ntype SwitchProps = {\n  /**\n   * The label, beside the switch. A switch that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  children?: ReactNode;\n  /**\n   * A hint under the label. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the switch in its error state — the message and `aria-invalid` follow\n   * 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   * Draws the check in the handle while the switch is on, the page's\n   * \"icon on selected switch\" form.\n   * @default false\n   */\n  icon?: boolean;\n} & Omit<RACSwitchFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n// What the label draws, chosen from the render state React Aria hands it.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs. The ripple's handlers and surface go on the\n// state layer while the switch can change, and are left off while it\n// cannot, since a press that changes nothing should not look like one.\nfunction buttonContent(children: ReactNode, icon: boolean, ripple: Ripple, drag: Drag) {\n  return (state: SwitchButtonRenderProps) => {\n    const interactive = !state.isDisabled && !state.isReadOnly;\n    const on = state.isSelected;\n    const dragging = interactive && drag.offset !== null;\n    const active = interactive && (state.isHovered || state.isPressed || state.isFocusVisible);\n    return <>\n        <span {...stylex.props(styles.control, state.isReadOnly && controlStyles.controlReadOnly, state.isDisabled && controlStyles.controlDisabled)}>\n          <span {...stylex.props(styles.track, on && styles.trackOn, state.isDisabled && (on ? styles.trackOnDisabled : styles.trackDisabled), state.isFocusVisible && focus.ringVisible)}>\n            <span {...interactive ? drag.handlers(on) : {}} {...stylex.props(styles.seat, on && styles.seatOn, interactive && styles.seatDraggable, dragging && styles.seatDragging, dragging && styles.seatAt(drag.offset ?? 0))}>\n              <span {...interactive ? ripple.handlers : {}} {...stylex.props(styles.layer, interactive && state.isHovered && hoverLayers[on ? 'on' : 'off'], interactive && state.isFocusVisible && focusLayers[on ? 'on' : 'off'], interactive && state.isPressed && pressedLayers[on ? 'on' : 'off'])}>\n                {interactive ? ripple.surface : null}\n              </span>\n              <span {...stylex.props(styles.handle, on && styles.handleOn, active && (on ? styles.handleOnActive : styles.handleActive), (dragging || interactive && state.isPressed) && styles.handlePressed, state.isDisabled && (on ? styles.handleOnDisabled : styles.handleDisabled))}>\n                {icon && on ? <CheckGlyph className=\"xlup9mm x1lliihq x1kky2od\" /> : null}\n              </span>\n            </span>\n          </span>\n        </span>\n        <ControlLabel state={state}>{children}</ControlLabel>\n      </>;\n  };\n}\n\n/**\n * A switch that turns a setting on or off, with its label and optionally a\n * description or an error under it. Its state is React Aria's: pass\n * `isSelected` with `onChange` to control it, or `defaultSelected` to let it\n * keep its own. A switch takes effect as it is flipped, which is what sets\n * it apart from a checkbox in a form.\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 Switch({\n  children,\n  description,\n  error,\n  icon = false,\n  ...props\n}: RefAttributes<HTMLDivElement> & SwitchProps) {\n  const ripple = useRipple<HTMLSpanElement>();\n  const drag = useHandleDrag();\n  const validationBehavior = useFieldValidationBehavior();\n  return <SwitchField isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(controlStyles.field), props)}>\n      <SwitchButton className=\"xjp7ctv\">\n        {buttonContent(children, icon, ripple, drag)}\n      </SwitchButton>\n      <div {...stylex.props(controlStyles.messages)}>\n        <FieldMessage description={description} error={error} inset={false} />\n      </div>\n    </SwitchField>;\n}\n\n/**\n * The handle following a pointer across the track, as the switch page draws\n * a pressed switch. The seat's inset comes from the drag while one is under\n * way, and the switch settles from where the handle was let go: on past the\n * middle of the track, off before it.\n *\n * What flips the switch on an ordinary tap is React Aria's own press, which\n * ends on the pointer being released and pays no attention to where the\n * handle was dragged to — so a drag has to end that press before releasing,\n * which is what the pointer cancel is for, and settle the switch itself.\n * Settling means clicking the field's own input, the same element a tap\n * reaches in the end: the change goes through React Aria, and a controlled\n * switch stays controlled, since nothing here calls `onChange` or holds any\n * state of the switch's own. The click the pointer's release sends after\n * that is cancelled too, so nothing flips the switch a second time.\n *\n * A press that moves no further than the slop is left alone entirely, so a\n * tap flips the switch however still the pointer was — a drag starts only\n * once the pointer passes it, and from then on the handle follows every move.\n *\n * The guard for the click after a drag is cleared by the next press, not by\n * that click, since the click may never come: a touch dragged past the\n * browser's own slop sends none, and a guard left armed swallowed the next\n * tap instead.\n */\nfunction useHandleDrag() {\n  const [offset, setOffset] = useState<null | number>(null);\n  const origin = useRef<null | {\n    base: number;\n    on: boolean;\n    rtl: boolean;\n    x: number;\n  }>(null);\n  const settled = useRef<null | number>(null);\n  const cancelClick = useRef(false);\n  const onPointerCancel = useCallback(() => {\n    origin.current = null;\n    settled.current = null;\n    setOffset(null);\n  }, []);\n  const onClickCapture = useCallback((event: ReactMouseEvent<HTMLSpanElement>) => {\n    if (!cancelClick.current) {\n      return;\n    }\n    cancelClick.current = false;\n    // The label's activation is the browser's own, so this is what stops the\n    // input being flipped by a drag that settled where it began.\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n  const onPointerMove = useCallback((event: ReactPointerEvent<HTMLSpanElement>) => {\n    const from = origin.current;\n    if (from === null) {\n      return;\n    }\n    const along = from.rtl ? from.x - event.clientX : event.clientX - from.x;\n    if (settled.current === null && Math.abs(along) <= DRAG_SLOP) {\n      return;\n    }\n    const next = Math.min(TRAVEL, Math.max(0, from.base + along));\n    settled.current = next;\n    setOffset(next);\n  }, []);\n  const onPointerUp = useCallback((event: ReactPointerEvent<HTMLSpanElement>) => {\n    const from = origin.current;\n    const stopped = settled.current;\n    const seat = event.currentTarget;\n    origin.current = null;\n    settled.current = null;\n    setOffset(null);\n    // A press that never moved is a tap, which React Aria flips on its own.\n    if (from === null || stopped === null) {\n      return;\n    }\n    // React Aria's press is about to flip the switch from wherever it\n    // started, so it is cancelled first — a pointer cancel is what ends a\n    // press without firing it — and the drag settles the switch instead.\n    seat.dispatchEvent(new PointerEvent('pointercancel', {\n      bubbles: true,\n      pointerId: event.pointerId,\n      pointerType: event.pointerType\n    }));\n    // The pointer's own click follows this, by which time the switch has\n    // already settled.\n    cancelClick.current = true;\n    if (stopped > TRAVEL / 2 === from.on) {\n      return;\n    }\n    const input = seat.closest('label')?.querySelector('input');\n    input?.click();\n  }, []);\n  const handlers = useCallback((on: boolean) => ({\n    onClickCapture,\n    onPointerCancel,\n    onPointerDown: (event: ReactPointerEvent<HTMLSpanElement>) => {\n      cancelClick.current = false;\n      if (event.pointerType === 'mouse' && event.button !== 0) {\n        return;\n      }\n      origin.current = {\n        base: on ? TRAVEL : 0,\n        on,\n        rtl: getComputedStyle(event.currentTarget).direction === 'rtl',\n        x: event.clientX\n      };\n      settled.current = null;\n      try {\n        event.currentTarget.setPointerCapture(event.pointerId);\n      } catch {\n        // A pointer the browser is not tracking has no capture to take —\n        // a synthetic event in a test, where the moves are dispatched on\n        // this element anyway.\n      }\n    },\n    onPointerMove,\n    onPointerUp\n  }), [onClickCapture, onPointerCancel, onPointerMove, onPointerUp]);\n  return {\n    handlers,\n    offset\n  };\n}\nexport type { SwitchProps };\nexport default Switch;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","MouseEvent","ReactMouseEvent","ReactNode","PointerEvent","ReactPointerEvent","RefAttributes","SwitchFieldProps","RACSwitchFieldProps","SwitchButtonRenderProps","stylex","useCallback","useRef","useState","SwitchButton","SwitchField","AccessibleName","ControlLabel","controlStyles","FieldMessage","invalidFrom","useFieldValidationBehavior","CheckGlyph","useRipple","focus","mergeStatefulStyles","colors","motion","radii","stateLayerOpacity","FORCED_COLORS","_temp","kLqNvP","styles","control","kgeoSG","kGOzcv","kpsdNU","kEoFBp","kGNEyG","kZKoxP","kB7OPa","kkrTdU","k1xSpc","kmuXW","kzqmXN","kjj79g","kVAEAm","$$css","handle","k6CgDc","kWkggS","kaIpWk","kMwMTN","kIyJzY","k1ekBW","kAMwcw","handleActive","handleDisabled","handleOn","handleOnActive","handleOnDisabled","handlePressed","layer","kpwlN0","seat","k87sOh","seatAt","offset","val","undefined","seatDraggable","kFalU9","seatDragging","seatOn","track","kVAM5u","ksu8eU","kMzoRj","trackDisabled","trackOn","trackOnDisabled","hoverLayers","off","on","focusLayers","pressedLayers","TRAVEL","DRAG_SLOP","Drag","ReturnType","useHandleDrag","Ripple","HTMLSpanElement","SwitchProps","children","description","error","icon","Omit","buttonContent","ripple","drag","state","interactive","isDisabled","isReadOnly","isSelected","dragging","active","isHovered","isPressed","isFocusVisible","props","controlReadOnly","controlDisabled","ringVisible","handlers","surface","Switch","t0","$","t1","validationBehavior","T0","t2","t3","field","t4","t5","t6","Symbol","for","messages","t7","t8","setOffset","origin","settled","cancelClick","current","onPointerCancel","event","preventDefault","stopPropagation","onClickCapture","event_0","from","along","rtl","x","clientX","Math","abs","next","min","max","base","onPointerMove","event_1","from_0","stopped","currentTarget","dispatchEvent","bubbles","pointerId","pointerType","input","closest","querySelector","click","onPointerUp","onPointerDown","event_2","button","getComputedStyle","direction","setPointerCapture","stylex.props","_c","props"],"sources":["../../../src/components/switch/index.tsx"],"sourcesContent":["'use client';\n\n// React's event types are aliased because `useHandleDrag` also constructs a\n// DOM `PointerEvent`. Imported unaliased, the name shadows that constructor:\n// TypeScript still resolves the call to the global, since a type-only import\n// takes no value name, but a reader and a static analyser alike read it as\n// React's type, which has no runtime value behind it at all.\nimport type { MouseEvent as ReactMouseEvent, ReactNode, PointerEvent as ReactPointerEvent, RefAttributes } from 'react';\nimport type { SwitchFieldProps as RACSwitchFieldProps, SwitchButtonRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useCallback, useRef, useState } from 'react';\nimport { SwitchButton, SwitchField } from 'react-aria-components';\nimport type { AccessibleName } from '../../render/name';\nimport { ControlLabel } from '../../control';\nimport { controlStyles } from '../../control/styles';\nimport { FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CheckGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The switch page: a 52 by 32dp track with a 2dp outline and a full corner,\n// a handle that is 16dp off, 24dp on and 28dp while pressed, a 16dp icon in\n// the handle when asked for, a 40dp state layer around the handle and a 48dp\n// target. Off, the track is surface container highest inside an outline\n// rule and the handle is outline, turning on surface variant while hovered,\n// pressed or focused; on, the track is primary and the handle on primary,\n// turning primary container in the same states, with the icon in on primary\n// container. Disabled, the track and its rule are on surface at the\n// disabled container opacity and the handle on surface at the disabled\n// content opacity, or surface when on. The state layer is on surface off and\n// primary on.\n//\n// React Aria's `SwitchField` is the root, a div holding the description and\n// error slots; its `SwitchButton` is the label around a visually hidden\n// input, and everything drawn is that label's children, chosen from the\n// render state React Aria hands them. The field is the two-column grid the\n// checkbox uses, with the label `display: contents`, so the description and\n// error line up under the text.\n//\n// The handle travels between the two ends of the track and grows between\n// its three sizes on the same transition, `motion.durationShort2` with the\n// standard easing; the state layer and the ripple sit on a 40dp disc centred\n// on the handle, so they move with it. The adjacent label is body-large on\n// surface, which the page keeps the same whichever way the switch is.\n//\n// The page's pressed handle follows the pointer: it grows, travels with the\n// drag, and the switch flips when it is released past the middle of the\n// track or springs back when it is not. React Aria's `SwitchButton` has no\n// drag of its own, so the travel is this component's — see `useHandleDrag`.\n//\n// Under forced colours the switch names system colours for its fills. That\n// mode paints an author's fill in the page's own `Canvas`, so the handle\n// vanished and on and off drew the same empty pill; a system colour is kept\n// rather than repainted. Off is a `ButtonText` handle in an empty track with\n// a `ButtonText` rule. On is a `HighlightText` handle in a track filled with\n// `Highlight`, the pair the mode gives whatever is chosen, with the check in\n// `Highlight` over the handle. Disabled, the same shapes are `GrayText`, and\n// the handle of a switch that is on is emptied to `Canvas` so it still shows\n// against its track. Every style that sets a fill repeats its branch, since\n// one written without the query replaces the property whole, branch and all.\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)';\nconst _temp = {\n  kLqNvP: \"x1lxsm33\",\n  \"$$css\": true\n};\nconst styles = {\n  control: {\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"x1fb0czk\",\n    kpsdNU: \"xm4btww\",\n    kEoFBp: \"x1hmns74\",\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x1vqgdyp\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"xvni27\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  handle: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xp2scj5 x1tt9vl1\",\n    kZKoxP: \"xlup9mm\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"xscdzaa x6jt684\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1kky2od\",\n    kjj79g: \"xl56j7k\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x7okvu4\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  handleActive: {\n    kWkggS: \"x1ccu2yh x1tt9vl1\",\n    $$css: true\n  },\n  handleDisabled: {\n    kWkggS: \"x1crcgwy x1o55y2u\",\n    $$css: true\n  },\n  handleOn: {\n    kWkggS: \"x1ntwmx2 x1sir5s4\",\n    kZKoxP: \"xxk0z11\",\n    kzqmXN: \"xvy4d1p\",\n    $$css: true\n  },\n  handleOnActive: {\n    kWkggS: \"xp89om9 x1sir5s4\",\n    $$css: true\n  },\n  handleOnDisabled: {\n    kWkggS: \"x14s9m32 x9yvj25\",\n    kMwMTN: \"x1gpw424 x1bhcspo\",\n    $$css: true\n  },\n  handlePressed: {\n    kZKoxP: \"x1fgtraw\",\n    kzqmXN: \"xgd8bvy\",\n    $$css: true\n  },\n  layer: {\n    k6CgDc: \"x12w9bfk\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    kzqmXN: \"x100vrsf\",\n    kpwlN0: \"x1qx2jxi\",\n    kVAEAm: \"x10l6tqk\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x15406qy\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  seat: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x1fgtraw\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"xgd8bvy\",\n    k87sOh: \"x13vifvy\",\n    kLqNvP: \"x1o0tod\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x10l6tqk\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x2hifos\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  seatAt: (offset: number) => [_temp, {\n    \"--x-insetInlineStart\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(`${offset}px`)\n  }],\n  seatDraggable: {\n    kFalU9: \"x5ve5x3\",\n    $$css: true\n  },\n  seatDragging: {\n    kIyJzY: \"x1mq3mr6\",\n    $$css: true\n  },\n  seatOn: {\n    kLqNvP: \"x1n8ud3w\",\n    $$css: true\n  },\n  track: {\n    k6CgDc: \"x12w9bfk\",\n    kWkggS: \"x1rrhr5q x9yvj25\",\n    kZKoxP: \"x10w6t97\",\n    kVAM5u: \"x1fwvt7v x1ylmb6m\",\n    kaIpWk: \"x1dkaolv\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xdh2fpr\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"xvni27\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xts7igz\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  trackDisabled: {\n    kWkggS: \"x1trd85j x9yvj25\",\n    kVAM5u: \"xrh88j3 xmnqt3w\",\n    $$css: true\n  },\n  trackOn: {\n    kWkggS: \"xnety89 x1jzqe4\",\n    kVAM5u: \"x1uajy3w x1n2ykn\",\n    $$css: true\n  },\n  trackOnDisabled: {\n    kWkggS: \"x19v6zzp x1o55y2u\",\n    kVAM5u: \"x9r1u3d xmnqt3w\",\n    $$css: true\n  }\n};\n\n// The state layer over the handle: on surface while the switch is off and\n// primary while it is on, at the hover or the pressed opacity.\nconst hoverLayers = {\n  off: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  },\n  on: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  }\n};\n\n// A keyboard's focus draws the hover layer's colour at the focus opacity.\nconst focusLayers = {\n  off: {\n    kWkggS: \"xwqhyid\",\n    $$css: true\n  },\n  on: {\n    kWkggS: \"x1sog3nf\",\n    $$css: true\n  }\n};\nconst pressedLayers = {\n  off: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  on: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  }\n};\n\n// How far the seat travels: the track's 48dp inside its 2dp rule, less the\n// seat's own 28dp.\nconst TRAVEL = 20;\n\n// How far a press has to move before it is a drag: a quarter of the travel.\n// A finger, a mouse and a pen all move a pixel or two between pressing and\n// lifting, and a press inside this is still a tap, which flips the switch.\nconst DRAG_SLOP = TRAVEL / 4;\ntype Drag = ReturnType<typeof useHandleDrag>;\ntype Ripple = ReturnType<typeof useRipple<HTMLSpanElement>>;\ntype SwitchProps = {\n  /**\n   * The label, beside the switch. A switch that a row labels some other way\n   * leaves it out and passes `aria-label` or `aria-labelledby` instead — one\n   * of the three is required, since a switch with none is announced as an\n   * unnamed switch.\n   *\n   * A link or a button in it acts on its own, as in a native label, and\n   * leaves the switch as it was. A press anywhere else in the label toggles\n   * it.\n   */\n  children?: ReactNode;\n  /**\n   * A hint under the label. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the switch in its error state — the message and `aria-invalid` follow\n   * 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   * Draws the check in the handle while the switch is on, the page's\n   * \"icon on selected switch\" form.\n   * @default false\n   */\n  icon?: boolean;\n} & AccessibleName & Omit<RACSwitchFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n// What the label draws, chosen from the render state React Aria hands it.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs. The ripple's handlers and surface go on the\n// state layer while the switch can change, and are left off while it\n// cannot, since a press that changes nothing should not look like one.\nfunction buttonContent(children: ReactNode, icon: boolean, ripple: Ripple, drag: Drag) {\n  return (state: SwitchButtonRenderProps) => {\n    const interactive = !state.isDisabled && !state.isReadOnly;\n    const on = state.isSelected;\n    const dragging = interactive && drag.offset !== null;\n    const active = interactive && (state.isHovered || state.isPressed || state.isFocusVisible);\n    return <>\n        <span {...stylex.props(styles.control, state.isReadOnly && controlStyles.controlReadOnly, state.isDisabled && controlStyles.controlDisabled)}>\n          <span {...stylex.props(styles.track, on && styles.trackOn, state.isDisabled && (on ? styles.trackOnDisabled : styles.trackDisabled), state.isFocusVisible && focus.ringVisible)}>\n            <span {...interactive ? drag.handlers(on) : {}} {...stylex.props(styles.seat, on && styles.seatOn, interactive && styles.seatDraggable, dragging && styles.seatDragging, dragging && styles.seatAt(drag.offset ?? 0))}>\n              <span {...interactive ? ripple.handlers : {}} {...stylex.props(styles.layer, interactive && state.isHovered && hoverLayers[on ? 'on' : 'off'], interactive && state.isFocusVisible && focusLayers[on ? 'on' : 'off'], interactive && state.isPressed && pressedLayers[on ? 'on' : 'off'])}>\n                {interactive ? ripple.surface : null}\n              </span>\n              <span {...stylex.props(styles.handle, on && styles.handleOn, active && (on ? styles.handleOnActive : styles.handleActive), (dragging || interactive && state.isPressed) && styles.handlePressed, state.isDisabled && (on ? styles.handleOnDisabled : styles.handleDisabled))}>\n                {icon && on ? <CheckGlyph className=\"xlup9mm x1lliihq x1kky2od\" /> : null}\n              </span>\n            </span>\n          </span>\n        </span>\n        <ControlLabel state={state}>{children}</ControlLabel>\n      </>;\n  };\n}\n\n/**\n * A switch that turns a setting on or off, with its label and optionally a\n * description or an error under it. Its state is React Aria's: pass\n * `isSelected` with `onChange` to control it, or `defaultSelected` to let it\n * keep its own. A switch takes effect as it is flipped, which is what sets\n * it apart from a checkbox in a form.\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 Switch({\n  children,\n  description,\n  error,\n  icon = false,\n  ...props\n}: RefAttributes<HTMLDivElement> & SwitchProps) {\n  const ripple = useRipple<HTMLSpanElement>();\n  const drag = useHandleDrag();\n  const validationBehavior = useFieldValidationBehavior();\n  return <SwitchField isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(controlStyles.field), props)}>\n      <SwitchButton className=\"xjp7ctv\">\n        {buttonContent(children, icon, ripple, drag)}\n      </SwitchButton>\n      <div {...stylex.props(controlStyles.messages)}>\n        <FieldMessage description={description} error={error} inset={false} />\n      </div>\n    </SwitchField>;\n}\n\n/**\n * The handle following a pointer across the track, as the switch page draws\n * a pressed switch. The seat's inset comes from the drag while one is under\n * way, and the switch settles from where the handle was let go: on past the\n * middle of the track, off before it.\n *\n * What flips the switch on an ordinary tap is React Aria's own press, which\n * ends on the pointer being released and pays no attention to where the\n * handle was dragged to — so a drag has to end that press before releasing,\n * which is what the pointer cancel is for, and settle the switch itself.\n * Settling means clicking the field's own input, the same element a tap\n * reaches in the end: the change goes through React Aria, and a controlled\n * switch stays controlled, since nothing here calls `onChange` or holds any\n * state of the switch's own. The click the pointer's release sends after\n * that is cancelled too, so nothing flips the switch a second time.\n *\n * A press that moves no further than the slop is left alone entirely, so a\n * tap flips the switch however still the pointer was — a drag starts only\n * once the pointer passes it, and from then on the handle follows every move.\n *\n * The guard for the click after a drag is cleared by the next press, not by\n * that click, since the click may never come: a touch dragged past the\n * browser's own slop sends none, and a guard left armed swallowed the next\n * tap instead.\n */\nfunction useHandleDrag() {\n  const [offset, setOffset] = useState<null | number>(null);\n  const origin = useRef<null | {\n    base: number;\n    on: boolean;\n    rtl: boolean;\n    x: number;\n  }>(null);\n  const settled = useRef<null | number>(null);\n  const cancelClick = useRef(false);\n  const onPointerCancel = useCallback(() => {\n    origin.current = null;\n    settled.current = null;\n    setOffset(null);\n  }, []);\n  const onClickCapture = useCallback((event: ReactMouseEvent<HTMLSpanElement>) => {\n    if (!cancelClick.current) {\n      return;\n    }\n    cancelClick.current = false;\n    // The label's activation is the browser's own, so this is what stops the\n    // input being flipped by a drag that settled where it began.\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n  const onPointerMove = useCallback((event: ReactPointerEvent<HTMLSpanElement>) => {\n    const from = origin.current;\n    if (from === null) {\n      return;\n    }\n    const along = from.rtl ? from.x - event.clientX : event.clientX - from.x;\n    if (settled.current === null && Math.abs(along) <= DRAG_SLOP) {\n      return;\n    }\n    const next = Math.min(TRAVEL, Math.max(0, from.base + along));\n    settled.current = next;\n    setOffset(next);\n  }, []);\n  const onPointerUp = useCallback((event: ReactPointerEvent<HTMLSpanElement>) => {\n    const from = origin.current;\n    const stopped = settled.current;\n    const seat = event.currentTarget;\n    origin.current = null;\n    settled.current = null;\n    setOffset(null);\n    // A press that never moved is a tap, which React Aria flips on its own.\n    if (from === null || stopped === null) {\n      return;\n    }\n    // React Aria's press is about to flip the switch from wherever it\n    // started, so it is cancelled first — a pointer cancel is what ends a\n    // press without firing it — and the drag settles the switch instead.\n    seat.dispatchEvent(new PointerEvent('pointercancel', {\n      bubbles: true,\n      pointerId: event.pointerId,\n      pointerType: event.pointerType\n    }));\n    // The pointer's own click follows this, by which time the switch has\n    // already settled.\n    cancelClick.current = true;\n    if (stopped > TRAVEL / 2 === from.on) {\n      return;\n    }\n    const input = seat.closest('label')?.querySelector('input');\n    input?.click();\n  }, []);\n  const handlers = useCallback((on: boolean) => ({\n    onClickCapture,\n    onPointerCancel,\n    onPointerDown: (event: ReactPointerEvent<HTMLSpanElement>) => {\n      cancelClick.current = false;\n      if (event.pointerType === 'mouse' && event.button !== 0) {\n        return;\n      }\n      origin.current = {\n        base: on ? TRAVEL : 0,\n        on,\n        rtl: getComputedStyle(event.currentTarget).direction === 'rtl',\n        x: event.clientX\n      };\n      settled.current = null;\n      try {\n        event.currentTarget.setPointerCapture(event.pointerId);\n      } catch {\n        // A pointer the browser is not tracking has no capture to take —\n        // a synthetic event in a test, where the moves are dispatched on\n        // this element anyway.\n      }\n    },\n    onPointerMove,\n    onPointerUp\n  }), [onClickCapture, onPointerCancel, onPointerMove, onPointerUp]);\n  return {\n    handlers,\n    offset\n  };\n}\nexport type { SwitchProps };\nexport default Switch;"],"mappings":"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"}

package/dist/components/table/index.js

@@ -2,11 +2,11 @@
 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 { ArrowDownwardGlyph, ArrowUpwardGlyph } from "../../glyphs/index.js";
-import Checkbox from "../checkbox/index.js";
-import { CollectionLoadMore } from "../../collection/index.js";
 import { rowStyles as rowStyles$1 } from "../../row/styles.js";
 import { collectionStyles } from "../../collection/styles.js";
+import { CollectionLoadMore } from "../../collection/index.js";
+import { ArrowDownwardGlyph, ArrowUpwardGlyph } from "../../glyphs/index.js";
+import Checkbox from "../checkbox/index.js";
 import { c } from "react/compiler-runtime";
 import { createContext, useContext } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/time-picker/index.js

@@ -1,8 +1,8 @@
 "use client";
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
-import { ClockGlyph, KeyboardGlyph } from "../../glyphs/index.js";
 import { useMessages } from "../../i18n/index.js";
+import { ClockGlyph, KeyboardGlyph } from "../../glyphs/index.js";
 import Button$1 from "../button/index.js";
 import IconButton from "../icon-button/index.js";
 import { fieldStyles, invalidFrom, useFieldValidationBehavior } from "../../field/root.js";

package/dist/components/tree/index.js

@@ -1,12 +1,12 @@
 "use client";
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
+import { collectionStyles, containerClasses, rowItemStyles } from "../../collection/styles.js";
+import { CollectionLoadMore } from "../../collection/index.js";
 import { ChevronEndGlyph } from "../../glyphs/index.js";
 import { focus } from "../../styles/focus.js";
 import { useRipple } from "../../hooks/useRipple.js";
 import Checkbox from "../checkbox/index.js";
-import { CollectionLoadMore } from "../../collection/index.js";
-import { collectionStyles, containerClasses, rowItemStyles } from "../../collection/styles.js";
 import { RowContent } from "../../row/index.js";
 import { c } from "react/compiler-runtime";
 import { createContext, useContext } from "react";

package/dist/control/index.js

@@ -1,8 +1,9 @@
 import { props } from "../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { fieldChromeStyles } from "../field/styles.js";
+import { RequiredMark } from "../field/index.js";
 import { controlStyles } from "./styles.js";
 import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Text } from "react-aria-components";
 //#region src/control/index.tsx
 /**
@@ -56,34 +57,71 @@ function ControlDescription(t0) {
 	} else t4 = $[4];
 	return t4;
 }
+const INTERACTIVE = "a[href], button, input, select, textarea, [role=\"button\"], [role=\"link\"]";
 /**
 * The label beside a selection control, in the second column of its grid.
 *
 * Renders nothing without children, which is what a control labelled from
 * outside — by a group's legend, or an `aria-label` — needs.
+*
+* A link or a button inside it acts on its own rather than toggling the
+* control — see `keepToInteractive`.
 */
 function ControlLabel(t0) {
-	const $ = c(6);
-	const { children, state } = t0;
+	const $ = c(9);
+	const { children, isRequired: t1, state } = t0;
+	const isRequired = t1 === void 0 ? false : t1;
 	if (children === void 0) return null;
-	let t1;
+	let t2;
 	if ($[0] !== state.isDisabled || $[1] !== state.isReadOnly) {
-		t1 = props(controlStyles.label, state.isReadOnly && controlStyles.labelReadOnly, state.isDisabled && controlStyles.labelDisabled);
+		t2 = props(controlStyles.label, state.isReadOnly && controlStyles.labelReadOnly, state.isDisabled && controlStyles.labelDisabled);
 		$[0] = state.isDisabled;
 		$[1] = state.isReadOnly;
-		$[2] = t1;
-	} else t1 = $[2];
-	let t2;
-	if ($[3] !== children || $[4] !== t1) {
-		t2 = /* @__PURE__ */ jsx("span", {
-			...t1,
-			children
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== isRequired) {
+		t3 = isRequired ? /* @__PURE__ */ jsx(RequiredMark, {}) : null;
+		$[3] = isRequired;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== children || $[6] !== t2 || $[7] !== t3) {
+		t4 = /* @__PURE__ */ jsxs("span", {
+			onClick: keepToInteractive,
+			onKeyDown: keepToInteractive,
+			onKeyUp: keepToInteractive,
+			onMouseDown: keepToInteractive,
+			onMouseUp: keepToInteractive,
+			onPointerDown: keepToInteractive,
+			onPointerUp: keepToInteractive,
+			onTouchEnd: keepToInteractive,
+			onTouchStart: keepToInteractive,
+			...t2,
+			children: [children, t3]
 		});
-		$[3] = children;
-		$[4] = t1;
-		$[5] = t2;
-	} else t2 = $[5];
-	return t2;
+		$[5] = children;
+		$[6] = t2;
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	return t4;
+}
+/**
+* Keeps a press or a key that starts in something interactive inside the
+* label — the link in "I agree to the terms" — from reaching the control's
+* own press handling, which sits on the element around the label. React Aria
+* took such a press as a press on the control, toggling it and stopping the
+* link's own default, so a click toggled the box and left the page where it
+* was, and Enter did neither. Stopped here, the event goes no further than
+* the label, and the browser's own default — following the link — is left
+* alone, as a native label leaves it. A press anywhere else in the label
+* still reaches the control and toggles it.
+*/
+function keepToInteractive(event) {
+	const { currentTarget, target } = event;
+	const interactive = target instanceof Element ? target.closest(INTERACTIVE) : null;
+	if (interactive !== null && currentTarget.contains(interactive)) event.stopPropagation();
 }
 //#endregion
 export { ControlDescription, ControlLabel };

package/dist/control/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","stylex","Text","fieldChromeStyles","controlStyles","ControlDescriptionProps","children","ControlLabelProps","state","ControlLabelState","isDisabled","isReadOnly","ControlDescription","t0","$","_c","undefined","t1","t2","Symbol","for","props","messages","message","messageLine","t3","t4","ControlLabel","label","labelReadOnly","labelDisabled","_c","stylex.props"],"sources":["../../src/control/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { Text } from 'react-aria-components';\nimport { fieldChromeStyles } from '../field/styles';\nimport { controlStyles } from './styles';\ntype ControlDescriptionProps = {\n  /** The hint. Nothing renders when there is none. */\n  children: string | undefined;\n};\ntype ControlLabelProps = {\n  /** The label's text. Nothing renders when there is none. */\n  children: ReactNode;\n  /** The render state React Aria hands the component. */\n  state: ControlLabelState;\n};\n\n/**\n * The state a label reads. Each of React Aria's three render states carries\n * more than this, and this is the part all three share.\n */\ntype ControlLabelState = {\n  isDisabled: boolean;\n  isReadOnly: boolean;\n};\n\n/**\n * The hint under one option of a group, in the second column of its grid and\n * in the option's description slot, so it is read with the option.\n *\n * Not `FieldMessage`, which is the line under a whole field: it reads the\n * validation of the field around it and draws an error, or an empty line for\n * one to arrive in. An option sits inside its group's validation, so through\n * `FieldMessage` it took the group's error for its own — React Aria's\n * `FieldError` then rendered into the option's slots, which hold no error\n * slot, and threw — dropped its own hint whenever the group was invalid, and\n * drew an empty line under every option inside a `Form`. The group's own line\n * is where its error goes, and an option has only its hint to say.\n */\nfunction ControlDescription({\n  children\n}: ControlDescriptionProps) {\n  if (children === undefined) {\n    return null;\n  }\n  return <div {...stylex.props(controlStyles.messages)}>\n      <div {...stylex.props(fieldChromeStyles.message, fieldChromeStyles.messageLine)}>\n        <Text slot=\"description\" {...stylex.props(fieldChromeStyles.message)}>\n          {children}\n        </Text>\n      </div>\n    </div>;\n}\n\n/**\n * The label beside a selection control, in the second column of its grid.\n *\n * Renders nothing without children, which is what a control labelled from\n * outside — by a group's legend, or an `aria-label` — needs.\n */\nfunction ControlLabel({\n  children,\n  state\n}: ControlLabelProps) {\n  if (children === undefined) {\n    return null;\n  }\n  return <span {...stylex.props(controlStyles.label, state.isReadOnly && controlStyles.labelReadOnly, state.isDisabled && controlStyles.labelDisabled)}>\n      {children}\n    </span>;\n}\nexport type { ControlDescriptionProps, ControlLabelProps };\nexport { ControlDescription, ControlLabel };"],"mappings":";;;;;;;;;;;;;;;;;;;;AAsCA,SAAAY,mBAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAA4B,MAAA,EAAAT,aAAAO;CAG1B,IAAIP,aAAaU,KAAAA,GAAS,OACjB;CACR,IAAAC;CAAA,IAAAC;CAAA,IAAAJ,EAAA,OAAAK,OAAAC,IAAA,2BAAA,GAAA;EACeH,KAAAhB,MAAaG,cAAakB,QAAS;EACtCJ,KAAAjB,MAAaE,kBAAiBoB,SAAUpB,kBAAiBqB,WAAY;EAACV,EAAA,KAAAG;EAAAH,EAAA,KAAAI;CAAA,OAAA;EAAAD,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;CAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,OAAAK,OAAAC,IAAA,2BAAA,GAAA;EAChDK,KAAAxB,MAAaE,kBAAiBoB,OAAQ;EAACT,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,OAAAR,UAAA;EAFnEoB,KAAA,oBAAA,OAAA;GAMC,GANQT;GACZ,UAAA,oBAAA,OAAA;IAIM,GAJGC;IACP,UAAA,oBAAC,MAAD;KAAW,MAAA;KAAa,GAAKO;KAC1BnB;IADE,CAAA;GAGD,CAAA;EACF,CAAA;EAAAQ,EAAA,KAAAR;EAAAQ,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,OANDY;AAMC;;;;;;;AASV,SAAAC,aAAAd,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAsB,MAAA,EAAAT,UAAAE,UAAAK;CAIpB,IAAIP,aAAaU,KAAAA,GAAS,OACjB;CACR,IAAAC;CAAA,IAAAH,EAAA,OAAAN,MAAAE,cAAAI,EAAA,OAAAN,MAAAG,YAAA;EACgBM,KAAAhB,MAAaG,cAAawB,OAAQpB,MAAKG,cAAeP,cAAayB,eAAgBrB,MAAKE,cAAeN,cAAa0B,aAAc;EAAChB,EAAA,KAAAN,MAAAE;EAAAI,EAAA,KAAAN,MAAAG;EAAAG,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,IAAAI;CAAA,IAAAJ,EAAA,OAAAR,YAAAQ,EAAA,OAAAG,IAAA;EAA7IC,KAAA,oBAAA,QAAA;GAEE,GAFQD;GACZX;EACI,CAAA;EAAAQ,EAAA,KAAAR;EAAAQ,EAAA,KAAAG;EAAAH,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,OAFFI;AAEE"}
+{"version":3,"file":"index.js","names":["ReactNode","SyntheticEvent","stylex","Text","RequiredMark","fieldChromeStyles","controlStyles","ControlDescriptionProps","children","ControlLabelProps","isRequired","state","ControlLabelState","isDisabled","isReadOnly","ControlDescription","t0","$","_c","undefined","t1","t2","Symbol","for","props","messages","message","messageLine","t3","t4","INTERACTIVE","ControlLabel","label","labelReadOnly","labelDisabled","keepToInteractive","event","HTMLSpanElement","currentTarget","target","interactive","Element","closest","contains","stopPropagation","_c","stylex.props"],"sources":["../../src/control/index.tsx"],"sourcesContent":["import type { ReactNode, SyntheticEvent } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { Text } from 'react-aria-components';\nimport { RequiredMark } from '../field';\nimport { fieldChromeStyles } from '../field/styles';\nimport { controlStyles } from './styles';\ntype ControlDescriptionProps = {\n  /** The hint. Nothing renders when there is none. */\n  children: string | undefined;\n};\ntype ControlLabelProps = {\n  /** The label's text. Nothing renders when there is none. */\n  children: ReactNode;\n  /**\n   * Whether the control must be chosen, which ends the label in the asterisk\n   * every required field's label ends in.\n   * @default false\n   */\n  isRequired?: boolean;\n  /** The render state React Aria hands the component. */\n  state: ControlLabelState;\n};\n\n/**\n * The state a label reads. Each of React Aria's three render states carries\n * more than this, and this is the part all three share.\n */\ntype ControlLabelState = {\n  isDisabled: boolean;\n  isReadOnly: boolean;\n};\n\n/**\n * The hint under one option of a group, in the second column of its grid and\n * in the option's description slot, so it is read with the option.\n *\n * Not `FieldMessage`, which is the line under a whole field: it reads the\n * validation of the field around it and draws an error, or an empty line for\n * one to arrive in. An option sits inside its group's validation, so through\n * `FieldMessage` it took the group's error for its own — React Aria's\n * `FieldError` then rendered into the option's slots, which hold no error\n * slot, and threw — dropped its own hint whenever the group was invalid, and\n * drew an empty line under every option inside a `Form`. The group's own line\n * is where its error goes, and an option has only its hint to say.\n */\nfunction ControlDescription({\n  children\n}: ControlDescriptionProps) {\n  if (children === undefined) {\n    return null;\n  }\n  return <div {...stylex.props(controlStyles.messages)}>\n      <div {...stylex.props(fieldChromeStyles.message, fieldChromeStyles.messageLine)}>\n        <Text slot=\"description\" {...stylex.props(fieldChromeStyles.message)}>\n          {children}\n        </Text>\n      </div>\n    </div>;\n}\n\n// What a press inside a label belongs to rather than the control: anything\n// that acts on its own, where a native `<label>` leaves the press to it too.\nconst INTERACTIVE = 'a[href], button, input, select, textarea, [role=\"button\"], [role=\"link\"]';\n\n/**\n * The label beside a selection control, in the second column of its grid.\n *\n * Renders nothing without children, which is what a control labelled from\n * outside — by a group's legend, or an `aria-label` — needs.\n *\n * A link or a button inside it acts on its own rather than toggling the\n * control — see `keepToInteractive`.\n */\nfunction ControlLabel({\n  children,\n  isRequired = false,\n  state\n}: ControlLabelProps) {\n  if (children === undefined) {\n    return null;\n  }\n  return (\n    // The handlers only stop events on their way out of the label; they\n    // handle nothing themselves, which is what jsx-a11y cannot tell.\n    // oxlint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events\n    <span onClick={keepToInteractive} onKeyDown={keepToInteractive} onKeyUp={keepToInteractive} onMouseDown={keepToInteractive} onMouseUp={keepToInteractive} onPointerDown={keepToInteractive} onPointerUp={keepToInteractive} onTouchEnd={keepToInteractive} onTouchStart={keepToInteractive} {...stylex.props(controlStyles.label, state.isReadOnly && controlStyles.labelReadOnly, state.isDisabled && controlStyles.labelDisabled)}>\n      {children}\n      {isRequired ? <RequiredMark /> : null}\n    </span>\n  );\n}\n\n/**\n * Keeps a press or a key that starts in something interactive inside the\n * label — the link in \"I agree to the terms\" — from reaching the control's\n * own press handling, which sits on the element around the label. React Aria\n * took such a press as a press on the control, toggling it and stopping the\n * link's own default, so a click toggled the box and left the page where it\n * was, and Enter did neither. Stopped here, the event goes no further than\n * the label, and the browser's own default — following the link — is left\n * alone, as a native label leaves it. A press anywhere else in the label\n * still reaches the control and toggles it.\n */\nfunction keepToInteractive(event: SyntheticEvent<HTMLSpanElement>) {\n  const {\n    currentTarget,\n    target\n  } = event;\n  const interactive = target instanceof Element ? target.closest(INTERACTIVE) : null;\n  if (interactive !== null && currentTarget.contains(interactive)) {\n    event.stopPropagation();\n  }\n}\nexport type { ControlDescriptionProps, ControlLabelProps };\nexport { ControlDescription, ControlLabel };"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA6CA,SAAAe,mBAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAA4B,MAAA,EAAAV,aAAAQ;CAG1B,IAAIR,aAAaW,KAAAA,GAAS,OACjB;CACR,IAAAC;CAAA,IAAAC;CAAA,IAAAJ,EAAA,OAAAK,OAAAC,IAAA,2BAAA,GAAA;EACeH,KAAAlB,MAAaI,cAAamB,QAAS;EACtCJ,KAAAnB,MAAaG,kBAAiBqB,SAAUrB,kBAAiBsB,WAAY;EAACV,EAAA,KAAAG;EAAAH,EAAA,KAAAI;CAAA,OAAA;EAAAD,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;CAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,OAAAK,OAAAC,IAAA,2BAAA,GAAA;EAChDK,KAAA1B,MAAaG,kBAAiBqB,OAAQ;EAACT,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,OAAAT,UAAA;EAFnEqB,KAAA,oBAAA,OAAA;GAMC,GANQT;GACZ,UAAA,oBAAA,OAAA;IAIM,GAJGC;IACP,UAAA,oBAAC,MAAD;KAAW,MAAA;KAAa,GAAKO;KAC1BpB;IADE,CAAA;GAGD,CAAA;EACF,CAAA;EAAAS,EAAA,KAAAT;EAAAS,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,OANDY;AAMC;AAKV,MAAMC,cAAc;;;;;;;;;;AAWpB,SAAAC,aAAAf,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAsB,MAAA,EAAAV,UAAAE,YAAAU,IAAAT,UAAAK;CAEpB,MAAAN,aAAAU,OAAAD,KAAAA,IAAA,QAAAC;CAGA,IAAIZ,aAAaW,KAAAA,GAAS,OACjB;CACR,IAAAE;CAAA,IAAAJ,EAAA,OAAAN,MAAAE,cAAAI,EAAA,OAAAN,MAAAG,YAAA;EAKiSO,KAAAnB,MAAaI,cAAa0B,OAAQrB,MAAKG,cAAeR,cAAa2B,eAAgBtB,MAAKE,cAAeP,cAAa4B,aAAc;EAACjB,EAAA,KAAAN,MAAAE;EAAAI,EAAA,KAAAN,MAAAG;EAAAG,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,OAAAP,YAAA;EAEhakB,KAAAlB,aAAa,oBAAC,cAAD,CAAa,CAAA,IAA1B;EAAoCO,EAAA,KAAAP;EAAAO,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,OAAAT,YAAAS,EAAA,OAAAI,MAAAJ,EAAA,OAAAW,IAAA;EAFvCC,KAAA,qBAAA,QAAA;GAAeM,SAAAA;GAA8BA,WAAAA;GAA4BA,SAAAA;GAAgCA,aAAAA;GAA8BA,WAAAA;GAAkCA,eAAAA;GAAgCA,aAAAA;GAA+BA,YAAAA;GAAiCA,cAAAA;GAAiB,GAAMd;GAAhS,UAAA,CACGb,UACAoB,EACI;;EAAAX,EAAA,KAAAT;EAAAS,EAAA,KAAAI;EAAAJ,EAAA,KAAAW;EAAAX,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,OAHPY;AAGO;;;;;;;;;;;;AAeX,SAASM,kBAAkBC,OAAwC;CACjE,MAAM,EACJE,eACAC,WACEH;CACJ,MAAMI,cAAcD,kBAAkBE,UAAUF,OAAOG,QAAQZ,WAAW,IAAI;CAC9E,IAAIU,gBAAgB,QAAQF,cAAcK,SAASH,WAAW,GAC5DJ,MAAMQ,gBAAgB;AAE1B"}

package/dist/field/index.js

@@ -1,8 +1,8 @@
 import { props } from "../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles, mergeStyles } from "../styles/merge.js";
 import { useMessages } from "../i18n/index.js";
-import { fieldChromeStyles, groupStyles } from "./styles.js";
 import { useInsideForm } from "./root.js";
+import { fieldChromeStyles, groupStyles } from "./styles.js";
 import { c } from "react/compiler-runtime";
 import { createContext, useContext } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -675,9 +675,10 @@ function FieldLabel(t0) {
 */
 function FieldMessage(t0) {
 	const $ = c(32);
-	const { characterCount: t1, characterLimitLabel, description, error, errorId, inset: t2, maxLength } = t0;
+	const { characterCount: t1, characterLimitLabel, description, error, errorId, inset: t2, maxLength, reserve: t3 } = t0;
 	const characterCount = t1 === void 0 ? false : t1;
 	const inset = t2 === void 0 ? true : t2;
+	const reserve = t3 === void 0 ? true : t3;
 	const validation = useContext(FieldErrorContext);
 	const invalid = error !== void 0 || (validation?.isInvalid ?? false);
 	const { locale } = useLocale();
@@ -686,18 +687,18 @@ function FieldMessage(t0) {
 	const textArea = useSlottedContext(TextAreaContext);
 	const insideForm = useInsideForm();
 	const text = useContext(TextContext);
-	let t3;
+	let t4;
 	if ($[0] !== characterLimitLabel || $[1] !== maxLength || $[2] !== messages) {
-		t3 = maxLength === void 0 ? void 0 : characterLimitLabel ?? messages.characterLimit(maxLength);
+		t4 = maxLength === void 0 ? void 0 : characterLimitLabel ?? messages.characterLimit(maxLength);
 		$[0] = characterLimitLabel;
 		$[1] = maxLength;
 		$[2] = messages;
-		$[3] = t3;
-	} else t3 = $[3];
-	const limit = t3;
-	let t4;
+		$[3] = t4;
+	} else t4 = $[3];
+	const limit = t4;
+	let t5;
 	if ($[4] !== limit) {
-		t4 = limit === void 0 ? null : /* @__PURE__ */ jsx(VisuallyHidden, {
+		t5 = limit === void 0 ? null : /* @__PURE__ */ jsx(VisuallyHidden, {
 			elementType: "span",
 			children: /* @__PURE__ */ jsx(Text, {
 				slot: "description",
@@ -705,16 +706,16 @@ function FieldMessage(t0) {
 			})
 		});
 		$[4] = limit;
-		$[5] = t4;
-	} else t4 = $[5];
-	const hidden = t4;
-	if (!invalid && description === void 0 && !characterCount && !insideForm) return hidden;
+		$[5] = t5;
+	} else t5 = $[5];
+	const hidden = t5;
+	if (!invalid && description === void 0 && !characterCount && !(insideForm && reserve)) return hidden;
 	const value = input?.value ?? textArea?.value ?? "";
 	const length = String(value).length;
 	const hint = invalid ? void 0 : description;
-	let t5;
+	let t6;
 	if ($[6] !== hidden || $[7] !== hint || $[8] !== limit) {
-		t5 = hint === void 0 ? hidden : /* @__PURE__ */ jsxs(Text, {
+		t6 = hint === void 0 ? hidden : /* @__PURE__ */ jsxs(Text, {
 			slot: "description",
 			...props(fieldChromeStyles.message),
 			children: [hint, limit === void 0 ? null : /* @__PURE__ */ jsx(VisuallyHidden, {
@@ -725,19 +726,19 @@ function FieldMessage(t0) {
 		$[6] = hidden;
 		$[7] = hint;
 		$[8] = limit;
-		$[9] = t5;
-	} else t5 = $[9];
-	const described = t5;
+		$[9] = t6;
+	} else t6 = $[9];
+	const described = t6;
 	const errorSlot = text !== null && typeof text === "object" && "slots" in text && text.slots?.errorMessage !== void 0;
-	let t6;
-	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = props(fieldChromeStyles.message, fieldChromeStyles.messageError);
-		$[10] = t6;
-	} else t6 = $[10];
-	const messageStyles = t6;
 	let t7;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = props(fieldChromeStyles.message, fieldChromeStyles.messageError);
+		$[10] = t7;
+	} else t7 = $[10];
+	const messageStyles = t7;
+	let t8;
 	if ($[11] !== error || $[12] !== errorId || $[13] !== errorSlot) {
-		t7 = errorSlot ? /* @__PURE__ */ jsx(Text, {
+		t8 = errorSlot ? /* @__PURE__ */ jsx(Text, {
 			slot: "errorMessage",
 			...messageStyles,
 			children: error
@@ -749,29 +750,29 @@ function FieldMessage(t0) {
 		$[11] = error;
 		$[12] = errorId;
 		$[13] = errorSlot;
-		$[14] = t7;
-	} else t7 = $[14];
-	const written = t7;
-	let t8;
+		$[14] = t8;
+	} else t8 = $[14];
+	const written = t8;
+	let t9;
 	if ($[15] !== inset) {
-		t8 = props(fieldChromeStyles.message, fieldChromeStyles.messageLine, inset && fieldChromeStyles.messageInset);
+		t9 = props(fieldChromeStyles.message, fieldChromeStyles.messageLine, inset && fieldChromeStyles.messageInset);
 		$[15] = inset;
-		$[16] = t8;
-	} else t8 = $[16];
-	let t9;
+		$[16] = t9;
+	} else t9 = $[16];
+	let t10;
 	if ($[17] !== error || $[18] !== validation || $[19] !== written) {
-		t9 = validation === null && error !== void 0 ? written : /* @__PURE__ */ jsx(FieldError, {
+		t10 = validation === null && error !== void 0 ? written : /* @__PURE__ */ jsx(FieldError, {
 			...props(fieldChromeStyles.message, fieldChromeStyles.messageError),
 			children: error
 		});
 		$[17] = error;
 		$[18] = validation;
 		$[19] = written;
-		$[20] = t9;
-	} else t9 = $[20];
-	let t10;
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
 	if ($[21] !== characterCount || $[22] !== invalid || $[23] !== length || $[24] !== locale || $[25] !== maxLength) {
-		t10 = characterCount ? /* @__PURE__ */ jsx("span", {
+		t11 = characterCount ? /* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
 			...props(fieldChromeStyles.message, fieldChromeStyles.counter, invalid && fieldChromeStyles.messageError),
 			children: countIn(locale, length, maxLength)
@@ -781,25 +782,32 @@ function FieldMessage(t0) {
 		$[23] = length;
 		$[24] = locale;
 		$[25] = maxLength;
-		$[26] = t10;
-	} else t10 = $[26];
-	let t11;
-	if ($[27] !== described || $[28] !== t10 || $[29] !== t8 || $[30] !== t9) {
-		t11 = /* @__PURE__ */ jsxs("div", {
-			...t8,
+		$[26] = t11;
+	} else t11 = $[26];
+	let t12;
+	if ($[27] !== described || $[28] !== t10 || $[29] !== t11 || $[30] !== t9) {
+		t12 = /* @__PURE__ */ jsxs("div", {
+			...t9,
 			children: [
-				t9,
+				t10,
 				described,
-				t10
+				t11
 			]
 		});
 		$[27] = described;
 		$[28] = t10;
-		$[29] = t8;
+		$[29] = t11;
 		$[30] = t9;
-		$[31] = t11;
-	} else t11 = $[31];
-	return t11;
+		$[31] = t12;
+	} else t12 = $[31];
+	return t12;
+}
+/**
+* The same asterisk for a label that is not a field's own — a checkbox's, a
+* switch's — so every required control is marked by one element.
+*/
+function RequiredMark() {
+	return REQUIRED_MARK;
 }
 const counterFormatters = /* @__PURE__ */ new Map();
 function countIn(locale, length, maxLength) {
@@ -811,6 +819,6 @@ function countIn(locale, length, maxLength) {
 	return maxLength === void 0 ? formatter.format(length) : `${formatter.format(length)}/${formatter.format(maxLength)}`;
 }
 //#endregion
-export { FieldBox, FieldInput, FieldLabel, FieldMessage, FieldSegments, FieldTextArea, FieldTrigger, FieldValue };
+export { FieldBox, FieldInput, FieldLabel, FieldMessage, FieldSegments, FieldTextArea, FieldTrigger, FieldValue, RequiredMark };
 
 //# sourceMappingURL=index.js.map