@kanso-labs/kanso-ui 0.34.11 → 0.34.13

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["stylex","RenderComponentProps","useRender","mergeStyles","spacing","alignments","baseline","kGNEyG","$$css","center","end","start","stretch","gaps","lg","kOIVth","md","none","sm","xl","xs","xxl","xxs","xxxl","justifications","around","kjj79g","between","styles","base","kB7OPa","k1xSpc","column","kXwgrk","row","wrap","kwnvtZ","StackAlign","StackGap","StackJustify","StackProps","align","direction","gap","justify","Stack","t0","$","_c","render","t1","t2","t3","t4","t5","t6","t7","t8","props","undefined","defaultTagName"],"sources":["../../../src/components/stack/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { spacing } from '../../tokens/design.tokens.stylex';\n\n// Short names rather than the CSS values they map to, so a call site reads\n// `align=\"start\"` instead of `align=\"flex-start\"`. A lookup is unavoidable\n// either way — `alignItems` takes `flex-start` and `justifyContent` takes\n// `space-between`, neither of which is a word anyone wants in a prop.\n//\n// No Material Design page draws a stack. Its gaps are the spacing tokens,\n// the 4dp grid the layout pages space elements on, and `xl` is their 24dp\n// spacer between panes.\nconst alignments = {\n  baseline: {\n    kGNEyG: \"x1pha0wt\",\n    $$css: true\n  },\n  center: {\n    kGNEyG: \"x6s0dn4\",\n    $$css: true\n  },\n  end: {\n    kGNEyG: \"xuk3077\",\n    $$css: true\n  },\n  start: {\n    kGNEyG: \"x1cy8zhl\",\n    $$css: true\n  },\n  stretch: {\n    kGNEyG: \"x1qjc9v5\",\n    $$css: true\n  }\n};\n\n// One key per step of the spacing scale, named exactly as the token group\n// names it, so `gaps[gap]` indexes straight off the prop with no lookup table\n// to keep in sync — the same arrangement Text's type scale uses.\n//\n// `none` is the one key with no token behind it, and deliberately so: zero is\n// the absence of a spacing decision rather than a step of the scale, so there\n// is nothing for the scale to name. It exists because a stack that only wants\n// the direction and the alignment is otherwise a plain flex container written\n// out by hand.\nconst gaps = {\n  lg: {\n    kOIVth: \"xxj4525\",\n    $$css: true\n  },\n  md: {\n    kOIVth: \"x1gka490\",\n    $$css: true\n  },\n  none: {\n    kOIVth: \"xxhr3t\",\n    $$css: true\n  },\n  sm: {\n    kOIVth: \"x126z3so\",\n    $$css: true\n  },\n  xl: {\n    kOIVth: \"xj2l1yv\",\n    $$css: true\n  },\n  xs: {\n    kOIVth: \"xzoy561\",\n    $$css: true\n  },\n  xxl: {\n    kOIVth: \"xghv2kt\",\n    $$css: true\n  },\n  xxs: {\n    kOIVth: \"x14qo01y\",\n    $$css: true\n  },\n  xxxl: {\n    kOIVth: \"xvm9ira\",\n    $$css: true\n  }\n};\nconst justifications = {\n  around: {\n    kjj79g: \"x1l1ennw\",\n    $$css: true\n  },\n  between: {\n    kjj79g: \"x1qughib\",\n    $$css: true\n  },\n  center: {\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  end: {\n    kjj79g: \"x13a6bvl\",\n    $$css: true\n  },\n  start: {\n    kjj79g: \"x1nhvcw1\",\n    $$css: true\n  }\n};\nconst styles = {\n  base: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    $$css: true\n  },\n  column: {\n    kXwgrk: \"xdt5ytf\",\n    $$css: true\n  },\n  row: {\n    kXwgrk: \"x1q0g3np\",\n    $$css: true\n  },\n  wrap: {\n    kwnvtZ: \"x1a02dak\",\n    $$css: true\n  }\n};\ntype StackAlign = 'baseline' | 'center' | 'end' | 'start' | 'stretch';\ntype StackGap = 'lg' | 'md' | 'none' | 'sm' | 'xl' | 'xs' | 'xxl' | 'xxs' | 'xxxl';\ntype StackJustify = 'around' | 'between' | 'center' | 'end' | 'start';\ntype StackProps = {\n  /**\n   * How the children line up across the stack: down the inline axis of a\n   * column, down the block axis of a row. Left unset, they stretch, which is\n   * what makes every card in a column the same width.\n   *\n   * `start` is what an inline-sized child needs in a column — a Tag or a\n   * Chip spans the whole width otherwise.\n   */\n  align?: StackAlign;\n  /**\n   * Which way the children run.\n   * @default 'column'\n   */\n  direction?: 'column' | 'row';\n  /**\n   * The space between children, as a step of the spacing scale. `none` closes\n   * it entirely.\n   *\n   * Worth setting. The default is a middle step, and how much air a group of\n   * things wants is the one thing a stack cannot work out for itself.\n   * @default 'md'\n   */\n  gap?: StackGap;\n  /**\n   * How leftover space is distributed along the stack. Left unset, the\n   * children sit at the start and the space collects after them.\n   *\n   * `between` is the one that puts a headline at one end of a row and its\n   * actions at the other.\n   */\n  justify?: StackJustify;\n  /**\n   * Lets a row wrap onto further lines rather than overflowing. Has no effect\n   * on a column, which has as many lines as it has children.\n   * @default false\n   */\n  wrap?: boolean;\n} & RenderComponentProps<'div'>;\n\n/**\n * A row or a column of children with one gap between them, taken from the\n * spacing scale.\n *\n * Layout only — it paints no surface and wraps no child, so each child is a\n * flex item exactly as it was written. It is the answer to spacing a group of\n * things, which is why no component here carries a margin of its own: the\n * space between two things belongs to whatever holds both of them.\n *\n * `render` swaps the element, for a stack that should be a `<ul>`, a `<nav>`,\n * or a `<section>` rather than a `<div>`.\n */\nfunction Stack({\n  align,\n  direction = 'column',\n  gap = 'md',\n  justify,\n  render,\n  wrap = false,\n  ...props\n}: StackProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      ...mergeStyles(stylex.props(styles.base, styles[direction], gaps[gap], align !== undefined && alignments[align], justify !== undefined && justifications[justify], wrap && styles.wrap), props)\n    },\n    render\n  });\n}\nexport type { StackAlign, StackGap, StackJustify, StackProps };\nexport default Stack;"],"mappings":";;;;;AAeA,MAAMK,aAAa;CACjBC,UAAU;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,QAAQ;EACNF,QAAQ;EACRC,OAAO;CACT;CACAE,KAAK;EACHH,QAAQ;EACRC,OAAO;CACT;CACAG,OAAO;EACLJ,QAAQ;EACRC,OAAO;CACT;CACAI,SAAS;EACPL,QAAQ;EACRC,OAAO;CACT;AACF;AAWA,MAAMK,OAAO;CACXC,IAAI;EACFC,QAAQ;EACRP,OAAO;CACT;CACAQ,IAAI;EACFD,QAAQ;EACRP,OAAO;CACT;CACAS,MAAM;EACJF,QAAQ;EACRP,OAAO;CACT;CACAU,IAAI;EACFH,QAAQ;EACRP,OAAO;CACT;CACAW,IAAI;EACFJ,QAAQ;EACRP,OAAO;CACT;CACAY,IAAI;EACFL,QAAQ;EACRP,OAAO;CACT;CACAa,KAAK;EACHN,QAAQ;EACRP,OAAO;CACT;CACAc,KAAK;EACHP,QAAQ;EACRP,OAAO;CACT;CACAe,MAAM;EACJR,QAAQ;EACRP,OAAO;CACT;AACF;AACA,MAAMgB,iBAAiB;CACrBC,QAAQ;EACNC,QAAQ;EACRlB,OAAO;CACT;CACAmB,SAAS;EACPD,QAAQ;EACRlB,OAAO;CACT;CACAC,QAAQ;EACNiB,QAAQ;EACRlB,OAAO;CACT;CACAE,KAAK;EACHgB,QAAQ;EACRlB,OAAO;CACT;CACAG,OAAO;EACLe,QAAQ;EACRlB,OAAO;CACT;AACF;AACA,MAAMoB,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRvB,OAAO;CACT;CACAwB,QAAQ;EACNC,QAAQ;EACRzB,OAAO;CACT;CACA0B,KAAK;EACHD,QAAQ;EACRzB,OAAO;CACT;CACA2B,MAAM;EACJC,QAAQ;EACR5B,OAAO;CACT;AACF;;;;;;;;;;;;;AAwDA,SAAAqC,MAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAN,EAAA,OAAAD,IAAA;EAAe,MAAA,EAAAL,OAAAC,WAAAY,IAAAX,KAAAY,IAAAX,SAAAK,QAAAO,IAAArB,MAAAsB,IAAA,GAAAC,YAAAZ;EAAAG,SAAAO;EAEb,MAAAd,YAAAY,OAAAK,KAAAA,IAAA,WAAAL;EACA,MAAAX,MAAAY,OAAAI,KAAAA,IAAA,OAAAJ;EAGA,MAAApB,OAAAsB,OAAAE,KAAAA,IAAA,QAAAF;EAGOvD,KAAAA;EACWkD,KAAA;EAEXM,KAAAA;EACAP,KAAAhD,YAAYH,MAAa4B,OAAMC,MAAOD,OAAOc,YAAY7B,KAAK8B,MAAMF,UAAUkB,KAAAA,KAAatD,WAAWoC,QAAQG,YAAYe,KAAAA,KAAanC,eAAeoB,UAAUT,QAAQP,OAAMO,IAAK,GAAGuB,OAAK;EAACX,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;CAAA,OAAA;EAAAJ,SAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;CAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAG,MAAAH,EAAA,OAAAI,IAAA;EAF1LG,KAAA;GAAA,GACFI;GAAK,GACLP;EACL;EAACJ,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,OAAAE,UAAAF,EAAA,QAAAK,MAAAL,EAAA,QAAAO,IAAA;EALcC,KAAA;GAAAK,gBACCR;GAAKM,OACdJ;GAGNL;EAEH;EAACF,EAAA,KAAAE;EAAAF,EAAA,MAAAK;EAAAL,EAAA,MAAAO;EAAAP,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,OAPM7C,GAAUqD,EAOhB;AAAC"}
+{"version":3,"file":"index.js","names":["stylex","RenderComponentProps","useRender","mergeStyles","spacing","alignments","baseline","kGNEyG","$$css","center","end","start","stretch","gaps","lg","kOIVth","md","none","sm","xl","xs","xxl","xxs","xxxl","justifications","around","kjj79g","between","styles","base","kB7OPa","k1xSpc","column","kXwgrk","row","wrap","kwnvtZ","StackAlign","StackGap","StackJustify","StackProps","align","direction","gap","justify","Stack","t0","$","_c","render","t1","t2","t3","t4","t5","t6","t7","t8","props","undefined","defaultTagName","_c","props","stylex.props"],"sources":["../../../src/components/stack/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { spacing } from '../../tokens/design.tokens.stylex';\n\n// Short names rather than the CSS values they map to, so a call site reads\n// `align=\"start\"` instead of `align=\"flex-start\"`. A lookup is unavoidable\n// either way — `alignItems` takes `flex-start` and `justifyContent` takes\n// `space-between`, neither of which is a word anyone wants in a prop.\n//\n// No Material Design page draws a stack. Its gaps are the spacing tokens,\n// the 4dp grid the layout pages space elements on, and `xl` is their 24dp\n// spacer between panes.\nconst alignments = {\n  baseline: {\n    kGNEyG: \"x1pha0wt\",\n    $$css: true\n  },\n  center: {\n    kGNEyG: \"x6s0dn4\",\n    $$css: true\n  },\n  end: {\n    kGNEyG: \"xuk3077\",\n    $$css: true\n  },\n  start: {\n    kGNEyG: \"x1cy8zhl\",\n    $$css: true\n  },\n  stretch: {\n    kGNEyG: \"x1qjc9v5\",\n    $$css: true\n  }\n};\n\n// One key per step of the spacing scale, named exactly as the token group\n// names it, so `gaps[gap]` indexes straight off the prop with no lookup table\n// to keep in sync — the same arrangement Text's type scale uses.\n//\n// `none` is the one key with no token behind it, and deliberately so: zero is\n// the absence of a spacing decision rather than a step of the scale, so there\n// is nothing for the scale to name. It exists because a stack that only wants\n// the direction and the alignment is otherwise a plain flex container written\n// out by hand.\nconst gaps = {\n  lg: {\n    kOIVth: \"xxj4525\",\n    $$css: true\n  },\n  md: {\n    kOIVth: \"x1gka490\",\n    $$css: true\n  },\n  none: {\n    kOIVth: \"xxhr3t\",\n    $$css: true\n  },\n  sm: {\n    kOIVth: \"x126z3so\",\n    $$css: true\n  },\n  xl: {\n    kOIVth: \"xj2l1yv\",\n    $$css: true\n  },\n  xs: {\n    kOIVth: \"xzoy561\",\n    $$css: true\n  },\n  xxl: {\n    kOIVth: \"xghv2kt\",\n    $$css: true\n  },\n  xxs: {\n    kOIVth: \"x14qo01y\",\n    $$css: true\n  },\n  xxxl: {\n    kOIVth: \"xvm9ira\",\n    $$css: true\n  }\n};\nconst justifications = {\n  around: {\n    kjj79g: \"x1l1ennw\",\n    $$css: true\n  },\n  between: {\n    kjj79g: \"x1qughib\",\n    $$css: true\n  },\n  center: {\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  end: {\n    kjj79g: \"x13a6bvl\",\n    $$css: true\n  },\n  start: {\n    kjj79g: \"x1nhvcw1\",\n    $$css: true\n  }\n};\nconst styles = {\n  base: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    $$css: true\n  },\n  column: {\n    kXwgrk: \"xdt5ytf\",\n    $$css: true\n  },\n  row: {\n    kXwgrk: \"x1q0g3np\",\n    $$css: true\n  },\n  wrap: {\n    kwnvtZ: \"x1a02dak\",\n    $$css: true\n  }\n};\ntype StackAlign = 'baseline' | 'center' | 'end' | 'start' | 'stretch';\ntype StackGap = 'lg' | 'md' | 'none' | 'sm' | 'xl' | 'xs' | 'xxl' | 'xxs' | 'xxxl';\ntype StackJustify = 'around' | 'between' | 'center' | 'end' | 'start';\ntype StackProps = {\n  /**\n   * How the children line up across the stack: down the inline axis of a\n   * column, down the block axis of a row. Left unset, they stretch, which is\n   * what makes every card in a column the same width.\n   *\n   * `start` is what an inline-sized child needs in a column — a Tag or a\n   * Chip spans the whole width otherwise.\n   */\n  align?: StackAlign;\n  /**\n   * Which way the children run.\n   * @default 'column'\n   */\n  direction?: 'column' | 'row';\n  /**\n   * The space between children, as a step of the spacing scale. `none` closes\n   * it entirely.\n   *\n   * Worth setting. The default is a middle step, and how much air a group of\n   * things wants is the one thing a stack cannot work out for itself.\n   * @default 'md'\n   */\n  gap?: StackGap;\n  /**\n   * How leftover space is distributed along the stack. Left unset, the\n   * children sit at the start and the space collects after them.\n   *\n   * `between` is the one that puts a headline at one end of a row and its\n   * actions at the other.\n   */\n  justify?: StackJustify;\n  /**\n   * Lets a row wrap onto further lines rather than overflowing. Has no effect\n   * on a column, which has as many lines as it has children.\n   * @default false\n   */\n  wrap?: boolean;\n} & RenderComponentProps<'div'>;\n\n/**\n * A row or a column of children with one gap between them, taken from the\n * spacing scale.\n *\n * Layout only — it paints no surface and wraps no child, so each child is a\n * flex item exactly as it was written. It is the answer to spacing a group of\n * things, which is why no component here carries a margin of its own: the\n * space between two things belongs to whatever holds both of them.\n *\n * `render` swaps the element, for a stack that should be a `<ul>`, a `<nav>`,\n * or a `<section>` rather than a `<div>`.\n */\nfunction Stack({\n  align,\n  direction = 'column',\n  gap = 'md',\n  justify,\n  render,\n  wrap = false,\n  ...props\n}: StackProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      ...mergeStyles(stylex.props(styles.base, styles[direction], gaps[gap], align !== undefined && alignments[align], justify !== undefined && justifications[justify], wrap && styles.wrap), props)\n    },\n    render\n  });\n}\nexport type { StackAlign, StackGap, StackJustify, StackProps };\nexport default Stack;"],"mappings":"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"}

package/dist/components/supporting-pane/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","stylex","RenderComponentProps","useRender","mergeStyles","media","spacing","SupportingPaneProps","Omit","main","placement","supporting","SupportingPane","t0","$","_c","render","t1","t2","t3","t4","t5","t6","t7","props","undefined","leading","t8","t9","Symbol","for","0","className","1","t10","t11","children","defaultTagName"],"sources":["../../../src/components/supporting-pane/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { media, spacing } from '../../tokens/design.tokens.stylex';\n\n// One of Material Design's canonical layouts. The supporting pane holds\n// content that only means anything next to the main pane — reviewer comments,\n// related items, a tool panel — which is what separates it from list-detail,\n// where the second pane stands on its own.\n//\n// The canonical layout page gives this layout two shapes across the\n// breakpoints, and both are reachable in CSS because neither depends on what\n// the reader selected: stacked at compact and medium, and from expanded up the\n// supporting pane beside the main one at a fixed 360, with the main pane\n// taking the rest. Stacking is Material Design's \"reflow\" strategy, where the\n// supporting pane moves under the main one rather than being dismissed. The\n// page's other compact option is a bottom sheet, which is a different\n// component's job — reach for Sheet at the call site when the supporting\n// content should be summoned rather than scrolled to.\n//\n// **Which side the supporting pane takes is an expanded-window choice, and\n// only that.** The page gives two rules: below the focus pane in medium\n// windows and under, and \"on the leading or trailing side of the focus pane\"\n// from expanded up. So `placement` moves the pane beside the main one and\n// leaves the stacked shape alone — stacked, the supporting pane is under the\n// main one either way.\n//\n// **A leading pane is placed with grid columns rather than by reordering the\n// DOM, and that is a departure worth naming.** The page also asks that focus\n// order match the arrangement on screen for co-planar panes, and no single\n// DOM order satisfies both of its rules: a supporting pane written first\n// reads left of the main one at expanded, as leading should, but then sits\n// above it when the layout stacks — which is the one thing the page says it\n// should not do. Whichever way it is written, one breakpoint has focus order\n// crossing the visual order.\n//\n// The main pane stays first in the DOM, so the break lands at expanded and\n// not on a phone. Side by side, a keyboard reaches the main pane before the\n// supporting one that is drawn to its left, which is an odd half-second with\n// both panes in view; stacked the other way round, a reader meets content\n// that \"only means anything next to the main pane\" before reaching the pane\n// it is talking about. The second is worse, and it is the case the page\n// rules on explicitly.\n\ntype SupportingPaneProps = Omit<RenderComponentProps<'div'>, 'children'> & {\n  /**\n   * The primary content. Takes whatever width the supporting pane leaves from\n   * expanded up.\n   */\n  main?: ReactNode;\n  /**\n   * Which side of the main pane the supporting one takes from expanded up.\n   * Below the medium breakpoint the layout stacks either way, with the\n   * supporting pane under the main one.\n   * @default 'trailing'\n   */\n  placement?: 'leading' | 'trailing';\n  /**\n   * Content that only means something beside `main`. Sits below it at compact\n   * and medium, and beside it at a fixed 360px from expanded up.\n   */\n  supporting?: ReactNode;\n};\n\n/**\n * Material Design's supporting pane layout: a main pane and a companion that\n * reflows underneath it when there is no room beside it.\n *\n * Layout only — neither pane paints a surface or a border of its own, so what\n * goes in them is composed at the call site out of Cards, lists, or plain\n * content. `render` swaps the container's element, for a layout that should\n * be a `<main>` rather than a `<div>`.\n *\n * The panes are written to the DOM in the order they are shown, which is what\n * Material Design asks of co-planar panes: focus order has to match the\n * arrangement on screen.\n */\nfunction SupportingPane({\n  main,\n  placement = 'trailing',\n  render,\n  supporting,\n  ...props\n}: SupportingPaneProps) {\n  const leading = placement === 'leading';\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      children: <>\n          <div className=\"x9f619 xeuugli\">{main}</div>\n          <div {...{\n          0: {\n            className: \"x9f619 xeuugli\"\n          },\n          1: {\n            className: \"x9f619 xeuugli xm5moh1 x1mqhcjd x15daork x15qucf8\"\n          }\n        }[!!leading << 0]}>\n            {supporting}\n          </div>\n        </>,\n      ...mergeStyles({\n        0: {\n          className: \"x9f619 xrvj5dj xj2l1yv x1mkdm3x x1674ulc\"\n        },\n        1: {\n          className: \"x9f619 xrvj5dj xj2l1yv x1mkdm3x xkgydl7\"\n        }\n      }[!!leading << 0], props)\n    },\n    render\n  });\n}\nexport type { SupportingPaneProps };\nexport default SupportingPane;"],"mappings":";;;;;;;;;;;;;;;;;;AAgFA,SAAAY,eAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAP,EAAA,OAAAD,IAAA;EAAwB,MAAA,EAAAJ,MAAAC,WAAAY,IAAAN,QAAAO,IAAAZ,YAAA,GAAAa,UAAAX;EAAAG,SAAAO;EAOtB,MAAAG,WALAJ,OAAAG,KAAAA,IAAA,aAAAH,QAK8B;EACvBnB,KAAAA;EACWiB,KAAA;EAEXI,KAAAA;EAAK,IAAAG;EAAA,IAAAb,EAAA,OAAAL,MAAA;GAEJkB,KAAA,oBAAA,OAAA;IAAe,WAAA;IAAkBlB,UAAAA;GAAW,CAAA;GAAAK,EAAA,KAAAL;GAAAK,EAAA,KAAAa;EAAA,OAAAA,KAAAb,EAAA;EAAA,IAAAc;EAAA,IAAAd,EAAA,OAAAe,OAAAC,IAAA,2BAAA,GAAA;GACnCF,KAAA;IAAAG,GACN,EAAAC,WACU,iBACb;IAACC,GACE,EAAAD,WACU,oDACb;GACF;GAAClB,EAAA,KAAAc;EAAA,OAAAA,KAAAd,EAAA;EAPU,MAAAoB,MAAAN,GAOT,CAAC,CAACF,WAAW;EAAE,IAAAS;EAAA,IAAArB,EAAA,QAAAH,cAAAG,EAAA,QAAAoB,KAAA;GAPfC,MAAA,oBAAA,OAAA;IASM,GATGD;IAQNvB,UAAAA;GACG,CAAA;GAAAG,EAAA,MAAAH;GAAAG,EAAA,MAAAoB;GAAApB,EAAA,MAAAqB;EAAA,OAAAA,MAAArB,EAAA;EAAA,IAAAA,EAAA,QAAAqB,OAAArB,EAAA,QAAAa,IAAA;GAXAT,KAAA,qBAAA,UAAA,EAAA,UAAA,CACNS,IACAQ,GASM,EAAA,CAAA;GACLrB,EAAA,MAAAqB;GAAArB,EAAA,MAAAa;GAAAb,EAAA,MAAAI;EAAA,OAAAA,KAAAJ,EAAA;EACFK,KAAAf,YAAY;GAAA2B,GACV,EAAAC,WACU,2CACb;GAACC,GACE,EAAAD,WACU,0CACb;EACF,EAAE,CAAC,CAACN,WAAW,IAAIF,KAAK;EAACV,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;CAAA,OAAA;EAAAL,SAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;EAAAO,KAAAP,EAAA;CAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,QAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,IAAA;EAtBpBG,KAAA;GAAA,GACFE;GAAKY,UACElB;GAYL,GACFC;EAQL;EAACL,EAAA,MAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,QAAAE,UAAAF,EAAA,QAAAM,MAAAN,EAAA,QAAAQ,IAAA;EAzBcC,KAAA;GAAAc,gBACCjB;GAAKI,OACdF;GAuBNN;EAEH;EAACF,EAAA,MAAAE;EAAAF,EAAA,MAAAM;EAAAN,EAAA,MAAAQ;EAAAR,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,OA3BMX,GAAUoB,EA2BhB;AAAC"}
+{"version":3,"file":"index.js","names":["ReactNode","stylex","RenderComponentProps","useRender","mergeStyles","media","spacing","SupportingPaneProps","Omit","main","placement","supporting","SupportingPane","t0","$","_c","render","t1","t2","t3","t4","t5","t6","t7","props","undefined","leading","t8","t9","Symbol","for","0","className","1","t10","t11","children","defaultTagName","_c"],"sources":["../../../src/components/supporting-pane/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { media, spacing } from '../../tokens/design.tokens.stylex';\n\n// One of Material Design's canonical layouts. The supporting pane holds\n// content that only means anything next to the main pane — reviewer comments,\n// related items, a tool panel — which is what separates it from list-detail,\n// where the second pane stands on its own.\n//\n// The canonical layout page gives this layout two shapes across the\n// breakpoints, and both are reachable in CSS because neither depends on what\n// the reader selected: stacked at compact and medium, and from expanded up the\n// supporting pane beside the main one at a fixed 360, with the main pane\n// taking the rest. Stacking is Material Design's \"reflow\" strategy, where the\n// supporting pane moves under the main one rather than being dismissed. The\n// page's other compact option is a bottom sheet, which is a different\n// component's job — reach for Sheet at the call site when the supporting\n// content should be summoned rather than scrolled to.\n//\n// **Which side the supporting pane takes is an expanded-window choice, and\n// only that.** The page gives two rules: below the focus pane in medium\n// windows and under, and \"on the leading or trailing side of the focus pane\"\n// from expanded up. So `placement` moves the pane beside the main one and\n// leaves the stacked shape alone — stacked, the supporting pane is under the\n// main one either way.\n//\n// **A leading pane is placed with grid columns rather than by reordering the\n// DOM, and that is a departure worth naming.** The page also asks that focus\n// order match the arrangement on screen for co-planar panes, and no single\n// DOM order satisfies both of its rules: a supporting pane written first\n// reads left of the main one at expanded, as leading should, but then sits\n// above it when the layout stacks — which is the one thing the page says it\n// should not do. Whichever way it is written, one breakpoint has focus order\n// crossing the visual order.\n//\n// The main pane stays first in the DOM, so the break lands at expanded and\n// not on a phone. Side by side, a keyboard reaches the main pane before the\n// supporting one that is drawn to its left, which is an odd half-second with\n// both panes in view; stacked the other way round, a reader meets content\n// that \"only means anything next to the main pane\" before reaching the pane\n// it is talking about. The second is worse, and it is the case the page\n// rules on explicitly.\n\ntype SupportingPaneProps = Omit<RenderComponentProps<'div'>, 'children'> & {\n  /**\n   * The primary content. Takes whatever width the supporting pane leaves from\n   * expanded up.\n   */\n  main?: ReactNode;\n  /**\n   * Which side of the main pane the supporting one takes from expanded up.\n   * Below the medium breakpoint the layout stacks either way, with the\n   * supporting pane under the main one.\n   * @default 'trailing'\n   */\n  placement?: 'leading' | 'trailing';\n  /**\n   * Content that only means something beside `main`. Sits below it at compact\n   * and medium, and beside it at a fixed 360px from expanded up.\n   */\n  supporting?: ReactNode;\n};\n\n/**\n * Material Design's supporting pane layout: a main pane and a companion that\n * reflows underneath it when there is no room beside it.\n *\n * Layout only — neither pane paints a surface or a border of its own, so what\n * goes in them is composed at the call site out of Cards, lists, or plain\n * content. `render` swaps the container's element, for a layout that should\n * be a `<main>` rather than a `<div>`.\n *\n * The panes are written to the DOM in the order they are shown, which is what\n * Material Design asks of co-planar panes: focus order has to match the\n * arrangement on screen.\n */\nfunction SupportingPane({\n  main,\n  placement = 'trailing',\n  render,\n  supporting,\n  ...props\n}: SupportingPaneProps) {\n  const leading = placement === 'leading';\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      children: <>\n          <div className=\"x9f619 xeuugli\">{main}</div>\n          <div {...{\n          0: {\n            className: \"x9f619 xeuugli\"\n          },\n          1: {\n            className: \"x9f619 xeuugli xm5moh1 x1mqhcjd x15daork x15qucf8\"\n          }\n        }[!!leading << 0]}>\n            {supporting}\n          </div>\n        </>,\n      ...mergeStyles({\n        0: {\n          className: \"x9f619 xrvj5dj xj2l1yv x1mkdm3x x1674ulc\"\n        },\n        1: {\n          className: \"x9f619 xrvj5dj xj2l1yv x1mkdm3x xkgydl7\"\n        }\n      }[!!leading << 0], props)\n    },\n    render\n  });\n}\nexport type { SupportingPaneProps };\nexport default SupportingPane;"],"mappings":";;;;;;;;;;;;;;;;;;AAgFA,SAAAY,eAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAP,EAAA,OAAAD,IAAA;EAAwB,MAAA,EAAAJ,MAAAC,WAAAY,IAAAN,QAAAO,IAAAZ,YAAA,GAAAa,UAAAX;EAAAG,SAAAO;EAOtB,MAAAG,WALAJ,OAAAG,KAAAA,IAAA,aAAAH,QAK8B;EACvBnB,KAAAA;EACWiB,KAAA;EAEXI,KAAAA;EAAK,IAAAG;EAAA,IAAAb,EAAA,OAAAL,MAAA;GAEJkB,KAAA,oBAAA,OAAA;IAAe,WAAA;IAAkBlB,UAAAA;GAAW,CAAA;GAAAK,EAAA,KAAAL;GAAAK,EAAA,KAAAa;EAAA,OAAAA,KAAAb,EAAA;EAAA,IAAAc;EAAA,IAAAd,EAAA,OAAAe,OAAAC,IAAA,2BAAA,GAAA;GACnCF,KAAA;IAAAG,GACN,EAAAC,WACU,iBACb;IAACC,GACE,EAAAD,WACU,oDACb;GACF;GAAClB,EAAA,KAAAc;EAAA,OAAAA,KAAAd,EAAA;EAPU,MAAAoB,MAAAN,GAOT,CAAC,CAACF,WAAW;EAAE,IAAAS;EAAA,IAAArB,EAAA,QAAAH,cAAAG,EAAA,QAAAoB,KAAA;GAPfC,MAAA,oBAAA,OAAA;IASM,GATGD;IAQNvB,UAAAA;GACG,CAAA;GAAAG,EAAA,MAAAH;GAAAG,EAAA,MAAAoB;GAAApB,EAAA,MAAAqB;EAAA,OAAAA,MAAArB,EAAA;EAAA,IAAAA,EAAA,QAAAqB,OAAArB,EAAA,QAAAa,IAAA;GAXAT,KAAA,qBAAA,UAAA,EAAA,UAAA,CACNS,IACAQ,GASM,EAAA,CAAA;GACLrB,EAAA,MAAAqB;GAAArB,EAAA,MAAAa;GAAAb,EAAA,MAAAI;EAAA,OAAAA,KAAAJ,EAAA;EACFK,KAAAf,YAAY;GAAA2B,GACV,EAAAC,WACU,2CACb;GAACC,GACE,EAAAD,WACU,0CACb;EACF,EAAE,CAAC,CAACN,WAAW,IAAIF,KAAK;EAACV,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;CAAA,OAAA;EAAAL,SAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;EAAAO,KAAAP,EAAA;CAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,QAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,IAAA;EAtBpBG,KAAA;GAAA,GACFE;GAAKY,UACElB;GAYL,GACFC;EAQL;EAACL,EAAA,MAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,QAAAE,UAAAF,EAAA,QAAAM,MAAAN,EAAA,QAAAQ,IAAA;EAzBcC,KAAA;GAAAc,gBACCjB;GAAKI,OACdF;GAuBNN;EAEH;EAACF,EAAA,MAAAE;EAAAF,EAAA,MAAAM;EAAAN,EAAA,MAAAQ;EAAAR,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,OA3BMX,GAAUoB,EA2BhB;AAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ColumnRenderProps","ColumnResizerRenderProps","CellProps","RACCellProps","ColumnProps","RACColumnProps","RowProps","RACRowProps","TableBodyProps","RACTableBodyProps","TableFooterProps","RACTableFooterProps","TableHeaderProps","RACTableHeaderProps","TableLoadMoreItemProps","RACTableLoadMoreItemProps","TableProps","RACTableProps","ResizableTableContainerProps","RowRenderProps","TableBodyRenderProps","stylex","createContext","useContext","Cell","RACCell","Column","RACColumn","ColumnResizer","RACColumnResizer","ResizableTableContainer","RACResizableTableContainer","Row","RACRow","Table","RACTable","TableBody","RACTableBody","TableFooter","RACTableFooter","TableHeader","RACTableHeader","TableLoadMoreItem","RACTableLoadMoreItem","CollectionLoadMore","ArrowDownwardGlyph","ArrowUpwardGlyph","rowStyles","rowLayers","mergeStatefulStyles","mergeStyles","colors","sizing","spacing","stateLayerOpacity","typography","Checkbox","SelectAllLabelContext","SelectLabelContext","styles","focus","kjBf7l","kInvED","k3XXqK","kMeerF","$$css","row","kZKoxP","kLZC3w","kPef9Z","kEafiO","rowDisabled","kWkggS","kMwMTN","kkrTdU","rowSelected","Omit","T","className","renderEmptyState","style","TableCellProps","children","selection","TableColumnProps","resizable","TableLoadMoreProps","label","onResize","onResizeEnd","resizeLabel","selectAllLabel","selectLabel","stickyHeader","TableRowProps","ResizeLabelContext","ResizableContext","StickyHeaderContext","cellContent","cellStyles","columnContent","state","sortArrowFor","sortDirection","resizerClassName","columnStyles","sticky","allowsSorting","dropAriaLevel","node","HTMLTableRowElement","removeAttribute","emptyContent","resizableContainerClassName","isResizing","isFocusVisible","props","isSelected","isHovered","hovered","isPressed","pressed","isDisabled","direction","undefined","t0","$","_c","T0","t1","t2","t3","t4","t5","t6","t7","t8","t9","table","TableCell","TableColumn","resizableTable","0","1","TableLoadMore","TableRow","Body","Footer","Header","LoadMore"],"sources":["../../../src/components/table/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ColumnRenderProps, ColumnResizerRenderProps, CellProps as RACCellProps, ColumnProps as RACColumnProps, RowProps as RACRowProps, TableBodyProps as RACTableBodyProps, TableFooterProps as RACTableFooterProps, TableHeaderProps as RACTableHeaderProps, TableLoadMoreItemProps as RACTableLoadMoreItemProps, TableProps as RACTableProps, ResizableTableContainerProps, RowRenderProps, TableBodyRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { Cell as RACCell, Column as RACColumn, ColumnResizer as RACColumnResizer, ResizableTableContainer as RACResizableTableContainer, Row as RACRow, Table as RACTable, TableBody as RACTableBody, TableFooter as RACTableFooter, TableHeader as RACTableHeader, TableLoadMoreItem as RACTableLoadMoreItem } from 'react-aria-components';\nimport { CollectionLoadMore } from '../../collection';\nimport { ArrowDownwardGlyph, ArrowUpwardGlyph } from '../../glyphs';\nimport { rowStyles as rowLayers } from '../../row/styles';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport Checkbox from '../checkbox';\n\n// A grid of rows and columns, with sorting and selection. The design system\n// carries no data table page — it was dropped after Material Design 2 — so\n// the geometry comes from the archived one at\n// <https://m2.material.io/components/data-tables>, which is the page this\n// component is drawn from: a 56dp header row, 52dp body rows, 16dp of\n// padding on each side of a cell, a medium-weight header to set it apart\n// from the rows, and an arrow beside the name of the column being sorted.\n//\n// Its colour roles are the current system's rather than that page's, since\n// a table sits beside lists, cards and menus that all draw from the tokens\n// here. That means the row's state layers are the ones `src/row` uses — the\n// same hover, pressed and selected treatment a list row takes — so a\n// selected table row and a selected list row on one page cannot disagree.\n//\n// The row is not `src/row`, and that is the one place this departs from the\n// library's other collections. That module's row is a headline with a\n// supporting line and a slot at each end; a table row is a run of cells with\n// no such shape, and forcing one into the other would give every cell the\n// row's 56dp floor and body-large headline. The state layers are shared by\n// being written from the same tokens rather than by sharing the module.\n//\n// Four things are this component's own.\n//\n// **The rule between rows is drawn on the row, not on its cells.** A cell\n// cannot see whether its row is the first one, so a rule per cell either\n// doubles under the header or needs the row's position passed down. The\n// table collapses its borders, which is what lets a `<tr>` carry one.\n//\n// **A selecting table draws its checkbox where the call site puts it.**\n// `selection` on a column and on a cell renders the library's Checkbox in\n// React Aria's selection slot — the column's is select-all, the cell's is\n// that row's. It is a prop rather than an injected column because the header\n// and every row have to agree on how many columns there are, and only the\n// call site can keep that true.\n//\n// **A sortable column is the press target itself.** React Aria puts no\n// button inside the header cell; it makes the cell pressable and sets\n// `aria-sort` on it. So the arrow is content next to the name, and the\n// hover and pressed layers belong to the cell.\n//\n// **The header sticks only when asked.** A sticky header needs an opaque\n// background to scroll rows under, and that colour is only right when the\n// table is in something that scrolls. `stickyHeader` is what says so.\n//\n// **Resizing is asked for twice, and both are needed.** React Aria puts the\n// resize state on a container around the table and the handle inside a\n// column, so `resizable` on the table is what brings the container and\n// `resizable` on a column is what draws its handle. The archived page has no\n// resizer to take a treatment from — it predates the feature — so the handle\n// is the divider's own rule, thickening and taking the primary role while it\n// is dragged.\n//\n// **A resizable table stops filling its width.** The container sets\n// `table-layout: fixed` and `width: min-content` on the table as inline\n// styles, which no rule here can outrank; the container fills the width\n// instead and scrolls when the columns together are wider than it.\n//\n// One thing about React Aria's collection is worth knowing before writing a\n// call site. **A column's `id` and a row's `id` share one namespace**, and a\n// value used by both silently drops every column — the table then throws\n// \"Cell count must match column count\", naming the cells rather than the\n// duplicate key that caused it. Nothing here can catch it, since both ids\n// are the call site's to choose; the docstrings below say to keep them\n// apart, and the stories and tests use `col`-prefixed column ids so the two\n// sets cannot meet.\n\n// What the selection checkboxes are called. A context rather than a prop on\n// every column and cell, since it is the table's decision and repeating it\n// per row is how the two drift.\nconst SelectAllLabelContext = createContext('Select all');\nconst SelectLabelContext = createContext('Select');\nconst styles = {\n  focus: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  row: {\n    kZKoxP: \"xdd8jsf\",\n    kLZC3w: \"x12smttz\",\n    kPef9Z: \"x13fuv20\",\n    kEafiO: \"x1g31smg x178xt8z\",\n    $$css: true\n  },\n  rowDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  rowSelected: {\n    kWkggS: \"xp89om9\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  }\n};\ntype TableBodyProps<T extends object = object> = Omit<RACTableBodyProps<T>, 'className' | 'renderEmptyState' | 'style'> & {\n  /** A function may compute the class from the body's render state. */\n  className?: RACTableBodyProps<T>['className'];\n  /**\n   * What the table shows in place of rows when it has none: React Aria's own\n   * render function, under React Aria's own name, as List, ListBox, Tree and\n   * ChipGroup take it. What it returns is drawn in a row of its own spanning\n   * every column, inside the muted, padded box the table draws there.\n   */\n  renderEmptyState?: RACTableBodyProps<T>['renderEmptyState'];\n  /** A function may compute the style from the body's render state. */\n  style?: RACTableBodyProps<T>['style'];\n};\ntype TableCellProps = Omit<RACCellProps, 'children' | 'className' | 'style'> & {\n  /** What the cell holds. */\n  children?: ReactNode;\n  /** A function may compute the class from the cell's render state. */\n  className?: RACCellProps['className'];\n  /**\n   * Draws this row's selection checkbox instead of `children`. The row's own\n   * text is what names the row; the box inside it takes the table's\n   * `selectLabel`.\n   */\n  selection?: boolean;\n  /** A function may compute the style from the cell's render state. */\n  style?: RACCellProps['style'];\n};\ntype TableColumnProps = {\n  /** The column's name. */\n  children?: ReactNode;\n  /** A function may compute the class from the column's render state. */\n  className?: RACColumnProps['className'];\n  /**\n   * Draws a handle at the column's trailing edge that drags its width. Needs\n   * the table's own `resizable` as well — React Aria keeps the resize state\n   * on a container around the table, and without it there is nothing for a\n   * handle to change. `defaultWidth`, `minWidth` and `maxWidth` are React\n   * Aria's and apply only inside that container.\n   */\n  resizable?: boolean;\n  /**\n   * Draws the select-all checkbox instead of `children`, for the column the\n   * rows put their own checkboxes in.\n   */\n  selection?: boolean;\n  /** A function may compute the style from the column's render state. */\n  style?: RACColumnProps['style'];\n} & Omit<RACColumnProps, 'children' | 'className' | 'style'>;\ntype TableFooterProps<T extends object = object> = RACTableFooterProps<T>;\ntype TableHeaderProps<T extends object = object> = RACTableHeaderProps<T>;\ntype TableLoadMoreProps = Omit<RACTableLoadMoreItemProps, 'children'> & {\n  /**\n   * What the row says while it is loading. Read by a screen reader; the ring\n   * itself carries no text.\n   * @default 'Loading more'\n   */\n  label?: string;\n};\ntype TableProps = Omit<RACTableProps, 'className' | 'style'> & {\n  /** A function may compute the class from the table's render state. */\n  className?: RACTableProps['className'];\n  /** Called as a column is dragged, with every column's width. */\n  onResize?: ResizableTableContainerProps['onResize'];\n  /** Called once a drag ends, with every column's width. */\n  onResizeEnd?: ResizableTableContainerProps['onResizeEnd'];\n  /**\n   * Lets columns marked `resizable` be dragged, by putting the table in the\n   * container React Aria keeps the resize state on. A resizable table sizes\n   * to its columns rather than to its parent, and that container is what\n   * fills the width and scrolls instead.\n   */\n  resizable?: boolean;\n  /**\n   * What the resize handle is called, for a screen reader. React Aria\n   * composes it with the column's own name.\n   * @default 'Resize column'\n   */\n  resizeLabel?: string;\n  /**\n   * What the select-all checkbox is called, for a screen reader.\n   * @default 'Select all'\n   */\n  selectAllLabel?: string;\n  /**\n   * What each row's selection checkbox is called, for a screen reader. The\n   * row's own text is what names the row; this names the box inside it.\n   * @default 'Select'\n   */\n  selectLabel?: string;\n  /**\n   * Holds the header row in place while the rows scroll under it. Needs the\n   * table inside something that scrolls; on a table that does not, it draws\n   * the same as without it.\n   */\n  stickyHeader?: boolean;\n  /** A function may compute the style from the table's render state. */\n  style?: RACTableProps['style'];\n};\ntype TableRowProps<T extends object = object> = Omit<RACRowProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the row's render state. */\n  className?: RACRowProps<T>['className'];\n  /** A function may compute the style from the row's render state. */\n  style?: RACRowProps<T>['style'];\n};\n\n// What the resize handles are called, for the same reason the selection\n// labels travel this way: it is the table's decision, and repeating it per\n// column is how the two drift.\nconst ResizeLabelContext = createContext('Resize column');\n\n// Whether the table brought the container. React Aria's resizer throws\n// outright without one — \"Wrap your <Table> in a <ResizableTableContainer>\",\n// naming a component a consumer of this library never writes — so a column\n// asking to resize inside a table that does not would take the whole page\n// down. It draws no handle instead.\nconst ResizableContext = createContext(false);\n\n// Whether the header sticks, so a column reaches it without every call site\n// repeating the table's own decision on each one.\nconst StickyHeaderContext = createContext(false);\n\n// What a body cell draws, and the classes it draws with. Written as calls\n// rather than inline at the props, which is what react-perf's\n// no-new-function-as-prop and jsx-no-jsx-as-prop are after; the React\n// Compiler memoises the results on their inputs.\n// The return type is written out rather than inferred, here and in the two\n// below: `ReactNode` is a union that includes a promise, and a function\n// inferred as returning one has to be `async`.\nfunction cellContent(children: ReactNode, selection: boolean, label: string): ReactNode {\n  if (!selection) {\n    return children;\n  }\n  return <Checkbox aria-label={label} slot=\"selection\" />;\n}\nfunction cellStyles(selection: boolean) {\n  return {\n    0: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn\"\n    },\n    1: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x19ddzpn xuxw1ft\"\n    }\n  }[!!selection << 0];\n}\nfunction columnContent(children: ReactNode, selection: boolean, label: string, resizable: boolean, resizeLabel: string): RACColumnProps['children'] {\n  if (selection) {\n    return <Checkbox aria-label={label} slot=\"selection\" />;\n  }\n  // The handle is a sibling of the name rather than part of it: React Aria\n  // renders it as its own element, positioned against the cell's trailing\n  // edge, which the name's own box does not reach.\n  return (state: ColumnRenderProps): ReactNode => <>\n      <span className=\"x6s0dn4 x78zum5 x126z3so\">\n        {children}\n        {sortArrowFor(state.sortDirection)}\n      </span>\n      {resizable ? <RACColumnResizer aria-label={resizeLabel} className={resizerClassName} /> : null}\n    </>;\n}\nfunction columnStyles(selection: boolean, sticky: boolean) {\n  return (state: ColumnRenderProps) => ({\n    0: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 x1n2onr6 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn\"\n    },\n    4: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x14s9m32 x1ixd52e x13vifvy x7wzq59 x1vjfegm\"\n    },\n    2: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 x1n2onr6 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x19ddzpn xuxw1ft\"\n    },\n    6: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x14s9m32 x1ixd52e x13vifvy x7wzq59 x1vjfegm x19ddzpn xuxw1ft\"\n    },\n    1: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 x1n2onr6 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n    },\n    5: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x1ixd52e x13vifvy x7wzq59 x1vjfegm x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n    },\n    3: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 x1n2onr6 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x19ddzpn xuxw1ft x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n    },\n    7: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x1ixd52e x13vifvy x7wzq59 x1vjfegm x19ddzpn xuxw1ft x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n    }\n  })[!!sticky << 2 | !!selection << 1 | !!state.allowsSorting << 0];\n}\n\n// React Aria puts `aria-level` on the load-more row, and `aria-level` is only\n// valid on a row inside a `treegrid` — a grid's rows have no level. axe flags\n// it as `aria-conditional-attr`, and this library's stories run axe as an\n// error, so a table with a load-more row would fail on an attribute nothing\n// here asks for.\n//\n// It cannot be turned off through props: React Aria writes it after spreading\n// what the call site passed, so `aria-level={undefined}` is overwritten. The\n// attribute is taken off the element instead. React writes an attribute only\n// when its prop changes between renders, and this one is always 1, so the\n// removal holds rather than being undone by the next render. `load more` in\n// index.test.tsx pins that it is gone, which is what would notice if React\n// Aria stopped setting it or started varying it.\nfunction dropAriaLevel(node: HTMLTableRowElement | null) {\n  node?.removeAttribute('aria-level');\n}\n\n// What the body draws in place of rows: whatever the call site's function\n// returns, inside the box that pads and centres it. A call rather than a\n// function written at the prop, for the same reason the others are.\n//\n// The box is the one thing this adds to React Aria's prop, and the one way\n// the table differs from its siblings, which pass theirs straight through and\n// draw nothing around it. A table's empty state goes in a spanning cell that\n// is not this component's and carries no padding, so without the box the\n// content would sit against the table's edge with no room around it.\nfunction emptyContent(renderEmptyState: (state: TableBodyRenderProps) => ReactNode) {\n  // The return type is written out rather than inferred: `ReactNode` is a\n  // union that includes a promise, and a function inferred as returning one\n  // has to be `async`.\n  return (state: TableBodyRenderProps): ReactNode => <span className=\"x9f619 x1w5n3ug x1lliihq xpo2rfv x193rfdd x1hews6w xn43zvd xv61bfh x1lrxzt4 x790zyz x2b8uid\">{renderEmptyState(state)}</span>;\n}\n\n// The container's class. React Aria takes a plain string here rather than a\n// function of render state, since the container reports none — so this is a\n// call rather than the function form the other parts pass.\nfunction resizableContainerClassName() {\n  return {\n    className: \"x9f619 xh8yej3 xw2csxc\"\n  }.className ?? '';\n}\n\n// The handle's classes, from React Aria's own render state — it reports the\n// drag and the keyboard focus separately, and the two get one treatment.\nfunction resizerClassName(state: ColumnResizerRenderProps) {\n  return {\n    0: {\n      className: \"x1l12bh x5yr21d x9f619 xicojor x1i1rx1s x13vifvy xtijo5x x10l6tqk x5ve5x3\"\n    },\n    1: {\n      className: \"x5yr21d x9f619 xicojor x13vifvy xtijo5x x10l6tqk x5ve5x3 xnety89 xfo62xy\"\n    }\n  }[!!(state.isResizing || state.isFocusVisible) << 0].className ?? '';\n}\nfunction rowStyles(state: RowRenderProps) {\n  return stylex.props(styles.row,\n  // The same ring a cell and a column header draw, and for the same\n  // reason: React Aria moves focus to the row itself, so the row is where\n  // it has to show. Unconditional, as it is on those two — `focus` carries\n  // its own `:focus-visible`, and the browser's default ring is what shows\n  // through without it: a colour and an offset the rest of the table does\n  // not use, and one no forced-colours mode is obliged to keep.\n  styles.focus, state.isSelected && styles.rowSelected,\n  // The state layers come from the render state, which is what makes a\n  // row that only runs an action — `onRowAction`, a row's `onAction` or\n  // `href` — take them as a selectable one does: React Aria reports a row\n  // hovered or pressed only when a press does something to it, whether\n  // that is selecting it, running its action or dragging it.\n  state.isHovered && rowLayers.hovered, state.isPressed && rowLayers.pressed, state.isDisabled && styles.rowDisabled);\n}\n\n// The arrow beside a sorted column's name. Nothing is drawn on a column that\n// is sortable but not currently sorted: the page puts the arrow next to the\n// column being sorted, and an arrow on every sortable column would say every\n// one of them was.\nfunction sortArrowFor(direction: 'ascending' | 'descending' | undefined) {\n  if (direction === undefined) {\n    return null;\n  }\n  return direction === 'ascending' ? <ArrowUpwardGlyph className=\"xmix8c7 x2lah0s x1xp8n7a\" /> : <ArrowDownwardGlyph className=\"xmix8c7 x2lah0s x1xp8n7a\" />;\n}\n\n/**\n * A grid of rows and columns. Sorting and selection are React Aria's: pass\n * `sortDescriptor` with `onSortChange` and mark the sortable columns\n * `allowsSorting`, and set `selectionMode` to `single` or `multiple` with\n * `selectedKeys` and `onSelectionChange`, or `defaultSelectedKeys`.\n *\n * ```tsx\n * <Table aria-label=\"Label\" selectionMode=\"multiple\">\n *   <Table.Header>\n *     <Table.Column selection />\n *     <Table.Column id=\"name\" isRowHeader>Label</Table.Column>\n *   </Table.Header>\n *   <Table.Body>\n *     <Table.Row id=\"first\">\n *       <Table.Cell selection />\n *       <Table.Cell>First item</Table.Cell>\n *     </Table.Row>\n *   </Table.Body>\n * </Table>\n * ```\n *\n * Composed from parts, since a cell takes arbitrary content: `Table.Header`,\n * `Table.Column`, `Table.Body`, `Table.Row`, `Table.Cell` and\n * `Table.Footer`. Name the table with `aria-label` or `aria-labelledby`, and\n * mark one column `isRowHeader` so a screen reader has something to read a\n * row by.\n *\n * The call site's `className` and `style` land on the table, which is the\n * element a layout positions.\n */\nfunction Table({\n  onResize,\n  onResizeEnd,\n  resizable = false,\n  resizeLabel = 'Resize column',\n  selectAllLabel = 'Select all',\n  selectLabel = 'Select',\n  stickyHeader = false,\n  ...props\n}: TableProps) {\n  const table = <RACTable {...props} {...mergeStatefulStyles({\n    className: \"x1mwwwfo x9f619 x139gbkf xpo2rfv x193rfdd x1hews6w xh8yej3 xn43zvd xv61bfh x1t137rt\"\n  }, props)} />;\n  return <SelectAllLabelContext value={selectAllLabel}>\n      <SelectLabelContext value={selectLabel}>\n        <ResizeLabelContext value={resizeLabel}>\n          <ResizableContext value={resizable}>\n            <StickyHeaderContext value={stickyHeader}>\n              {resizable ? <RACResizableTableContainer className={resizableContainerClassName()} onResize={onResize} onResizeEnd={onResizeEnd}>\n                  {table}\n                </RACResizableTableContainer> : table}\n            </StickyHeaderContext>\n          </ResizableContext>\n        </ResizeLabelContext>\n      </SelectLabelContext>\n    </SelectAllLabelContext>;\n}\n\n/**\n * The rows. `renderEmptyState` is what it shows when there are none — a table\n * with no rows and nothing to say in their place is a blank area with a\n * header over it.\n *\n * It carries no styles of its own, since every rule a body needs is drawn by\n * the rows inside it, so a `className` here lands on the `<tbody>` through\n * React Aria rather than through a merge.\n */\nfunction TableBody<T extends object = object>({\n  renderEmptyState,\n  ...props\n}: TableBodyProps<T>) {\n  return <RACTableBody<T> {...props} renderEmptyState={renderEmptyState === undefined ? undefined : emptyContent(renderEmptyState)} />;\n}\n\n/**\n * One cell. `selection` draws this row's checkbox in place of whatever else\n * the cell would hold.\n */\nfunction TableCell({\n  children,\n  selection = false,\n  ...props\n}: TableCellProps) {\n  const label = useContext(SelectLabelContext);\n  return <RACCell {...props} {...mergeStatefulStyles(cellStyles(selection), props)}>\n      {cellContent(children, selection, label)}\n    </RACCell>;\n}\n\n/**\n * One column. `allowsSorting` is React Aria's and makes the header cell\n * itself the control that sorts; the arrow appears on the column the\n * `sortDescriptor` names. `isRowHeader` marks the column a screen reader\n * reads a row by.\n *\n * Its `id` shares a namespace with the rows', so give the two sets values\n * that cannot collide — a column and a row with one id between them leaves\n * the table with no columns at all.\n */\nfunction TableColumn({\n  children,\n  resizable = false,\n  selection = false,\n  ...props\n}: TableColumnProps) {\n  const label = useContext(SelectAllLabelContext);\n  const resizeLabel = useContext(ResizeLabelContext);\n  const resizableTable = useContext(ResizableContext);\n  const sticky = useContext(StickyHeaderContext);\n  return <RACColumn {...props} {...mergeStatefulStyles(columnStyles(selection, sticky), props)}>\n      {columnContent(children, selection, label, resizable && resizableTable, resizeLabel)}\n    </RACColumn>;\n}\n\n/**\n * A row under the body, for totals and the like. It is not part of the\n * selection or the keyboard navigation — React Aria keeps it out of both.\n */\nfunction TableFooter<T extends object = object>(props: TableFooterProps<T>) {\n  return <RACTableFooter<T> {...props} {...mergeStyles({\n    className: \"x12smttz x13fuv20 x178xt8z x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4\"\n  }, props)} />;\n}\n\n/**\n * The header row, holding the columns, and the rule drawn under it — which\n * moves to the cells when the header sticks, since a row group's border does\n * not travel with cells `position: sticky` has lifted out of it.\n */\nfunction TableHeader<T extends object = object>(props: TableHeaderProps<T>) {\n  const sticky = useContext(StickyHeaderContext);\n  return <RACTableHeader<T> {...props} {...mergeStatefulStyles({\n    0: {\n      className: \"x1j6faob x1q0q8m5 xso031l\"\n    },\n    1: {}\n  }[!!sticky << 0], props)} />;\n}\n\n/**\n * The row the table shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading`. It goes inside `Table.Body`, after the rows.\n */\nfunction TableLoadMore({\n  label = 'Loading more',\n  ...props\n}: TableLoadMoreProps) {\n  return <RACTableLoadMoreItem {...props} {...mergeStyles({\n    className: \"xdd8jsf\"\n  }, props)} ref={dropAriaLevel}>\n      <span className=\"x6s0dn4 x9f619 x78zum5 xl56j7k\">\n        <CollectionLoadMore label={label} size=\"24px\" />\n      </span>\n    </RACTableLoadMoreItem>;\n}\n\n/**\n * One row. Give every row an `id` — that is the key selection is reported\n * by, and it has to differ from every column's. `onAction` runs when the\n * row is pressed.\n */\nfunction TableRow<T extends object = object>(props: TableRowProps<T>) {\n  return <RACRow<T> {...props} {...mergeStatefulStyles(rowStyles, props)} />;\n}\nTable.Body = TableBody;\nTable.Cell = TableCell;\nTable.Column = TableColumn;\nTable.Footer = TableFooter;\nTable.Header = TableHeader;\nTable.LoadMore = TableLoadMore;\nTable.Row = TableRow;\nexport type { TableBodyProps, TableCellProps, TableColumnProps, TableFooterProps, TableHeaderProps, TableLoadMoreProps, TableProps, TableRowProps };\nexport default Table;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","ColumnRenderProps","ColumnResizerRenderProps","CellProps","RACCellProps","ColumnProps","RACColumnProps","RowProps","RACRowProps","TableBodyProps","RACTableBodyProps","TableFooterProps","RACTableFooterProps","TableHeaderProps","RACTableHeaderProps","TableLoadMoreItemProps","RACTableLoadMoreItemProps","TableProps","RACTableProps","ResizableTableContainerProps","RowRenderProps","TableBodyRenderProps","stylex","createContext","useContext","Cell","RACCell","Column","RACColumn","ColumnResizer","RACColumnResizer","ResizableTableContainer","RACResizableTableContainer","Row","RACRow","Table","RACTable","TableBody","RACTableBody","TableFooter","RACTableFooter","TableHeader","RACTableHeader","TableLoadMoreItem","RACTableLoadMoreItem","CollectionLoadMore","ArrowDownwardGlyph","ArrowUpwardGlyph","rowStyles","rowLayers","mergeStatefulStyles","mergeStyles","colors","sizing","spacing","stateLayerOpacity","typography","Checkbox","SelectAllLabelContext","SelectLabelContext","styles","focus","kjBf7l","kInvED","k3XXqK","kMeerF","$$css","row","kZKoxP","kLZC3w","kPef9Z","kEafiO","rowDisabled","kWkggS","kMwMTN","kkrTdU","rowSelected","Omit","T","className","renderEmptyState","style","TableCellProps","children","selection","TableColumnProps","resizable","TableLoadMoreProps","label","onResize","onResizeEnd","resizeLabel","selectAllLabel","selectLabel","stickyHeader","TableRowProps","ResizeLabelContext","ResizableContext","StickyHeaderContext","cellContent","cellStyles","columnContent","state","sortArrowFor","sortDirection","resizerClassName","columnStyles","sticky","allowsSorting","dropAriaLevel","node","HTMLTableRowElement","removeAttribute","emptyContent","resizableContainerClassName","isResizing","isFocusVisible","props","isSelected","isHovered","hovered","isPressed","pressed","isDisabled","direction","undefined","t0","$","_c","T0","t1","t2","t3","t4","t5","t6","t7","t8","t9","table","TableCell","TableColumn","resizableTable","0","1","TableLoadMore","TableRow","Body","Footer","Header","LoadMore","RACColumnResizer","stylex.props","rowLayers","Table","_c","RACTable","RACResizableTableContainer","TableBody","RACTableBody","RACCell","RACColumn","TableFooter","RACTableFooter","TableHeader","RACTableHeader","RACTableLoadMoreItem","RACRow"],"sources":["../../../src/components/table/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ColumnRenderProps, ColumnResizerRenderProps, CellProps as RACCellProps, ColumnProps as RACColumnProps, RowProps as RACRowProps, TableBodyProps as RACTableBodyProps, TableFooterProps as RACTableFooterProps, TableHeaderProps as RACTableHeaderProps, TableLoadMoreItemProps as RACTableLoadMoreItemProps, TableProps as RACTableProps, ResizableTableContainerProps, RowRenderProps, TableBodyRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { Cell as RACCell, Column as RACColumn, ColumnResizer as RACColumnResizer, ResizableTableContainer as RACResizableTableContainer, Row as RACRow, Table as RACTable, TableBody as RACTableBody, TableFooter as RACTableFooter, TableHeader as RACTableHeader, TableLoadMoreItem as RACTableLoadMoreItem } from 'react-aria-components';\nimport { CollectionLoadMore } from '../../collection';\nimport { ArrowDownwardGlyph, ArrowUpwardGlyph } from '../../glyphs';\nimport { rowStyles as rowLayers } from '../../row/styles';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport Checkbox from '../checkbox';\n\n// A grid of rows and columns, with sorting and selection. The design system\n// carries no data table page — it was dropped after Material Design 2 — so\n// the geometry comes from the archived one at\n// <https://m2.material.io/components/data-tables>, which is the page this\n// component is drawn from: a 56dp header row, 52dp body rows, 16dp of\n// padding on each side of a cell, a medium-weight header to set it apart\n// from the rows, and an arrow beside the name of the column being sorted.\n//\n// Its colour roles are the current system's rather than that page's, since\n// a table sits beside lists, cards and menus that all draw from the tokens\n// here. That means the row's state layers are the ones `src/row` uses — the\n// same hover, pressed and selected treatment a list row takes — so a\n// selected table row and a selected list row on one page cannot disagree.\n//\n// The row is not `src/row`, and that is the one place this departs from the\n// library's other collections. That module's row is a headline with a\n// supporting line and a slot at each end; a table row is a run of cells with\n// no such shape, and forcing one into the other would give every cell the\n// row's 56dp floor and body-large headline. The state layers are shared by\n// being written from the same tokens rather than by sharing the module.\n//\n// Four things are this component's own.\n//\n// **The rule between rows is drawn on the row, not on its cells.** A cell\n// cannot see whether its row is the first one, so a rule per cell either\n// doubles under the header or needs the row's position passed down. The\n// table collapses its borders, which is what lets a `<tr>` carry one.\n//\n// **A selecting table draws its checkbox where the call site puts it.**\n// `selection` on a column and on a cell renders the library's Checkbox in\n// React Aria's selection slot — the column's is select-all, the cell's is\n// that row's. It is a prop rather than an injected column because the header\n// and every row have to agree on how many columns there are, and only the\n// call site can keep that true.\n//\n// **A sortable column is the press target itself.** React Aria puts no\n// button inside the header cell; it makes the cell pressable and sets\n// `aria-sort` on it. So the arrow is content next to the name, and the\n// hover and pressed layers belong to the cell.\n//\n// **The header sticks only when asked.** A sticky header needs an opaque\n// background to scroll rows under, and that colour is only right when the\n// table is in something that scrolls. `stickyHeader` is what says so.\n//\n// **Resizing is asked for twice, and both are needed.** React Aria puts the\n// resize state on a container around the table and the handle inside a\n// column, so `resizable` on the table is what brings the container and\n// `resizable` on a column is what draws its handle. The archived page has no\n// resizer to take a treatment from — it predates the feature — so the handle\n// is the divider's own rule, thickening and taking the primary role while it\n// is dragged.\n//\n// **A resizable table stops filling its width.** The container sets\n// `table-layout: fixed` and `width: min-content` on the table as inline\n// styles, which no rule here can outrank; the container fills the width\n// instead and scrolls when the columns together are wider than it.\n//\n// One thing about React Aria's collection is worth knowing before writing a\n// call site. **A column's `id` and a row's `id` share one namespace**, and a\n// value used by both silently drops every column — the table then throws\n// \"Cell count must match column count\", naming the cells rather than the\n// duplicate key that caused it. Nothing here can catch it, since both ids\n// are the call site's to choose; the docstrings below say to keep them\n// apart, and the stories and tests use `col`-prefixed column ids so the two\n// sets cannot meet.\n\n// What the selection checkboxes are called. A context rather than a prop on\n// every column and cell, since it is the table's decision and repeating it\n// per row is how the two drift.\nconst SelectAllLabelContext = createContext('Select all');\nconst SelectLabelContext = createContext('Select');\nconst styles = {\n  focus: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  row: {\n    kZKoxP: \"xdd8jsf\",\n    kLZC3w: \"x12smttz\",\n    kPef9Z: \"x13fuv20\",\n    kEafiO: \"x1g31smg x178xt8z\",\n    $$css: true\n  },\n  rowDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  rowSelected: {\n    kWkggS: \"xp89om9\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  }\n};\ntype TableBodyProps<T extends object = object> = Omit<RACTableBodyProps<T>, 'className' | 'renderEmptyState' | 'style'> & {\n  /** A function may compute the class from the body's render state. */\n  className?: RACTableBodyProps<T>['className'];\n  /**\n   * What the table shows in place of rows when it has none: React Aria's own\n   * render function, under React Aria's own name, as List, ListBox, Tree and\n   * ChipGroup take it. What it returns is drawn in a row of its own spanning\n   * every column, inside the muted, padded box the table draws there.\n   */\n  renderEmptyState?: RACTableBodyProps<T>['renderEmptyState'];\n  /** A function may compute the style from the body's render state. */\n  style?: RACTableBodyProps<T>['style'];\n};\ntype TableCellProps = Omit<RACCellProps, 'children' | 'className' | 'style'> & {\n  /** What the cell holds. */\n  children?: ReactNode;\n  /** A function may compute the class from the cell's render state. */\n  className?: RACCellProps['className'];\n  /**\n   * Draws this row's selection checkbox instead of `children`. The row's own\n   * text is what names the row; the box inside it takes the table's\n   * `selectLabel`.\n   */\n  selection?: boolean;\n  /** A function may compute the style from the cell's render state. */\n  style?: RACCellProps['style'];\n};\ntype TableColumnProps = {\n  /** The column's name. */\n  children?: ReactNode;\n  /** A function may compute the class from the column's render state. */\n  className?: RACColumnProps['className'];\n  /**\n   * Draws a handle at the column's trailing edge that drags its width. Needs\n   * the table's own `resizable` as well — React Aria keeps the resize state\n   * on a container around the table, and without it there is nothing for a\n   * handle to change. `defaultWidth`, `minWidth` and `maxWidth` are React\n   * Aria's and apply only inside that container.\n   */\n  resizable?: boolean;\n  /**\n   * Draws the select-all checkbox instead of `children`, for the column the\n   * rows put their own checkboxes in.\n   */\n  selection?: boolean;\n  /** A function may compute the style from the column's render state. */\n  style?: RACColumnProps['style'];\n} & Omit<RACColumnProps, 'children' | 'className' | 'style'>;\ntype TableFooterProps<T extends object = object> = RACTableFooterProps<T>;\ntype TableHeaderProps<T extends object = object> = RACTableHeaderProps<T>;\ntype TableLoadMoreProps = Omit<RACTableLoadMoreItemProps, 'children'> & {\n  /**\n   * What the row says while it is loading. Read by a screen reader; the ring\n   * itself carries no text.\n   * @default 'Loading more'\n   */\n  label?: string;\n};\ntype TableProps = Omit<RACTableProps, 'className' | 'style'> & {\n  /** A function may compute the class from the table's render state. */\n  className?: RACTableProps['className'];\n  /** Called as a column is dragged, with every column's width. */\n  onResize?: ResizableTableContainerProps['onResize'];\n  /** Called once a drag ends, with every column's width. */\n  onResizeEnd?: ResizableTableContainerProps['onResizeEnd'];\n  /**\n   * Lets columns marked `resizable` be dragged, by putting the table in the\n   * container React Aria keeps the resize state on. A resizable table sizes\n   * to its columns rather than to its parent, and that container is what\n   * fills the width and scrolls instead.\n   */\n  resizable?: boolean;\n  /**\n   * What the resize handle is called, for a screen reader. React Aria\n   * composes it with the column's own name.\n   * @default 'Resize column'\n   */\n  resizeLabel?: string;\n  /**\n   * What the select-all checkbox is called, for a screen reader.\n   * @default 'Select all'\n   */\n  selectAllLabel?: string;\n  /**\n   * What each row's selection checkbox is called, for a screen reader. The\n   * row's own text is what names the row; this names the box inside it.\n   * @default 'Select'\n   */\n  selectLabel?: string;\n  /**\n   * Holds the header row in place while the rows scroll under it. Needs the\n   * table inside something that scrolls; on a table that does not, it draws\n   * the same as without it.\n   */\n  stickyHeader?: boolean;\n  /** A function may compute the style from the table's render state. */\n  style?: RACTableProps['style'];\n};\ntype TableRowProps<T extends object = object> = Omit<RACRowProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the row's render state. */\n  className?: RACRowProps<T>['className'];\n  /** A function may compute the style from the row's render state. */\n  style?: RACRowProps<T>['style'];\n};\n\n// What the resize handles are called, for the same reason the selection\n// labels travel this way: it is the table's decision, and repeating it per\n// column is how the two drift.\nconst ResizeLabelContext = createContext('Resize column');\n\n// Whether the table brought the container. React Aria's resizer throws\n// outright without one — \"Wrap your <Table> in a <ResizableTableContainer>\",\n// naming a component a consumer of this library never writes — so a column\n// asking to resize inside a table that does not would take the whole page\n// down. It draws no handle instead.\nconst ResizableContext = createContext(false);\n\n// Whether the header sticks, so a column reaches it without every call site\n// repeating the table's own decision on each one.\nconst StickyHeaderContext = createContext(false);\n\n// What a body cell draws, and the classes it draws with. Written as calls\n// rather than inline at the props, which is what react-perf's\n// no-new-function-as-prop and jsx-no-jsx-as-prop are after; the React\n// Compiler memoises the results on their inputs.\n// The return type is written out rather than inferred, here and in the two\n// below: `ReactNode` is a union that includes a promise, and a function\n// inferred as returning one has to be `async`.\nfunction cellContent(children: ReactNode, selection: boolean, label: string): ReactNode {\n  if (!selection) {\n    return children;\n  }\n  return <Checkbox aria-label={label} slot=\"selection\" />;\n}\nfunction cellStyles(selection: boolean) {\n  return {\n    0: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn\"\n    },\n    1: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x19ddzpn xuxw1ft\"\n    }\n  }[!!selection << 0];\n}\nfunction columnContent(children: ReactNode, selection: boolean, label: string, resizable: boolean, resizeLabel: string): RACColumnProps['children'] {\n  if (selection) {\n    return <Checkbox aria-label={label} slot=\"selection\" />;\n  }\n  // The handle is a sibling of the name rather than part of it: React Aria\n  // renders it as its own element, positioned against the cell's trailing\n  // edge, which the name's own box does not reach.\n  return (state: ColumnRenderProps): ReactNode => <>\n      <span className=\"x6s0dn4 x78zum5 x126z3so\">\n        {children}\n        {sortArrowFor(state.sortDirection)}\n      </span>\n      {resizable ? <RACColumnResizer aria-label={resizeLabel} className={resizerClassName} /> : null}\n    </>;\n}\nfunction columnStyles(selection: boolean, sticky: boolean) {\n  return (state: ColumnRenderProps) => ({\n    0: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 x1n2onr6 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn\"\n    },\n    4: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x14s9m32 x1ixd52e x13vifvy x7wzq59 x1vjfegm\"\n    },\n    2: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 x1n2onr6 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x19ddzpn xuxw1ft\"\n    },\n    6: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x14s9m32 x1ixd52e x13vifvy x7wzq59 x1vjfegm x19ddzpn xuxw1ft\"\n    },\n    1: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 x1n2onr6 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n    },\n    5: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x1ixd52e x13vifvy x7wzq59 x1vjfegm x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n    },\n    3: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 x1n2onr6 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x19ddzpn xuxw1ft x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n    },\n    7: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x1ixd52e x13vifvy x7wzq59 x1vjfegm x19ddzpn xuxw1ft x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n    }\n  })[!!sticky << 2 | !!selection << 1 | !!state.allowsSorting << 0];\n}\n\n// React Aria puts `aria-level` on the load-more row, and `aria-level` is only\n// valid on a row inside a `treegrid` — a grid's rows have no level. axe flags\n// it as `aria-conditional-attr`, and this library's stories run axe as an\n// error, so a table with a load-more row would fail on an attribute nothing\n// here asks for.\n//\n// It cannot be turned off through props: React Aria writes it after spreading\n// what the call site passed, so `aria-level={undefined}` is overwritten. The\n// attribute is taken off the element instead. React writes an attribute only\n// when its prop changes between renders, and this one is always 1, so the\n// removal holds rather than being undone by the next render. `load more` in\n// index.test.tsx pins that it is gone, which is what would notice if React\n// Aria stopped setting it or started varying it.\nfunction dropAriaLevel(node: HTMLTableRowElement | null) {\n  node?.removeAttribute('aria-level');\n}\n\n// What the body draws in place of rows: whatever the call site's function\n// returns, inside the box that pads and centres it. A call rather than a\n// function written at the prop, for the same reason the others are.\n//\n// The box is the one thing this adds to React Aria's prop, and the one way\n// the table differs from its siblings, which pass theirs straight through and\n// draw nothing around it. A table's empty state goes in a spanning cell that\n// is not this component's and carries no padding, so without the box the\n// content would sit against the table's edge with no room around it.\nfunction emptyContent(renderEmptyState: (state: TableBodyRenderProps) => ReactNode) {\n  // The return type is written out rather than inferred: `ReactNode` is a\n  // union that includes a promise, and a function inferred as returning one\n  // has to be `async`.\n  return (state: TableBodyRenderProps): ReactNode => <span className=\"x9f619 x1w5n3ug x1lliihq xpo2rfv x193rfdd x1hews6w xn43zvd xv61bfh x1lrxzt4 x790zyz x2b8uid\">{renderEmptyState(state)}</span>;\n}\n\n// The container's class. React Aria takes a plain string here rather than a\n// function of render state, since the container reports none — so this is a\n// call rather than the function form the other parts pass.\nfunction resizableContainerClassName() {\n  return {\n    className: \"x9f619 xh8yej3 xw2csxc\"\n  }.className ?? '';\n}\n\n// The handle's classes, from React Aria's own render state — it reports the\n// drag and the keyboard focus separately, and the two get one treatment.\nfunction resizerClassName(state: ColumnResizerRenderProps) {\n  return {\n    0: {\n      className: \"x1l12bh x5yr21d x9f619 xicojor x1i1rx1s x13vifvy xtijo5x x10l6tqk x5ve5x3\"\n    },\n    1: {\n      className: \"x5yr21d x9f619 xicojor x13vifvy xtijo5x x10l6tqk x5ve5x3 xnety89 xfo62xy\"\n    }\n  }[!!(state.isResizing || state.isFocusVisible) << 0].className ?? '';\n}\nfunction rowStyles(state: RowRenderProps) {\n  return stylex.props(styles.row,\n  // The same ring a cell and a column header draw, and for the same\n  // reason: React Aria moves focus to the row itself, so the row is where\n  // it has to show. Unconditional, as it is on those two — `focus` carries\n  // its own `:focus-visible`, and the browser's default ring is what shows\n  // through without it: a colour and an offset the rest of the table does\n  // not use, and one no forced-colours mode is obliged to keep.\n  styles.focus, state.isSelected && styles.rowSelected,\n  // The state layers come from the render state, which is what makes a\n  // row that only runs an action — `onRowAction`, a row's `onAction` or\n  // `href` — take them as a selectable one does: React Aria reports a row\n  // hovered or pressed only when a press does something to it, whether\n  // that is selecting it, running its action or dragging it.\n  state.isHovered && rowLayers.hovered, state.isPressed && rowLayers.pressed, state.isDisabled && styles.rowDisabled);\n}\n\n// The arrow beside a sorted column's name. Nothing is drawn on a column that\n// is sortable but not currently sorted: the page puts the arrow next to the\n// column being sorted, and an arrow on every sortable column would say every\n// one of them was.\nfunction sortArrowFor(direction: 'ascending' | 'descending' | undefined) {\n  if (direction === undefined) {\n    return null;\n  }\n  return direction === 'ascending' ? <ArrowUpwardGlyph className=\"xmix8c7 x2lah0s x1xp8n7a\" /> : <ArrowDownwardGlyph className=\"xmix8c7 x2lah0s x1xp8n7a\" />;\n}\n\n/**\n * A grid of rows and columns. Sorting and selection are React Aria's: pass\n * `sortDescriptor` with `onSortChange` and mark the sortable columns\n * `allowsSorting`, and set `selectionMode` to `single` or `multiple` with\n * `selectedKeys` and `onSelectionChange`, or `defaultSelectedKeys`.\n *\n * ```tsx\n * <Table aria-label=\"Label\" selectionMode=\"multiple\">\n *   <Table.Header>\n *     <Table.Column selection />\n *     <Table.Column id=\"name\" isRowHeader>Label</Table.Column>\n *   </Table.Header>\n *   <Table.Body>\n *     <Table.Row id=\"first\">\n *       <Table.Cell selection />\n *       <Table.Cell>First item</Table.Cell>\n *     </Table.Row>\n *   </Table.Body>\n * </Table>\n * ```\n *\n * Composed from parts, since a cell takes arbitrary content: `Table.Header`,\n * `Table.Column`, `Table.Body`, `Table.Row`, `Table.Cell` and\n * `Table.Footer`. Name the table with `aria-label` or `aria-labelledby`, and\n * mark one column `isRowHeader` so a screen reader has something to read a\n * row by.\n *\n * The call site's `className` and `style` land on the table, which is the\n * element a layout positions.\n */\nfunction Table({\n  onResize,\n  onResizeEnd,\n  resizable = false,\n  resizeLabel = 'Resize column',\n  selectAllLabel = 'Select all',\n  selectLabel = 'Select',\n  stickyHeader = false,\n  ...props\n}: TableProps) {\n  const table = <RACTable {...props} {...mergeStatefulStyles({\n    className: \"x1mwwwfo x9f619 x139gbkf xpo2rfv x193rfdd x1hews6w xh8yej3 xn43zvd xv61bfh x1t137rt\"\n  }, props)} />;\n  return <SelectAllLabelContext value={selectAllLabel}>\n      <SelectLabelContext value={selectLabel}>\n        <ResizeLabelContext value={resizeLabel}>\n          <ResizableContext value={resizable}>\n            <StickyHeaderContext value={stickyHeader}>\n              {resizable ? <RACResizableTableContainer className={resizableContainerClassName()} onResize={onResize} onResizeEnd={onResizeEnd}>\n                  {table}\n                </RACResizableTableContainer> : table}\n            </StickyHeaderContext>\n          </ResizableContext>\n        </ResizeLabelContext>\n      </SelectLabelContext>\n    </SelectAllLabelContext>;\n}\n\n/**\n * The rows. `renderEmptyState` is what it shows when there are none — a table\n * with no rows and nothing to say in their place is a blank area with a\n * header over it.\n *\n * It carries no styles of its own, since every rule a body needs is drawn by\n * the rows inside it, so a `className` here lands on the `<tbody>` through\n * React Aria rather than through a merge.\n */\nfunction TableBody<T extends object = object>({\n  renderEmptyState,\n  ...props\n}: TableBodyProps<T>) {\n  return <RACTableBody<T> {...props} renderEmptyState={renderEmptyState === undefined ? undefined : emptyContent(renderEmptyState)} />;\n}\n\n/**\n * One cell. `selection` draws this row's checkbox in place of whatever else\n * the cell would hold.\n */\nfunction TableCell({\n  children,\n  selection = false,\n  ...props\n}: TableCellProps) {\n  const label = useContext(SelectLabelContext);\n  return <RACCell {...props} {...mergeStatefulStyles(cellStyles(selection), props)}>\n      {cellContent(children, selection, label)}\n    </RACCell>;\n}\n\n/**\n * One column. `allowsSorting` is React Aria's and makes the header cell\n * itself the control that sorts; the arrow appears on the column the\n * `sortDescriptor` names. `isRowHeader` marks the column a screen reader\n * reads a row by.\n *\n * Its `id` shares a namespace with the rows', so give the two sets values\n * that cannot collide — a column and a row with one id between them leaves\n * the table with no columns at all.\n */\nfunction TableColumn({\n  children,\n  resizable = false,\n  selection = false,\n  ...props\n}: TableColumnProps) {\n  const label = useContext(SelectAllLabelContext);\n  const resizeLabel = useContext(ResizeLabelContext);\n  const resizableTable = useContext(ResizableContext);\n  const sticky = useContext(StickyHeaderContext);\n  return <RACColumn {...props} {...mergeStatefulStyles(columnStyles(selection, sticky), props)}>\n      {columnContent(children, selection, label, resizable && resizableTable, resizeLabel)}\n    </RACColumn>;\n}\n\n/**\n * A row under the body, for totals and the like. It is not part of the\n * selection or the keyboard navigation — React Aria keeps it out of both.\n */\nfunction TableFooter<T extends object = object>(props: TableFooterProps<T>) {\n  return <RACTableFooter<T> {...props} {...mergeStyles({\n    className: \"x12smttz x13fuv20 x178xt8z x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4\"\n  }, props)} />;\n}\n\n/**\n * The header row, holding the columns, and the rule drawn under it — which\n * moves to the cells when the header sticks, since a row group's border does\n * not travel with cells `position: sticky` has lifted out of it.\n */\nfunction TableHeader<T extends object = object>(props: TableHeaderProps<T>) {\n  const sticky = useContext(StickyHeaderContext);\n  return <RACTableHeader<T> {...props} {...mergeStatefulStyles({\n    0: {\n      className: \"x1j6faob x1q0q8m5 xso031l\"\n    },\n    1: {}\n  }[!!sticky << 0], props)} />;\n}\n\n/**\n * The row the table shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading`. It goes inside `Table.Body`, after the rows.\n */\nfunction TableLoadMore({\n  label = 'Loading more',\n  ...props\n}: TableLoadMoreProps) {\n  return <RACTableLoadMoreItem {...props} {...mergeStyles({\n    className: \"xdd8jsf\"\n  }, props)} ref={dropAriaLevel}>\n      <span className=\"x6s0dn4 x9f619 x78zum5 xl56j7k\">\n        <CollectionLoadMore label={label} size=\"24px\" />\n      </span>\n    </RACTableLoadMoreItem>;\n}\n\n/**\n * One row. Give every row an `id` — that is the key selection is reported\n * by, and it has to differ from every column's. `onAction` runs when the\n * row is pressed.\n */\nfunction TableRow<T extends object = object>(props: TableRowProps<T>) {\n  return <RACRow<T> {...props} {...mergeStatefulStyles(rowStyles, props)} />;\n}\nTable.Body = TableBody;\nTable.Cell = TableCell;\nTable.Column = TableColumn;\nTable.Footer = TableFooter;\nTable.Header = TableHeader;\nTable.LoadMore = TableLoadMore;\nTable.Row = TableRow;\nexport type { TableBodyProps, TableCellProps, TableColumnProps, TableFooterProps, TableHeaderProps, TableLoadMoreProps, TableProps, TableRowProps };\nexport default Table;"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","Key","TabsProps","RACTabsProps","TabListProps","TabPanelProps","TabPanelsProps","TabProps","TabRenderProps","stylex","createContext","useCallback","useContext","useEffect","useState","SelectionIndicator","RACSelectionIndicator","TabPanels","RACTabPanels","Tabs","RACTabs","Tab","TabList","TabPanel","focus","mergeStatefulStyles","mergeStyles","colors","motion","radii","sizing","spacing","stateLayerOpacity","typography","styles","panel","kB7OPa","$$css","NO_PANELS","ReadonlySet","Set","PanelsContext","RegisterPanelContext","id","Omit","children","tabContent","state","defaultChildren","tabRenderer","hasPanel","render","NonNullable","domProps","adjusted","undefined","t0","$","_c","props","panels","setPanels","t1","Symbol","for","previous","has","next","add","previous_0","next_0","delete","register","t2","t3","TabsList","className","TabsPanel","ring","TabsPanels","TabsTab","T0","tabStyles","t4","isSelected","isDisabled","List","Panel","Panels","TabsListProps","TabsPanelProps","TabsPanelsProps","TabsTabProps"],"sources":["../../../src/components/tabs/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { Key, TabsProps as RACTabsProps, TabListProps, TabPanelProps, TabPanelsProps, TabProps, TabRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useCallback, useContext, useEffect, useState } from 'react';\nimport { SelectionIndicator as RACSelectionIndicator, TabPanels as RACTabPanels, Tabs as RACTabs, Tab, TabList, TabPanel } from 'react-aria-components';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The tabs page's primary tabs: a 48dp bar on the surface, divided into equal\n// sections, with a 1dp outline-variant divider inside the bar along its\n// bottom edge and, under the active tab's label, a 3dp primary indicator\n// rounded along its top. The indicator follows the label rather than the\n// tab, inset 2dp from the label's ends and never shorter than 24dp, which is\n// what the page draws.\n//\n// The indicator is React Aria's `SelectionIndicator`, which is a shared\n// element: it is rendered inside every tab but drawn in the selected one,\n// and on a change it keeps the old one until it has finished moving to the\n// new one's place. No `SharedElementTransition` is rendered here — `Tab`\n// scopes its own, and one added around the list changes nothing, which is\n// worth knowing because the primitive throws outside a scope when it is put\n// anywhere else.\n//\n// The label is wrapped in a span of its own so the indicator has the label's\n// width to follow: it is the span's `::after`, and the span is as tall as the\n// tab so the indicator reaches the bottom of the bar. Which tab carries it\n// comes from React Aria's render state rather than a selector, since StyleX\n// cannot target [data-selected] on the element it is styling.\nconst styles = {\n  panel: {\n    kB7OPa: \"x9f619\",\n    $$css: true\n  }\n};\nconst NO_PANELS: ReadonlySet<Key> = new Set();\n\n// Which panels are mounted, by id. React Aria points a selected tab's\n// `aria-controls` at the panel it would control whether or not one exists,\n// and a strip used on its own — tabs that filter the content below rather\n// than swapping a panel — then references an id nothing carries, which axe\n// reports as an invalid attribute value. Each panel registers itself here so\n// a tab can leave the attribute off when its panel is not there.\nconst PanelsContext = createContext<ReadonlySet<Key>>(NO_PANELS);\nconst RegisterPanelContext = createContext<(id: Key) => () => void>(() => () => {});\n\n// `children` is narrowed to nodes. React Aria also accepts a function there,\n// to hand the children the tabs' render state, and that form cannot be\n// wrapped in a context provider without calling it first — which would be\n// doing React Aria's job with none of its state. Nothing here needs it, so\n// the narrower type says so rather than leaving a signature that type-checks\n// and then fails to render.\ntype TabsProps = Omit<RACTabsProps, 'children'> & {\n  children?: ReactNode;\n};\n\n// The label, wrapped so the indicator has its width to follow. Built by a\n// call for the same reason as `tabRenderer` below; React Aria hands the\n// function the tab's state, and it is passed on when the children are a\n// function too.\nfunction tabContent(children: TabProps['children']) {\n  return (state: TabRenderProps & {\n    defaultChildren: ReactNode;\n  }) => <span className=\"x6s0dn4 x5yr21d x9f619 x3nfvp2 x1n2onr6\">\n      {typeof children === 'function' ? children(state) : children}\n      <RACSelectionIndicator className=\"x12w9bfk xnety89 xuoj239 x1pixlao xyooppx x9f619 x17v02zk x1ey2m1c x17y0mx6 xvueqy4 xnei2rj x10l6tqk xioksi3 x1mxbss1 x1seskgd\" />\n    </span>;\n}\n\n// React Aria renders a tab with `href` as an anchor and any other as a div,\n// and expects a `render` function to return the same element it would have.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its two inputs. See PanelsContext for why the attribute is\n// dropped.\nfunction tabRenderer(hasPanel: boolean, render: TabProps['render']): NonNullable<TabProps['render']> {\n  return (domProps, state) => {\n    const adjusted = hasPanel ? domProps : {\n      ...domProps,\n      'aria-controls': undefined\n    };\n    if (render !== undefined) {\n      return render(adjusted, state);\n    }\n    if ('href' in adjusted) {\n      // oxlint-disable-next-line jsx-a11y/anchor-has-content -- filled by React Aria\n      return <a {...adjusted} />;\n    }\n    return <div {...adjusted} />;\n  };\n}\n\n/**\n * A tab bar and its panels. Selection is React Aria's `selectedKey`: pass\n * it with `onSelectionChange` to control it, or `defaultSelectedKey` to let\n * it keep its own. Each `Tabs.Tab` names the `Tabs.Panel` it controls through\n * a shared `id`, and a strip may stand alone without panels.\n *\n * Composed rather than configured by props, because the number of tabs and\n * what each panel holds are the call site's to decide — the parts are\n * `Tabs.List`, `Tabs.Tab`, and `Tabs.Panel`.\n */\nfunction Tabs({\n  children,\n  ...props\n}: TabsProps) {\n  const [panels, setPanels] = useState<ReadonlySet<Key>>(NO_PANELS);\n  const register = useCallback((id: Key) => {\n    setPanels(previous => {\n      if (previous.has(id)) {\n        return previous;\n      }\n      const next = new Set(previous);\n      next.add(id);\n      return next;\n    });\n    return () => {\n      setPanels(previous => {\n        if (!previous.has(id)) {\n          return previous;\n        }\n        const next = new Set(previous);\n        next.delete(id);\n        return next;\n      });\n    };\n  }, []);\n  return <RACTabs {...props}>\n      <RegisterPanelContext value={register}>\n        <PanelsContext value={panels}>{children}</PanelsContext>\n      </RegisterPanelContext>\n    </RACTabs>;\n}\nfunction TabsList(props: TabsListProps) {\n  return <TabList {...props} {...mergeStatefulStyles({\n    className: \"xp05xdj x9f619 x78zum5\"\n  }, props)} />;\n}\nfunction TabsPanel(props: TabsPanelProps) {\n  const register = useContext(RegisterPanelContext);\n  const {\n    id\n  } = props;\n  useEffect(() => {\n    if (id === undefined) {\n      return undefined;\n    }\n    return register(id);\n  }, [id, register]);\n  return <TabPanel {...props} {...mergeStatefulStyles(stylex.props(styles.panel, focus.ring), props)} />;\n}\n\n/**\n * An optional box around the panels, which animates its height as one panel\n * gives way to the next. Without it the panels still work; the box around\n * them simply jumps from one height to the other.\n */\nfunction TabsPanels(props: TabsPanelsProps) {\n  return <RACTabPanels {...props} {...mergeStyles({\n    className: \"x12w9bfk x1t2j4n3 x9f619 xb3r6kr xioksi3 x1f55p5c x1seskgd\"\n  }, props)} />;\n}\nfunction TabsTab({\n  children,\n  render,\n  ...props\n}: TabsTabProps) {\n  const panels = useContext(PanelsContext);\n  const hasPanel = props.id !== undefined && panels.has(props.id);\n  return <Tab {...props} render={tabRenderer(hasPanel, render)} {...mergeStatefulStyles(tabStyles, props)}>\n      {tabContent(children)}\n    </Tab>;\n}\n\n// StyleX cannot target [data-selected] on the element it is styling, so the\n// active tab cannot be chosen in CSS. React Aria's answer is a className that\n// is a function of the tab's own state, the same mechanism Chip uses —\n// mergeStatefulStyles wraps this one so a tab still keeps a className the call\n// site passed.\nfunction tabStyles(state: TabRenderProps) {\n  return {\n    0: {\n      className: \"x12w9bfk x6s0dn4 xbg5kjn xc342km x9f619 x1ypdohk x78zum5 x1r8uery x1iyjqo2 xs83m0k xrgwony x12s497w x1szcwkt xl56j7k xo803ec xyl1r0q xeuugli xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1n2onr6 x1hl2dhg x1qno0dh xs2xxs2 xpc4ca7 x12vej0r x1p2om7n xjbqb8w x1w5n3ug\"\n    },\n    2: {\n      className: \"x12w9bfk x6s0dn4 xbg5kjn xc342km x9f619 x1ypdohk x78zum5 x1r8uery x1iyjqo2 xs83m0k xrgwony x12s497w x1szcwkt xl56j7k xo803ec xyl1r0q xeuugli xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1n2onr6 x1hl2dhg x1qno0dh xs2xxs2 xpc4ca7 x12vej0r x14dcer4 xjbqb8w x1mxwv8y\"\n    },\n    1: {\n      className: \"x12w9bfk x6s0dn4 xbg5kjn xc342km x9f619 x78zum5 x1r8uery x1iyjqo2 xs83m0k xrgwony x12s497w x1szcwkt xl56j7k xo803ec xyl1r0q xeuugli xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1n2onr6 x1hl2dhg x1qno0dh xs2xxs2 xpc4ca7 xjbqb8w x1xj74d8 x1h6gzvc\"\n    },\n    3: {\n      className: \"x12w9bfk x6s0dn4 xbg5kjn xc342km x9f619 x78zum5 x1r8uery x1iyjqo2 xs83m0k xrgwony x12s497w x1szcwkt xl56j7k xo803ec xyl1r0q xeuugli xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1n2onr6 x1hl2dhg x1qno0dh xs2xxs2 xpc4ca7 xjbqb8w x1xj74d8 x1h6gzvc\"\n    }\n  }[!!state.isSelected << 1 | !!state.isDisabled << 0];\n}\nTabs.List = TabsList;\nTabs.Panel = TabsPanel;\nTabs.Panels = TabsPanels;\nTabs.Tab = TabsTab;\ntype TabsListProps = TabListProps<object>;\ntype TabsPanelProps = TabPanelProps;\ntype TabsPanelsProps = Omit<TabPanelsProps<object>, 'children'> & {\n  children?: ReactNode;\n};\ntype TabsTabProps = TabProps;\nexport type { TabsListProps, TabsPanelProps, TabsPanelsProps, TabsProps, TabsTabProps };\nexport default Tabs;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","Key","TabsProps","RACTabsProps","TabListProps","TabPanelProps","TabPanelsProps","TabProps","TabRenderProps","stylex","createContext","useCallback","useContext","useEffect","useState","SelectionIndicator","RACSelectionIndicator","TabPanels","RACTabPanels","Tabs","RACTabs","Tab","TabList","TabPanel","focus","mergeStatefulStyles","mergeStyles","colors","motion","radii","sizing","spacing","stateLayerOpacity","typography","styles","panel","kB7OPa","$$css","NO_PANELS","ReadonlySet","Set","PanelsContext","RegisterPanelContext","id","Omit","children","tabContent","state","defaultChildren","tabRenderer","hasPanel","render","NonNullable","domProps","adjusted","undefined","t0","$","_c","props","panels","setPanels","t1","Symbol","for","previous","has","next","add","previous_0","next_0","delete","register","t2","t3","TabsList","className","TabsPanel","ring","TabsPanels","TabsTab","T0","tabStyles","t4","isSelected","isDisabled","List","Panel","Panels","TabsListProps","TabsPanelProps","TabsPanelsProps","TabsTabProps","RACSelectionIndicator","Tabs","_c","RACTabs","props","stylex.props","RACTabPanels"],"sources":["../../../src/components/tabs/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { Key, TabsProps as RACTabsProps, TabListProps, TabPanelProps, TabPanelsProps, TabProps, TabRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useCallback, useContext, useEffect, useState } from 'react';\nimport { SelectionIndicator as RACSelectionIndicator, TabPanels as RACTabPanels, Tabs as RACTabs, Tab, TabList, TabPanel } from 'react-aria-components';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The tabs page's primary tabs: a 48dp bar on the surface, divided into equal\n// sections, with a 1dp outline-variant divider inside the bar along its\n// bottom edge and, under the active tab's label, a 3dp primary indicator\n// rounded along its top. The indicator follows the label rather than the\n// tab, inset 2dp from the label's ends and never shorter than 24dp, which is\n// what the page draws.\n//\n// The indicator is React Aria's `SelectionIndicator`, which is a shared\n// element: it is rendered inside every tab but drawn in the selected one,\n// and on a change it keeps the old one until it has finished moving to the\n// new one's place. No `SharedElementTransition` is rendered here — `Tab`\n// scopes its own, and one added around the list changes nothing, which is\n// worth knowing because the primitive throws outside a scope when it is put\n// anywhere else.\n//\n// The label is wrapped in a span of its own so the indicator has the label's\n// width to follow: it is the span's `::after`, and the span is as tall as the\n// tab so the indicator reaches the bottom of the bar. Which tab carries it\n// comes from React Aria's render state rather than a selector, since StyleX\n// cannot target [data-selected] on the element it is styling.\nconst styles = {\n  panel: {\n    kB7OPa: \"x9f619\",\n    $$css: true\n  }\n};\nconst NO_PANELS: ReadonlySet<Key> = new Set();\n\n// Which panels are mounted, by id. React Aria points a selected tab's\n// `aria-controls` at the panel it would control whether or not one exists,\n// and a strip used on its own — tabs that filter the content below rather\n// than swapping a panel — then references an id nothing carries, which axe\n// reports as an invalid attribute value. Each panel registers itself here so\n// a tab can leave the attribute off when its panel is not there.\nconst PanelsContext = createContext<ReadonlySet<Key>>(NO_PANELS);\nconst RegisterPanelContext = createContext<(id: Key) => () => void>(() => () => {});\n\n// `children` is narrowed to nodes. React Aria also accepts a function there,\n// to hand the children the tabs' render state, and that form cannot be\n// wrapped in a context provider without calling it first — which would be\n// doing React Aria's job with none of its state. Nothing here needs it, so\n// the narrower type says so rather than leaving a signature that type-checks\n// and then fails to render.\ntype TabsProps = Omit<RACTabsProps, 'children'> & {\n  children?: ReactNode;\n};\n\n// The label, wrapped so the indicator has its width to follow. Built by a\n// call for the same reason as `tabRenderer` below; React Aria hands the\n// function the tab's state, and it is passed on when the children are a\n// function too.\nfunction tabContent(children: TabProps['children']) {\n  return (state: TabRenderProps & {\n    defaultChildren: ReactNode;\n  }) => <span className=\"x6s0dn4 x5yr21d x9f619 x3nfvp2 x1n2onr6\">\n      {typeof children === 'function' ? children(state) : children}\n      <RACSelectionIndicator className=\"x12w9bfk xnety89 xuoj239 x1pixlao xyooppx x9f619 x17v02zk x1ey2m1c x17y0mx6 xvueqy4 xnei2rj x10l6tqk xioksi3 x1mxbss1 x1seskgd\" />\n    </span>;\n}\n\n// React Aria renders a tab with `href` as an anchor and any other as a div,\n// and expects a `render` function to return the same element it would have.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its two inputs. See PanelsContext for why the attribute is\n// dropped.\nfunction tabRenderer(hasPanel: boolean, render: TabProps['render']): NonNullable<TabProps['render']> {\n  return (domProps, state) => {\n    const adjusted = hasPanel ? domProps : {\n      ...domProps,\n      'aria-controls': undefined\n    };\n    if (render !== undefined) {\n      return render(adjusted, state);\n    }\n    if ('href' in adjusted) {\n      // oxlint-disable-next-line jsx-a11y/anchor-has-content -- filled by React Aria\n      return <a {...adjusted} />;\n    }\n    return <div {...adjusted} />;\n  };\n}\n\n/**\n * A tab bar and its panels. Selection is React Aria's `selectedKey`: pass\n * it with `onSelectionChange` to control it, or `defaultSelectedKey` to let\n * it keep its own. Each `Tabs.Tab` names the `Tabs.Panel` it controls through\n * a shared `id`, and a strip may stand alone without panels.\n *\n * Composed rather than configured by props, because the number of tabs and\n * what each panel holds are the call site's to decide — the parts are\n * `Tabs.List`, `Tabs.Tab`, and `Tabs.Panel`.\n */\nfunction Tabs({\n  children,\n  ...props\n}: TabsProps) {\n  const [panels, setPanels] = useState<ReadonlySet<Key>>(NO_PANELS);\n  const register = useCallback((id: Key) => {\n    setPanels(previous => {\n      if (previous.has(id)) {\n        return previous;\n      }\n      const next = new Set(previous);\n      next.add(id);\n      return next;\n    });\n    return () => {\n      setPanels(previous => {\n        if (!previous.has(id)) {\n          return previous;\n        }\n        const next = new Set(previous);\n        next.delete(id);\n        return next;\n      });\n    };\n  }, []);\n  return <RACTabs {...props}>\n      <RegisterPanelContext value={register}>\n        <PanelsContext value={panels}>{children}</PanelsContext>\n      </RegisterPanelContext>\n    </RACTabs>;\n}\nfunction TabsList(props: TabsListProps) {\n  return <TabList {...props} {...mergeStatefulStyles({\n    className: \"xp05xdj x9f619 x78zum5\"\n  }, props)} />;\n}\nfunction TabsPanel(props: TabsPanelProps) {\n  const register = useContext(RegisterPanelContext);\n  const {\n    id\n  } = props;\n  useEffect(() => {\n    if (id === undefined) {\n      return undefined;\n    }\n    return register(id);\n  }, [id, register]);\n  return <TabPanel {...props} {...mergeStatefulStyles(stylex.props(styles.panel, focus.ring), props)} />;\n}\n\n/**\n * An optional box around the panels, which animates its height as one panel\n * gives way to the next. Without it the panels still work; the box around\n * them simply jumps from one height to the other.\n */\nfunction TabsPanels(props: TabsPanelsProps) {\n  return <RACTabPanels {...props} {...mergeStyles({\n    className: \"x12w9bfk x1t2j4n3 x9f619 xb3r6kr xioksi3 x1f55p5c x1seskgd\"\n  }, props)} />;\n}\nfunction TabsTab({\n  children,\n  render,\n  ...props\n}: TabsTabProps) {\n  const panels = useContext(PanelsContext);\n  const hasPanel = props.id !== undefined && panels.has(props.id);\n  return <Tab {...props} render={tabRenderer(hasPanel, render)} {...mergeStatefulStyles(tabStyles, props)}>\n      {tabContent(children)}\n    </Tab>;\n}\n\n// StyleX cannot target [data-selected] on the element it is styling, so the\n// active tab cannot be chosen in CSS. React Aria's answer is a className that\n// is a function of the tab's own state, the same mechanism Chip uses —\n// mergeStatefulStyles wraps this one so a tab still keeps a className the call\n// site passed.\nfunction tabStyles(state: TabRenderProps) {\n  return {\n    0: {\n      className: \"x12w9bfk x6s0dn4 xbg5kjn xc342km x9f619 x1ypdohk x78zum5 x1r8uery x1iyjqo2 xs83m0k xrgwony x12s497w x1szcwkt xl56j7k xo803ec xyl1r0q xeuugli xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1n2onr6 x1hl2dhg x1qno0dh xs2xxs2 xpc4ca7 x12vej0r x1p2om7n xjbqb8w x1w5n3ug\"\n    },\n    2: {\n      className: \"x12w9bfk x6s0dn4 xbg5kjn xc342km x9f619 x1ypdohk x78zum5 x1r8uery x1iyjqo2 xs83m0k xrgwony x12s497w x1szcwkt xl56j7k xo803ec xyl1r0q xeuugli xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1n2onr6 x1hl2dhg x1qno0dh xs2xxs2 xpc4ca7 x12vej0r x14dcer4 xjbqb8w x1mxwv8y\"\n    },\n    1: {\n      className: \"x12w9bfk x6s0dn4 xbg5kjn xc342km x9f619 x78zum5 x1r8uery x1iyjqo2 xs83m0k xrgwony x12s497w x1szcwkt xl56j7k xo803ec xyl1r0q xeuugli xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1n2onr6 x1hl2dhg x1qno0dh xs2xxs2 xpc4ca7 xjbqb8w x1xj74d8 x1h6gzvc\"\n    },\n    3: {\n      className: \"x12w9bfk x6s0dn4 xbg5kjn xc342km x9f619 x78zum5 x1r8uery x1iyjqo2 xs83m0k xrgwony x12s497w x1szcwkt xl56j7k xo803ec xyl1r0q xeuugli xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1n2onr6 x1hl2dhg x1qno0dh xs2xxs2 xpc4ca7 xjbqb8w x1xj74d8 x1h6gzvc\"\n    }\n  }[!!state.isSelected << 1 | !!state.isDisabled << 0];\n}\nTabs.List = TabsList;\nTabs.Panel = TabsPanel;\nTabs.Panels = TabsPanels;\nTabs.Tab = TabsTab;\ntype TabsListProps = TabListProps<object>;\ntype TabsPanelProps = TabPanelProps;\ntype TabsPanelsProps = Omit<TabPanelsProps<object>, 'children'> & {\n  children?: ReactNode;\n};\ntype TabsTabProps = TabProps;\nexport type { TabsListProps, TabsPanelProps, TabsPanelsProps, TabsProps, TabsTabProps };\nexport default Tabs;"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["stylex","RenderComponentProps","useRender","mergeStyles","colors","radii","spacing","typography","styles","base","kGNEyG","kaIpWk","ksu8eU","kMzoRj","kB7OPa","k1xSpc","kmuXW","kMv6JI","kGuDYH","kcqcaj","k63SB2","kOIVth","kb6lSQ","kLWn49","k8WAf4","kg3NbH","khDVqt","$$css","filledTones","negative","kWkggS","kVAM5u","kMwMTN","neutral","positive","primary","outlinedTones","TagProps","tone","TagTone","variant","TagVariant","Tag","t0","$","_c","render","t1","t2","t3","t4","t5","t6","t7","props","undefined","toned","defaultTagName"],"sources":["../../../src/components/tag/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// A tag states something about what it sits beside — a count, a status, a\n// version — and is never itself the thing you press. That is the whole line\n// between this and Chip: a chip is a two-state button announcing itself\n// through `aria-pressed`, so reaching for one to render a read-only label\n// puts a control in the accessibility tree that nothing can operate.\n//\n// Both variants carry a 1px border and `filled` makes it transparent rather\n// than dropping it, so a tag is the same size either way. Emphasising one\n// tag in a row otherwise nudges its neighbours by a pixel each side.\n//\n// Tabular figures are unconditional, for the same reason Currency sets them:\n// what ends up in a tag is mostly numeric — counts, versions, ports — and a\n// stack of them down a list wobbles on proportional digits. Text that happens\n// to carry no digits is unaffected.\n//\n// No Material Design page draws a tag; the badges page's large badge is the\n// nearest, a label-small count on an 8dp corner, and that is the type and the\n// corner here. A tag stands beside a word rather than on an icon, so it takes\n// the padding and 1dp rule above in place of the badge's 16dp box, and the\n// container roles in place of the badge's error pair, since it names a state\n// rather than flagging one.\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x1xdvaa9\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xs1w0rn\",\n    kGuDYH: \"x1n35her\",\n    kcqcaj: \"xss6m8b\",\n    k63SB2: \"x1su64ma\",\n    kOIVth: \"xzoy561\",\n    kb6lSQ: \"xdlnduh\",\n    kLWn49: \"xaomhve\",\n    k8WAf4: \"xpg5a72\",\n    kg3NbH: \"xn60lsn\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  }\n};\n\n// `neutral` draws from the surface roles rather than a colour of its own,\n// which is what lets it state something without ranking it. The other three\n// name a direction, and are the same three Currency uses, plus primary for\n// the notable-but-not-good-or-bad case.\nconst filledTones = {\n  negative: {\n    kWkggS: \"xkz0cvf\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"xylzu7l\",\n    $$css: true\n  },\n  neutral: {\n    kWkggS: \"x1rrhr5q\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  positive: {\n    kWkggS: \"xa3zu90\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1di7zbg\",\n    $$css: true\n  },\n  primary: {\n    kWkggS: \"xp89om9\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  }\n};\n\n// Outlined takes the tone at full strength for both the rule and the text,\n// rather than the on-container pairing filled uses. There is no container\n// here for an on-colour to be legible against — the page is the background —\n// so the container roles would read as washed out.\nconst outlinedTones = {\n  negative: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"x1xdi1zw\",\n    kMwMTN: \"x12gp0t\",\n    $$css: true\n  },\n  neutral: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  positive: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xm76mbg\",\n    kMwMTN: \"x4no3js\",\n    $$css: true\n  },\n  primary: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"x1uajy3w\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  }\n};\ntype TagProps = {\n  /**\n   * Which colour role the tag carries. `neutral` states without ranking;\n   * the other three read as good, bad, or worth noticing.\n   *\n   * Each is a container under its own on-colour, guaranteed legible on the\n   * surface family — which is what the library's own tokens and every demo\n   * scheme are held to. Over a container of its own the pair is one colour\n   * family on top of another and is not guaranteed, so a custom theme placing\n   * a tag there has to check that pair itself.\n   * @default 'neutral'\n   */\n  tone?: TagTone;\n  /**\n   * How much weight the tag pulls. `filled` sits on a container of its own;\n   * `outlined` is a rule on the page, for a tag that should not compete\n   * with the thing it labels.\n   * @default 'filled'\n   */\n  variant?: TagVariant;\n} & RenderComponentProps<'span'>;\ntype TagTone = 'negative' | 'neutral' | 'positive' | 'primary';\ntype TagVariant = 'filled' | 'outlined';\n\n/**\n * A short, read-only label attached to something else. It renders a `<span>`\n * and takes no interaction — for a label that can be selected, reach for Chip.\n */\nfunction Tag({\n  render,\n  tone = 'neutral',\n  variant = 'filled',\n  ...props\n}: TagProps) {\n  const toned = variant === 'filled' ? filledTones[tone] : outlinedTones[tone];\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...props,\n      ...mergeStyles(stylex.props(styles.base, toned), props)\n    },\n    render\n  });\n}\nexport type { TagProps };\nexport default Tag;"],"mappings":";;;;;AA4BA,MAAMQ,SAAS,EACbC,MAAM;CACJC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,OAAO;CACPC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,OAAO;AACT,EACF;AAMA,MAAMC,cAAc;CAClBC,UAAU;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAM,SAAS;EACPH,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAO,UAAU;EACRJ,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAQ,SAAS;EACPL,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;AACF;AAMA,MAAMS,gBAAgB;CACpBP,UAAU;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAM,SAAS;EACPH,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAO,UAAU;EACRJ,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAQ,SAAS;EACPL,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;AACF;;;;;AA6BA,SAAAe,IAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAN,EAAA,OAAAD,IAAA;EAAa,MAAA,EAAAG,QAAAK,IAAAb,MAAAc,IAAAZ,SAAAa,IAAA,GAAAC,YAAAX;EAAAG,SAAAK;EAEX,MAAAb,OAAAc,OAAAG,KAAAA,IAAA,YAAAH;EAIA,MAAAI,SAHAH,OAAAE,KAAAA,IAAA,WAAAF,QAG0B,WAAWzB,YAAYU,QAAQF,cAAcE;EAChEpC,KAAAA;EACW+C,KAAA;EAEXK,KAAAA;EACAN,KAAA7C,YAAYH,MAAaQ,OAAMC,MAAO+C,KAAK,GAAGF,OAAK;EAACV,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;CAAA,OAAA;EAAAJ,SAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;CAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAG,MAAAH,EAAA,OAAAI,IAAA;EAFlDG,KAAA;GAAA,GACFG;GAAK,GACLN;EACL;EAACJ,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,OAAAE,UAAAF,EAAA,QAAAK,MAAAL,EAAA,QAAAO,IAAA;EALcC,KAAA;GAAAK,gBACCR;GAAMK,OACfH;GAGNL;EAEH;EAACF,EAAA,KAAAE;EAAAF,EAAA,MAAAK;EAAAL,EAAA,MAAAO;EAAAP,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,OAPM1C,GAAUkD,EAOhB;AAAC"}
+{"version":3,"file":"index.js","names":["stylex","RenderComponentProps","useRender","mergeStyles","colors","radii","spacing","typography","styles","base","kGNEyG","kaIpWk","ksu8eU","kMzoRj","kB7OPa","k1xSpc","kmuXW","kMv6JI","kGuDYH","kcqcaj","k63SB2","kOIVth","kb6lSQ","kLWn49","k8WAf4","kg3NbH","khDVqt","$$css","filledTones","negative","kWkggS","kVAM5u","kMwMTN","neutral","positive","primary","outlinedTones","TagProps","tone","TagTone","variant","TagVariant","Tag","t0","$","_c","render","t1","t2","t3","t4","t5","t6","t7","props","undefined","toned","defaultTagName","_c","props","stylex.props"],"sources":["../../../src/components/tag/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// A tag states something about what it sits beside — a count, a status, a\n// version — and is never itself the thing you press. That is the whole line\n// between this and Chip: a chip is a two-state button announcing itself\n// through `aria-pressed`, so reaching for one to render a read-only label\n// puts a control in the accessibility tree that nothing can operate.\n//\n// Both variants carry a 1px border and `filled` makes it transparent rather\n// than dropping it, so a tag is the same size either way. Emphasising one\n// tag in a row otherwise nudges its neighbours by a pixel each side.\n//\n// Tabular figures are unconditional, for the same reason Currency sets them:\n// what ends up in a tag is mostly numeric — counts, versions, ports — and a\n// stack of them down a list wobbles on proportional digits. Text that happens\n// to carry no digits is unaffected.\n//\n// No Material Design page draws a tag; the badges page's large badge is the\n// nearest, a label-small count on an 8dp corner, and that is the type and the\n// corner here. A tag stands beside a word rather than on an icon, so it takes\n// the padding and 1dp rule above in place of the badge's 16dp box, and the\n// container roles in place of the badge's error pair, since it names a state\n// rather than flagging one.\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x1xdvaa9\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xs1w0rn\",\n    kGuDYH: \"x1n35her\",\n    kcqcaj: \"xss6m8b\",\n    k63SB2: \"x1su64ma\",\n    kOIVth: \"xzoy561\",\n    kb6lSQ: \"xdlnduh\",\n    kLWn49: \"xaomhve\",\n    k8WAf4: \"xpg5a72\",\n    kg3NbH: \"xn60lsn\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  }\n};\n\n// `neutral` draws from the surface roles rather than a colour of its own,\n// which is what lets it state something without ranking it. The other three\n// name a direction, and are the same three Currency uses, plus primary for\n// the notable-but-not-good-or-bad case.\nconst filledTones = {\n  negative: {\n    kWkggS: \"xkz0cvf\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"xylzu7l\",\n    $$css: true\n  },\n  neutral: {\n    kWkggS: \"x1rrhr5q\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  positive: {\n    kWkggS: \"xa3zu90\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1di7zbg\",\n    $$css: true\n  },\n  primary: {\n    kWkggS: \"xp89om9\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  }\n};\n\n// Outlined takes the tone at full strength for both the rule and the text,\n// rather than the on-container pairing filled uses. There is no container\n// here for an on-colour to be legible against — the page is the background —\n// so the container roles would read as washed out.\nconst outlinedTones = {\n  negative: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"x1xdi1zw\",\n    kMwMTN: \"x12gp0t\",\n    $$css: true\n  },\n  neutral: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  positive: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xm76mbg\",\n    kMwMTN: \"x4no3js\",\n    $$css: true\n  },\n  primary: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"x1uajy3w\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  }\n};\ntype TagProps = {\n  /**\n   * Which colour role the tag carries. `neutral` states without ranking;\n   * the other three read as good, bad, or worth noticing.\n   *\n   * Each is a container under its own on-colour, guaranteed legible on the\n   * surface family — which is what the library's own tokens and every demo\n   * scheme are held to. Over a container of its own the pair is one colour\n   * family on top of another and is not guaranteed, so a custom theme placing\n   * a tag there has to check that pair itself.\n   * @default 'neutral'\n   */\n  tone?: TagTone;\n  /**\n   * How much weight the tag pulls. `filled` sits on a container of its own;\n   * `outlined` is a rule on the page, for a tag that should not compete\n   * with the thing it labels.\n   * @default 'filled'\n   */\n  variant?: TagVariant;\n} & RenderComponentProps<'span'>;\ntype TagTone = 'negative' | 'neutral' | 'positive' | 'primary';\ntype TagVariant = 'filled' | 'outlined';\n\n/**\n * A short, read-only label attached to something else. It renders a `<span>`\n * and takes no interaction — for a label that can be selected, reach for Chip.\n */\nfunction Tag({\n  render,\n  tone = 'neutral',\n  variant = 'filled',\n  ...props\n}: TagProps) {\n  const toned = variant === 'filled' ? filledTones[tone] : outlinedTones[tone];\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...props,\n      ...mergeStyles(stylex.props(styles.base, toned), props)\n    },\n    render\n  });\n}\nexport type { TagProps };\nexport default Tag;"],"mappings":";;;;;AA4BA,MAAMQ,SAAS,EACbC,MAAM;CACJC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,OAAO;CACPC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,OAAO;AACT,EACF;AAMA,MAAMC,cAAc;CAClBC,UAAU;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAM,SAAS;EACPH,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAO,UAAU;EACRJ,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAQ,SAAS;EACPL,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;AACF;AAMA,MAAMS,gBAAgB;CACpBP,UAAU;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAM,SAAS;EACPH,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAO,UAAU;EACRJ,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAQ,SAAS;EACPL,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;AACF;;;;;AA6BA,SAAAe,IAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAN,EAAA,OAAAD,IAAA;EAAa,MAAA,EAAAG,QAAAK,IAAAb,MAAAc,IAAAZ,SAAAa,IAAA,GAAAC,YAAAX;EAAAG,SAAAK;EAEX,MAAAb,OAAAc,OAAAG,KAAAA,IAAA,YAAAH;EAIA,MAAAI,SAHAH,OAAAE,KAAAA,IAAA,WAAAF,QAG0B,WAAWzB,YAAYU,QAAQF,cAAcE;EAChEpC,KAAAA;EACW+C,KAAA;EAEXK,KAAAA;EACAN,KAAA7C,YAAYH,MAAaQ,OAAMC,MAAO+C,KAAK,GAAGF,OAAK;EAACV,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;CAAA,OAAA;EAAAJ,SAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;CAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAG,MAAAH,EAAA,OAAAI,IAAA;EAFlDG,KAAA;GAAA,GACFG;GAAK,GACLN;EACL;EAACJ,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,OAAAE,UAAAF,EAAA,QAAAK,MAAAL,EAAA,QAAAO,IAAA;EALcC,KAAA;GAAAK,gBACCR;GAAMK,OACfH;GAGNL;EAEH;EAACF,EAAA,KAAAE;EAAAF,EAAA,MAAAK;EAAAL,EAAA,MAAAO;EAAAP,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,OAPM1C,GAAUkD,EAOhB;AAAC"}