@kanso-labs/kanso-ui 0.32.0 → 0.33.0

package/dist/components/progress-indicator/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ProgressBarRenderProps","ProgressBarProps","RACProgressBarProps","stylex","ProgressBar","IndicatorTone","IndicatorLabels","IndicatorLine","indicatorStyles","mergeStatefulStyles","colors","motion","radii","CIRCULAR_SIZE","CIRCULAR_SIZE_PX","THICKNESS","GAP","RADIUS","CIRCUMFERENCE","Math","PI","ARC_MS","CYCLE_MS","ROTATE_MS","round","RING_EASING","INDETERMINATE_MS","BUFFER_MS","LINE_SLOWDOWN","RING_SLOWDOWN","primaryTranslate","primaryScale","secondaryTranslate","secondaryScale","buffering","expandArc","travelArc","spin","_temp","kZKoxP","kzqmXN","_temp2","styles","arcActive","kjVXCG","$$css","arcIndeterminate","kkDQuc","k44tkh","ko0y90","kKVMdj","kyAemX","k1ekBW","arcMotion","k6CgDc","kIyJzY","kAMwcw","arcTrack","circular","kB7OPa","k1xSpc","k3aq6I","circularIndeterminate","circularSize","size","val","undefined","indeterminateBarInner","kWkggS","kaIpWk","kpwlN0","kVAEAm","indeterminateTrack","primaryBarInner","rootCircular","kGNEyG","secondaryBarInner","trackBuffered","kmuXW","trackBufferedAt","share","ProgressIndicatorProps","buffer","className","label","showValue","style","tone","ProgressIndicatorTone","variant","ProgressIndicatorVariant","Omit","Extract","arcsFor","percentage","active","track","max","strokeDasharray","strokeDashoffset","bufferShare","minValue","maxValue","value","range","buffered","remaining","min","CircularTrack","t0","$","_c","isIndeterminate","inherit","t1","arcs","t2","props","t3","inheritTrack","t4","t5","t6","t7","inheritActive","t8","t9","indicatorContent","state","valueText","LinearTrack","ProgressIndicator","T0","t10","t11","t12","root"],"sources":["../../../src/components/progress-indicator/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ProgressBarRenderProps, ProgressBarProps as RACProgressBarProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ProgressBar } from 'react-aria-components';\nimport type { IndicatorTone } from '../../indicator/styles';\nimport { IndicatorLabels, IndicatorLine } from '../../indicator';\nimport { indicatorStyles } from '../../indicator/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii } from '../../tokens/design.tokens.stylex';\n\n// The progress indicators page's two shapes, drawn flat: the page's wavy\n// shape is the Expressive column's alone, and its amplitude and wavelength\n// belong to a variant rather than to this. Both carry the three parts the\n// page's anatomy names — the active indicator in primary, the track in\n// secondary container, and, on the line, the stop indicator in primary at\n// the end — at the page's 4dp thickness, with the 4dp gap its measurements\n// give either side of the track. The ring is the page's default 40dp of the\n// four sizes it draws.\n//\n// The determinate line is a row of those parts, so the active indicator's\n// width is the percentage itself and the track takes what is left. The\n// determinate ring is two arcs of one circle, cut by the dash pattern: the\n// active arc runs from the top for its share of the circumference, and the\n// track picks up 4dp past it and stops 4dp before it comes back round,\n// which is the same gap measured along the curve.\n//\n// The animations are Material's own rather than something assembled from\n// the motion tokens: an indeterminate indicator is a piece of choreography,\n// and one written from scratch reads as a different component beside a\n// Material app. Material Web and Angular Material both descend from the\n// same implementation and agree on every number, so the numbers here are\n// theirs — the line's two bars and their four keyframe sets, the buffer's\n// scrolling dots, the ring's 1333ms arc, its four-arc cycle and its 1568ms\n// rotation, and the 250ms and 500ms a determinate value moves over.\n//\n// Two things are decided differently, both after reading the two of them.\n//\n// The ring is one dashed arc rather than two halves. Material Web draws it\n// as a pair of bordered half-circles, Angular as a pair of clipped SVG\n// circles with a patch over the seam between them; both constructions exist\n// to work around that split, and a single arc whose dash pattern is\n// animated needs neither and shares its geometry with the determinate ring.\n// The three effects it composes are still theirs: the arc grows and shrinks\n// over the arc's duration, its start travels the circle over four of those,\n// and the whole thing turns over the rotation's.\n//\n// Under `prefers-reduced-motion` the motion slows rather than stopping,\n// which is Angular's answer and the better one: an indicator that freezes\n// stops saying the work is going on, and a frozen arc caught at its short\n// end reads as broken. The multipliers are Angular's — two for the line,\n// and a quarter more for the ring.\n//\n// React Aria's `ProgressBar` is the root: it carries the role, the value and\n// its text, and reports the percentage and whether it is indeterminate as\n// render state, which is what everything here is drawn from.\n\n// The circle the arcs are cut from. The radius is the diameter less the\n// stroke, halved, so the stroke sits inside the 40dp box rather than\n// straddling its edge.\n//\n// The thickness and the gap are the same 4dp the shared line is drawn at,\n// written again rather than imported from `src/indicator/styles`: StyleX\n// evaluates the values inside `stylex.create` and `stylex.keyframes` as it\n// compiles, and will not follow an import to a module that is not a theme\n// to reach one — an imported constant fails the transform outright.\nconst CIRCULAR_SIZE = 40;\n// The same value as a length, hoisted rather than built at the parameter.\n// The compiler has no safe reordering for a template literal, so one written\n// as a default parameter skips the whole component around it — which the\n// panic threshold this lands beside turns into a build failure.\nconst CIRCULAR_SIZE_PX = `${CIRCULAR_SIZE}px`;\nconst THICKNESS = 4;\nconst GAP = 4;\nconst RADIUS = (CIRCULAR_SIZE - THICKNESS) / 2;\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS;\n\n// The ring's timings. The arc is 1333ms; a full cycle is four of them; and\n// the rotation is the arc scaled by 360/306, which is the arc's start\n// rotation plus the circle less the arc's size.\nconst ARC_MS = 1333;\nconst CYCLE_MS = ARC_MS * 4;\nconst ROTATE_MS = Math.round(ARC_MS * 360 / 306);\nconst RING_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';\n\n// The line's own: 2s for an indeterminate pass, and the 250ms the buffer's\n// dots take to scroll one pitch. What a determinate value moves over is the\n// shared line's, since a meter moves the same way.\nconst INDETERMINATE_MS = 2000;\nconst BUFFER_MS = 250;\n\n// What `prefers-reduced-motion` slows each shape by.\nconst LINE_SLOWDOWN = 2;\nconst RING_SLOWDOWN = 1.25;\n\n// The two bars of the indeterminate line, translated and scaled at once.\nconst primaryTranslate = \"x1pch1fy-B\";\nconst primaryScale = \"xxyp5q1-B\";\nconst secondaryTranslate = \"xzo9tdn-B\";\nconst secondaryScale = \"x1w7bnrt-B\";\n\n// The buffer's dots scroll by one pitch of the pattern and start again.\nconst buffering = \"x19sykc1-B\";\n\n// The arc's own length, written against a path the circle normalises to 100\n// with `pathLength`, so these are percentages of the circumference rather\n// than lengths StyleX would have to work out.\n//\n// Material contracts to 10 degrees of turn and grows to 270. The 270 is 75\n// of the circumference and is written as it is; the 10 is not, because the\n// page's rounded ends change what a short dash draws. A round cap adds half\n// the stroke at each end, so a 10-degree dash on the 40dp ring is 3px of\n// path inside a 7px capsule of 4px stroke — a dot rather than the sliver\n// Material's square-cut ends give at the same angle. 8 is the shortest the\n// cap still draws as an arc, and it is the floor for that reason rather\n// than because the page names it.\nconst expandArc = \"x1t81ys1-B\";\n\n// Where the arc starts. Material turns it in eight increments of 135 degrees\n// rather than at a constant rate, each eased with the same curve the arc's\n// growth uses, so it settles at each position and springs to the next; three\n// full turns over the cycle, under the rotation's own single turn. The\n// numbers here are those angles along a path of 100: 135 degrees is 37.5 of\n// it, and 1080 degrees is 300.\nconst travelArc = \"x26nhu8-B\";\nconst spin = \"x1fy8ia8-B\";\nconst _temp = {\n  kZKoxP: \"xyq6l7l\",\n  kzqmXN: \"x1uyokj7\",\n  \"$$css\": true\n};\nconst _temp2 = {\n  kzqmXN: \"x1uyokj7\",\n  \"$$css\": true\n};\nconst styles = {\n  arcActive: {\n    kjVXCG: \"x1i9vjva\",\n    $$css: true\n  },\n  arcIndeterminate: {\n    kkDQuc: \"x12dwrod\",\n    k44tkh: \"xxx5gdc\",\n    ko0y90: \"x77zgwx\",\n    kKVMdj: \"x14p4i3i\",\n    kyAemX: \"x1582zw4\",\n    kjVXCG: \"x1i9vjva\",\n    k1ekBW: \"x13b0p5u\",\n    $$css: true\n  },\n  arcMotion: {\n    k6CgDc: \"x12w9bfk\",\n    kIyJzY: \"xd6oih7\",\n    k1ekBW: \"xg0bdzq\",\n    kAMwcw: \"x4ognrn\",\n    $$css: true\n  },\n  arcTrack: {\n    kjVXCG: \"xynoiew\",\n    $$css: true\n  },\n  circular: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x1lliihq\",\n    k3aq6I: \"x9tu13d\",\n    $$css: true\n  },\n  circularIndeterminate: {\n    kkDQuc: \"x7hzzi\",\n    k44tkh: \"x11c9iw4\",\n    ko0y90: \"xa4qsjk\",\n    kKVMdj: \"xpedhrg\",\n    kyAemX: \"x1esw782\",\n    k3aq6I: \"x1c071of\",\n    $$css: true\n  },\n  circularSize: (size: string) => [_temp, {\n    \"--x-blockSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(size),\n    \"--x-inlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(size)\n  }],\n  indeterminateBarInner: {\n    kWkggS: \"xnety89\",\n    kaIpWk: \"x1dkaolv\",\n    kB7OPa: \"x9f619\",\n    kpwlN0: \"x10a8y8t\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  indeterminateTrack: {\n    kWkggS: \"x15dekr4\",\n    kpwlN0: \"x10a8y8t\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  primaryBarInner: {\n    kkDQuc: \"xy02sl2\",\n    k44tkh: \"x1c74tu6\",\n    ko0y90: \"xa4qsjk\",\n    kKVMdj: \"xkj56kq\",\n    kyAemX: \"x1esw782\",\n    $$css: true\n  },\n  rootCircular: {\n    kGNEyG: \"x1cy8zhl\",\n    kzqmXN: \"x14atkfc\",\n    $$css: true\n  },\n  secondaryBarInner: {\n    kkDQuc: \"xy02sl2\",\n    k44tkh: \"x1c74tu6\",\n    ko0y90: \"xa4qsjk\",\n    kKVMdj: \"xnb0dd2\",\n    kyAemX: \"x1esw782\",\n    $$css: true\n  },\n  trackBuffered: {\n    kWkggS: \"x15dekr4\",\n    kZKoxP: \"x5yr21d\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    $$css: true\n  },\n  trackBufferedAt: (share: number) => [_temp2, {\n    \"--x-inlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(`${share}%`)\n  }]\n};\ntype ProgressIndicatorProps = {\n  /**\n   * How far the work is loaded ahead of the value — a video's buffered\n   * seconds, a queue's fetched pages. Read on the same scale as `value`: the\n   * track is solid up to it and dotted beyond. Ignored while the indicator\n   * is indeterminate, and left out for work with nothing to buffer.\n   */\n  buffer?: number;\n  /** A function may compute the class from the indicator's render state. */\n  className?: RACProgressBarProps['className'];\n  /**\n   * What the work is, shown above the indicator. A screen reader reads it as\n   * the indicator's name; an indicator whose surroundings name it takes\n   * `aria-label` instead and leaves this out.\n   */\n  label?: ReactNode;\n  /**\n   * Whether the value is shown beside the label. Ignored while the indicator\n   * is indeterminate, which has no value to show.\n   * @default false\n   */\n  showValue?: boolean;\n  /**\n   * How wide the ring is drawn, as a CSS length. Everything inside scales\n   * with it, so `1em` gives a ring the size of the type around it. Ignored\n   * by the line, which fills the width it is given.\n   *\n   * A length rather than a step of the `sm`/`md`/`lg` scale every other\n   * `size` here takes — see AGENTS.md, under Prop vocabularies. A ring sized\n   * to the type around it is what the prop is for, which no fixed scale\n   * gives; the name predates that rule, and changing it is a breaking change\n   * of its own.\n   * @default '40px'\n   */\n  size?: string;\n  /** A function may compute the style from the indicator's render state. */\n  style?: RACProgressBarProps['style'];\n  /**\n   * Which colours it is drawn in. `primary` is the page's own pair — the\n   * active indicator in primary over a secondary container track — and\n   * `inherit` takes the colour around it, for an indicator inside something\n   * that already has one, such as a button, where primary would be the fill.\n   * @default 'primary'\n   */\n  tone?: ProgressIndicatorTone;\n  /**\n   * The line the page draws, or the ring: `linear` fills the width it is\n   * given, `circular` is 40dp across.\n   * @default 'linear'\n   */\n  variant?: ProgressIndicatorVariant;\n} & Omit<RACProgressBarProps, 'children' | 'className' | 'style'>;\n\n// The two of the shared line's four tones an indicator draws. The other two\n// say how a measurement reads, which is a meter's business rather than a\n// running task's.\ntype ProgressIndicatorTone = Extract<IndicatorTone, 'inherit' | 'primary'>;\ntype ProgressIndicatorVariant = 'circular' | 'linear';\n\n// The dashes that cut the two arcs out of one circle. The active arc runs\n// from the top for its share of the circumference; the track picks up 4dp\n// after it and stops 4dp before it comes back round, which is the page's gap\n// measured along the curve.\nfunction arcsFor(percentage: number | undefined) {\n  const active = (percentage ?? 0) / 100 * CIRCUMFERENCE;\n  const track = Math.max(0, CIRCUMFERENCE - active - 2 * GAP);\n  return {\n    active: {\n      strokeDasharray: `${active} ${CIRCUMFERENCE}`,\n      strokeDashoffset: 0\n    },\n    track: {\n      strokeDasharray: `${track} ${CIRCUMFERENCE}`,\n      strokeDashoffset: -(active + GAP)\n    }\n  };\n}\n\n// How much of the track the buffer covers. The buffer is read on the value's\n// scale, and the track holds what the value has not taken, so the solid part\n// is the buffer's share of that remainder.\nfunction bufferShare(buffer: number | undefined, percentage: number | undefined, minValue: number, maxValue: number) {\n  if (buffer === undefined) {\n    return undefined;\n  }\n  const value = percentage ?? 0;\n  const range = maxValue - minValue;\n  const buffered = range === 0 ? 0 : (buffer - minValue) / range * 100;\n  const remaining = 100 - value;\n  if (remaining <= 0) {\n    return 0;\n  }\n  return Math.min(100, Math.max(0, (buffered - value) / remaining * 100));\n}\nfunction CircularTrack({\n  isIndeterminate,\n  percentage,\n  size,\n  tone\n}: {\n  isIndeterminate: boolean;\n  percentage: number | undefined;\n  size: string;\n  tone: ProgressIndicatorTone;\n}) {\n  const inherit = tone === 'inherit';\n  const arcs = arcsFor(percentage);\n  return <svg aria-hidden=\"true\" viewBox={`0 0 ${CIRCULAR_SIZE} ${CIRCULAR_SIZE}`} {...stylex.props(styles.circular, styles.circularSize(size), isIndeterminate && styles.circularIndeterminate)}>\n      {isIndeterminate ? null : <circle cx={CIRCULAR_SIZE / 2} cy={CIRCULAR_SIZE / 2} fill=\"none\" r={RADIUS} strokeDasharray={arcs.track.strokeDasharray} strokeDashoffset={arcs.track.strokeDashoffset} strokeLinecap=\"round\" strokeWidth={THICKNESS} {...stylex.props(styles.arcMotion, styles.arcTrack, inherit && indicatorStyles.inheritTrack)} />}\n      <circle cx={CIRCULAR_SIZE / 2} cy={CIRCULAR_SIZE / 2} fill=\"none\" pathLength={isIndeterminate ? 100 : undefined} r={RADIUS} strokeDasharray={isIndeterminate ? undefined : arcs.active.strokeDasharray} strokeDashoffset={isIndeterminate ? undefined : arcs.active.strokeDashoffset} strokeLinecap=\"round\" strokeWidth={THICKNESS} {...stylex.props(isIndeterminate ? styles.arcIndeterminate : styles.arcMotion, isIndeterminate ? null : styles.arcActive, inherit && indicatorStyles.inheritActive)} />\n    </svg>;\n}\n\n// What the indicator draws, from React Aria's render state. Built by a call\n// rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result\n// on its inputs.\nfunction indicatorContent(label: ReactNode, showValue: boolean, variant: ProgressIndicatorVariant, buffer: number | undefined, minValue: number, maxValue: number, size: string, tone: ProgressIndicatorTone) {\n  return (state: ProgressBarRenderProps) => <>\n      <IndicatorLabels label={label} value={showValue && !state.isIndeterminate ? state.valueText : undefined} />\n      {variant === 'circular' ? <CircularTrack isIndeterminate={state.isIndeterminate} percentage={state.percentage} size={size} tone={tone} /> : <LinearTrack buffer={bufferShare(buffer, state.percentage, minValue, maxValue)} isIndeterminate={state.isIndeterminate} percentage={state.percentage} tone={tone} />}\n    </>;\n}\nfunction LinearTrack({\n  buffer,\n  isIndeterminate,\n  percentage,\n  tone\n}: {\n  buffer: number | undefined;\n  isIndeterminate: boolean;\n  percentage: number | undefined;\n  tone: ProgressIndicatorTone;\n}) {\n  const inherit = tone === 'inherit';\n  if (isIndeterminate) {\n    return <div className=\"xqu0tyb x1dkaolv x9f619 xh8yej3 xb3r6kr x1n2onr6 x19axjrm x1c071of\">\n        <span {...stylex.props(styles.indeterminateTrack, inherit && indicatorStyles.inheritTrack)} />\n        <span className=\"xqu0tyb x9f619 xh8yej3 x13vifvy x10l6tqk x1nf803f xy02sl2 x1c74tu6 xa4qsjk x4hg7df x1esw782 xoia761\">\n          <span {...stylex.props(styles.indeterminateBarInner, styles.primaryBarInner, inherit && indicatorStyles.inheritActive)} />\n        </span>\n        <span className=\"xqu0tyb x9f619 xh8yej3 x13vifvy x10l6tqk x1nf803f xy02sl2 x1c74tu6 xa4qsjk x1pdi2bj x1esw782 xnsac6p\">\n          <span {...stylex.props(styles.indeterminateBarInner, styles.secondaryBarInner, inherit && indicatorStyles.inheritActive)} />\n        </span>\n      </div>;\n  }\n  return <IndicatorLine percentage={percentage ?? 0} tone={tone}>\n      {buffer === undefined ? undefined : <>\n          <span {...stylex.props(styles.trackBuffered, styles.trackBufferedAt(buffer))} />\n          <span className=\"x114jyov xs4xyr0 xa4qsjk xwx18z9 x1esw782 x1d6qlk4 x1w3jsh0 xwj9l49 x5yr21d x9f619 x1iyjqo2 xeuugli\" />\n        </>}\n    </IndicatorLine>;\n}\n\n/**\n * Progress through a task, as a line or a ring. Its value is React Aria's:\n * pass `value` between `minValue` and `maxValue`, or leave `value` out and\n * set `isIndeterminate` for work whose length is not known. `formatOptions`\n * says how the value reads, in the locale the page is in, and `buffer` marks\n * how far the work is loaded ahead of it.\n *\n * The call site's `className` and `style` land on the indicator as a whole,\n * which is the element a layout positions.\n */\nfunction ProgressIndicator({\n  buffer,\n  label,\n  maxValue = 100,\n  minValue = 0,\n  showValue = false,\n  size = CIRCULAR_SIZE_PX,\n  tone = 'primary',\n  variant = 'linear',\n  ...props\n}: ProgressIndicatorProps) {\n  return <ProgressBar maxValue={maxValue} minValue={minValue} {...props} {...mergeStatefulStyles(stylex.props(indicatorStyles.root, variant === 'circular' && styles.rootCircular), props)}>\n      {indicatorContent(label, showValue, variant, buffer, minValue, maxValue, size, tone)}\n    </ProgressBar>;\n}\nexport type { ProgressIndicatorProps, ProgressIndicatorTone, ProgressIndicatorVariant };\nexport default ProgressIndicator;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","ProgressBarRenderProps","ProgressBarProps","RACProgressBarProps","stylex","ProgressBar","IndicatorTone","IndicatorLabels","IndicatorLine","indicatorStyles","mergeStatefulStyles","colors","motion","radii","CIRCULAR_SIZE","CIRCULAR_SIZE_PX","THICKNESS","GAP","RADIUS","CIRCUMFERENCE","Math","PI","ARC_MS","CYCLE_MS","ROTATE_MS","round","RING_EASING","INDETERMINATE_MS","BUFFER_MS","LINE_SLOWDOWN","RING_SLOWDOWN","primaryTranslate","primaryScale","secondaryTranslate","secondaryScale","buffering","expandArc","travelArc","spin","_temp","kZKoxP","kzqmXN","_temp2","styles","arcActive","kjVXCG","$$css","arcIndeterminate","kkDQuc","k44tkh","ko0y90","kKVMdj","kyAemX","k1ekBW","arcMotion","k6CgDc","kIyJzY","kAMwcw","arcTrack","circular","kB7OPa","k1xSpc","k3aq6I","circularIndeterminate","circularSize","size","val","undefined","indeterminateBarInner","kWkggS","kaIpWk","kpwlN0","kVAEAm","indeterminateTrack","primaryBarInner","rootCircular","kGNEyG","secondaryBarInner","trackBuffered","kmuXW","trackBufferedAt","share","ProgressIndicatorProps","buffer","className","label","showValue","style","tone","ProgressIndicatorTone","variant","ProgressIndicatorVariant","Omit","Extract","arcsFor","percentage","active","track","max","strokeDasharray","strokeDashoffset","bufferShare","minValue","maxValue","value","range","buffered","remaining","min","CircularTrack","t0","$","_c","isIndeterminate","inherit","t1","arcs","t2","props","t3","inheritTrack","t4","t5","t6","t7","inheritActive","t8","t9","indicatorContent","state","valueText","LinearTrack","0","1","ProgressIndicator","T0","t10","t11","t12","root"],"sources":["../../../src/components/progress-indicator/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ProgressBarRenderProps, ProgressBarProps as RACProgressBarProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ProgressBar } from 'react-aria-components';\nimport type { IndicatorTone } from '../../indicator/styles';\nimport { IndicatorLabels, IndicatorLine } from '../../indicator';\nimport { indicatorStyles } from '../../indicator/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii } from '../../tokens/design.tokens.stylex';\n\n// The progress indicators page's two shapes, drawn flat: the page's wavy\n// shape is the Expressive column's alone, and its amplitude and wavelength\n// belong to a variant rather than to this. Both carry the three parts the\n// page's anatomy names — the active indicator in primary, the track in\n// secondary container, and, on the line, the stop indicator in primary at\n// the end — at the page's 4dp thickness, with the 4dp gap its measurements\n// give either side of the track. The ring is the page's default 40dp of the\n// four sizes it draws.\n//\n// The determinate line is a row of those parts, so the active indicator's\n// width is the percentage itself and the track takes what is left. The\n// determinate ring is two arcs of one circle, cut by the dash pattern: the\n// active arc runs from the top for its share of the circumference, and the\n// track picks up 4dp past it and stops 4dp before it comes back round,\n// which is the same gap measured along the curve.\n//\n// The animations are Material's own rather than something assembled from\n// the motion tokens: an indeterminate indicator is a piece of choreography,\n// and one written from scratch reads as a different component beside a\n// Material app. Material Web and Angular Material both descend from the\n// same implementation and agree on every number, so the numbers here are\n// theirs — the line's two bars and their four keyframe sets, the buffer's\n// scrolling dots, the ring's 1333ms arc, its four-arc cycle and its 1568ms\n// rotation, and the 250ms and 500ms a determinate value moves over.\n//\n// Two things are decided differently, both after reading the two of them.\n//\n// The ring is one dashed arc rather than two halves. Material Web draws it\n// as a pair of bordered half-circles, Angular as a pair of clipped SVG\n// circles with a patch over the seam between them; both constructions exist\n// to work around that split, and a single arc whose dash pattern is\n// animated needs neither and shares its geometry with the determinate ring.\n// The three effects it composes are still theirs: the arc grows and shrinks\n// over the arc's duration, its start travels the circle over four of those,\n// and the whole thing turns over the rotation's.\n//\n// Under `prefers-reduced-motion` the motion slows rather than stopping,\n// which is Angular's answer and the better one: an indicator that freezes\n// stops saying the work is going on, and a frozen arc caught at its short\n// end reads as broken. The multipliers are Angular's — two for the line,\n// and a quarter more for the ring.\n//\n// React Aria's `ProgressBar` is the root: it carries the role, the value and\n// its text, and reports the percentage and whether it is indeterminate as\n// render state, which is what everything here is drawn from.\n\n// The circle the arcs are cut from. The radius is the diameter less the\n// stroke, halved, so the stroke sits inside the 40dp box rather than\n// straddling its edge.\n//\n// The thickness and the gap are the same 4dp the shared line is drawn at,\n// written again rather than imported from `src/indicator/styles`: StyleX\n// evaluates the values inside `stylex.create` and `stylex.keyframes` as it\n// compiles, and will not follow an import to a module that is not a theme\n// to reach one — an imported constant fails the transform outright.\nconst CIRCULAR_SIZE = 40;\n// The same value as a length, hoisted rather than built at the parameter.\n// The compiler has no safe reordering for a template literal, so one written\n// as a default parameter skips the whole component around it — which the\n// panic threshold this lands beside turns into a build failure.\nconst CIRCULAR_SIZE_PX = `${CIRCULAR_SIZE}px`;\nconst THICKNESS = 4;\nconst GAP = 4;\nconst RADIUS = (CIRCULAR_SIZE - THICKNESS) / 2;\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS;\n\n// The ring's timings. The arc is 1333ms; a full cycle is four of them; and\n// the rotation is the arc scaled by 360/306, which is the arc's start\n// rotation plus the circle less the arc's size.\nconst ARC_MS = 1333;\nconst CYCLE_MS = ARC_MS * 4;\nconst ROTATE_MS = Math.round(ARC_MS * 360 / 306);\nconst RING_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';\n\n// The line's own: 2s for an indeterminate pass, and the 250ms the buffer's\n// dots take to scroll one pitch. What a determinate value moves over is the\n// shared line's, since a meter moves the same way.\nconst INDETERMINATE_MS = 2000;\nconst BUFFER_MS = 250;\n\n// What `prefers-reduced-motion` slows each shape by.\nconst LINE_SLOWDOWN = 2;\nconst RING_SLOWDOWN = 1.25;\n\n// The two bars of the indeterminate line, translated and scaled at once.\nconst primaryTranslate = \"x1pch1fy-B\";\nconst primaryScale = \"xxyp5q1-B\";\nconst secondaryTranslate = \"xzo9tdn-B\";\nconst secondaryScale = \"x1w7bnrt-B\";\n\n// The buffer's dots scroll by one pitch of the pattern and start again.\nconst buffering = \"x19sykc1-B\";\n\n// The arc's own length, written against a path the circle normalises to 100\n// with `pathLength`, so these are percentages of the circumference rather\n// than lengths StyleX would have to work out.\n//\n// Material contracts to 10 degrees of turn and grows to 270. The 270 is 75\n// of the circumference and is written as it is; the 10 is not, because the\n// page's rounded ends change what a short dash draws. A round cap adds half\n// the stroke at each end, so a 10-degree dash on the 40dp ring is 3px of\n// path inside a 7px capsule of 4px stroke — a dot rather than the sliver\n// Material's square-cut ends give at the same angle. 8 is the shortest the\n// cap still draws as an arc, and it is the floor for that reason rather\n// than because the page names it.\nconst expandArc = \"x1t81ys1-B\";\n\n// Where the arc starts. Material turns it in eight increments of 135 degrees\n// rather than at a constant rate, each eased with the same curve the arc's\n// growth uses, so it settles at each position and springs to the next; three\n// full turns over the cycle, under the rotation's own single turn. The\n// numbers here are those angles along a path of 100: 135 degrees is 37.5 of\n// it, and 1080 degrees is 300.\nconst travelArc = \"x26nhu8-B\";\nconst spin = \"x1fy8ia8-B\";\nconst _temp = {\n  kZKoxP: \"xyq6l7l\",\n  kzqmXN: \"x1uyokj7\",\n  \"$$css\": true\n};\nconst _temp2 = {\n  kzqmXN: \"x1uyokj7\",\n  \"$$css\": true\n};\nconst styles = {\n  arcActive: {\n    kjVXCG: \"x1i9vjva\",\n    $$css: true\n  },\n  arcIndeterminate: {\n    kkDQuc: \"x12dwrod\",\n    k44tkh: \"xxx5gdc\",\n    ko0y90: \"x77zgwx\",\n    kKVMdj: \"x14p4i3i\",\n    kyAemX: \"x1582zw4\",\n    kjVXCG: \"x1i9vjva\",\n    k1ekBW: \"x13b0p5u\",\n    $$css: true\n  },\n  arcMotion: {\n    k6CgDc: \"x12w9bfk\",\n    kIyJzY: \"xd6oih7\",\n    k1ekBW: \"xg0bdzq\",\n    kAMwcw: \"x4ognrn\",\n    $$css: true\n  },\n  arcTrack: {\n    kjVXCG: \"xynoiew\",\n    $$css: true\n  },\n  circular: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x1lliihq\",\n    k3aq6I: \"x9tu13d\",\n    $$css: true\n  },\n  circularIndeterminate: {\n    kkDQuc: \"x7hzzi\",\n    k44tkh: \"x11c9iw4\",\n    ko0y90: \"xa4qsjk\",\n    kKVMdj: \"xpedhrg\",\n    kyAemX: \"x1esw782\",\n    k3aq6I: \"x1c071of\",\n    $$css: true\n  },\n  circularSize: (size: string) => [_temp, {\n    \"--x-blockSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(size),\n    \"--x-inlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(size)\n  }],\n  indeterminateBarInner: {\n    kWkggS: \"xnety89\",\n    kaIpWk: \"x1dkaolv\",\n    kB7OPa: \"x9f619\",\n    kpwlN0: \"x10a8y8t\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  indeterminateTrack: {\n    kWkggS: \"x15dekr4\",\n    kpwlN0: \"x10a8y8t\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  primaryBarInner: {\n    kkDQuc: \"xy02sl2\",\n    k44tkh: \"x1c74tu6\",\n    ko0y90: \"xa4qsjk\",\n    kKVMdj: \"xkj56kq\",\n    kyAemX: \"x1esw782\",\n    $$css: true\n  },\n  rootCircular: {\n    kGNEyG: \"x1cy8zhl\",\n    kzqmXN: \"x14atkfc\",\n    $$css: true\n  },\n  secondaryBarInner: {\n    kkDQuc: \"xy02sl2\",\n    k44tkh: \"x1c74tu6\",\n    ko0y90: \"xa4qsjk\",\n    kKVMdj: \"xnb0dd2\",\n    kyAemX: \"x1esw782\",\n    $$css: true\n  },\n  trackBuffered: {\n    kWkggS: \"x15dekr4\",\n    kZKoxP: \"x5yr21d\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    $$css: true\n  },\n  trackBufferedAt: (share: number) => [_temp2, {\n    \"--x-inlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(`${share}%`)\n  }]\n};\ntype ProgressIndicatorProps = {\n  /**\n   * How far the work is loaded ahead of the value — a video's buffered\n   * seconds, a queue's fetched pages. Read on the same scale as `value`: the\n   * track is solid up to it and dotted beyond. Ignored while the indicator\n   * is indeterminate, and left out for work with nothing to buffer.\n   */\n  buffer?: number;\n  /** A function may compute the class from the indicator's render state. */\n  className?: RACProgressBarProps['className'];\n  /**\n   * What the work is, shown above the indicator. A screen reader reads it as\n   * the indicator's name; an indicator whose surroundings name it takes\n   * `aria-label` instead and leaves this out.\n   */\n  label?: ReactNode;\n  /**\n   * Whether the value is shown beside the label. Ignored while the indicator\n   * is indeterminate, which has no value to show.\n   * @default false\n   */\n  showValue?: boolean;\n  /**\n   * How wide the ring is drawn, as a CSS length. Everything inside scales\n   * with it, so `1em` gives a ring the size of the type around it. Ignored\n   * by the line, which fills the width it is given.\n   *\n   * A length rather than a step of the `sm`/`md`/`lg` scale every other\n   * `size` here takes — see AGENTS.md, under Prop vocabularies. A ring sized\n   * to the type around it is what the prop is for, which no fixed scale\n   * gives; the name predates that rule, and changing it is a breaking change\n   * of its own.\n   * @default '40px'\n   */\n  size?: string;\n  /** A function may compute the style from the indicator's render state. */\n  style?: RACProgressBarProps['style'];\n  /**\n   * Which colours it is drawn in. `primary` is the page's own pair — the\n   * active indicator in primary over a secondary container track — and\n   * `inherit` takes the colour around it, for an indicator inside something\n   * that already has one, such as a button, where primary would be the fill.\n   * @default 'primary'\n   */\n  tone?: ProgressIndicatorTone;\n  /**\n   * The line the page draws, or the ring: `linear` fills the width it is\n   * given, `circular` is 40dp across.\n   * @default 'linear'\n   */\n  variant?: ProgressIndicatorVariant;\n} & Omit<RACProgressBarProps, 'children' | 'className' | 'style'>;\n\n// The two of the shared line's four tones an indicator draws. The other two\n// say how a measurement reads, which is a meter's business rather than a\n// running task's.\ntype ProgressIndicatorTone = Extract<IndicatorTone, 'inherit' | 'primary'>;\ntype ProgressIndicatorVariant = 'circular' | 'linear';\n\n// The dashes that cut the two arcs out of one circle. The active arc runs\n// from the top for its share of the circumference; the track picks up 4dp\n// after it and stops 4dp before it comes back round, which is the page's gap\n// measured along the curve.\nfunction arcsFor(percentage: number | undefined) {\n  const active = (percentage ?? 0) / 100 * CIRCUMFERENCE;\n  const track = Math.max(0, CIRCUMFERENCE - active - 2 * GAP);\n  return {\n    active: {\n      strokeDasharray: `${active} ${CIRCUMFERENCE}`,\n      strokeDashoffset: 0\n    },\n    track: {\n      strokeDasharray: `${track} ${CIRCUMFERENCE}`,\n      strokeDashoffset: -(active + GAP)\n    }\n  };\n}\n\n// How much of the track the buffer covers. The buffer is read on the value's\n// scale, and the track holds what the value has not taken, so the solid part\n// is the buffer's share of that remainder.\nfunction bufferShare(buffer: number | undefined, percentage: number | undefined, minValue: number, maxValue: number) {\n  if (buffer === undefined) {\n    return undefined;\n  }\n  const value = percentage ?? 0;\n  const range = maxValue - minValue;\n  const buffered = range === 0 ? 0 : (buffer - minValue) / range * 100;\n  const remaining = 100 - value;\n  if (remaining <= 0) {\n    return 0;\n  }\n  return Math.min(100, Math.max(0, (buffered - value) / remaining * 100));\n}\nfunction CircularTrack({\n  isIndeterminate,\n  percentage,\n  size,\n  tone\n}: {\n  isIndeterminate: boolean;\n  percentage: number | undefined;\n  size: string;\n  tone: ProgressIndicatorTone;\n}) {\n  const inherit = tone === 'inherit';\n  const arcs = arcsFor(percentage);\n  return <svg aria-hidden=\"true\" viewBox={`0 0 ${CIRCULAR_SIZE} ${CIRCULAR_SIZE}`} {...stylex.props(styles.circular, styles.circularSize(size), isIndeterminate && styles.circularIndeterminate)}>\n      {isIndeterminate ? null : <circle cx={CIRCULAR_SIZE / 2} cy={CIRCULAR_SIZE / 2} fill=\"none\" r={RADIUS} strokeDasharray={arcs.track.strokeDasharray} strokeDashoffset={arcs.track.strokeDashoffset} strokeLinecap=\"round\" strokeWidth={THICKNESS} {...stylex.props(styles.arcMotion, styles.arcTrack, inherit && indicatorStyles.inheritTrack)} />}\n      <circle cx={CIRCULAR_SIZE / 2} cy={CIRCULAR_SIZE / 2} fill=\"none\" pathLength={isIndeterminate ? 100 : undefined} r={RADIUS} strokeDasharray={isIndeterminate ? undefined : arcs.active.strokeDasharray} strokeDashoffset={isIndeterminate ? undefined : arcs.active.strokeDashoffset} strokeLinecap=\"round\" strokeWidth={THICKNESS} {...stylex.props(isIndeterminate ? styles.arcIndeterminate : styles.arcMotion, isIndeterminate ? null : styles.arcActive, inherit && indicatorStyles.inheritActive)} />\n    </svg>;\n}\n\n// What the indicator draws, from React Aria's render state. Built by a call\n// rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result\n// on its inputs.\nfunction indicatorContent(label: ReactNode, showValue: boolean, variant: ProgressIndicatorVariant, buffer: number | undefined, minValue: number, maxValue: number, size: string, tone: ProgressIndicatorTone) {\n  return (state: ProgressBarRenderProps) => <>\n      <IndicatorLabels label={label} value={showValue && !state.isIndeterminate ? state.valueText : undefined} />\n      {variant === 'circular' ? <CircularTrack isIndeterminate={state.isIndeterminate} percentage={state.percentage} size={size} tone={tone} /> : <LinearTrack buffer={bufferShare(buffer, state.percentage, minValue, maxValue)} isIndeterminate={state.isIndeterminate} percentage={state.percentage} tone={tone} />}\n    </>;\n}\nfunction LinearTrack({\n  buffer,\n  isIndeterminate,\n  percentage,\n  tone\n}: {\n  buffer: number | undefined;\n  isIndeterminate: boolean;\n  percentage: number | undefined;\n  tone: ProgressIndicatorTone;\n}) {\n  const inherit = tone === 'inherit';\n  if (isIndeterminate) {\n    return <div className=\"xqu0tyb x1dkaolv x9f619 xh8yej3 xb3r6kr x1n2onr6 x19axjrm x1c071of\">\n        <span {...stylex.props(styles.indeterminateTrack, inherit && indicatorStyles.inheritTrack)} />\n        <span className=\"xqu0tyb x9f619 xh8yej3 x13vifvy x10l6tqk x1nf803f xy02sl2 x1c74tu6 xa4qsjk x4hg7df x1esw782 xoia761\">\n          <span {...stylex.props(styles.indeterminateBarInner, styles.primaryBarInner, inherit && indicatorStyles.inheritActive)} />\n        </span>\n        <span className=\"xqu0tyb x9f619 xh8yej3 x13vifvy x10l6tqk x1nf803f xy02sl2 x1c74tu6 xa4qsjk x1pdi2bj x1esw782 xnsac6p\">\n          <span {...stylex.props(styles.indeterminateBarInner, styles.secondaryBarInner, inherit && indicatorStyles.inheritActive)} />\n        </span>\n      </div>;\n  }\n  return <IndicatorLine percentage={percentage ?? 0} tone={tone}>\n      {buffer === undefined ? undefined : <>\n          <span {...stylex.props(styles.trackBuffered, styles.trackBufferedAt(buffer), inherit && indicatorStyles.inheritTrack)} />\n          <span {...{\n        0: {\n          className: \"x114jyov xs4xyr0 xa4qsjk xwx18z9 x1esw782 x1d6qlk4 x1w3jsh0 xwj9l49 x5yr21d x9f619 x1iyjqo2 xeuugli\"\n        },\n        1: {\n          className: \"x114jyov xs4xyr0 xa4qsjk xwx18z9 x1esw782 x1w3jsh0 xwj9l49 x5yr21d x9f619 x1iyjqo2 xeuugli x1larodg\"\n        }\n      }[!!inherit << 0]} />\n        </>}\n    </IndicatorLine>;\n}\n\n/**\n * Progress through a task, as a line or a ring. Its value is React Aria's:\n * pass `value` between `minValue` and `maxValue`, or leave `value` out and\n * set `isIndeterminate` for work whose length is not known. `formatOptions`\n * says how the value reads, in the locale the page is in, and `buffer` marks\n * how far the work is loaded ahead of it.\n *\n * The call site's `className` and `style` land on the indicator as a whole,\n * which is the element a layout positions.\n */\nfunction ProgressIndicator({\n  buffer,\n  label,\n  maxValue = 100,\n  minValue = 0,\n  showValue = false,\n  size = CIRCULAR_SIZE_PX,\n  tone = 'primary',\n  variant = 'linear',\n  ...props\n}: ProgressIndicatorProps) {\n  return <ProgressBar maxValue={maxValue} minValue={minValue} {...props} {...mergeStatefulStyles(stylex.props(indicatorStyles.root, variant === 'circular' && styles.rootCircular), props)}>\n      {indicatorContent(label, showValue, variant, buffer, minValue, maxValue, size, tone)}\n    </ProgressBar>;\n}\nexport type { ProgressIndicatorProps, ProgressIndicatorTone, ProgressIndicatorVariant };\nexport default ProgressIndicator;"],"mappings":"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"}

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

@@ -59,7 +59,7 @@ declare function SheetHeader(props: HTMLAttributes<HTMLDivElement>): import("rea
  * itself as an unnamed dialog.
  */
 declare function SheetTitle(props: SheetTitleProps): import("react").JSX.Element;
-type SheetContentProps = Omit<DialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'isDismissable' | 'isKeyboardDismissDisabled'> & {
+type SheetContentProps = Omit<DialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'isKeyboardDismissDisabled'> & {
   /** A function may compute the class from the panel's render state. */
   className?: ClassNameOrFunction<ModalRenderProps>;
   /**
@@ -70,6 +70,14 @@ type SheetContentProps = Omit<DialogProps, 'className' | 'style'> & Pick<ModalOv
    * `prefers-color-scheme` default.
    */
   container?: Element;
+  /**
+   * Whether a press on the scrim, outside the panel, closes the sheet.
+   * `true` here where React Aria's own default is `false`, since a sheet
+   * that ignores a tap outside it reads as stuck. Escape is
+   * `isKeyboardDismissDisabled`'s, and this says nothing about it.
+   * @default true
+   */
+  isDismissable?: boolean;
   /** A function may compute the style from the panel's render state. */
   style?: StyleOrFunction<ModalRenderProps>;
 };

package/dist/components/sheet/index.js

@@ -108,7 +108,7 @@ function SheetContent(t0) {
 	} else t2 = $[8];
 	let t3;
 	if ($[9] !== className || $[10] !== style) {
-		t3 = mergeStatefulStyles({ className: "x1n1nwrg x1u6grsq x1ioi8j8 xu2fq7p x18ihq2d x16dv9tl x1vnz5z6 xkducg2 xrzall9 xb0nsol x1a37zkv xys6ro8 x6xk272 x9t1vth x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x1l2rt3b xwvxfow x1ey2m1c x13vifvy xmpip4z xtijo5x xhi6v0a x1upgybz x7ab17h x11ijow0 xb3r6kr xixxii4" }, {
+		t3 = mergeStatefulStyles({ 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 xixxii4" }, {
 			className,
 			style
 		});

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["HTMLAttributes","ReactNode","ClassNameOrFunction","DialogProps","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","StyleOrFunction","stylex","Dialog","DialogTrigger","Heading","Modal","ModalOverlay","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","spacing","typography","slideInFromEnd","slideInFromStart","slideInFromBottom","SheetProps","Omit","children","Sheet","t0","$","_c","props","t1","SheetBody","className","SheetContent","container","isKeyboardDismissDisabled","style","isDismissable","undefined","t2","Symbol","for","scrim","t3","t4","modalDialog","t5","t6","t7","SheetFooter","SheetHandle","SheetHeader","SheetTitle","Body","Content","Footer","Handle","Header","Title","SheetContentProps","Pick","Element","SheetTitleProps"],"sources":["../../../src/components/sheet/index.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport type { ClassNameOrFunction, DialogProps, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Dialog, DialogTrigger, Heading, Modal, ModalOverlay } from 'react-aria-components';\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// 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.\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 */\nfunction Sheet({\n  children,\n  ...props\n}: SheetProps) {\n  return <DialogTrigger {...props}>{children}</DialogTrigger>;\n}\nfunction SheetBody(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xxj4525 x1odjw0f xp6hjv6 xg0ps1x\"\n  }, 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 */\nfunction SheetContent({\n  children,\n  className,\n  container,\n  isDismissable = true,\n  isKeyboardDismissDisabled,\n  style,\n  ...props\n}: SheetContentProps) {\n  return <ModalOverlay isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled}\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 {...mergeStatefulStyles({\n      className: \"x1n1nwrg x1u6grsq x1ioi8j8 xu2fq7p x18ihq2d x16dv9tl x1vnz5z6 xkducg2 xrzall9 xb0nsol x1a37zkv xys6ro8 x6xk272 x9t1vth x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x1l2rt3b xwvxfow x1ey2m1c x13vifvy xmpip4z xtijo5x xhi6v0a x1upgybz x7ab17h x11ijow0 xb3r6kr 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>) {\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>) {\n  return <div aria-hidden=\"true\" {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x1s85apg x37i4ze x2lah0s xl56j7k x1xg6qyv\"\n  }, props)}>\n      <span className=\"x1ccu2yh xqu0tyb x1dkaolv x9f619 x1td3qas\" />\n    </div>;\n}\nfunction SheetHeader(props: HTMLAttributes<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: 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 dismissal settings and the panel's\n// styling. A call site has no reason to know there are three elements:\n// `className` and `style` reach the panel, which is the one worth restyling\n// and positioning, and everything else lands on the dialog.\ntype SheetContentProps = Omit<DialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'isDismissable' | 'isKeyboardDismissDisabled'> & {\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 end of `<body>`,\n   * which is right for an app that sets its StyleX theme on `:root`. An app\n   * that scopes the theme to a subtree has to point this at an element inside\n   * it, or the sheet renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\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 default Sheet;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["HTMLAttributes","ReactNode","ClassNameOrFunction","DialogProps","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","StyleOrFunction","stylex","Dialog","DialogTrigger","Heading","Modal","ModalOverlay","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","spacing","typography","FORCED_COLORS","slideInFromEnd","slideInFromStart","slideInFromBottom","SheetProps","Omit","children","Sheet","t0","$","_c","props","t1","SheetBody","className","SheetContent","container","isKeyboardDismissDisabled","style","isDismissable","undefined","t2","Symbol","for","scrim","t3","t4","modalDialog","t5","t6","t7","SheetFooter","SheetHandle","SheetHeader","SheetTitle","Body","Content","Footer","Handle","Header","Title","SheetContentProps","Pick","Element","SheetTitleProps"],"sources":["../../../src/components/sheet/index.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport type { ClassNameOrFunction, DialogProps, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Dialog, DialogTrigger, Heading, Modal, ModalOverlay } from 'react-aria-components';\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.\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 */\nfunction Sheet({\n  children,\n  ...props\n}: SheetProps) {\n  return <DialogTrigger {...props}>{children}</DialogTrigger>;\n}\nfunction SheetBody(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xxj4525 x1odjw0f xp6hjv6 xg0ps1x\"\n  }, 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 */\nfunction SheetContent({\n  children,\n  className,\n  container,\n  isDismissable = true,\n  isKeyboardDismissDisabled,\n  style,\n  ...props\n}: SheetContentProps) {\n  return <ModalOverlay isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled}\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 {...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 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>) {\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>) {\n  return <div aria-hidden=\"true\" {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x1s85apg x37i4ze x2lah0s xl56j7k x1xg6qyv\"\n  }, props)}>\n      <span className=\"x1ccu2yh xqu0tyb x1dkaolv x9f619 x1td3qas\" />\n    </div>;\n}\nfunction SheetHeader(props: HTMLAttributes<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: 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 dismissal settings and the panel's\n// styling. A call site has no reason to know there are three elements:\n// `className` and `style` reach the panel, which is the one worth restyling\n// and positioning, and everything else lands on the dialog.\n//\n// `isDismissable` is declared here rather than picked with its sibling, since\n// the picked one carries React Aria's documentation, whose default is the\n// reverse of this component's.\ntype SheetContentProps = Omit<DialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'isKeyboardDismissDisabled'> & {\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 end of `<body>`,\n   * which is right for an app that sets its StyleX theme on `:root`. An app\n   * that scopes the theme to a subtree has to point this at an element inside\n   * it, or the sheet renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\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 default Sheet;"],"mappings":"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"}

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

@@ -10,8 +10,8 @@ type SnackbarAction = {
 /** What a snackbar carries: its message, and what may sit beside it. */
 type SnackbarMessage = {
   action: SnackbarAction | undefined;
-  isDismissable: boolean;
   message: ReactNode;
+  showCloseButton: boolean;
 };
 type SnackbarOptions = {
   /**
@@ -19,14 +19,18 @@ type SnackbarOptions = {
    * closes the snackbar, which is what the page draws.
    */
   action?: SnackbarAction;
+  /** Run when the snackbar closes, however it was closed. */
+  onClose?: () => void;
   /**
    * Whether a close button is shown at the end. The page draws one for a
    * message a reader may want out of the way before it expires.
+   *
+   * Named for what it draws rather than `isDismissable`, which on `Sheet`,
+   * `Dialog` and React Aria's modals is whether a press outside them closes
+   * them — a snackbar has no outside to press.
    * @default false
    */
-  isDismissable?: boolean;
-  /** Run when the snackbar closes, however it was closed. */
-  onClose?: () => void;
+  showCloseButton?: boolean;
   /**
    * How long the snackbar is shown, in milliseconds. Defaults to the page's
    * short duration, or its long one when there is an action to read, and the
@@ -34,7 +38,7 @@ type SnackbarOptions = {
    * expires while it is being read.
    *
    * `0` is the page's indefinite length: the snackbar stays until something
-   * closes it. Give one of those an action or `isDismissable`, or there is no
+   * closes it. Give one of those an action or `showCloseButton`, or there is no
    * way to be rid of it.
    */
   timeout?: number;

package/dist/components/snackbar/index.js

@@ -72,11 +72,11 @@ var SnackbarQueue = class {
 	* Shows a message, and returns the key that closes it.
 	*/
 	add(message, options = {}) {
-		const { action, isDismissable = false, onClose, timeout } = options;
+		const { action, onClose, showCloseButton = false, timeout } = options;
 		return this.rac.add({
 			action,
-			isDismissable,
-			message
+			message,
+			showCloseButton
 		}, {
 			onClose,
 			timeout: timeout ?? (action === void 0 ? SHORT_MS : LONG_MS)
@@ -232,7 +232,7 @@ function snackbarContent(queue, closeLabel) {
 /** The action, the close button, or nothing, after the message. */
 function SnackbarControls(t0) {
 	const $ = c(9);
-	const { action, close, closeLabel, isDismissable } = t0;
+	const { action, close, closeLabel, showCloseButton } = t0;
 	let t1;
 	if ($[0] !== action || $[1] !== close) {
 		t1 = action === void 0 ? null : /* @__PURE__ */ jsx(SnackbarButton, {
@@ -245,15 +245,15 @@ function SnackbarControls(t0) {
 		$[2] = t1;
 	} else t1 = $[2];
 	let t2;
-	if ($[3] !== closeLabel || $[4] !== isDismissable) {
-		t2 = isDismissable ? /* @__PURE__ */ jsx(SnackbarButton, {
+	if ($[3] !== closeLabel || $[4] !== showCloseButton) {
+		t2 = showCloseButton ? /* @__PURE__ */ jsx(SnackbarButton, {
 			"aria-label": closeLabel,
 			slot: "close",
 			style: styles.close,
 			children: /* @__PURE__ */ jsx(CloseGlyph, { className: "xxk0z11 xvy4d1p" })
 		}) : null;
 		$[3] = closeLabel;
-		$[4] = isDismissable;
+		$[4] = showCloseButton;
 		$[5] = t2;
 	} else t2 = $[5];
 	let t3;
@@ -269,7 +269,7 @@ function SnackbarControls(t0) {
 function SnackbarToast(t0) {
 	const $ = c(11);
 	const { close, closeLabel, toast } = t0;
-	const { action, isDismissable, message } = toast.content;
+	const { action, message, showCloseButton } = toast.content;
 	let t1;
 	if ($[0] !== message) {
 		t1 = /* @__PURE__ */ jsx(UNSTABLE_ToastContent, {
@@ -283,17 +283,17 @@ function SnackbarToast(t0) {
 		$[1] = t1;
 	} else t1 = $[1];
 	let t2;
-	if ($[2] !== action || $[3] !== close || $[4] !== closeLabel || $[5] !== isDismissable) {
+	if ($[2] !== action || $[3] !== close || $[4] !== closeLabel || $[5] !== showCloseButton) {
 		t2 = /* @__PURE__ */ jsx(SnackbarControls, {
 			action,
 			close,
 			closeLabel,
-			isDismissable
+			showCloseButton
 		});
 		$[2] = action;
 		$[3] = close;
 		$[4] = closeLabel;
-		$[5] = isDismissable;
+		$[5] = showCloseButton;
 		$[6] = t2;
 	} else t2 = $[6];
 	let t3;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","FocusableElement","ToastRegionProps","RACToastRegionProps","ToastRegionRenderProps","stylex","Button","RACButton","UNSTABLE_Toast","RACToast","UNSTABLE_ToastContent","RACToastContent","UNSTABLE_ToastQueue","RACToastQueue","UNSTABLE_ToastRegion","RACToastRegion","Text","CloseGlyph","useRipple","mergeStatefulStyles","colors","motion","radii","shadows","sizing","spacing","stateLayerOpacity","typography","SHORT_MS","LONG_MS","WIDE","rise","styles","action","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","k8WAf4","kg3NbH","$$css","close","kZKoxP","kzqmXN","kmVPX3","control","kGNEyG","kWkggS","kaIpWk","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kjj79g","kjBf7l","kInvED","k3XXqK","kMeerF","kVQacm","kVAEAm","SnackbarAction","label","onPress","SnackbarMessage","isDismissable","message","SnackbarOptions","onClose","timeout","SnackbarProps","className","closeLabel","queue","SnackbarQueue","style","Omit","SnackbarToastItem","rac","constructor","maxVisibleToasts","add","options","undefined","clear","key","actionPress","closeToast","Snackbar","t0","$","_c","T0","t1","t2","t3","t4","t5","props","snackbarContent","SnackbarButton","children","ripple","handlers","surface","toast","SnackbarControls","SnackbarToast","content","Queue","SnackbarRegionRenderProps"],"sources":["../../../src/components/snackbar/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { FocusableElement, ToastRegionProps as RACToastRegionProps, ToastRegionRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, UNSTABLE_Toast as RACToast, UNSTABLE_ToastContent as RACToastContent, UNSTABLE_ToastQueue as RACToastQueue, UNSTABLE_ToastRegion as RACToastRegion, Text } from 'react-aria-components';\nimport { CloseGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The snackbar page's brief message at the bottom of the screen, with an\n// optional action beside it and an optional close button after that. The\n// page's container is the inverse surface at a 4dp corner and elevation 3,\n// its supporting text is body-medium in inverse on surface, its action label\n// is inverse primary, and its close icon takes the supporting text's colour.\n// The measurements are the page's too: 8dp of margin from the edges of the\n// screen, 8dp of padding inside the container with another 8dp either side\n// of the message, 14dp above and below on a single line, and between 320 and\n// 576dp wide above the page's 600dp breakpoint — full width below it.\n//\n// One at a time. The page shows a single snackbar and replaces it rather\n// than stacking, which is `maxVisibleToasts: 1` on the queue.\n//\n// React Aria's toast is the behaviour: the region is a landmark that holds\n// the message, moves focus into it for a keyboard, and pauses every timer\n// while it is hovered or focused, so a message never expires while it is\n// being read or acted on.\n//\n// Three things are decided here rather than taken from React Aria or from\n// the page.\n//\n// **The queue is ours, not React Aria's.** React Aria's toast is still\n// `UNSTABLE_`, and `SnackbarQueue` is what keeps that name out of a\n// consumer's code — an upstream rename is this file rather than every call\n// site. It wraps their queue, defaults it to one visible message, and takes\n// the message and its options as one call.\n//\n// **The action and the close button are drawn here rather than through\n// Button and IconButton.** The page colours them inverse primary and inverse\n// on surface, which no variant of either carries, and a colour pushed in\n// from outside through `className` is the merge hazard AGENTS.md describes:\n// StyleX decides between two atomic classes by their order in the compiled\n// stylesheet, not by the order they are applied. Both are React Aria's\n// `Button` with the same ripple and the same state layers, over\n// `currentColor` so each takes the colour the snackbar gives it.\n//\n// **There is no `container` prop.** Every other overlay here takes one,\n// because React Aria's `Modal` and `Popover` accept a portal container, and\n// `src/components/portal-container.test.tsx` is what keeps that true.\n// Its toast region does not: it reads a portal provider that\n// `react-aria-components` does not export, so the region always lands at the\n// end of `<body>`. An app that scopes its StyleX theme to a subtree has to\n// put the theme on `:root` for the snackbar to be drawn in it.\n\n// The page's two durations, from the same implementation its measurements\n// come from: a message alone is shown for the short one, a message with an\n// action for the long one, since an action has to be read before it can be\n// taken.\nconst SHORT_MS = 1500;\nconst LONG_MS = 2750;\n\n// Below the page's 600dp breakpoint the snackbar runs the width of the\n// screen; above it, it takes between 320 and 576.\nconst WIDE = '@media (min-width: 600px)';\n\n// The page's own is a fade. It rises a little as it arrives too, which is\n// what the page draws and what says the message came from the edge of the\n// screen rather than appearing over it.\nconst rise = \"x15b941j-B\";\nconst styles = {\n  action: {\n    kMwMTN: \"x16bex6i\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x18fpw6u\",\n    $$css: true\n  },\n  close: {\n    kZKoxP: \"xbg5kjn\",\n    kMwMTN: \"x1girmi0\",\n    kzqmXN: \"xoqf9c6\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  control: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xy3r1oc x1en43ny x15a1ka xjbqb8w\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kjBf7l: \"x14ytart\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  }\n};\ntype SnackbarAction = {\n  /** What the action says. The page gives it a single word where it can. */\n  label: string;\n  /** Run when the action is pressed, just before the snackbar closes. */\n  onPress: () => void;\n};\n\n/** What a snackbar carries: its message, and what may sit beside it. */\ntype SnackbarMessage = {\n  action: SnackbarAction | undefined;\n  isDismissable: boolean;\n  message: ReactNode;\n};\ntype SnackbarOptions = {\n  /**\n   * A single action shown after the message. Pressing it runs `onPress` and\n   * closes the snackbar, which is what the page draws.\n   */\n  action?: SnackbarAction;\n  /**\n   * Whether a close button is shown at the end. The page draws one for a\n   * message a reader may want out of the way before it expires.\n   * @default false\n   */\n  isDismissable?: boolean;\n  /** Run when the snackbar closes, however it was closed. */\n  onClose?: () => void;\n  /**\n   * How long the snackbar is shown, in milliseconds. Defaults to the page's\n   * short duration, or its long one when there is an action to read, and the\n   * timer is paused while the region is hovered or focused so a message never\n   * expires while it is being read.\n   *\n   * `0` is the page's indefinite length: the snackbar stays until something\n   * closes it. Give one of those an action or `isDismissable`, or there is no\n   * way to be rid of it.\n   */\n  timeout?: number;\n};\ntype SnackbarProps = {\n  /**\n   * What a screen reader calls the region holding the snackbar. Left out,\n   * React Aria names the region itself: a count of the messages it holds, in\n   * the reader's own locale — \"1 notification.\" in English, and one of some\n   * thirty languages otherwise. Pass a name only to replace that, and pass a\n   * translated one, since whatever is passed is read as written.\n   */\n  'aria-label'?: string;\n  /** A function may compute the class from the region's render state. */\n  className?: RACToastRegionProps<SnackbarMessage>['className'];\n  /**\n   * What a screen reader calls the button that dismisses a snackbar. It sits\n   * here rather than on a message's own options because it does not vary by\n   * message, so putting it there would make every `add` call repeat it.\n   * @default 'Close'\n   */\n  closeLabel?: string;\n  /** The queue the region shows messages from. */\n  queue: SnackbarQueue;\n  /** A function may compute the style from the region's render state. */\n  style?: RACToastRegionProps<SnackbarMessage>['style'];\n} & Omit<RACToastRegionProps<SnackbarMessage>, 'children' | 'className' | 'queue' | 'style'>;\n\n// One entry of the queue, as React Aria hands it to the region's render\n// function. Taken from its render state rather than imported from\n// `react-stately`, which this package does not depend on.\ntype SnackbarToastItem = ToastRegionRenderProps<SnackbarMessage>['visibleToasts'][number];\n\n/**\n * The queue a snackbar is shown from. Make one where the app can reach it —\n * a module of its own is the usual place — mount `Snackbar` once with it,\n * and call `add` from anywhere.\n *\n * ```ts\n * const messages = new Snackbar.Queue()\n * messages.add('Label', { action: { label: 'Undo', onPress: undo } })\n * ```\n *\n * It wraps React Aria's toast queue rather than exposing it, which is what\n * keeps that API's `UNSTABLE_` name out of a consumer's code.\n */\nclass SnackbarQueue {\n  /**\n   * React Aria's queue, which `Snackbar` subscribes to. Not part of the\n   * package's API — read it and an upstream release may break the call site.\n   */\n  readonly rac: RACToastQueue<SnackbarMessage>;\n  constructor() {\n    // One at a time, which is what the page shows: a second message replaces\n    // the first rather than stacking under it.\n    this.rac = new RACToastQueue<SnackbarMessage>({\n      maxVisibleToasts: 1\n    });\n  }\n\n  /**\n   * Shows a message, and returns the key that closes it.\n   */\n  add(message: ReactNode, options: SnackbarOptions = {}) {\n    const {\n      action,\n      isDismissable = false,\n      onClose,\n      timeout\n    } = options;\n    return this.rac.add({\n      action,\n      isDismissable,\n      message\n    }, {\n      onClose,\n      timeout: timeout ?? (action === undefined ? SHORT_MS : LONG_MS)\n    });\n  }\n\n  /** Closes every snackbar, shown or waiting. */\n  clear() {\n    this.rac.clear();\n  }\n\n  /** Closes one snackbar, by the key `add` returned. */\n  close(key: string) {\n    this.rac.close(key);\n  }\n}\n\n// The three handlers the snackbar hands to something below it, each built by\n// a call rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result on\n// its inputs.\nfunction actionPress(action: SnackbarAction, close: () => void) {\n  return () => {\n    action.onPress();\n    close();\n  };\n}\nfunction closeToast(queue: SnackbarQueue, key: string) {\n  return () => {\n    queue.close(key);\n  };\n}\n\n/**\n * A brief message at the bottom of the screen, with an optional action. Mount\n * one of these with a `Snackbar.Queue`, and call the queue's `add` to show a\n * message from anywhere.\n *\n * ```tsx\n * const messages = new Snackbar.Queue()\n *\n * <Snackbar queue={messages} />\n * ```\n *\n * The region is portalled to the end of `<body>` and renders nothing while\n * the queue is empty. It is one region rather than one per message, so mount\n * it once, near the root.\n *\n * The call site's `className` and `style` land on that region, which is the\n * element a layout positions.\n */\nfunction Snackbar({\n  closeLabel = 'Close',\n  queue,\n  ...props\n}: SnackbarProps) {\n  return <RACToastRegion<SnackbarMessage> queue={queue.rac} {...props} {...mergeStatefulStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xdt5ytf x126z3so x1ey2m1c x17y0mx6 x1t137rt x1a7rqcl x47corl xixxii4 xfo81ep\"\n  }, props)}>\n      {snackbarContent(queue, closeLabel)}\n    </RACToastRegion>;\n}\n\n/**\n * One of the snackbar's two controls. React Aria's `Button` rather than the\n * library's, for the colour reason in the comment at the top of this file;\n * the ripple and the state layers are the same ones every other control\n * here draws, over `currentColor`.\n */\nfunction SnackbarButton({\n  children,\n  style,\n  ...props\n}: {\n  'aria-label'?: string;\n  children: ReactNode;\n  onPress?: () => void;\n  slot?: string;\n  style: stylex.StyleXStyles;\n}) {\n  const ripple = useRipple<FocusableElement>();\n  return <RACButton {...ripple.handlers} {...props} {...stylex.props(styles.control, style)}>\n      {children}\n      {ripple.surface}\n    </RACButton>;\n}\nfunction snackbarContent(queue: SnackbarQueue, closeLabel: string) {\n  return ({\n    toast\n  }: {\n    toast: SnackbarToastItem;\n  }) => <SnackbarToast close={closeToast(queue, toast.key)} closeLabel={closeLabel} toast={toast} />;\n}\n\n/** The action, the close button, or nothing, after the message. */\nfunction SnackbarControls({\n  action,\n  close,\n  closeLabel,\n  isDismissable\n}: {\n  action: SnackbarAction | undefined;\n  close: () => void;\n  closeLabel: string;\n  isDismissable: boolean;\n}) {\n  return <>\n      {action === undefined ? null : <SnackbarButton onPress={actionPress(action, close)} style={styles.action}>\n          {action.label}\n        </SnackbarButton>}\n      {isDismissable ? <SnackbarButton aria-label={closeLabel} slot=\"close\" style={styles.close}>\n          <CloseGlyph className=\"xxk0z11 xvy4d1p\" />\n        </SnackbarButton> : null}\n    </>;\n}\n\n/** One snackbar: its message, then whatever sits after it. */\nfunction SnackbarToast({\n  close,\n  closeLabel,\n  toast\n}: {\n  close: () => void;\n  closeLabel: string;\n  toast: SnackbarToastItem;\n}) {\n  const {\n    action,\n    isDismissable,\n    message\n  } = toast.content;\n  return <RACToast toast={toast} className=\"x6s0dn4 x1n1nwrg x1u6grsq x1dwmuk9 x16dv9tl x1c5gpgi x1tfhd1 x1udv5rz x9f619 x78zum5 xh8yej3 x1x1rfll xlx31pv x1dry9sr xeuugli xuq8xha x1ulcdur x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd xn60lsn x67bb7w\">\n      <RACToastContent className=\"x9f619 x1girmi0 x1iyjqo2 xpo2rfv x193rfdd x1hews6w xn43zvd xv61bfh xz158ff xeuugli xxlmvz2\">\n        <Text slot=\"title\">{message}</Text>\n      </RACToastContent>\n      <SnackbarControls action={action} close={close} closeLabel={closeLabel} isDismissable={isDismissable} />\n    </RACToast>;\n}\nSnackbar.Queue = SnackbarQueue;\n\n// The queue is reached as `Snackbar.Queue` rather than exported beside the\n// component: this file would otherwise export something that is not a\n// component, which is what turns fast refresh off for it.\nexport type { SnackbarAction, SnackbarMessage, SnackbarOptions, SnackbarProps, SnackbarQueue, ToastRegionRenderProps as SnackbarRegionRenderProps };\nexport default Snackbar;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","FocusableElement","ToastRegionProps","RACToastRegionProps","ToastRegionRenderProps","stylex","Button","RACButton","UNSTABLE_Toast","RACToast","UNSTABLE_ToastContent","RACToastContent","UNSTABLE_ToastQueue","RACToastQueue","UNSTABLE_ToastRegion","RACToastRegion","Text","CloseGlyph","useRipple","mergeStatefulStyles","colors","motion","radii","shadows","sizing","spacing","stateLayerOpacity","typography","SHORT_MS","LONG_MS","WIDE","rise","styles","action","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","k8WAf4","kg3NbH","$$css","close","kZKoxP","kzqmXN","kmVPX3","control","kGNEyG","kWkggS","kaIpWk","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kjj79g","kjBf7l","kInvED","k3XXqK","kMeerF","kVQacm","kVAEAm","SnackbarAction","label","onPress","SnackbarMessage","message","showCloseButton","SnackbarOptions","onClose","timeout","SnackbarProps","className","closeLabel","queue","SnackbarQueue","style","Omit","SnackbarToastItem","rac","constructor","maxVisibleToasts","add","options","undefined","clear","key","actionPress","closeToast","Snackbar","t0","$","_c","T0","t1","t2","t3","t4","t5","props","snackbarContent","SnackbarButton","children","ripple","handlers","surface","toast","SnackbarControls","SnackbarToast","content","Queue","SnackbarRegionRenderProps"],"sources":["../../../src/components/snackbar/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { FocusableElement, ToastRegionProps as RACToastRegionProps, ToastRegionRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, UNSTABLE_Toast as RACToast, UNSTABLE_ToastContent as RACToastContent, UNSTABLE_ToastQueue as RACToastQueue, UNSTABLE_ToastRegion as RACToastRegion, Text } from 'react-aria-components';\nimport { CloseGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The snackbar page's brief message at the bottom of the screen, with an\n// optional action beside it and an optional close button after that. The\n// page's container is the inverse surface at a 4dp corner and elevation 3,\n// its supporting text is body-medium in inverse on surface, its action label\n// is inverse primary, and its close icon takes the supporting text's colour.\n// The measurements are the page's too: 8dp of margin from the edges of the\n// screen, 8dp of padding inside the container with another 8dp either side\n// of the message, 14dp above and below on a single line, and between 320 and\n// 576dp wide above the page's 600dp breakpoint — full width below it.\n//\n// One at a time. The page shows a single snackbar and replaces it rather\n// than stacking, which is `maxVisibleToasts: 1` on the queue.\n//\n// React Aria's toast is the behaviour: the region is a landmark that holds\n// the message, moves focus into it for a keyboard, and pauses every timer\n// while it is hovered or focused, so a message never expires while it is\n// being read or acted on.\n//\n// Three things are decided here rather than taken from React Aria or from\n// the page.\n//\n// **The queue is ours, not React Aria's.** React Aria's toast is still\n// `UNSTABLE_`, and `SnackbarQueue` is what keeps that name out of a\n// consumer's code — an upstream rename is this file rather than every call\n// site. It wraps their queue, defaults it to one visible message, and takes\n// the message and its options as one call.\n//\n// **The action and the close button are drawn here rather than through\n// Button and IconButton.** The page colours them inverse primary and inverse\n// on surface, which no variant of either carries, and a colour pushed in\n// from outside through `className` is the merge hazard AGENTS.md describes:\n// StyleX decides between two atomic classes by their order in the compiled\n// stylesheet, not by the order they are applied. Both are React Aria's\n// `Button` with the same ripple and the same state layers, over\n// `currentColor` so each takes the colour the snackbar gives it.\n//\n// **There is no `container` prop.** Every other overlay here takes one,\n// because React Aria's `Modal` and `Popover` accept a portal container, and\n// `src/components/portal-container.test.tsx` is what keeps that true.\n// Its toast region does not: it reads a portal provider that\n// `react-aria-components` does not export, so the region always lands at the\n// end of `<body>`. An app that scopes its StyleX theme to a subtree has to\n// put the theme on `:root` for the snackbar to be drawn in it.\n\n// The page's two durations, from the same implementation its measurements\n// come from: a message alone is shown for the short one, a message with an\n// action for the long one, since an action has to be read before it can be\n// taken.\nconst SHORT_MS = 1500;\nconst LONG_MS = 2750;\n\n// Below the page's 600dp breakpoint the snackbar runs the width of the\n// screen; above it, it takes between 320 and 576.\nconst WIDE = '@media (min-width: 600px)';\n\n// The page's own is a fade. It rises a little as it arrives too, which is\n// what the page draws and what says the message came from the edge of the\n// screen rather than appearing over it.\nconst rise = \"x15b941j-B\";\nconst styles = {\n  action: {\n    kMwMTN: \"x16bex6i\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x18fpw6u\",\n    $$css: true\n  },\n  close: {\n    kZKoxP: \"xbg5kjn\",\n    kMwMTN: \"x1girmi0\",\n    kzqmXN: \"xoqf9c6\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  control: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xy3r1oc x1en43ny x15a1ka xjbqb8w\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kjBf7l: \"x14ytart\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  }\n};\ntype SnackbarAction = {\n  /** What the action says. The page gives it a single word where it can. */\n  label: string;\n  /** Run when the action is pressed, just before the snackbar closes. */\n  onPress: () => void;\n};\n\n/** What a snackbar carries: its message, and what may sit beside it. */\ntype SnackbarMessage = {\n  action: SnackbarAction | undefined;\n  message: ReactNode;\n  showCloseButton: boolean;\n};\ntype SnackbarOptions = {\n  /**\n   * A single action shown after the message. Pressing it runs `onPress` and\n   * closes the snackbar, which is what the page draws.\n   */\n  action?: SnackbarAction;\n  /** Run when the snackbar closes, however it was closed. */\n  onClose?: () => void;\n  /**\n   * Whether a close button is shown at the end. The page draws one for a\n   * message a reader may want out of the way before it expires.\n   *\n   * Named for what it draws rather than `isDismissable`, which on `Sheet`,\n   * `Dialog` and React Aria's modals is whether a press outside them closes\n   * them — a snackbar has no outside to press.\n   * @default false\n   */\n  showCloseButton?: boolean;\n  /**\n   * How long the snackbar is shown, in milliseconds. Defaults to the page's\n   * short duration, or its long one when there is an action to read, and the\n   * timer is paused while the region is hovered or focused so a message never\n   * expires while it is being read.\n   *\n   * `0` is the page's indefinite length: the snackbar stays until something\n   * closes it. Give one of those an action or `showCloseButton`, or there is no\n   * way to be rid of it.\n   */\n  timeout?: number;\n};\ntype SnackbarProps = {\n  /**\n   * What a screen reader calls the region holding the snackbar. Left out,\n   * React Aria names the region itself: a count of the messages it holds, in\n   * the reader's own locale — \"1 notification.\" in English, and one of some\n   * thirty languages otherwise. Pass a name only to replace that, and pass a\n   * translated one, since whatever is passed is read as written.\n   */\n  'aria-label'?: string;\n  /** A function may compute the class from the region's render state. */\n  className?: RACToastRegionProps<SnackbarMessage>['className'];\n  /**\n   * What a screen reader calls the button that dismisses a snackbar. It sits\n   * here rather than on a message's own options because it does not vary by\n   * message, so putting it there would make every `add` call repeat it.\n   * @default 'Close'\n   */\n  closeLabel?: string;\n  /** The queue the region shows messages from. */\n  queue: SnackbarQueue;\n  /** A function may compute the style from the region's render state. */\n  style?: RACToastRegionProps<SnackbarMessage>['style'];\n} & Omit<RACToastRegionProps<SnackbarMessage>, 'children' | 'className' | 'queue' | 'style'>;\n\n// One entry of the queue, as React Aria hands it to the region's render\n// function. Taken from its render state rather than imported from\n// `react-stately`, which this package does not depend on.\ntype SnackbarToastItem = ToastRegionRenderProps<SnackbarMessage>['visibleToasts'][number];\n\n/**\n * The queue a snackbar is shown from. Make one where the app can reach it —\n * a module of its own is the usual place — mount `Snackbar` once with it,\n * and call `add` from anywhere.\n *\n * ```ts\n * const messages = new Snackbar.Queue()\n * messages.add('Label', { action: { label: 'Undo', onPress: undo } })\n * ```\n *\n * It wraps React Aria's toast queue rather than exposing it, which is what\n * keeps that API's `UNSTABLE_` name out of a consumer's code.\n */\nclass SnackbarQueue {\n  /**\n   * React Aria's queue, which `Snackbar` subscribes to. Not part of the\n   * package's API — read it and an upstream release may break the call site.\n   */\n  readonly rac: RACToastQueue<SnackbarMessage>;\n  constructor() {\n    // One at a time, which is what the page shows: a second message replaces\n    // the first rather than stacking under it.\n    this.rac = new RACToastQueue<SnackbarMessage>({\n      maxVisibleToasts: 1\n    });\n  }\n\n  /**\n   * Shows a message, and returns the key that closes it.\n   */\n  add(message: ReactNode, options: SnackbarOptions = {}) {\n    const {\n      action,\n      onClose,\n      showCloseButton = false,\n      timeout\n    } = options;\n    return this.rac.add({\n      action,\n      message,\n      showCloseButton\n    }, {\n      onClose,\n      timeout: timeout ?? (action === undefined ? SHORT_MS : LONG_MS)\n    });\n  }\n\n  /** Closes every snackbar, shown or waiting. */\n  clear() {\n    this.rac.clear();\n  }\n\n  /** Closes one snackbar, by the key `add` returned. */\n  close(key: string) {\n    this.rac.close(key);\n  }\n}\n\n// The three handlers the snackbar hands to something below it, each built by\n// a call rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result on\n// its inputs.\nfunction actionPress(action: SnackbarAction, close: () => void) {\n  return () => {\n    action.onPress();\n    close();\n  };\n}\nfunction closeToast(queue: SnackbarQueue, key: string) {\n  return () => {\n    queue.close(key);\n  };\n}\n\n/**\n * A brief message at the bottom of the screen, with an optional action. Mount\n * one of these with a `Snackbar.Queue`, and call the queue's `add` to show a\n * message from anywhere.\n *\n * ```tsx\n * const messages = new Snackbar.Queue()\n *\n * <Snackbar queue={messages} />\n * ```\n *\n * The region is portalled to the end of `<body>` and renders nothing while\n * the queue is empty. It is one region rather than one per message, so mount\n * it once, near the root.\n *\n * The call site's `className` and `style` land on that region, which is the\n * element a layout positions.\n */\nfunction Snackbar({\n  closeLabel = 'Close',\n  queue,\n  ...props\n}: SnackbarProps) {\n  return <RACToastRegion<SnackbarMessage> queue={queue.rac} {...props} {...mergeStatefulStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xdt5ytf x126z3so x1ey2m1c x17y0mx6 x1t137rt x1a7rqcl x47corl xixxii4 xfo81ep\"\n  }, props)}>\n      {snackbarContent(queue, closeLabel)}\n    </RACToastRegion>;\n}\n\n/**\n * One of the snackbar's two controls. React Aria's `Button` rather than the\n * library's, for the colour reason in the comment at the top of this file;\n * the ripple and the state layers are the same ones every other control\n * here draws, over `currentColor`.\n */\nfunction SnackbarButton({\n  children,\n  style,\n  ...props\n}: {\n  'aria-label'?: string;\n  children: ReactNode;\n  onPress?: () => void;\n  slot?: string;\n  style: stylex.StyleXStyles;\n}) {\n  const ripple = useRipple<FocusableElement>();\n  return <RACButton {...ripple.handlers} {...props} {...stylex.props(styles.control, style)}>\n      {children}\n      {ripple.surface}\n    </RACButton>;\n}\nfunction snackbarContent(queue: SnackbarQueue, closeLabel: string) {\n  return ({\n    toast\n  }: {\n    toast: SnackbarToastItem;\n  }) => <SnackbarToast close={closeToast(queue, toast.key)} closeLabel={closeLabel} toast={toast} />;\n}\n\n/** The action, the close button, or nothing, after the message. */\nfunction SnackbarControls({\n  action,\n  close,\n  closeLabel,\n  showCloseButton\n}: {\n  action: SnackbarAction | undefined;\n  close: () => void;\n  closeLabel: string;\n  showCloseButton: boolean;\n}) {\n  return <>\n      {action === undefined ? null : <SnackbarButton onPress={actionPress(action, close)} style={styles.action}>\n          {action.label}\n        </SnackbarButton>}\n      {showCloseButton ? <SnackbarButton aria-label={closeLabel} slot=\"close\" style={styles.close}>\n          <CloseGlyph className=\"xxk0z11 xvy4d1p\" />\n        </SnackbarButton> : null}\n    </>;\n}\n\n/** One snackbar: its message, then whatever sits after it. */\nfunction SnackbarToast({\n  close,\n  closeLabel,\n  toast\n}: {\n  close: () => void;\n  closeLabel: string;\n  toast: SnackbarToastItem;\n}) {\n  const {\n    action,\n    message,\n    showCloseButton\n  } = toast.content;\n  return <RACToast toast={toast} className=\"x6s0dn4 x1n1nwrg x1u6grsq x1dwmuk9 x16dv9tl x1c5gpgi x1tfhd1 x1udv5rz x9f619 x78zum5 xh8yej3 x1x1rfll xlx31pv x1dry9sr xeuugli xuq8xha x1ulcdur x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd xn60lsn x67bb7w\">\n      <RACToastContent className=\"x9f619 x1girmi0 x1iyjqo2 xpo2rfv x193rfdd x1hews6w xn43zvd xv61bfh xz158ff xeuugli xxlmvz2\">\n        <Text slot=\"title\">{message}</Text>\n      </RACToastContent>\n      <SnackbarControls action={action} close={close} closeLabel={closeLabel} showCloseButton={showCloseButton} />\n    </RACToast>;\n}\nSnackbar.Queue = SnackbarQueue;\n\n// The queue is reached as `Snackbar.Queue` rather than exported beside the\n// component: this file would otherwise export something that is not a\n// component, which is what turns fast refresh off for it.\nexport type { SnackbarAction, SnackbarMessage, SnackbarOptions, SnackbarProps, SnackbarQueue, ToastRegionRenderProps as SnackbarRegionRenderProps };\nexport default Snackbar;"],"mappings":"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"}

package/dist/components/switch/index.js

@@ -108,6 +108,10 @@ const styles = {
 		$$css: true
 	},
 	seatAt: (offset) => [_temp, { "--x-insetInlineStart": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(`${offset}px`) }],
+	seatDraggable: {
+		kFalU9: "x5ve5x3",
+		$$css: true
+	},
 	seatDragging: {
 		kIyJzY: "x1mq3mr6",
 		$$css: true
@@ -182,7 +186,7 @@ function buttonContent(children, icon, ripple, drag) {
 				...props(styles.track, on && styles.trackOn, state.isDisabled && (on ? styles.trackOnDisabled : styles.trackDisabled), state.isFocusVisible && focus.ringVisible),
 				children: /* @__PURE__ */ jsxs("span", {
 					...interactive ? drag.handlers(on) : {},
-					...props(styles.seat, on && styles.seatOn, dragging && styles.seatDragging, dragging && styles.seatAt(drag.offset ?? 0)),
+					...props(styles.seat, on && styles.seatOn, interactive && styles.seatDraggable, dragging && styles.seatDragging, dragging && styles.seatAt(drag.offset ?? 0)),
 					children: [/* @__PURE__ */ jsx("span", {
 						...interactive ? ripple.handlers : {},
 						...props(styles.layer, interactive && state.isHovered && hoverLayers[on ? "on" : "off"], interactive && state.isPressed && pressedLayers[on ? "on" : "off"]),