@kanso-labs/kanso-ui 0.34.11 → 0.34.13

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["stylex","RenderComponentProps","useRender","mergeStyles","colors","typography","styles","base","kB7OPa","kogj98","$$css","bodyLarge","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","bodyMedium","bodySmall","displayLarge","displayMedium","displaySmall","headlineLarge","headlineMedium","headlineSmall","labelLarge","labelMedium","labelSmall","titleLarge","titleMedium","titleSmall","tones","default","kMwMTN","error","inherit","muted","negative","positive","primary","TextProps","block","tone","variant","Text","t0","$","_c","render","t1","t2","t3","t4","t5","t6","t7","t8","props","undefined","defaultTagName"],"sources":["../../../src/components/text/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, typography } from '../../tokens/design.tokens.stylex';\n\n// The type scale on Material Design's typography pages: fifteen styles, the\n// display, headline, title, body and label roles at large, medium and small.\n// Each is a size, a line height, a tracking, a weight and a typeface — the\n// scale's brand face for display, headline and the large title, its plain\n// face for the rest. The values are the tokens', which carry the scale's own\n// numbers, so no style here writes one down.\n//\n// One key per style in the 15-entry type scale, named exactly as the token\n// group names it, so `styles[variant]` indexes straight off the prop with no\n// lookup table to keep in sync. Every style sets all five fields the scale\n// defines rather than inheriting any of them: a Text nested inside another\n// Text would otherwise pick up the outer line-height or tracking, which is\n// the kind of drift the scale exists to prevent.\n//\n// `margin: 0` is the one UA reset here. Text renders a <span> by default, but\n// `block` renders a <p> and `render` is how a consumer reaches for any other\n// semantic markup — `<Text render={<h2 />}>` — and the UA margin on either\n// would then vary the spacing around otherwise identical type. The space\n// between two blocks of text is the job of whatever holds them, which is\n// where it can come from the spacing scale.\nconst styles = {\n  base: {\n    kB7OPa: \"x9f619\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  },\n  bodyLarge: {\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    $$css: true\n  },\n  bodyMedium: {\n    kMv6JI: \"xpo2rfv\",\n    kGuDYH: \"x193rfdd\",\n    k63SB2: \"x1hews6w\",\n    kb6lSQ: \"xn43zvd\",\n    kLWn49: \"xv61bfh\",\n    $$css: true\n  },\n  bodySmall: {\n    kMv6JI: \"x1yicsit\",\n    kGuDYH: \"x1b35g6e\",\n    k63SB2: \"x9d6959\",\n    kb6lSQ: \"xwth0xh\",\n    kLWn49: \"xybisxh\",\n    $$css: true\n  },\n  displayLarge: {\n    kMv6JI: \"xjaampf\",\n    kGuDYH: \"xuyiek4\",\n    k63SB2: \"x1n2oj23\",\n    kb6lSQ: \"x1hxa6v5\",\n    kLWn49: \"x1iwmiir\",\n    $$css: true\n  },\n  displayMedium: {\n    kMv6JI: \"x1gi70vc\",\n    kGuDYH: \"xlzzeuu\",\n    k63SB2: \"xh9quta\",\n    kb6lSQ: \"x148mp24\",\n    kLWn49: \"xs5hucj\",\n    $$css: true\n  },\n  displaySmall: {\n    kMv6JI: \"x1eslvzl\",\n    kGuDYH: \"x1g52wnc\",\n    k63SB2: \"x1x664hp\",\n    kb6lSQ: \"x1rnjaw4\",\n    kLWn49: \"x92ldg4\",\n    $$css: true\n  },\n  headlineLarge: {\n    kMv6JI: \"x1vsmgmf\",\n    kGuDYH: \"xh9c4x\",\n    k63SB2: \"x1y15vu6\",\n    kb6lSQ: \"xoqu3bc\",\n    kLWn49: \"x10x9d6x\",\n    $$css: true\n  },\n  headlineMedium: {\n    kMv6JI: \"x18s19nt\",\n    kGuDYH: \"xcohea8\",\n    k63SB2: \"x1mtpwof\",\n    kb6lSQ: \"x1kuyk5j\",\n    kLWn49: \"xucx483\",\n    $$css: true\n  },\n  headlineSmall: {\n    kMv6JI: \"x1fz0g89\",\n    kGuDYH: \"xkb6epg\",\n    k63SB2: \"x76yrz5\",\n    kb6lSQ: \"x1s1qhaa\",\n    kLWn49: \"x1voeury\",\n    $$css: true\n  },\n  labelLarge: {\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    $$css: true\n  },\n  labelMedium: {\n    kMv6JI: \"xp6n8n2\",\n    kGuDYH: \"xkucv67\",\n    k63SB2: \"x14hhc5u\",\n    kb6lSQ: \"x12utw95\",\n    kLWn49: \"xvzb9hk\",\n    $$css: true\n  },\n  labelSmall: {\n    kMv6JI: \"xs1w0rn\",\n    kGuDYH: \"x1n35her\",\n    k63SB2: \"x1su64ma\",\n    kb6lSQ: \"xdlnduh\",\n    kLWn49: \"xaomhve\",\n    $$css: true\n  },\n  titleLarge: {\n    kMv6JI: \"xdy5w5q\",\n    kGuDYH: \"xete2z3\",\n    k63SB2: \"x14ijtet\",\n    kb6lSQ: \"xug9e1u\",\n    kLWn49: \"x2divse\",\n    $$css: true\n  },\n  titleMedium: {\n    kMv6JI: \"x46eyla\",\n    kGuDYH: \"x5ehqhr\",\n    k63SB2: \"xrf6cl6\",\n    kb6lSQ: \"x1g135zh\",\n    kLWn49: \"x1ggk5va\",\n    $$css: true\n  },\n  titleSmall: {\n    kMv6JI: \"xrgwony\",\n    kGuDYH: \"x12s497w\",\n    k63SB2: \"x1szcwkt\",\n    kb6lSQ: \"xo803ec\",\n    kLWn49: \"xyl1r0q\",\n    $$css: true\n  }\n};\n\n// Tone is a separate axis from variant so the two compose freely — any of the\n// 15 scale styles in any of these colors. Kept to the roles text actually\n// takes on a surface; a consumer needing something outside this set uses\n// `inherit` and colors the parent, rather than this growing a case per role.\nconst tones = {\n  default: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  error: {\n    kMwMTN: \"x4ii1qj\",\n    $$css: true\n  },\n  inherit: {\n    kMwMTN: \"x1heor9g\",\n    $$css: true\n  },\n  muted: {\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  negative: {\n    kMwMTN: \"x12gp0t\",\n    $$css: true\n  },\n  positive: {\n    kMwMTN: \"x4no3js\",\n    $$css: true\n  },\n  primary: {\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  }\n};\ntype TextProps = {\n  /**\n   * Renders a `<p>` rather than the default `<span>`, for a block of prose\n   * rather than a run of text inside one.\n   *\n   * The paragraph carries no margin of its own, the same as every other Text.\n   * The space between two paragraphs belongs to whatever holds both of them,\n   * which is where it can be a step of the spacing scale rather than a\n   * browser default.\n   *\n   * Ignored when `render` is given, since that names the element outright.\n   * @default false\n   */\n  block?: boolean;\n  /**\n   * The color role to render in. `inherit` takes the color of the nearest\n   * colored ancestor instead of setting one.\n   *\n   * `default` is the on-surface role `Currency` and `Tag` call `neutral` —\n   * see AGENTS.md, under Prop vocabularies, which settles on that word. This\n   * one predates the rule, and renaming a public prop's value is a breaking\n   * change of its own.\n   *\n   * Every role here is guaranteed legible on the surface family, which is\n   * what the library's own tokens and every demo scheme are held to. Over a\n   * container of its own — a selected row, a filled card — `positive`,\n   * `negative` and `error` are one colour family on top of another and are\n   * not guaranteed, so a custom theme placing text there has to check that\n   * pair itself. `inherit` is the way out: it takes the container's own\n   * on-colour rather than setting one.\n   * @default 'default'\n   */\n  tone?: 'default' | 'error' | 'inherit' | 'muted' | 'negative' | 'positive' | 'primary';\n  /**\n   * Which style of the type scale to render.\n   * @default 'bodyMedium'\n   */\n  variant?: 'bodyLarge' | 'bodyMedium' | 'bodySmall' | 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall';\n} & RenderComponentProps<'span'>;\nfunction Text({\n  block = false,\n  render,\n  tone = 'default',\n  variant = 'bodyMedium',\n  ...props\n}: TextProps) {\n  return useRender({\n    // Card switches its default element the same way, and the props type\n    // stays the span's for the same reason: the two differ only in the ref's\n    // element interface, and neither adds anything a call site reaches for.\n    defaultTagName: block ? 'p' : 'span',\n    props: {\n      ...props,\n      ...mergeStyles(stylex.props(styles.base, styles[variant], tones[tone]), props)\n    },\n    render\n  });\n}\nexport type { TextProps };\nexport default Text;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["stylex","RenderComponentProps","useRender","mergeStyles","colors","typography","styles","base","kB7OPa","kogj98","$$css","bodyLarge","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","bodyMedium","bodySmall","displayLarge","displayMedium","displaySmall","headlineLarge","headlineMedium","headlineSmall","labelLarge","labelMedium","labelSmall","titleLarge","titleMedium","titleSmall","tones","default","kMwMTN","error","inherit","muted","negative","positive","primary","TextProps","block","tone","variant","Text","t0","$","_c","render","t1","t2","t3","t4","t5","t6","t7","t8","props","undefined","defaultTagName","_c","props","stylex.props"],"sources":["../../../src/components/text/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, typography } from '../../tokens/design.tokens.stylex';\n\n// The type scale on Material Design's typography pages: fifteen styles, the\n// display, headline, title, body and label roles at large, medium and small.\n// Each is a size, a line height, a tracking, a weight and a typeface — the\n// scale's brand face for display, headline and the large title, its plain\n// face for the rest. The values are the tokens', which carry the scale's own\n// numbers, so no style here writes one down.\n//\n// One key per style in the 15-entry type scale, named exactly as the token\n// group names it, so `styles[variant]` indexes straight off the prop with no\n// lookup table to keep in sync. Every style sets all five fields the scale\n// defines rather than inheriting any of them: a Text nested inside another\n// Text would otherwise pick up the outer line-height or tracking, which is\n// the kind of drift the scale exists to prevent.\n//\n// `margin: 0` is the one UA reset here. Text renders a <span> by default, but\n// `block` renders a <p> and `render` is how a consumer reaches for any other\n// semantic markup — `<Text render={<h2 />}>` — and the UA margin on either\n// would then vary the spacing around otherwise identical type. The space\n// between two blocks of text is the job of whatever holds them, which is\n// where it can come from the spacing scale.\nconst styles = {\n  base: {\n    kB7OPa: \"x9f619\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  },\n  bodyLarge: {\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    $$css: true\n  },\n  bodyMedium: {\n    kMv6JI: \"xpo2rfv\",\n    kGuDYH: \"x193rfdd\",\n    k63SB2: \"x1hews6w\",\n    kb6lSQ: \"xn43zvd\",\n    kLWn49: \"xv61bfh\",\n    $$css: true\n  },\n  bodySmall: {\n    kMv6JI: \"x1yicsit\",\n    kGuDYH: \"x1b35g6e\",\n    k63SB2: \"x9d6959\",\n    kb6lSQ: \"xwth0xh\",\n    kLWn49: \"xybisxh\",\n    $$css: true\n  },\n  displayLarge: {\n    kMv6JI: \"xjaampf\",\n    kGuDYH: \"xuyiek4\",\n    k63SB2: \"x1n2oj23\",\n    kb6lSQ: \"x1hxa6v5\",\n    kLWn49: \"x1iwmiir\",\n    $$css: true\n  },\n  displayMedium: {\n    kMv6JI: \"x1gi70vc\",\n    kGuDYH: \"xlzzeuu\",\n    k63SB2: \"xh9quta\",\n    kb6lSQ: \"x148mp24\",\n    kLWn49: \"xs5hucj\",\n    $$css: true\n  },\n  displaySmall: {\n    kMv6JI: \"x1eslvzl\",\n    kGuDYH: \"x1g52wnc\",\n    k63SB2: \"x1x664hp\",\n    kb6lSQ: \"x1rnjaw4\",\n    kLWn49: \"x92ldg4\",\n    $$css: true\n  },\n  headlineLarge: {\n    kMv6JI: \"x1vsmgmf\",\n    kGuDYH: \"xh9c4x\",\n    k63SB2: \"x1y15vu6\",\n    kb6lSQ: \"xoqu3bc\",\n    kLWn49: \"x10x9d6x\",\n    $$css: true\n  },\n  headlineMedium: {\n    kMv6JI: \"x18s19nt\",\n    kGuDYH: \"xcohea8\",\n    k63SB2: \"x1mtpwof\",\n    kb6lSQ: \"x1kuyk5j\",\n    kLWn49: \"xucx483\",\n    $$css: true\n  },\n  headlineSmall: {\n    kMv6JI: \"x1fz0g89\",\n    kGuDYH: \"xkb6epg\",\n    k63SB2: \"x76yrz5\",\n    kb6lSQ: \"x1s1qhaa\",\n    kLWn49: \"x1voeury\",\n    $$css: true\n  },\n  labelLarge: {\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    $$css: true\n  },\n  labelMedium: {\n    kMv6JI: \"xp6n8n2\",\n    kGuDYH: \"xkucv67\",\n    k63SB2: \"x14hhc5u\",\n    kb6lSQ: \"x12utw95\",\n    kLWn49: \"xvzb9hk\",\n    $$css: true\n  },\n  labelSmall: {\n    kMv6JI: \"xs1w0rn\",\n    kGuDYH: \"x1n35her\",\n    k63SB2: \"x1su64ma\",\n    kb6lSQ: \"xdlnduh\",\n    kLWn49: \"xaomhve\",\n    $$css: true\n  },\n  titleLarge: {\n    kMv6JI: \"xdy5w5q\",\n    kGuDYH: \"xete2z3\",\n    k63SB2: \"x14ijtet\",\n    kb6lSQ: \"xug9e1u\",\n    kLWn49: \"x2divse\",\n    $$css: true\n  },\n  titleMedium: {\n    kMv6JI: \"x46eyla\",\n    kGuDYH: \"x5ehqhr\",\n    k63SB2: \"xrf6cl6\",\n    kb6lSQ: \"x1g135zh\",\n    kLWn49: \"x1ggk5va\",\n    $$css: true\n  },\n  titleSmall: {\n    kMv6JI: \"xrgwony\",\n    kGuDYH: \"x12s497w\",\n    k63SB2: \"x1szcwkt\",\n    kb6lSQ: \"xo803ec\",\n    kLWn49: \"xyl1r0q\",\n    $$css: true\n  }\n};\n\n// Tone is a separate axis from variant so the two compose freely — any of the\n// 15 scale styles in any of these colors. Kept to the roles text actually\n// takes on a surface; a consumer needing something outside this set uses\n// `inherit` and colors the parent, rather than this growing a case per role.\nconst tones = {\n  default: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  error: {\n    kMwMTN: \"x4ii1qj\",\n    $$css: true\n  },\n  inherit: {\n    kMwMTN: \"x1heor9g\",\n    $$css: true\n  },\n  muted: {\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  negative: {\n    kMwMTN: \"x12gp0t\",\n    $$css: true\n  },\n  positive: {\n    kMwMTN: \"x4no3js\",\n    $$css: true\n  },\n  primary: {\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  }\n};\ntype TextProps = {\n  /**\n   * Renders a `<p>` rather than the default `<span>`, for a block of prose\n   * rather than a run of text inside one.\n   *\n   * The paragraph carries no margin of its own, the same as every other Text.\n   * The space between two paragraphs belongs to whatever holds both of them,\n   * which is where it can be a step of the spacing scale rather than a\n   * browser default.\n   *\n   * Ignored when `render` is given, since that names the element outright.\n   * @default false\n   */\n  block?: boolean;\n  /**\n   * The color role to render in. `inherit` takes the color of the nearest\n   * colored ancestor instead of setting one.\n   *\n   * `default` is the on-surface role `Currency` and `Tag` call `neutral` —\n   * see AGENTS.md, under Prop vocabularies, which settles on that word. This\n   * one predates the rule, and renaming a public prop's value is a breaking\n   * change of its own.\n   *\n   * Every role here is guaranteed legible on the surface family, which is\n   * what the library's own tokens and every demo scheme are held to. Over a\n   * container of its own — a selected row, a filled card — `positive`,\n   * `negative` and `error` are one colour family on top of another and are\n   * not guaranteed, so a custom theme placing text there has to check that\n   * pair itself. `inherit` is the way out: it takes the container's own\n   * on-colour rather than setting one.\n   * @default 'default'\n   */\n  tone?: 'default' | 'error' | 'inherit' | 'muted' | 'negative' | 'positive' | 'primary';\n  /**\n   * Which style of the type scale to render.\n   * @default 'bodyMedium'\n   */\n  variant?: 'bodyLarge' | 'bodyMedium' | 'bodySmall' | 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall';\n} & RenderComponentProps<'span'>;\nfunction Text({\n  block = false,\n  render,\n  tone = 'default',\n  variant = 'bodyMedium',\n  ...props\n}: TextProps) {\n  return useRender({\n    // Card switches its default element the same way, and the props type\n    // stays the span's for the same reason: the two differ only in the ref's\n    // element interface, and neither adds anything a call site reaches for.\n    defaultTagName: block ? 'p' : 'span',\n    props: {\n      ...props,\n      ...mergeStyles(stylex.props(styles.base, styles[variant], tones[tone]), props)\n    },\n    render\n  });\n}\nexport type { TextProps };\nexport default Text;"],"mappings":"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"}

package/dist/components/text-area/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","TextFieldProps","RACTextFieldProps","stylex","TextField","RACTextField","FieldVariant","FieldBox","FieldMessage","FieldTextArea","fieldStyles","invalidFrom","useFieldValidationBehavior","mergeStatefulStyles","TextAreaProps","autosize","characterCount","characterLimitLabel","description","error","floatingLabel","label","leadingIcon","rows","trailingIcon","variant","Omit","TextArea","t0","$","_c","t1","t2","t3","isDisabled","t4","t5","t6","props","undefined","validationBehavior","T0","t7","t8","root","t9","t10","t11","maxLength","t12"],"sources":["../../../src/components/text-area/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TextFieldProps as RACTextFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { TextField as RACTextField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldTextArea } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The text fields page's multi-line configuration of the filled field: the\n// same box, floating label, icons, underline and message as TextField,\n// holding a text area rather than an input. The page gives the box 56dp by\n// default and 8dp of padding above and below, with the label vertically\n// centred while the field is empty; a box holding more than one line keeps\n// the padding and grows, which is the chrome's `multiline` box, and its\n// icons stay centred in its height as it does. The page draws no resize\n// handle, and none is drawn here.\n//\n// Its own component rather than a prop of TextField, so `rows` and\n// `autosize` stay off TextField's type and `numeric` stays off this one.\n\ntype TextAreaProps = {\n  /**\n   * Whether the field grows with the text it holds, from `rows` up. `false`\n   * keeps it at `rows` and scrolls the text inside.\n   * @default true\n   */\n  autosize?: boolean;\n  /**\n   * Whether to count the characters the field holds at the end of the\n   * supporting line, against `maxLength` where there is one, as the text\n   * fields page's character counter does.\n   * @default false\n   */\n  characterCount?: boolean;\n  /**\n   * How the limit is said to a screen reader, where there is a `maxLength`.\n   * Read with the field on focus rather than as the value changes, so it\n   * names the limit and not what is left of it. The visible count is hidden\n   * from the tree, which is what this replaces.\n   * @default `Up to ${maxLength} characters`, singular for a limit of one\n   */\n  characterLimitLabel?: string;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value, as the text fields page draws it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a text area with\n   * no label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * An icon at the start of the box, before the label and the text: the\n   * page's 24dp leading icon, in the muted role. An icon drawn in `em` takes\n   * that size from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * How many lines of text the field shows: the least it shows while it\n   * grows, or all it shows when it does not.\n   * @default 3\n   */\n  rows?: number;\n  /**\n   * An icon at the end of the box, after the text: the page's 24dp trailing\n   * icon, in the muted role and the error role while the field has an error.\n   * An icon drawn in `em` takes that size from the slot.\n   */\n  trailingIcon?: ReactNode;\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats — the text fields page's two fields.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACTextFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n/**\n * A labelled multi-line input. Its value is React Aria's: pass `value` with\n * `onChange` to control it, or `defaultValue` to let it keep its own — and\n * `onChange` is handed the string, not the event. The call site's\n * `className` and `style` land on the field as a whole, which is the element\n * a layout positions.\n *\n * The text fields page's configurations are props: `leadingIcon` and\n * `trailingIcon` at the box's ends, and `characterCount` opposite the\n * supporting text, counting against `maxLength`.\n *\n * The box, label, control and message are the field chrome in `src/field`,\n * shared with every other field; this component is what React Aria's\n * `TextField` puts around them.\n */\nfunction TextArea({\n  autosize = true,\n  characterCount = false,\n  characterLimitLabel,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  rows = 3,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: TextAreaProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACTextField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel} label={label} leading={leadingIcon} multiline trailing={trailingIcon} variant={variant}>\n        <FieldTextArea autosize={autosize} rows={rows} />\n      </FieldBox>\n      <FieldMessage characterCount={characterCount} characterLimitLabel={characterLimitLabel} description={description} error={error} maxLength={props.maxLength} />\n    </RACTextField>;\n}\nexport type { TextAreaProps };\nexport default TextArea;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","TextFieldProps","RACTextFieldProps","stylex","TextField","RACTextField","FieldVariant","FieldBox","FieldMessage","FieldTextArea","fieldStyles","invalidFrom","useFieldValidationBehavior","mergeStatefulStyles","TextAreaProps","autosize","characterCount","characterLimitLabel","description","error","floatingLabel","label","leadingIcon","rows","trailingIcon","variant","Omit","TextArea","t0","$","_c","t1","t2","t3","isDisabled","t4","t5","t6","props","undefined","validationBehavior","T0","t7","t8","root","t9","t10","t11","maxLength","t12","TextArea","_c","props","RACTextField","stylex.props"],"sources":["../../../src/components/text-area/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TextFieldProps as RACTextFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { TextField as RACTextField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldTextArea } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The text fields page's multi-line configuration of the filled field: the\n// same box, floating label, icons, underline and message as TextField,\n// holding a text area rather than an input. The page gives the box 56dp by\n// default and 8dp of padding above and below, with the label vertically\n// centred while the field is empty; a box holding more than one line keeps\n// the padding and grows, which is the chrome's `multiline` box, and its\n// icons stay centred in its height as it does. The page draws no resize\n// handle, and none is drawn here.\n//\n// Its own component rather than a prop of TextField, so `rows` and\n// `autosize` stay off TextField's type and `numeric` stays off this one.\n\ntype TextAreaProps = {\n  /**\n   * Whether the field grows with the text it holds, from `rows` up. `false`\n   * keeps it at `rows` and scrolls the text inside.\n   * @default true\n   */\n  autosize?: boolean;\n  /**\n   * Whether to count the characters the field holds at the end of the\n   * supporting line, against `maxLength` where there is one, as the text\n   * fields page's character counter does.\n   * @default false\n   */\n  characterCount?: boolean;\n  /**\n   * How the limit is said to a screen reader, where there is a `maxLength`.\n   * Read with the field on focus rather than as the value changes, so it\n   * names the limit and not what is left of it. The visible count is hidden\n   * from the tree, which is what this replaces.\n   * @default `Up to ${maxLength} characters`, singular for a limit of one\n   */\n  characterLimitLabel?: string;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value, as the text fields page draws it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a text area with\n   * no label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * An icon at the start of the box, before the label and the text: the\n   * page's 24dp leading icon, in the muted role. An icon drawn in `em` takes\n   * that size from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * How many lines of text the field shows: the least it shows while it\n   * grows, or all it shows when it does not.\n   * @default 3\n   */\n  rows?: number;\n  /**\n   * An icon at the end of the box, after the text: the page's 24dp trailing\n   * icon, in the muted role and the error role while the field has an error.\n   * An icon drawn in `em` takes that size from the slot.\n   */\n  trailingIcon?: ReactNode;\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats — the text fields page's two fields.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACTextFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n/**\n * A labelled multi-line input. Its value is React Aria's: pass `value` with\n * `onChange` to control it, or `defaultValue` to let it keep its own — and\n * `onChange` is handed the string, not the event. The call site's\n * `className` and `style` land on the field as a whole, which is the element\n * a layout positions.\n *\n * The text fields page's configurations are props: `leadingIcon` and\n * `trailingIcon` at the box's ends, and `characterCount` opposite the\n * supporting text, counting against `maxLength`.\n *\n * The box, label, control and message are the field chrome in `src/field`,\n * shared with every other field; this component is what React Aria's\n * `TextField` puts around them.\n */\nfunction TextArea({\n  autosize = true,\n  characterCount = false,\n  characterLimitLabel,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  rows = 3,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: TextAreaProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACTextField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel} label={label} leading={leadingIcon} multiline trailing={trailingIcon} variant={variant}>\n        <FieldTextArea autosize={autosize} rows={rows} />\n      </FieldBox>\n      <FieldMessage characterCount={characterCount} characterLimitLabel={characterLimitLabel} description={description} error={error} maxLength={props.maxLength} />\n    </RACTextField>;\n}\nexport type { TextAreaProps };\nexport default TextArea;"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","TextFieldProps","RACTextFieldProps","stylex","TextField","RACTextField","FieldVariant","FieldBox","FieldInput","FieldMessage","fieldStyles","invalidFrom","useFieldValidationBehavior","mergeStatefulStyles","characterCount","characterLimitLabel","description","error","floatingLabel","label","leadingIcon","numeric","prefix","suffix","trailingIcon","variant","Omit","t0","$","_c","t1","t2","isDisabled","t3","t4","t5","props","undefined","validationBehavior","T0","t6","t7","root","t8","t9","t10","maxLength","t11"],"sources":["../../../src/components/text-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TextFieldProps as RACTextFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { TextField as RACTextField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { mergeStatefulStyles } from '../../styles/merge';\ntype TextFieldProps = {\n  /**\n   * Whether to count the characters the field holds at the end of the\n   * supporting line, against `maxLength` where there is one, as the text\n   * fields page's character counter does.\n   * @default false\n   */\n  characterCount?: boolean;\n  /**\n   * How the limit is said to a screen reader, where there is a `maxLength`.\n   * Read with the field on focus rather than as the value changes, so it\n   * names the limit and not what is left of it. The visible count is hidden\n   * from the tree, which is what this replaces.\n   * @default `Up to ${maxLength} characters`, singular for a limit of one\n   */\n  characterLimitLabel?: string;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value, as the text fields page draws it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a text field with\n   * no label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * An icon at the start of the box, before the label and the value: the\n   * page's 24dp leading icon, in the muted role. An icon drawn in `em`\n   * takes that size from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * Renders the value in the mono face with tabular figures, for amounts and\n   * other numbers meant to be compared down a column.\n   * @default false\n   */\n  numeric?: boolean;\n  /**\n   * Text before the value on its line, in the muted role, shown while the\n   * field is focused or holds a value.\n   */\n  prefix?: ReactNode;\n  /**\n   * Text after the value on its line, in the muted role, shown while the\n   * field is focused or holds a value.\n   */\n  suffix?: ReactNode;\n  /**\n   * An icon at the end of the box, after the value: the page's 24dp trailing\n   * icon, in the muted role and the error role while the field has an error.\n   * An icon drawn in `em` takes that size from the slot.\n   */\n  trailingIcon?: ReactNode;\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats — the text fields page's two fields.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACTextFieldProps, 'children' | 'isInvalid' | 'prefix' | 'validationBehavior'>;\n\n/**\n * A labelled single-line input. Its value is React Aria's: pass `value` with\n * `onChange` to control it, or `defaultValue` to let it keep its own — and\n * `onChange` is handed the string, not the event. The call site's\n * `className` and `style` land on the field as a whole, which is the element\n * a layout positions.\n *\n * The text fields page's configurations are props: `leadingIcon` and\n * `trailingIcon` at the box's ends, `prefix` and `suffix` on the value's\n * line, and `characterCount` opposite the supporting text, counting against\n * `maxLength`.\n *\n * The box, label, input and message are the field chrome in `src/field`,\n * shared with every other field; this component is what React Aria's\n * `TextField` puts around them.\n */\nfunction TextField({\n  characterCount = false,\n  characterLimitLabel,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  numeric = false,\n  prefix,\n  suffix,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: TextFieldProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACTextField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel} label={label} leading={leadingIcon} trailing={trailingIcon} variant={variant}>\n        <FieldInput numeric={numeric} prefix={prefix} suffix={suffix} />\n      </FieldBox>\n      <FieldMessage characterCount={characterCount} characterLimitLabel={characterLimitLabel} description={description} error={error} maxLength={props.maxLength} />\n    </RACTextField>;\n}\nexport type { TextFieldProps };\nexport default TextField;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","TextFieldProps","RACTextFieldProps","stylex","TextField","RACTextField","FieldVariant","FieldBox","FieldInput","FieldMessage","fieldStyles","invalidFrom","useFieldValidationBehavior","mergeStatefulStyles","characterCount","characterLimitLabel","description","error","floatingLabel","label","leadingIcon","numeric","prefix","suffix","trailingIcon","variant","Omit","t0","$","_c","t1","t2","isDisabled","t3","t4","t5","props","undefined","validationBehavior","T0","t6","t7","root","t8","t9","t10","maxLength","t11","TextField","_c","props","RACTextField","stylex.props"],"sources":["../../../src/components/text-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TextFieldProps as RACTextFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { TextField as RACTextField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { mergeStatefulStyles } from '../../styles/merge';\ntype TextFieldProps = {\n  /**\n   * Whether to count the characters the field holds at the end of the\n   * supporting line, against `maxLength` where there is one, as the text\n   * fields page's character counter does.\n   * @default false\n   */\n  characterCount?: boolean;\n  /**\n   * How the limit is said to a screen reader, where there is a `maxLength`.\n   * Read with the field on focus rather than as the value changes, so it\n   * names the limit and not what is left of it. The visible count is hidden\n   * from the tree, which is what this replaces.\n   * @default `Up to ${maxLength} characters`, singular for a limit of one\n   */\n  characterLimitLabel?: string;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value, as the text fields page draws it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a text field with\n   * no label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * An icon at the start of the box, before the label and the value: the\n   * page's 24dp leading icon, in the muted role. An icon drawn in `em`\n   * takes that size from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * Renders the value in the mono face with tabular figures, for amounts and\n   * other numbers meant to be compared down a column.\n   * @default false\n   */\n  numeric?: boolean;\n  /**\n   * Text before the value on its line, in the muted role, shown while the\n   * field is focused or holds a value.\n   */\n  prefix?: ReactNode;\n  /**\n   * Text after the value on its line, in the muted role, shown while the\n   * field is focused or holds a value.\n   */\n  suffix?: ReactNode;\n  /**\n   * An icon at the end of the box, after the value: the page's 24dp trailing\n   * icon, in the muted role and the error role while the field has an error.\n   * An icon drawn in `em` takes that size from the slot.\n   */\n  trailingIcon?: ReactNode;\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats — the text fields page's two fields.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACTextFieldProps, 'children' | 'isInvalid' | 'prefix' | 'validationBehavior'>;\n\n/**\n * A labelled single-line input. Its value is React Aria's: pass `value` with\n * `onChange` to control it, or `defaultValue` to let it keep its own — and\n * `onChange` is handed the string, not the event. The call site's\n * `className` and `style` land on the field as a whole, which is the element\n * a layout positions.\n *\n * The text fields page's configurations are props: `leadingIcon` and\n * `trailingIcon` at the box's ends, `prefix` and `suffix` on the value's\n * line, and `characterCount` opposite the supporting text, counting against\n * `maxLength`.\n *\n * The box, label, input and message are the field chrome in `src/field`,\n * shared with every other field; this component is what React Aria's\n * `TextField` puts around them.\n */\nfunction TextField({\n  characterCount = false,\n  characterLimitLabel,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  numeric = false,\n  prefix,\n  suffix,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: TextFieldProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACTextField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel} label={label} leading={leadingIcon} trailing={trailingIcon} variant={variant}>\n        <FieldInput numeric={numeric} prefix={prefix} suffix={suffix} />\n      </FieldBox>\n      <FieldMessage characterCount={characterCount} characterLimitLabel={characterLimitLabel} description={description} error={error} maxLength={props.maxLength} />\n    </RACTextField>;\n}\nexport type { TextFieldProps };\nexport default TextField;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAwGA,SAAAI,YAAAuB,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAmB,MAAA,EAAAf,gBAAAgB,IAAAf,qBAAAC,aAAAC,OAAAC,eAAAa,IAAAC,YAAAC,IAAAd,OAAAC,aAAAC,SAAAa,IAAAZ,QAAAC,QAAAC,cAAAC,SAAAU,IAAA,GAAAC,YAAAT;CACjB,MAAAb,iBAAAgB,OAAAO,KAAAA,IAAA,QAAAP;CAIA,MAAAZ,gBAAAa,OAAAM,KAAAA,IAAA,OAAAN;CACA,MAAAC,aAAAC,OAAAI,KAAAA,IAAA,QAAAJ;CAGA,MAAAZ,UAAAa,OAAAG,KAAAA,IAAA,QAAAH;CAIA,MAAAT,UAAAU,OAAAE,KAAAA,IAAA,WAAAF;CAGA,MAAAG,qBAA2B1B,2BAA2B;CAC9C,MAAA2B,KAAAlC;CAAY,IAAAmC;CAAA,IAAAZ,EAAA,OAAAX,OAAA;EAAoCuB,KAAA7B,YAAYM,KAAK;EAACW,EAAA,KAAAX;EAAAW,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAyD,MAAAa,KAAA5B,oBAAoBV,MAAaO,YAAWgC,IAAK,GAAGN,OAAK;CAAC,IAAAO;CAAA,IAAAf,EAAA,OAAAP,WAAAO,EAAA,OAAAN,UAAAM,EAAA,OAAAL,QAAA;EAEvLoB,KAAA,oBAAC,YAAD;GAAqBtB;GAAiBC;GAAgBC;EAAM,CAAA;EAAIK,EAAA,KAAAP;EAAAO,EAAA,KAAAN;EAAAM,EAAA,KAAAL;EAAAK,EAAA,KAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,IAAAgB;CAAA,IAAAhB,EAAA,OAAAV,iBAAAU,EAAA,OAAAT,SAAAS,EAAA,OAAAR,eAAAQ,EAAA,OAAAe,MAAAf,EAAA,QAAAJ,gBAAAI,EAAA,QAAAH,SAAA;EADlEmB,KAAA,oBAAC,UAAD;GAAyB1B;GAAsBC;GAAgBC,SAAAA;GAAuBI,UAAAA;GAAuBC;GAC3GkB,UAAAA;EADO,CAAA;EAEEf,EAAA,KAAAV;EAAAU,EAAA,KAAAT;EAAAS,EAAA,KAAAR;EAAAQ,EAAA,KAAAe;EAAAf,EAAA,MAAAJ;EAAAI,EAAA,MAAAH;EAAAG,EAAA,MAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAAA,IAAAiB;CAAA,IAAAjB,EAAA,QAAAd,kBAAAc,EAAA,QAAAb,uBAAAa,EAAA,QAAAZ,eAAAY,EAAA,QAAAX,SAAAW,EAAA,QAAAQ,QAAAU,WAAA;EACXD,MAAA,oBAAC,cAAD;GAA8B/B;GAAqCC;GAAkCC;GAAoBC;GAAkB,WAAAmB,QAAKU;EAAU,CAAA;EAAIlB,EAAA,MAAAd;EAAAc,EAAA,MAAAb;EAAAa,EAAA,MAAAZ;EAAAY,EAAA,MAAAX;EAAAW,EAAA,MAAAQ,QAAAU;EAAAlB,EAAA,MAAAiB;CAAA,OAAAA,MAAAjB,EAAA;CAAA,IAAAmB;CAAA,IAAAnB,EAAA,QAAAW,MAAAX,EAAA,QAAAI,cAAAJ,EAAA,QAAAQ,WAAAR,EAAA,QAAAiB,OAAAjB,EAAA,QAAAY,MAAAZ,EAAA,QAAAa,MAAAb,EAAA,QAAAgB,MAAAhB,EAAA,QAAAU,oBAAA;EAJ3JS,MAAA,qBAAC,IAAD;GAA0Bf;GAAuB,WAAAQ;GAAwCF;GAAkB,GAAMF;GAAK,GAAMK;GAA5H,UAAA,CACHG,IAGAC,GAJgB;;EAKHjB,EAAA,MAAAW;EAAAX,EAAA,MAAAI;EAAAJ,EAAA,MAAAQ;EAAAR,EAAA,MAAAiB;EAAAjB,EAAA,MAAAY;EAAAZ,EAAA,MAAAa;EAAAb,EAAA,MAAAgB;EAAAhB,EAAA,MAAAU;EAAAV,EAAA,MAAAmB;CAAA,OAAAA,MAAAnB,EAAA;CAAA,OALVmB;AAKU"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","TimeFieldProps","RACTimeFieldProps","TimeValue","stylex","DateInput","RACDateInput","TimeField","RACTimeField","FieldVariant","FieldBox","FieldMessage","FieldSegments","fieldStyles","invalidFrom","useFieldValidationBehavior","renderSegment","segmentStyles","mergeStatefulStyles","Omit","T","className","description","error","floatingLabel","label","leadingIcon","style","trailingIcon","variant","t0","$","_c","t1","isDisabled","t2","t3","props","undefined","validationBehavior","T0","t4","t5","root","t6","Symbol","for","input","t7","t8","t9"],"sources":["../../../src/components/time-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TimeFieldProps as RACTimeFieldProps, TimeValue } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { DateInput as RACDateInput, TimeField as RACTimeField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldSegments } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { renderSegment } from '../../segments';\nimport { segmentStyles } from '../../segments/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// A time typed a segment at a time. Every part of it is DateField's, from\n// `src/segments` — the segment treatment, the muted placeholder, the filled\n// focus and the punctuation between — so a time on a form and a date on the\n// same form cannot come apart.\n//\n// What differs is the value it holds and nothing else. The time pickers page\n// gives its input the text field's own box, which is what the shared field\n// chrome already draws, so there is no measurement here that the date field's\n// comment does not already name.\n//\n// **Twelve or twenty-four hours is the reader's locale, not a prop.** React\n// Aria decides from the locale whether there is a day-period segment at all,\n// so a field under `I18nProvider` with `en-GB` shows a 24-hour clock and the\n// same field under `en-US` shows AM and PM. Nothing here overrides it, and\n// `hourCycle` is React Aria's own for a page that has to.\n\ntype TimeFieldProps<T extends TimeValue = TimeValue> = Omit<RACTimeFieldProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the field's render state. */\n  className?: RACTimeFieldProps<T>['className'];\n  /** Supporting text under the field. */\n  description?: string;\n  /**\n   * The message shown instead of the description, which also marks the\n   * field invalid.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * Whether the label floats into the box's top once the field holds a\n   * value, rather than sitting above it.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /** What the field is for. Always rendered; never a placeholder. */\n  label: string;\n  /**\n   * An icon at the box's leading end, in the page's 24dp size. An icon drawn\n   * in `em` takes that size from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /** A function may compute the style from the field's render state. */\n  style?: RACTimeFieldProps<T>['style'];\n  /**\n   * An icon at the box's trailing end, in the page's 24dp size. An icon\n   * drawn in `em` takes that size from the slot.\n   */\n  trailingIcon?: ReactNode;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n};\n\n/**\n * A time typed rather than picked: one segment per part, each its own focus\n * stop. The value is React Aria's — pass `value` with `onChange` to control\n * it, or `defaultValue` — as a `Time` from this package's `./date` subpath.\n *\n * ```tsx\n * import { Time } from '@kanso-labs/kanso-ui/date'\n *\n * <TimeField defaultValue={new Time(9, 30)} label=\"Label\" />\n * ```\n *\n * Whether it shows a twelve or twenty-four hour clock is the reader's\n * locale, through React Aria's `I18nProvider`. `granularity` takes it down\n * to seconds, and `minValue` and `maxValue` bound what may be typed.\n *\n * The segments are `DateField`'s, and the box, label and message are the\n * field chrome in `src/field`. The call site's `className` and `style` land\n * on the field as a whole, which is the element a layout positions.\n */\nfunction TimeField<T extends TimeValue>({\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: TimeFieldProps<T>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACTimeField<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // Always populated, for the reason DateField's own comment gives: the\n    // box reads an `<input>` to decide, and a segmented field has none —\n    // its segments hold the value's line from the first render.\n    isPopulated label={label} leading={leadingIcon} trailing={trailingIcon} variant={variant}>\n        <FieldSegments>\n          <RACDateInput {...stylex.props(segmentStyles.input)}>\n            {renderSegment}\n          </RACDateInput>\n        </FieldSegments>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACTimeField>;\n}\nexport type { TimeFieldProps };\nexport default TimeField;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuFA,SAAAO,YAAAuB,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAwC,MAAA,EAAAV,aAAAC,OAAAC,eAAAS,IAAAC,YAAAC,IAAAV,OAAAC,aAAAE,cAAAC,SAAAO,IAAA,GAAAC,YAAAP;CAGtC,MAAAN,gBAAAS,OAAAK,KAAAA,IAAA,OAAAL;CACA,MAAAC,aAAAC,OAAAG,KAAAA,IAAA,QAAAH;CAIA,MAAAN,UAAAO,OAAAE,KAAAA,IAAA,WAAAF;CAGA,MAAAG,qBAA2BxB,2BAA2B;CAC9C,MAAAyB,KAAAhC;CAAY,IAAAiC;CAAA,IAAAV,EAAA,OAAAR,OAAA;EAAuCkB,KAAA3B,YAAYS,KAAK;EAACQ,EAAA,KAAAR;EAAAQ,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAyD,MAAAW,KAAAxB,oBAAoBd,MAAaS,YAAW8B,IAAK,GAAGN,OAAK;CAAC,IAAAO;CAAA,IAAAb,EAAA,OAAAc,OAAAC,IAAA,2BAAA,GAAA;EAM1LF,KAAA,oBAAC,eAAD,EAAA,UACE,oBAAC,WAAD;GAAa,GAAKxC,MAAaa,cAAa8B,KAAM;GAC/C/B,UAAAA;EADU,CAAA,EADD,CAAA;EAIEe,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAiB;CAAA,IAAAjB,EAAA,OAAAP,iBAAAO,EAAA,OAAAN,SAAAM,EAAA,OAAAL,eAAAK,EAAA,OAAAH,gBAAAG,EAAA,OAAAF,SAAA;EATlBmB,KAAA,oBAAC,UAAD;GAAyBxB;GAI3B,aAAA;GAAmBC;GAAgBC,SAAAA;GAAuBE,UAAAA;GAAuBC;GAC7Ee,UAAAA;EALO,CAAA;EAUEb,EAAA,KAAAP;EAAAO,EAAA,KAAAN;EAAAM,EAAA,KAAAL;EAAAK,EAAA,KAAAH;EAAAG,EAAA,KAAAF;EAAAE,EAAA,KAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAAA,IAAAkB;CAAA,IAAAlB,EAAA,OAAAT,eAAAS,EAAA,QAAAR,OAAA;EACX0B,KAAA,oBAAC,cAAD;GAA2B3B;GAAoBC;EAAK,CAAA;EAAIQ,EAAA,KAAAT;EAAAS,EAAA,MAAAR;EAAAQ,EAAA,MAAAkB;CAAA,OAAAA,KAAAlB,EAAA;CAAA,IAAAmB;CAAA,IAAAnB,EAAA,QAAAS,MAAAT,EAAA,QAAAG,cAAAH,EAAA,QAAAM,WAAAN,EAAA,QAAAU,MAAAV,EAAA,QAAAW,MAAAX,EAAA,QAAAiB,MAAAjB,EAAA,QAAAkB,MAAAlB,EAAA,QAAAQ,oBAAA;EAZrDW,KAAA,qBAAC,IAAD;GAA6BhB;GAAuB,WAAAO;GAAwCF;GAAkB,GAAMF;GAAK,GAAMK;GAA/H,UAAA,CACHM,IAWAC,EAZgB;;EAaHlB,EAAA,MAAAS;EAAAT,EAAA,MAAAG;EAAAH,EAAA,MAAAM;EAAAN,EAAA,MAAAU;EAAAV,EAAA,MAAAW;EAAAX,EAAA,MAAAiB;EAAAjB,EAAA,MAAAkB;EAAAlB,EAAA,MAAAQ;EAAAR,EAAA,MAAAmB;CAAA,OAAAA,KAAAnB,EAAA;CAAA,OAbVmB;AAaU"}
+{"version":3,"file":"index.js","names":["ReactNode","TimeFieldProps","RACTimeFieldProps","TimeValue","stylex","DateInput","RACDateInput","TimeField","RACTimeField","FieldVariant","FieldBox","FieldMessage","FieldSegments","fieldStyles","invalidFrom","useFieldValidationBehavior","renderSegment","segmentStyles","mergeStatefulStyles","Omit","T","className","description","error","floatingLabel","label","leadingIcon","style","trailingIcon","variant","t0","$","_c","t1","isDisabled","t2","t3","props","undefined","validationBehavior","T0","t4","t5","root","t6","Symbol","for","input","t7","t8","t9","TimeField","_c","props","RACTimeField","stylex.props","RACDateInput"],"sources":["../../../src/components/time-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TimeFieldProps as RACTimeFieldProps, TimeValue } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { DateInput as RACDateInput, TimeField as RACTimeField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldSegments } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { renderSegment } from '../../segments';\nimport { segmentStyles } from '../../segments/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// A time typed a segment at a time. Every part of it is DateField's, from\n// `src/segments` — the segment treatment, the muted placeholder, the filled\n// focus and the punctuation between — so a time on a form and a date on the\n// same form cannot come apart.\n//\n// What differs is the value it holds and nothing else. The time pickers page\n// gives its input the text field's own box, which is what the shared field\n// chrome already draws, so there is no measurement here that the date field's\n// comment does not already name.\n//\n// **Twelve or twenty-four hours is the reader's locale, not a prop.** React\n// Aria decides from the locale whether there is a day-period segment at all,\n// so a field under `I18nProvider` with `en-GB` shows a 24-hour clock and the\n// same field under `en-US` shows AM and PM. Nothing here overrides it, and\n// `hourCycle` is React Aria's own for a page that has to.\n\ntype TimeFieldProps<T extends TimeValue = TimeValue> = Omit<RACTimeFieldProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the field's render state. */\n  className?: RACTimeFieldProps<T>['className'];\n  /** Supporting text under the field. */\n  description?: string;\n  /**\n   * The message shown instead of the description, which also marks the\n   * field invalid.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * Whether the label floats into the box's top once the field holds a\n   * value, rather than sitting above it.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /** What the field is for. Always rendered; never a placeholder. */\n  label: string;\n  /**\n   * An icon at the box's leading end, in the page's 24dp size. An icon drawn\n   * in `em` takes that size from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /** A function may compute the style from the field's render state. */\n  style?: RACTimeFieldProps<T>['style'];\n  /**\n   * An icon at the box's trailing end, in the page's 24dp size. An icon\n   * drawn in `em` takes that size from the slot.\n   */\n  trailingIcon?: ReactNode;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n};\n\n/**\n * A time typed rather than picked: one segment per part, each its own focus\n * stop. The value is React Aria's — pass `value` with `onChange` to control\n * it, or `defaultValue` — as a `Time` from this package's `./date` subpath.\n *\n * ```tsx\n * import { Time } from '@kanso-labs/kanso-ui/date'\n *\n * <TimeField defaultValue={new Time(9, 30)} label=\"Label\" />\n * ```\n *\n * Whether it shows a twelve or twenty-four hour clock is the reader's\n * locale, through React Aria's `I18nProvider`. `granularity` takes it down\n * to seconds, and `minValue` and `maxValue` bound what may be typed.\n *\n * The segments are `DateField`'s, and the box, label and message are the\n * field chrome in `src/field`. The call site's `className` and `style` land\n * on the field as a whole, which is the element a layout positions.\n */\nfunction TimeField<T extends TimeValue>({\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: TimeFieldProps<T>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACTimeField<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // Always populated, for the reason DateField's own comment gives: the\n    // box reads an `<input>` to decide, and a segmented field has none —\n    // its segments hold the value's line from the first render.\n    isPopulated label={label} leading={leadingIcon} trailing={trailingIcon} variant={variant}>\n        <FieldSegments>\n          <RACDateInput {...stylex.props(segmentStyles.input)}>\n            {renderSegment}\n          </RACDateInput>\n        </FieldSegments>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACTimeField>;\n}\nexport type { TimeFieldProps };\nexport default TimeField;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuFA,SAAAO,YAAAuB,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAwC,MAAA,EAAAV,aAAAC,OAAAC,eAAAS,IAAAC,YAAAC,IAAAV,OAAAC,aAAAE,cAAAC,SAAAO,IAAA,GAAAC,YAAAP;CAGtC,MAAAN,gBAAAS,OAAAK,KAAAA,IAAA,OAAAL;CACA,MAAAC,aAAAC,OAAAG,KAAAA,IAAA,QAAAH;CAIA,MAAAN,UAAAO,OAAAE,KAAAA,IAAA,WAAAF;CAGA,MAAAG,qBAA2BxB,2BAA2B;CAC9C,MAAAyB,KAAAhC;CAAY,IAAAiC;CAAA,IAAAV,EAAA,OAAAR,OAAA;EAAuCkB,KAAA3B,YAAYS,KAAK;EAACQ,EAAA,KAAAR;EAAAQ,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAyD,MAAAW,KAAAxB,oBAAoBd,MAAaS,YAAW8B,IAAK,GAAGN,OAAK;CAAC,IAAAO;CAAA,IAAAb,EAAA,OAAAc,OAAAC,IAAA,2BAAA,GAAA;EAM1LF,KAAA,oBAAC,eAAD,EAAA,UACE,oBAACY,WAAD;GAAa,GAAKpD,MAAaa,cAAa8B,KAAM;GAC/C/B,UAAAA;EADU,CAAA,EADD,CAAA;EAIEe,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAiB;CAAA,IAAAjB,EAAA,OAAAP,iBAAAO,EAAA,OAAAN,SAAAM,EAAA,OAAAL,eAAAK,EAAA,OAAAH,gBAAAG,EAAA,OAAAF,SAAA;EATlBmB,KAAA,oBAAC,UAAD;GAAyBxB;GAI3B,aAAA;GAAmBC;GAAgBC,SAAAA;GAAuBE,UAAAA;GAAuBC;GAC7Ee,UAAAA;EALO,CAAA;EAUEb,EAAA,KAAAP;EAAAO,EAAA,KAAAN;EAAAM,EAAA,KAAAL;EAAAK,EAAA,KAAAH;EAAAG,EAAA,KAAAF;EAAAE,EAAA,KAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAAA,IAAAkB;CAAA,IAAAlB,EAAA,OAAAT,eAAAS,EAAA,QAAAR,OAAA;EACX0B,KAAA,oBAAC,cAAD;GAA2B3B;GAAoBC;EAAK,CAAA;EAAIQ,EAAA,KAAAT;EAAAS,EAAA,MAAAR;EAAAQ,EAAA,MAAAkB;CAAA,OAAAA,KAAAlB,EAAA;CAAA,IAAAmB;CAAA,IAAAnB,EAAA,QAAAS,MAAAT,EAAA,QAAAG,cAAAH,EAAA,QAAAM,WAAAN,EAAA,QAAAU,MAAAV,EAAA,QAAAW,MAAAX,EAAA,QAAAiB,MAAAjB,EAAA,QAAAkB,MAAAlB,EAAA,QAAAQ,oBAAA;EAZrDW,KAAA,qBAAC,IAAD;GAA6BhB;GAAuB,WAAAO;GAAwCF;GAAkB,GAAMF;GAAK,GAAMK;GAA/H,UAAA,CACHM,IAWAC,EAZgB;;EAaHlB,EAAA,MAAAS;EAAAT,EAAA,MAAAG;EAAAH,EAAA,MAAAM;EAAAN,EAAA,MAAAU;EAAAV,EAAA,MAAAW;EAAAX,EAAA,MAAAiB;EAAAjB,EAAA,MAAAkB;EAAAlB,EAAA,MAAAQ;EAAAR,EAAA,MAAAmB;CAAA,OAAAA,KAAAnB,EAAA;CAAA,OAbVmB;AAaU"}

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","TreeItemProps","RACTreeItemProps","TreeLoadMoreItemProps","RACTreeLoadMoreItemProps","TreeProps","RACTreeProps","TreeItemRenderProps","stylex","createContext","useContext","Button","RACButton","Tree","RACTree","TreeHeader","RACTreeHeader","TreeItem","RACTreeItem","TreeItemContent","RACTreeItemContent","TreeLoadMoreItem","RACTreeLoadMoreItem","TreeSection","RACTreeSection","CollectionLoadMore","collectionStyles","rowItemStyles","ChevronEndGlyph","useRipple","RowContent","focus","mergeStatefulStyles","mergeStyles","colors","motion","radii","spacing","Checkbox","RACTreeSectionProps","Parameters","T","SelectLabelContext","styles","chevron","kGNEyG","kWkggS","kaIpWk","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kmuXW","kjj79g","kmVPX3","$$css","indent","kZCmMZ","TreeHeaderProps","children","Omit","TreeItemText","className","leading","style","supporting","trailing","headline","textValue","TreeLoadMoreProps","label","selectLabel","TreeSectionProps","header","chevronClassName","props","ring","chevronFor","state","hasChildItems","isExpanded","itemContent","ripple","isDisabled","isSelected","leadingFor","selects","selectionBehavior","selectionMode","textValueFor","undefined","t0","$","_c","T0","T1","t1","t2","t3","t4","container","t5","Symbol","for","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","handlers","surface","t6","t7","TreeLoadMore","loading","section","Item","LoadMore","Section"],"sources":["../../../src/components/tree/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TreeItemProps as RACTreeItemProps, TreeLoadMoreItemProps as RACTreeLoadMoreItemProps, TreeProps as RACTreeProps, TreeItemRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { Button as RACButton, Tree as RACTree, TreeHeader as RACTreeHeader, TreeItem as RACTreeItem, TreeItemContent as RACTreeItemContent, TreeLoadMoreItem as RACTreeLoadMoreItem, TreeSection as RACTreeSection } from 'react-aria-components';\nimport { CollectionLoadMore } from '../../collection';\nimport { collectionStyles, rowItemStyles } from '../../collection/styles';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing } from '../../tokens/design.tokens.stylex';\nimport Checkbox from '../checkbox';\n\n// A list whose rows nest. Each row is the row every list here draws —\n// `src/row`, shared with ListItem, ListBox, List and Disclosure — so its\n// 56dp floor, body-large headline, body-medium supporting line, state layers\n// and disabled treatment are that module's, and a tree beside a list cannot\n// drift from it.\n//\n// The lists page gives no nesting: it draws one flat list. So the two things\n// a tree adds beyond that row are the library's own, and both are written\n// here with their reasons. The rest — the row, the selection colours, the\n// checkbox — is the page's, through the shared module.\n//\n// Four things are this component's own.\n//\n// **A level indents by one chevron's width.** React Aria puts the depth on\n// each row as a custom property, so the inset is one `calc` against the\n// row's own inline padding rather than a style per level. 24dp is the size\n// the menus page gives that glyph, which makes a level of nesting exactly as\n// wide as the caret that opens it.\n//\n// **The caret is a button, and React Aria names it.** A `slot=\"chevron\"`\n// button is what expands and collapses; React Aria labels it Expand or\n// Collapse and composes that with the row, so nothing here names it. It is\n// drawn only on a row that has children, since a caret on a leaf says the\n// row opens when it does not.\n//\n// **A selecting tree draws a checkbox, before whatever the row was given.**\n// Same rule as List: React Aria reports the mode on each row, so a tree that\n// toggles draws one without the call site repeating it, and it always sits\n// in the same place so a column of rows reads down.\n//\n// **`TreeItemContent` has no class to style.** React Aria renders it as a\n// `display: contents` gridcell with nothing on it, so the row's own layout\n// is drawn by what goes inside rather than by that wrapper.\n\n// `TreeSection`'s props are not re-exported from the package index, only its\n// component is — so the type is taken off the component rather than imported\n// by a name that is not there to import.\ntype RACTreeSectionProps<T> = Parameters<typeof RACTreeSection<T>>[0];\n\n// What each row's selection checkbox is called. A context rather than a prop\n// on the row, since it is the tree's decision and repeating it per row is\n// how the two drift.\nconst SelectLabelContext = createContext('Select');\nconst styles = {\n  chevron: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  indent: {\n    kZCmMZ: \"x1187sqy\",\n    $$css: true\n  }\n};\ntype TreeHeaderProps = {\n  /** The section's heading. */\n  children?: ReactNode;\n};\ntype TreeItemProps<T extends object = object> = Omit<RACTreeItemProps<T>, 'children' | 'className' | 'style' | 'textValue'> & TreeItemText & {\n  /** The rows nested under this one, as further `Tree.Item` entries. */\n  children?: ReactNode;\n  /** A function may compute the class from the row's render state. */\n  className?: RACTreeItemProps<T>['className'];\n  /** Content before the headline: an avatar, an icon. */\n  leading?: ReactNode;\n  /** A function may compute the style from the row's render state. */\n  style?: RACTreeItemProps<T>['style'];\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as a count or a control. */\n  trailing?: ReactNode;\n};\n\n// What the row is worth as text, which React Aria requires: a tree row wraps\n// its headline in elements, so it cannot read one off the children the way a\n// plain-string child would give it. A string headline is taken as the value,\n// which is the common case; anything else has to say what it is worth, and\n// this is what makes the compiler ask rather than leaving a row unnamed.\ntype TreeItemText = {\n  /** The row's headline — the one thing it is mostly about. */\n  headline: string;\n  /** What typeahead matches the row on. Defaults to the headline. */\n  textValue?: string;\n} | {\n  /** The row's headline, as something other than a plain string. */\n  headline?: ReactNode;\n  /** What typeahead matches the row on, and what names it. */\n  textValue: string;\n};\ntype TreeLoadMoreProps = Omit<RACTreeLoadMoreItemProps, '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 TreeProps<T extends object = object> = Omit<RACTreeProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the tree's render state. */\n  className?: RACTreeProps<T>['className'];\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  /** A function may compute the style from the tree's render state. */\n  style?: RACTreeProps<T>['style'];\n};\ntype TreeSectionProps<T extends object = object> = Omit<RACTreeSectionProps<T>, 'children'> & {\n  /**\n   * The rows in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\n\n// The button itself never turns — the glyph inside it does, so the press\n// target stays a square whichever way the row is pointing.\nfunction chevronClassName() {\n  return stylex.props(styles.chevron, focus.ring).className ?? '';\n}\n\n// The caret, or the space it would have taken. Written as a call rather than\n// inline at the prop, which is what react-perf's no-new-function-as-prop and\n// jsx-no-jsx-as-prop are after; the React Compiler memoises the result on\n// its inputs.\n//\n// A leaf gets the space rather than nothing, so its headline lines up with\n// the headline of a sibling that opens.\nfunction chevronFor(state: TreeItemRenderProps): ReactNode {\n  if (!state.hasChildItems) {\n    return <span className=\"xxk0z11 x2lah0s xvy4d1p\" />;\n  }\n  return <RACButton className={chevronClassName} slot=\"chevron\">\n      <ChevronEndGlyph {...{\n      0: {\n        className: \"x12w9bfk xxk0z11 xvy4d1p x19axjrm x1c071of xkzkux9 x11xpdln xpc4ca7\"\n      },\n      1: {\n        className: \"x12w9bfk xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 x1y10d4b x1iffjtl\"\n      }\n    }[!!state.isExpanded << 0]} />\n    </RACButton>;\n}\n\n// What a row draws, from React Aria's render state. The caret comes first,\n// then the selection checkbox, then whatever the row was given — one order,\n// always, which is what keeps a column of rows reading down.\nfunction itemContent(headline: ReactNode, leading: ReactNode, supporting: ReactNode, trailing: ReactNode, selectLabel: string, ripple: ReactNode) {\n  return (state: TreeItemRenderProps): ReactNode => <>\n      <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leadingFor(state, leading, selectLabel)} supporting={supporting} trailing={trailing}>\n        {headline}\n      </RowContent>\n      {state.isDisabled ? null : ripple}\n    </>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// row's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so its ground and colour\n// win over the selected container's. The state layers come from the render\n// state as well — see `focusVisible` in src/row/styles.ts — and React Aria\n// reports none of them on a disabled row, so nothing has to outrank them.\n//\n// A supporting line moves the row from the page's one-line container height\n// to its two-line one, which is a floor rather than something the row's own\n// box arrives at — see `twoLine` in `src/row/styles.ts`. Taken as an\n// argument rather than read from the render state, since React Aria reports\n// what a row is doing and not what it holds; the row is built by a call for\n// the same reason `itemContent` is.\n/**\n * The caret, the selection checkbox, then whatever the row was given. Its\n * return type is written out rather than inferred: `ReactNode` is a union\n * that includes a promise, and a function inferred as returning one has to\n * be `async`.\n */\nfunction leadingFor(state: TreeItemRenderProps, leading: ReactNode, selectLabel: string): ReactNode {\n  const selects = state.selectionBehavior === 'toggle' && state.selectionMode !== 'none';\n  return <>\n      {chevronFor(state)}\n      {selects ? <Checkbox aria-label={selectLabel} slot=\"selection\" /> : null}\n      {leading}\n    </>;\n}\n\n// What React Aria matches typeahead on, and what names the row. `TreeItemText`\n// makes one of the two a string, so the last branch is unreachable through the\n// public type — it is there because destructuring the two apart is what loses\n// the narrowing, not because a row can arrive without either.\nfunction textValueFor(textValue: string | undefined, headline: ReactNode) {\n  if (textValue !== undefined) {\n    return textValue;\n  }\n  return typeof headline === 'string' ? headline : '';\n}\n\n/**\n * A list whose rows nest. Which rows are open is React Aria's: pass\n * `expandedKeys` with `onExpandedChange` to control it, or\n * `defaultExpandedKeys` to let it keep its own. Selection is React Aria's\n * too — set `selectionMode` to `single` or `multiple`.\n *\n * ```tsx\n * <Tree aria-label=\"Label\">\n *   <Tree.Item headline=\"First item\" id=\"first\">\n *     <Tree.Item headline=\"Second item\" id=\"second\" />\n *   </Tree.Item>\n * </Tree>\n * ```\n *\n * Each row is the row every list here draws, indented by its depth, with a\n * caret on the rows that have children. Name the tree with `aria-label` or\n * `aria-labelledby` — nothing here labels it for you.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction Tree<T extends object>({\n  selectLabel = 'Select',\n  ...props\n}: TreeProps<T>) {\n  return <SelectLabelContext value={selectLabel}>\n      <RACTree<T> {...props} {...mergeStatefulStyles(stylex.props(collectionStyles.container), props)} />\n    </SelectLabelContext>;\n}\n\n/**\n * A named group of rows. `header` names it, and is what a screen reader\n * reads before the rows inside.\n */\nfunction TreeHeader({\n  children\n}: TreeHeaderProps) {\n  return <RACTreeHeader {...stylex.props(collectionStyles.header)}>\n      {children}\n    </RACTreeHeader>;\n}\n\n/**\n * One row, and the rows under it. Its slots are the row's: `leading`, the\n * `headline`, `supporting` under it, and `trailing`. Give every row an `id`\n * — that is the key selection and expansion are reported by.\n *\n * Rows nested as `children` are what make it a branch; a row with none is a\n * leaf and draws no caret. `textValue` is what typeahead matches on, and is\n * taken from a plain-string headline when it is not given.\n */\nfunction TreeItem<T extends object = object>({\n  children,\n  headline,\n  leading,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: TreeItemProps<T>) {\n  const selectLabel = useContext(SelectLabelContext);\n  // The press ripple List's rows draw — see ListItem there.\n  const ripple = useRipple<HTMLDivElement>(true, {\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  }, true);\n  return <RACTreeItem<T> textValue={textValueFor(textValue, headline)} {...ripple.handlers} {...props} {...mergeStatefulStyles(\n  // No overline: a tree row takes the list variant's metrics because it\n  // looks like a list row, but it follows its own page, and that page\n  // gives a headline and a supporting line. The three-line item belongs\n  // to the lists page, which `List.Item` and `ListBox.Item` draw.\n  rowItemStyles(supporting, undefined, styles.indent), props)}>\n      <RACTreeItemContent>\n        {itemContent(headline, leading, supporting, trailing, selectLabel, ripple.surface)}\n      </RACTreeItemContent>\n      {children}\n    </RACTreeItem>;\n}\n\n/**\n * The row the tree shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading`.\n */\nfunction TreeLoadMore({\n  label = 'Loading more',\n  ...props\n}: TreeLoadMoreProps) {\n  return <RACTreeLoadMoreItem {...props} {...mergeStatefulStyles(stylex.props(collectionStyles.loading), props)}>\n      <CollectionLoadMore label={label} size=\"24px\" />\n    </RACTreeLoadMoreItem>;\n}\n\n/**\n * A named group of rows, with its heading above them.\n */\nfunction TreeSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: TreeSectionProps<T>) {\n  return <RACTreeSection<T> {...props} {...mergeStyles(stylex.props(collectionStyles.section), props)}>\n      {header === undefined ? null : <TreeHeader>{header}</TreeHeader>}\n      {children}\n    </RACTreeSection>;\n}\nTree.Item = TreeItem;\nTree.LoadMore = TreeLoadMore;\nTree.Section = TreeSection;\nexport type { TreeHeaderProps, TreeItemProps, TreeLoadMoreProps, TreeProps, TreeSectionProps };\nexport default Tree;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","TreeItemProps","RACTreeItemProps","TreeLoadMoreItemProps","RACTreeLoadMoreItemProps","TreeProps","RACTreeProps","TreeItemRenderProps","stylex","createContext","useContext","Button","RACButton","Tree","RACTree","TreeHeader","RACTreeHeader","TreeItem","RACTreeItem","TreeItemContent","RACTreeItemContent","TreeLoadMoreItem","RACTreeLoadMoreItem","TreeSection","RACTreeSection","CollectionLoadMore","collectionStyles","rowItemStyles","ChevronEndGlyph","useRipple","RowContent","focus","mergeStatefulStyles","mergeStyles","colors","motion","radii","spacing","Checkbox","RACTreeSectionProps","Parameters","T","SelectLabelContext","styles","chevron","kGNEyG","kWkggS","kaIpWk","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kmuXW","kjj79g","kmVPX3","$$css","indent","kZCmMZ","TreeHeaderProps","children","Omit","TreeItemText","className","leading","style","supporting","trailing","headline","textValue","TreeLoadMoreProps","label","selectLabel","TreeSectionProps","header","chevronClassName","props","ring","chevronFor","state","hasChildItems","isExpanded","itemContent","ripple","isDisabled","isSelected","leadingFor","selects","selectionBehavior","selectionMode","textValueFor","undefined","t0","$","_c","T0","T1","t1","t2","t3","t4","container","t5","Symbol","for","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","handlers","surface","t6","t7","TreeLoadMore","loading","section","Item","LoadMore","Section","stylex.props","RACButton","Tree","_c","props","RACTree","TreeHeader","RACTreeHeader","TreeItem","RACTreeItem","RACTreeItemContent","RACTreeLoadMoreItem","TreeSection","RACTreeSection"],"sources":["../../../src/components/tree/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TreeItemProps as RACTreeItemProps, TreeLoadMoreItemProps as RACTreeLoadMoreItemProps, TreeProps as RACTreeProps, TreeItemRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { Button as RACButton, Tree as RACTree, TreeHeader as RACTreeHeader, TreeItem as RACTreeItem, TreeItemContent as RACTreeItemContent, TreeLoadMoreItem as RACTreeLoadMoreItem, TreeSection as RACTreeSection } from 'react-aria-components';\nimport { CollectionLoadMore } from '../../collection';\nimport { collectionStyles, rowItemStyles } from '../../collection/styles';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing } from '../../tokens/design.tokens.stylex';\nimport Checkbox from '../checkbox';\n\n// A list whose rows nest. Each row is the row every list here draws —\n// `src/row`, shared with ListItem, ListBox, List and Disclosure — so its\n// 56dp floor, body-large headline, body-medium supporting line, state layers\n// and disabled treatment are that module's, and a tree beside a list cannot\n// drift from it.\n//\n// The lists page gives no nesting: it draws one flat list. So the two things\n// a tree adds beyond that row are the library's own, and both are written\n// here with their reasons. The rest — the row, the selection colours, the\n// checkbox — is the page's, through the shared module.\n//\n// Four things are this component's own.\n//\n// **A level indents by one chevron's width.** React Aria puts the depth on\n// each row as a custom property, so the inset is one `calc` against the\n// row's own inline padding rather than a style per level. 24dp is the size\n// the menus page gives that glyph, which makes a level of nesting exactly as\n// wide as the caret that opens it.\n//\n// **The caret is a button, and React Aria names it.** A `slot=\"chevron\"`\n// button is what expands and collapses; React Aria labels it Expand or\n// Collapse and composes that with the row, so nothing here names it. It is\n// drawn only on a row that has children, since a caret on a leaf says the\n// row opens when it does not.\n//\n// **A selecting tree draws a checkbox, before whatever the row was given.**\n// Same rule as List: React Aria reports the mode on each row, so a tree that\n// toggles draws one without the call site repeating it, and it always sits\n// in the same place so a column of rows reads down.\n//\n// **`TreeItemContent` has no class to style.** React Aria renders it as a\n// `display: contents` gridcell with nothing on it, so the row's own layout\n// is drawn by what goes inside rather than by that wrapper.\n\n// `TreeSection`'s props are not re-exported from the package index, only its\n// component is — so the type is taken off the component rather than imported\n// by a name that is not there to import.\ntype RACTreeSectionProps<T> = Parameters<typeof RACTreeSection<T>>[0];\n\n// What each row's selection checkbox is called. A context rather than a prop\n// on the row, since it is the tree's decision and repeating it per row is\n// how the two drift.\nconst SelectLabelContext = createContext('Select');\nconst styles = {\n  chevron: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  indent: {\n    kZCmMZ: \"x1187sqy\",\n    $$css: true\n  }\n};\ntype TreeHeaderProps = {\n  /** The section's heading. */\n  children?: ReactNode;\n};\ntype TreeItemProps<T extends object = object> = Omit<RACTreeItemProps<T>, 'children' | 'className' | 'style' | 'textValue'> & TreeItemText & {\n  /** The rows nested under this one, as further `Tree.Item` entries. */\n  children?: ReactNode;\n  /** A function may compute the class from the row's render state. */\n  className?: RACTreeItemProps<T>['className'];\n  /** Content before the headline: an avatar, an icon. */\n  leading?: ReactNode;\n  /** A function may compute the style from the row's render state. */\n  style?: RACTreeItemProps<T>['style'];\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as a count or a control. */\n  trailing?: ReactNode;\n};\n\n// What the row is worth as text, which React Aria requires: a tree row wraps\n// its headline in elements, so it cannot read one off the children the way a\n// plain-string child would give it. A string headline is taken as the value,\n// which is the common case; anything else has to say what it is worth, and\n// this is what makes the compiler ask rather than leaving a row unnamed.\ntype TreeItemText = {\n  /** The row's headline — the one thing it is mostly about. */\n  headline: string;\n  /** What typeahead matches the row on. Defaults to the headline. */\n  textValue?: string;\n} | {\n  /** The row's headline, as something other than a plain string. */\n  headline?: ReactNode;\n  /** What typeahead matches the row on, and what names it. */\n  textValue: string;\n};\ntype TreeLoadMoreProps = Omit<RACTreeLoadMoreItemProps, '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 TreeProps<T extends object = object> = Omit<RACTreeProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the tree's render state. */\n  className?: RACTreeProps<T>['className'];\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  /** A function may compute the style from the tree's render state. */\n  style?: RACTreeProps<T>['style'];\n};\ntype TreeSectionProps<T extends object = object> = Omit<RACTreeSectionProps<T>, 'children'> & {\n  /**\n   * The rows in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\n\n// The button itself never turns — the glyph inside it does, so the press\n// target stays a square whichever way the row is pointing.\nfunction chevronClassName() {\n  return stylex.props(styles.chevron, focus.ring).className ?? '';\n}\n\n// The caret, or the space it would have taken. Written as a call rather than\n// inline at the prop, which is what react-perf's no-new-function-as-prop and\n// jsx-no-jsx-as-prop are after; the React Compiler memoises the result on\n// its inputs.\n//\n// A leaf gets the space rather than nothing, so its headline lines up with\n// the headline of a sibling that opens.\nfunction chevronFor(state: TreeItemRenderProps): ReactNode {\n  if (!state.hasChildItems) {\n    return <span className=\"xxk0z11 x2lah0s xvy4d1p\" />;\n  }\n  return <RACButton className={chevronClassName} slot=\"chevron\">\n      <ChevronEndGlyph {...{\n      0: {\n        className: \"x12w9bfk xxk0z11 xvy4d1p x19axjrm x1c071of xkzkux9 x11xpdln xpc4ca7\"\n      },\n      1: {\n        className: \"x12w9bfk xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 x1y10d4b x1iffjtl\"\n      }\n    }[!!state.isExpanded << 0]} />\n    </RACButton>;\n}\n\n// What a row draws, from React Aria's render state. The caret comes first,\n// then the selection checkbox, then whatever the row was given — one order,\n// always, which is what keeps a column of rows reading down.\nfunction itemContent(headline: ReactNode, leading: ReactNode, supporting: ReactNode, trailing: ReactNode, selectLabel: string, ripple: ReactNode) {\n  return (state: TreeItemRenderProps): ReactNode => <>\n      <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leadingFor(state, leading, selectLabel)} supporting={supporting} trailing={trailing}>\n        {headline}\n      </RowContent>\n      {state.isDisabled ? null : ripple}\n    </>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// row's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so its ground and colour\n// win over the selected container's. The state layers come from the render\n// state as well — see `focusVisible` in src/row/styles.ts — and React Aria\n// reports none of them on a disabled row, so nothing has to outrank them.\n//\n// A supporting line moves the row from the page's one-line container height\n// to its two-line one, which is a floor rather than something the row's own\n// box arrives at — see `twoLine` in `src/row/styles.ts`. Taken as an\n// argument rather than read from the render state, since React Aria reports\n// what a row is doing and not what it holds; the row is built by a call for\n// the same reason `itemContent` is.\n/**\n * The caret, the selection checkbox, then whatever the row was given. Its\n * return type is written out rather than inferred: `ReactNode` is a union\n * that includes a promise, and a function inferred as returning one has to\n * be `async`.\n */\nfunction leadingFor(state: TreeItemRenderProps, leading: ReactNode, selectLabel: string): ReactNode {\n  const selects = state.selectionBehavior === 'toggle' && state.selectionMode !== 'none';\n  return <>\n      {chevronFor(state)}\n      {selects ? <Checkbox aria-label={selectLabel} slot=\"selection\" /> : null}\n      {leading}\n    </>;\n}\n\n// What React Aria matches typeahead on, and what names the row. `TreeItemText`\n// makes one of the two a string, so the last branch is unreachable through the\n// public type — it is there because destructuring the two apart is what loses\n// the narrowing, not because a row can arrive without either.\nfunction textValueFor(textValue: string | undefined, headline: ReactNode) {\n  if (textValue !== undefined) {\n    return textValue;\n  }\n  return typeof headline === 'string' ? headline : '';\n}\n\n/**\n * A list whose rows nest. Which rows are open is React Aria's: pass\n * `expandedKeys` with `onExpandedChange` to control it, or\n * `defaultExpandedKeys` to let it keep its own. Selection is React Aria's\n * too — set `selectionMode` to `single` or `multiple`.\n *\n * ```tsx\n * <Tree aria-label=\"Label\">\n *   <Tree.Item headline=\"First item\" id=\"first\">\n *     <Tree.Item headline=\"Second item\" id=\"second\" />\n *   </Tree.Item>\n * </Tree>\n * ```\n *\n * Each row is the row every list here draws, indented by its depth, with a\n * caret on the rows that have children. Name the tree with `aria-label` or\n * `aria-labelledby` — nothing here labels it for you.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction Tree<T extends object>({\n  selectLabel = 'Select',\n  ...props\n}: TreeProps<T>) {\n  return <SelectLabelContext value={selectLabel}>\n      <RACTree<T> {...props} {...mergeStatefulStyles(stylex.props(collectionStyles.container), props)} />\n    </SelectLabelContext>;\n}\n\n/**\n * A named group of rows. `header` names it, and is what a screen reader\n * reads before the rows inside.\n */\nfunction TreeHeader({\n  children\n}: TreeHeaderProps) {\n  return <RACTreeHeader {...stylex.props(collectionStyles.header)}>\n      {children}\n    </RACTreeHeader>;\n}\n\n/**\n * One row, and the rows under it. Its slots are the row's: `leading`, the\n * `headline`, `supporting` under it, and `trailing`. Give every row an `id`\n * — that is the key selection and expansion are reported by.\n *\n * Rows nested as `children` are what make it a branch; a row with none is a\n * leaf and draws no caret. `textValue` is what typeahead matches on, and is\n * taken from a plain-string headline when it is not given.\n */\nfunction TreeItem<T extends object = object>({\n  children,\n  headline,\n  leading,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: TreeItemProps<T>) {\n  const selectLabel = useContext(SelectLabelContext);\n  // The press ripple List's rows draw — see ListItem there.\n  const ripple = useRipple<HTMLDivElement>(true, {\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  }, true);\n  return <RACTreeItem<T> textValue={textValueFor(textValue, headline)} {...ripple.handlers} {...props} {...mergeStatefulStyles(\n  // No overline: a tree row takes the list variant's metrics because it\n  // looks like a list row, but it follows its own page, and that page\n  // gives a headline and a supporting line. The three-line item belongs\n  // to the lists page, which `List.Item` and `ListBox.Item` draw.\n  rowItemStyles(supporting, undefined, styles.indent), props)}>\n      <RACTreeItemContent>\n        {itemContent(headline, leading, supporting, trailing, selectLabel, ripple.surface)}\n      </RACTreeItemContent>\n      {children}\n    </RACTreeItem>;\n}\n\n/**\n * The row the tree shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading`.\n */\nfunction TreeLoadMore({\n  label = 'Loading more',\n  ...props\n}: TreeLoadMoreProps) {\n  return <RACTreeLoadMoreItem {...props} {...mergeStatefulStyles(stylex.props(collectionStyles.loading), props)}>\n      <CollectionLoadMore label={label} size=\"24px\" />\n    </RACTreeLoadMoreItem>;\n}\n\n/**\n * A named group of rows, with its heading above them.\n */\nfunction TreeSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: TreeSectionProps<T>) {\n  return <RACTreeSection<T> {...props} {...mergeStyles(stylex.props(collectionStyles.section), props)}>\n      {header === undefined ? null : <TreeHeader>{header}</TreeHeader>}\n      {children}\n    </RACTreeSection>;\n}\nTree.Item = TreeItem;\nTree.LoadMore = TreeLoadMore;\nTree.Section = TreeSection;\nexport type { TreeHeaderProps, TreeItemProps, TreeLoadMoreProps, TreeProps, TreeSectionProps };\nexport default Tree;"],"mappings":"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"}

package/dist/control/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","stylex","controlStyles","ControlLabelProps","children","state","ControlLabelState","isDisabled","isReadOnly","ControlLabel","t0","$","_c","undefined","t1","props","label","labelReadOnly","labelDisabled","t2"],"sources":["../../src/control/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { controlStyles } from './styles';\ntype ControlLabelProps = {\n  /** The label's text. Nothing renders when there is none. */\n  children: ReactNode;\n  /** The render state React Aria hands the component. */\n  state: ControlLabelState;\n};\n\n/**\n * The state a label reads. Each of React Aria's three render states carries\n * more than this, and this is the part all three share.\n */\ntype ControlLabelState = {\n  isDisabled: boolean;\n  isReadOnly: boolean;\n};\n\n/**\n * The label beside a selection control, in the second column of its grid.\n *\n * Renders nothing without children, which is what a control labelled from\n * outside — by a group's legend, or an `aria-label` — needs.\n */\nfunction ControlLabel({\n  children,\n  state\n}: ControlLabelProps) {\n  if (children === undefined) {\n    return null;\n  }\n  return <span {...stylex.props(controlStyles.label, state.isReadOnly && controlStyles.labelReadOnly, state.isDisabled && controlStyles.labelDisabled)}>\n      {children}\n    </span>;\n}\nexport type { ControlLabelProps };\nexport { ControlLabel };"],"mappings":";;;;;;;;;;;AAyBA,SAAAS,aAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAsB,MAAA,EAAAR,UAAAC,UAAAK;CAIpB,IAAIN,aAAaS,KAAAA,GAAS,OACjB;CACR,IAAAC;CAAA,IAAAH,EAAA,OAAAN,MAAAE,cAAAI,EAAA,OAAAN,MAAAG,YAAA;EACgBM,KAAAb,MAAaC,cAAac,OAAQX,MAAKG,cAAeN,cAAae,eAAgBZ,MAAKE,cAAeL,cAAagB,aAAc;EAACP,EAAA,KAAAN,MAAAE;EAAAI,EAAA,KAAAN,MAAAG;EAAAG,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,OAAAP,YAAAO,EAAA,OAAAG,IAAA;EAA7IK,KAAA,oBAAA,QAAA;GAEE,GAFQL;GACZV;EACI,CAAA;EAAAO,EAAA,KAAAP;EAAAO,EAAA,KAAAG;EAAAH,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,OAFFQ;AAEE"}
+{"version":3,"file":"index.js","names":["ReactNode","stylex","controlStyles","ControlLabelProps","children","state","ControlLabelState","isDisabled","isReadOnly","ControlLabel","t0","$","_c","undefined","t1","props","label","labelReadOnly","labelDisabled","t2","_c","stylex.props"],"sources":["../../src/control/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { controlStyles } from './styles';\ntype ControlLabelProps = {\n  /** The label's text. Nothing renders when there is none. */\n  children: ReactNode;\n  /** The render state React Aria hands the component. */\n  state: ControlLabelState;\n};\n\n/**\n * The state a label reads. Each of React Aria's three render states carries\n * more than this, and this is the part all three share.\n */\ntype ControlLabelState = {\n  isDisabled: boolean;\n  isReadOnly: boolean;\n};\n\n/**\n * The label beside a selection control, in the second column of its grid.\n *\n * Renders nothing without children, which is what a control labelled from\n * outside — by a group's legend, or an `aria-label` — needs.\n */\nfunction ControlLabel({\n  children,\n  state\n}: ControlLabelProps) {\n  if (children === undefined) {\n    return null;\n  }\n  return <span {...stylex.props(controlStyles.label, state.isReadOnly && controlStyles.labelReadOnly, state.isDisabled && controlStyles.labelDisabled)}>\n      {children}\n    </span>;\n}\nexport type { ControlLabelProps };\nexport { ControlLabel };"],"mappings":";;;;;;;;;;;AAyBA,SAAAS,aAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAsB,MAAA,EAAAR,UAAAC,UAAAK;CAIpB,IAAIN,aAAaS,KAAAA,GAAS,OACjB;CACR,IAAAC;CAAA,IAAAH,EAAA,OAAAN,MAAAE,cAAAI,EAAA,OAAAN,MAAAG,YAAA;EACgBM,KAAAb,MAAaC,cAAac,OAAQX,MAAKG,cAAeN,cAAae,eAAgBZ,MAAKE,cAAeL,cAAagB,aAAc;EAACP,EAAA,KAAAN,MAAAE;EAAAI,EAAA,KAAAN,MAAAG;EAAAG,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,OAAAP,YAAAO,EAAA,OAAAG,IAAA;EAA7IK,KAAA,oBAAA,QAAA;GAEE,GAFQL;GACZV;EACI,CAAA;EAAAO,EAAA,KAAAP;EAAAO,EAAA,KAAAG;EAAAH,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,OAFFQ;AAEE"}

package/dist/drag/hooks.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.js","names":["JSX","DropTarget","stylex","useDragAndDrop","useRACDragAndDrop","DropIndicator","dragStyles","DragItems","Parameters","NonNullable","renderDragPreview","items","Element","first","rest","length","props","preview","renderDropIndicator","target","options","$","_c","t0"],"sources":["../../src/drag/hooks.tsx"],"sourcesContent":["import type { JSX } from 'react';\nimport type { DropTarget } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useDragAndDrop as useRACDragAndDrop } from 'react-aria-components';\nimport { DropIndicator } from '.';\nimport { dragStyles } from './styles';\n\n// The hook half of `src/drag`, apart from ./index.tsx so that file exports\n// components alone — which is what keeps fast refresh working for it, the\n// same arrangement `src/row` uses.\n\n// React Aria types the preview renderer's argument with a `DragItem` it does\n// not export, so the shape is read back off the option that takes it.\ntype DragItems = Parameters<NonNullable<Parameters<typeof useRACDragAndDrop>[0]['renderDragPreview']>>[0];\n\n// What is drawn under the pointer while a drag is in flight. React Aria\n// hands it the items being dragged, each a map of type to value; what is\n// shown is the plain text one, and how many others are coming with it.\n//\n// The parameter type is taken off the option rather than imported, since\n// `DragItem` is not on the package's public surface.\nfunction renderDragPreview(items: DragItems): JSX.Element {\n  const first = items[0]?.['text/plain'] ?? '';\n  const rest = items.length - 1;\n  return <div {...stylex.props(dragStyles.preview)}>\n      {rest > 0 ? `${first} + ${rest}` : first}\n    </div>;\n}\nfunction renderDropIndicator(target: DropTarget): JSX.Element {\n  return <DropIndicator target={target} />;\n}\n\n/**\n * React Aria's drag and drop hooks, with this library's drop indicator and\n * drag preview as the defaults. Hand what it returns to a `List`, `ListBox`,\n * `Table` or `Tree` as `dragAndDropHooks`.\n *\n * ```tsx\n * const { dragAndDropHooks } = useDragAndDrop({\n *   getItems: (keys) => [...keys].map((key) => ({ 'text/plain': String(key) })),\n *   onReorder: (event) => { … },\n * })\n *\n * <List aria-label=\"Label\" dragAndDropHooks={dragAndDropHooks}>…</List>\n * ```\n *\n * Everything else is React Aria's and is not wrapped — `getItems`,\n * `onReorder`, `onInsert`, `acceptedDragTypes` and the rest decide what may\n * be dragged where, which is the page's business rather than the row's.\n * Passing `renderDropIndicator` or `renderDragPreview` replaces the default.\n */\nfunction useDragAndDrop(options: Parameters<typeof useRACDragAndDrop>[0]): ReturnType<typeof useRACDragAndDrop> {\n  return useRACDragAndDrop({\n    renderDragPreview,\n    renderDropIndicator,\n    ...options\n  });\n}\nexport { useDragAndDrop };"],"mappings":";;;;;;;AAqBA,SAASU,kBAAkBC,OAA+B;CACxD,MAAME,QAAQF,MAAM,EAAE,GAAG,iBAAiB;CAC1C,MAAMG,OAAOH,MAAMI,SAAS;CAC5B,OAAO,oBAAC,OAAD;EAAK,GAAIb,MAAaI,WAAWW,OAAO;EAC1CH,UAAAA,OAAO,IAAI,GAAGD,MAAK,KAAMC,SAASD;CAChC,CAAA;AACT;AACA,SAASK,oBAAoBC,QAAiC;CAC5D,OAAO,oBAAC,iBAAD,EAAuBA,OAAO,CAAA;AACvC;;;;;;;;;;;;;;;;;;;;AAqBA,SAAAhB,iBAAAiB,SAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAD,SAAA;EAC2BG,KAAA;GAAAb;GAAAQ;GAAA,GAGpBE;EACL;EAACC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,OAJMjB,eAAkBmB,EAIxB;AAAC"}
+{"version":3,"file":"hooks.js","names":["JSX","DropTarget","stylex","useDragAndDrop","useRACDragAndDrop","DropIndicator","dragStyles","DragItems","Parameters","NonNullable","renderDragPreview","items","Element","first","rest","length","props","preview","renderDropIndicator","target","options","$","_c","t0","stylex.props","DropIndicator","useDragAndDrop","_c","useRACDragAndDrop"],"sources":["../../src/drag/hooks.tsx"],"sourcesContent":["import type { JSX } from 'react';\nimport type { DropTarget } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useDragAndDrop as useRACDragAndDrop } from 'react-aria-components';\nimport { DropIndicator } from '.';\nimport { dragStyles } from './styles';\n\n// The hook half of `src/drag`, apart from ./index.tsx so that file exports\n// components alone — which is what keeps fast refresh working for it, the\n// same arrangement `src/row` uses.\n\n// React Aria types the preview renderer's argument with a `DragItem` it does\n// not export, so the shape is read back off the option that takes it.\ntype DragItems = Parameters<NonNullable<Parameters<typeof useRACDragAndDrop>[0]['renderDragPreview']>>[0];\n\n// What is drawn under the pointer while a drag is in flight. React Aria\n// hands it the items being dragged, each a map of type to value; what is\n// shown is the plain text one, and how many others are coming with it.\n//\n// The parameter type is taken off the option rather than imported, since\n// `DragItem` is not on the package's public surface.\nfunction renderDragPreview(items: DragItems): JSX.Element {\n  const first = items[0]?.['text/plain'] ?? '';\n  const rest = items.length - 1;\n  return <div {...stylex.props(dragStyles.preview)}>\n      {rest > 0 ? `${first} + ${rest}` : first}\n    </div>;\n}\nfunction renderDropIndicator(target: DropTarget): JSX.Element {\n  return <DropIndicator target={target} />;\n}\n\n/**\n * React Aria's drag and drop hooks, with this library's drop indicator and\n * drag preview as the defaults. Hand what it returns to a `List`, `ListBox`,\n * `Table` or `Tree` as `dragAndDropHooks`.\n *\n * ```tsx\n * const { dragAndDropHooks } = useDragAndDrop({\n *   getItems: (keys) => [...keys].map((key) => ({ 'text/plain': String(key) })),\n *   onReorder: (event) => { … },\n * })\n *\n * <List aria-label=\"Label\" dragAndDropHooks={dragAndDropHooks}>…</List>\n * ```\n *\n * Everything else is React Aria's and is not wrapped — `getItems`,\n * `onReorder`, `onInsert`, `acceptedDragTypes` and the rest decide what may\n * be dragged where, which is the page's business rather than the row's.\n * Passing `renderDropIndicator` or `renderDragPreview` replaces the default.\n */\nfunction useDragAndDrop(options: Parameters<typeof useRACDragAndDrop>[0]): ReturnType<typeof useRACDragAndDrop> {\n  return useRACDragAndDrop({\n    renderDragPreview,\n    renderDropIndicator,\n    ...options\n  });\n}\nexport { useDragAndDrop };"],"mappings":";;;;;;;AAqBA,SAASU,kBAAkBC,OAA+B;CACxD,MAAME,QAAQF,MAAM,EAAE,GAAG,iBAAiB;CAC1C,MAAMG,OAAOH,MAAMI,SAAS;CAC5B,OAAO,oBAAC,OAAD;EAAK,GAAIb,MAAaI,WAAWW,OAAO;EAC1CH,UAAAA,OAAO,IAAI,GAAGD,MAAK,KAAMC,SAASD;CAChC,CAAA;AACT;AACA,SAASK,oBAAoBC,QAAiC;CAC5D,OAAO,oBAACM,iBAAD,EAAuBN,OAAO,CAAA;AACvC;;;;;;;;;;;;;;;;;;;;AAqBA,SAAAhB,iBAAAiB,SAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAD,SAAA;EAC2BG,KAAA;GAAAb;GAAAQ;GAAA,GAGpBE;EACL;EAACC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,OAJMjB,eAAkBmB,EAIxB;AAAC"}

package/dist/drag/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["DropTarget","DropIndicator","RACDropIndicator","indicatorClassName","t0","$","_c","target","t1"],"sources":["../../src/drag/index.tsx"],"sourcesContent":["import type { DropTarget } from 'react-aria-components'\n\nimport { DropIndicator as RACDropIndicator } from 'react-aria-components'\n\nimport { indicatorClassName } from './styles'\n\n// What drag and drop looks like across the four collections that do it —\n// List, ListBox, Table and Tree. React Aria supplies the behaviour through\n// `useDragAndDrop` and renders an unstyled line between items; what is here\n// is the line and the preview, and a wrapper that makes both the default so\n// a call site gets them without wiring either.\n//\n// Apart from `src/components` because it is shared internals rather than a\n// component: a directory there is a public component with stories, a barrel\n// entry and a `styling.test.tsx` case, and this has none of the three. The\n// one name it does put on the public surface is `useDragAndDrop`, which\n// `src/react-aria.ts` exports in place of React Aria's own.\n//\n// Two things are this module's own, since the design carries no page for\n// either — it has no drag and drop at all.\n//\n// **The line between two items is the primary role, 2dp.** It is the same\n// weight and colour a focus ring takes, which is the nearest thing the\n// system has to \"this is where the thing you are moving will land\".\n//\n// **The preview is the row's own type on a raised surface.** A drag preview\n// that looked nothing like the row it came from would read as a second\n// thing rather than as the row in transit.\n\n/**\n * The line that shows where a dragged item would land. Rendered by\n * {@link useDragAndDrop} rather than by a call site, which is why it takes\n * React Aria's target rather than props of its own.\n */\nfunction DropIndicator({ target }: { target: DropTarget }) {\n  return <RACDropIndicator className={indicatorClassName} target={target} />\n}\n\nexport { DropIndicator }\n"],"mappings":";;;;;;;;;;AAkCA,SAAAC,gBAAAG,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAuB,MAAA,EAAAC,WAAAH;CAAkC,IAAAI;CAAA,IAAAH,EAAA,OAAAE,QAAA;EAChDC,KAAA,oBAAC,eAAD;GAA6BL,WAAAA;GAA4BI;EAAM,CAAA;EAAIF,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,OAAnEG;AAAmE"}
+{"version":3,"file":"index.js","names":["DropTarget","DropIndicator","RACDropIndicator","indicatorClassName","t0","$","_c","target","t1","DropIndicator","_c","RACDropIndicator"],"sources":["../../src/drag/index.tsx"],"sourcesContent":["import type { DropTarget } from 'react-aria-components'\n\nimport { DropIndicator as RACDropIndicator } from 'react-aria-components'\n\nimport { indicatorClassName } from './styles'\n\n// What drag and drop looks like across the four collections that do it —\n// List, ListBox, Table and Tree. React Aria supplies the behaviour through\n// `useDragAndDrop` and renders an unstyled line between items; what is here\n// is the line and the preview, and a wrapper that makes both the default so\n// a call site gets them without wiring either.\n//\n// Apart from `src/components` because it is shared internals rather than a\n// component: a directory there is a public component with stories, a barrel\n// entry and a `styling.test.tsx` case, and this has none of the three. The\n// one name it does put on the public surface is `useDragAndDrop`, which\n// `src/react-aria.ts` exports in place of React Aria's own.\n//\n// Two things are this module's own, since the design carries no page for\n// either — it has no drag and drop at all.\n//\n// **The line between two items is the primary role, 2dp.** It is the same\n// weight and colour a focus ring takes, which is the nearest thing the\n// system has to \"this is where the thing you are moving will land\".\n//\n// **The preview is the row's own type on a raised surface.** A drag preview\n// that looked nothing like the row it came from would read as a second\n// thing rather than as the row in transit.\n\n/**\n * The line that shows where a dragged item would land. Rendered by\n * {@link useDragAndDrop} rather than by a call site, which is why it takes\n * React Aria's target rather than props of its own.\n */\nfunction DropIndicator({ target }: { target: DropTarget }) {\n  return <RACDropIndicator className={indicatorClassName} target={target} />\n}\n\nexport { DropIndicator }\n"],"mappings":";;;;;;;;;;AAkCA,SAAAC,gBAAAG,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAuB,MAAA,EAAAC,WAAAH;CAAkC,IAAAI;CAAA,IAAAH,EAAA,OAAAE,QAAA;EAChDC,KAAA,oBAACG,eAAD;GAA6BR,WAAAA;GAA4BI;EAAM,CAAA;EAAIF,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,OAAnEG;AAAmE"}