@kanso-labs/kanso-ui 0.32.0 → 0.34.0

package/dist/chip/index.js

@@ -22,7 +22,19 @@ function chipGlyph(isSelected) {
 		children: /* @__PURE__ */ jsx(CheckGlyph, { ...props(chipStyles.glyphSvg) })
 	});
 }
+/**
+* The label a chip draws, in a span of its own so it can be cut short with an
+* ellipsis rather than wrapped out of the pill; see the header of `./styles`.
+* Shared for the reason `chipGlyph` is, by all three components that draw the
+* pill.
+*/
+function chipLabel(children) {
+	return /* @__PURE__ */ jsx("span", {
+		...props(chipStyles.label),
+		children
+	});
+}
 //#endregion
-export { chipGlyph };
+export { chipGlyph, chipLabel };
 
 //# sourceMappingURL=index.js.map

package/dist/chip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","stylex","CheckGlyph","chipStyles","chipGlyph","isSelected","props","glyph","glyphSvg"],"sources":["../../src/chip/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { CheckGlyph } from '../glyphs';\nimport { chipStyles } from './styles';\n\n/**\n * The check a selected chip draws before its label, and nothing at all while\n * it is not selected. Returns a node rather than letting the type be\n * inferred, since `ReactNode` is a union that includes a promise and an\n * inferred one has to be `async`.\n *\n * Shared rather than written at each of the two call sites: Chip and\n * ChipGroup's chip draw the same pill from `./styles`, and a check written\n * twice is the drift that module exists to stop. Not a component of the\n * library's own and not exported from the package; see `src/row` for the\n * same arrangement around a list's row.\n */\nfunction chipGlyph(isSelected: boolean): ReactNode {\n  if (!isSelected) {\n    return null;\n  }\n  return <span {...stylex.props(chipStyles.glyph)}>\n      <CheckGlyph {...stylex.props(chipStyles.glyphSvg)} />\n    </span>;\n}\nexport { chipGlyph };"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,SAASI,UAAUC,YAAgC;CACjD,IAAI,CAACA,YACH,OAAO;CAET,OAAO,oBAAC,QAAD;EAAM,GAAIJ,MAAaE,WAAWI,KAAK;EAC1C,UAAA,oBAAC,YAAD,EAAY,GAAIN,MAAaE,WAAWK,QAAQ,EAAE,CAAA;CAC9C,CAAA;AACV"}
+{"version":3,"file":"index.js","names":["ReactNode","stylex","CheckGlyph","chipStyles","chipGlyph","isSelected","props","glyph","glyphSvg","chipLabel","children","label"],"sources":["../../src/chip/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { CheckGlyph } from '../glyphs';\nimport { chipStyles } from './styles';\n\n/**\n * The check a selected chip draws before its label, and nothing at all while\n * it is not selected. Returns a node rather than letting the type be\n * inferred, since `ReactNode` is a union that includes a promise and an\n * inferred one has to be `async`.\n *\n * Shared rather than written at each of the two call sites: Chip and\n * ChipGroup's chip draw the same pill from `./styles`, and a check written\n * twice is the drift that module exists to stop. Not a component of the\n * library's own and not exported from the package; see `src/row` for the\n * same arrangement around a list's row.\n */\nfunction chipGlyph(isSelected: boolean): ReactNode {\n  if (!isSelected) {\n    return null;\n  }\n  return <span {...stylex.props(chipStyles.glyph)}>\n      <CheckGlyph {...stylex.props(chipStyles.glyphSvg)} />\n    </span>;\n}\n\n/**\n * The label a chip draws, in a span of its own so it can be cut short with an\n * ellipsis rather than wrapped out of the pill; see the header of `./styles`.\n * Shared for the reason `chipGlyph` is, by all three components that draw the\n * pill.\n */\nfunction chipLabel(children: ReactNode): ReactNode {\n  return <span {...stylex.props(chipStyles.label)}>{children}</span>;\n}\nexport { chipGlyph, chipLabel };"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,SAASI,UAAUC,YAAgC;CACjD,IAAI,CAACA,YACH,OAAO;CAET,OAAO,oBAAC,QAAD;EAAM,GAAIJ,MAAaE,WAAWI,KAAK;EAC1C,UAAA,oBAAC,YAAD,EAAY,GAAIN,MAAaE,WAAWK,QAAQ,EAAE,CAAA;CAC9C,CAAA;AACV;;;;;;;AAQA,SAASC,UAAUC,UAAgC;CACjD,OAAO,oBAAC,QAAD;EAAM,GAAIT,MAAaE,WAAWQ,KAAK;EAAID;CAAe,CAAA;AACnE"}

package/dist/chip/styles.js

@@ -17,6 +17,7 @@ const chipStyles = {
 		kOIVth: "x126z3so",
 		kb6lSQ: "x155f00i",
 		kLWn49: "x1lz68p4",
+		ks0D6T: "x193iq5w",
 		k8WAf4: "xt970qd",
 		kg3NbH: "x790zyz",
 		kIyJzY: "x1qno0dh",
@@ -54,6 +55,13 @@ const chipStyles = {
 		kzqmXN: "xh8yej3",
 		$$css: true
 	},
+	label: {
+		kB7OPa: "x9f619",
+		kVQacm: "xb3r6kr",
+		kg5iWk: "xlyipyv",
+		khDVqt: "xuxw1ft",
+		$$css: true
+	},
 	remove: {
 		kGNEyG: "x6s0dn4",
 		kWkggS: "xy3r1oc x15a1ka xjbqb8w",

package/dist/chip/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","sizing","spacing","stateLayerOpacity","typography","chipStyles","base","k6CgDc","kGNEyG","kZKoxP","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","k8WAf4","kg3NbH","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","kMwMTN","disabledSelected","kWkggS","disabledUnselected","kVAM5u","glyph","kzqmXN","kjj79g","keTefX","glyphSvg","remove","k71WvV","kjBf7l","kInvED","k3XXqK","kMeerF","kmVPX3","removeGlyph","selected","unselected"],"sources":["../../src/chip/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The pill the chips page draws, shared by the three components that draw\n// one: Chip, which is a toggle on its own; ChipGroup's chip, which is one of\n// a set that can also be removed; and TokenField's token, which takes `base`\n// and `unselected` alone — a token is not selectable, so it reaches for\n// neither the selected container nor the check below. The measurements and\n// roles are the page's filter chip — a 32dp container with an 8dp corner and 16dp of inline\n// padding, an outline variant border while unselected, the secondary\n// container pair once selected.\n//\n// Each state composites an on-colour over its own container at the\n// interaction state's opacity rather than swapping in a separate hover\n// colour. `calc(<opacity> * 100%)` turns the token's unitless 0-1 ratio into\n// the percentage `color-mix()` takes, and it is inlined at each property\n// because @stylexjs/babel-plugin only statically recognises expressions\n// written directly as property values.\n//\n// The selected chip drops its border rather than recolouring it: it has a\n// container of its own to define its edge, and a border on top of that reads\n// as a second, competing outline.\n//\n// Disabled is applied from render state rather than from `:disabled`. Chip is\n// a button and would match the pseudo-class; a chip in a group is React\n// Aria's `Tag`, which is a div and never will. One mechanism serves both, and\n// StyleX replaces a property whole, so the disabled styles take the hover and\n// pressed branches of whichever state they are applied over.\n//\n// A selected chip carries the page's check before its label, which is what\n// makes the selection legible without colour. The two containers differ in\n// colour alone, and under a scheme whose secondary container sits close to\n// the surface — or for a reader who does not see colour — that is no\n// difference at all.\n//\n// The chip widens when the check appears, and that is the page's behaviour\n// rather than a cost of drawing it: a chip is flow content, laid out in a\n// row that wraps, so nothing around it has a width to hold. A segmented\n// button's segments are equal columns of one track, which is a different\n// geometry answering a different question, and the two should not be read\n// across.\n//\n// Apart from any component so a chip in a group and a chip on its own cannot\n// drift; see `src/row` for the same arrangement around a list's row.\n\nconst chipStyles = {\n  base: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"xig8zya\",\n    kaIpWk: \"x1xdvaa9\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"x126z3so\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    k8WAf4: \"xt970qd\",\n    kg3NbH: \"x790zyz\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x1eaenvl\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  disabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  disabledSelected: {\n    kWkggS: \"xepofeg\",\n    $$css: true\n  },\n  disabledUnselected: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3\",\n    $$css: true\n  },\n  glyph: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"xmix8c7\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kGuDYH: \"xosj86m\",\n    kzqmXN: \"x1xp8n7a\",\n    kjj79g: \"xl56j7k\",\n    keTefX: \"xxuhe3a\",\n    $$css: true\n  },\n  glyphSvg: {\n    kZKoxP: \"x5yr21d\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  remove: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xy3r1oc x15a1ka xjbqb8w\",\n    kZKoxP: \"xmix8c7\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x1xp8n7a\",\n    kjj79g: \"xl56j7k\",\n    k71WvV: \"x1kfc2zf\",\n    kjBf7l: \"x14ytart\",\n    kInvED: \"x1y3gkto\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  removeGlyph: {\n    kZKoxP: \"xmix8c7\",\n    kzqmXN: \"x1xp8n7a\",\n    $$css: true\n  },\n  selected: {\n    kWkggS: \"xnqsvhv xlizrex x15dekr4\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"x83qkoq x1p2om7n xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  }\n};\nexport { chipStyles };"],"mappings":";AA8CA,MAAMQ,aAAa;CACjBC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRC,QAAQ;EACRhB,QAAQ;EACRc,OAAO;CACT;CACAG,kBAAkB;EAChBC,QAAQ;EACRJ,OAAO;CACT;CACAK,oBAAoB;EAClBD,QAAQ;EACRE,QAAQ;EACRN,OAAO;CACT;CACAO,OAAO;EACL3B,QAAQ;EACRC,QAAQ;EACRM,QAAQ;EACRC,OAAO;EACPE,QAAQ;EACRkB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRV,OAAO;CACT;CACAW,UAAU;EACR9B,QAAQ;EACR2B,QAAQ;EACRR,OAAO;CACT;CACAY,QAAQ;EACNhC,QAAQ;EACRwB,QAAQ;EACRvB,QAAQ;EACRC,QAAQ;EACRE,QAAQ;EACRC,QAAQ;EACRiB,QAAQ;EACRhB,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPoB,QAAQ;EACRC,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRlB,OAAO;CACT;CACAmB,aAAa;EACXtC,QAAQ;EACR2B,QAAQ;EACRR,OAAO;CACT;CACAoB,UAAU;EACRhB,QAAQ;EACRE,QAAQ;EACRJ,QAAQ;EACRF,OAAO;CACT;CACAqB,YAAY;EACVjB,QAAQ;EACRE,QAAQ;EACRJ,QAAQ;EACRF,OAAO;CACT;AACF"}
+{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","sizing","spacing","stateLayerOpacity","typography","chipStyles","base","k6CgDc","kGNEyG","kZKoxP","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","ks0D6T","k8WAf4","kg3NbH","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","kMwMTN","disabledSelected","kWkggS","disabledUnselected","kVAM5u","glyph","kzqmXN","kjj79g","keTefX","glyphSvg","label","kVQacm","kg5iWk","khDVqt","remove","k71WvV","kjBf7l","kInvED","k3XXqK","kMeerF","kmVPX3","removeGlyph","selected","unselected"],"sources":["../../src/chip/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The pill the chips page draws, shared by the three components that draw\n// one: Chip, which is a toggle on its own; ChipGroup's chip, which is one of\n// a set that can also be removed; and TokenField's token, which takes `base`\n// and `unselected` alone — a token is not selectable, so it reaches for\n// neither the selected container nor the check below. The measurements and\n// roles are the page's filter chip — a 32dp container with an 8dp corner and\n// 16dp of inline padding, an outline variant border while unselected, the\n// secondary container pair once selected.\n//\n// **A label with no room on one line is cut short, never wrapped.** The\n// container is a fixed 32dp, so a second line has nowhere to go but out of\n// the pill: a chip or a token in a room narrower than its label drew the\n// rest below its own edge, and a chip in a group's row ran past the row's\n// end instead. The pill is held to the room it is in, and the label sits in\n// a span of its own that ends in an ellipsis where the pill does — a span,\n// because a flex container ignores `text-overflow`, which is also why\n// Material's own chips carry one. The whole label stays in the DOM, so a\n// screen reader still reads all of it.\n//\n// Each state composites an on-colour over its own container at the\n// interaction state's opacity rather than swapping in a separate hover\n// colour. `calc(<opacity> * 100%)` turns the token's unitless 0-1 ratio into\n// the percentage `color-mix()` takes, and it is inlined at each property\n// because @stylexjs/babel-plugin only statically recognises expressions\n// written directly as property values.\n//\n// The selected chip drops its border rather than recolouring it: it has a\n// container of its own to define its edge, and a border on top of that reads\n// as a second, competing outline.\n//\n// Disabled is applied from render state rather than from `:disabled`. Chip is\n// a button and would match the pseudo-class; a chip in a group is React\n// Aria's `Tag`, which is a div and never will. One mechanism serves both, and\n// StyleX replaces a property whole, so the disabled styles take the hover and\n// pressed branches of whichever state they are applied over.\n//\n// A selected chip carries the page's check before its label, which is what\n// makes the selection legible without colour. The two containers differ in\n// colour alone, and under a scheme whose secondary container sits close to\n// the surface — or for a reader who does not see colour — that is no\n// difference at all.\n//\n// The chip widens when the check appears, and that is the page's behaviour\n// rather than a cost of drawing it: a chip is flow content, laid out in a\n// row that wraps, so nothing around it has a width to hold. A segmented\n// button's segments are equal columns of one track, which is a different\n// geometry answering a different question, and the two should not be read\n// across.\n//\n// Apart from any component so a chip in a group and a chip on its own cannot\n// drift; see `src/row` for the same arrangement around a list's row.\n\nconst chipStyles = {\n  base: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"xig8zya\",\n    kaIpWk: \"x1xdvaa9\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"x126z3so\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    ks0D6T: \"x193iq5w\",\n    k8WAf4: \"xt970qd\",\n    kg3NbH: \"x790zyz\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x1eaenvl\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  disabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  disabledSelected: {\n    kWkggS: \"xepofeg\",\n    $$css: true\n  },\n  disabledUnselected: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3\",\n    $$css: true\n  },\n  glyph: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"xmix8c7\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kGuDYH: \"xosj86m\",\n    kzqmXN: \"x1xp8n7a\",\n    kjj79g: \"xl56j7k\",\n    keTefX: \"xxuhe3a\",\n    $$css: true\n  },\n  glyphSvg: {\n    kZKoxP: \"x5yr21d\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  label: {\n    kB7OPa: \"x9f619\",\n    kVQacm: \"xb3r6kr\",\n    kg5iWk: \"xlyipyv\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  remove: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xy3r1oc x15a1ka xjbqb8w\",\n    kZKoxP: \"xmix8c7\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x1xp8n7a\",\n    kjj79g: \"xl56j7k\",\n    k71WvV: \"x1kfc2zf\",\n    kjBf7l: \"x14ytart\",\n    kInvED: \"x1y3gkto\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  removeGlyph: {\n    kZKoxP: \"xmix8c7\",\n    kzqmXN: \"x1xp8n7a\",\n    $$css: true\n  },\n  selected: {\n    kWkggS: \"xnqsvhv xlizrex x15dekr4\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"x83qkoq x1p2om7n xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  }\n};\nexport { chipStyles };"],"mappings":";AAwDA,MAAMQ,aAAa;CACjBC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRC,QAAQ;EACRjB,QAAQ;EACRe,OAAO;CACT;CACAG,kBAAkB;EAChBC,QAAQ;EACRJ,OAAO;CACT;CACAK,oBAAoB;EAClBD,QAAQ;EACRE,QAAQ;EACRN,OAAO;CACT;CACAO,OAAO;EACL5B,QAAQ;EACRC,QAAQ;EACRM,QAAQ;EACRC,OAAO;EACPE,QAAQ;EACRmB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRV,OAAO;CACT;CACAW,UAAU;EACR/B,QAAQ;EACR4B,QAAQ;EACRR,OAAO;CACT;CACAY,OAAO;EACL5B,QAAQ;EACR6B,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRf,OAAO;CACT;CACAgB,QAAQ;EACNrC,QAAQ;EACRyB,QAAQ;EACRxB,QAAQ;EACRC,QAAQ;EACRE,QAAQ;EACRC,QAAQ;EACRkB,QAAQ;EACRjB,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPqB,QAAQ;EACRC,QAAQ;EACRQ,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRtB,OAAO;CACT;CACAuB,aAAa;EACX3C,QAAQ;EACR4B,QAAQ;EACRR,OAAO;CACT;CACAwB,UAAU;EACRpB,QAAQ;EACRE,QAAQ;EACRJ,QAAQ;EACRF,OAAO;CACT;CACAyB,YAAY;EACVrB,QAAQ;EACRE,QAAQ;EACRJ,QAAQ;EACRF,OAAO;CACT;AACF"}

package/dist/components/chip/index.js

@@ -3,7 +3,7 @@ import { mergeStatefulStyles } from "../../styles/merge.js";
 import { ariaAttributesOf, toggleButtonRenderer } from "../../render/aria.js";
 import { focus } from "../../styles/focus.js";
 import { chipStyles } from "../../chip/styles.js";
-import { chipGlyph } from "../../chip/index.js";
+import { chipGlyph, chipLabel } from "../../chip/index.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ToggleButton } from "react-aria-components";
@@ -70,7 +70,7 @@ function Chip(t0) {
 	return t5;
 }
 function chipContent(children) {
-	return (state) => /* @__PURE__ */ jsxs(Fragment, { children: [chipGlyph(state.isSelected), children] });
+	return (state) => /* @__PURE__ */ jsxs(Fragment, { children: [chipGlyph(state.isSelected), chipLabel(children)] });
 }
 function propsFor(state) {
 	return props(chipStyles.base, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ToggleButtonProps","RACToggleButtonProps","ToggleButtonRenderProps","stylex","ToggleButton","chipGlyph","chipStyles","ariaAttributesOf","toggleButtonRenderer","focus","mergeStatefulStyles","ChipProps","Omit","children","Chip","t0","$","_c","T0","t1","t2","t3","t4","onKeyDown","onKeyUp","render","props","element","aria","propsFor","chipContent","t5","state","isSelected","base","ring","selected","unselected","isDisabled","disabled","disabledSelected","disabledUnselected"],"sources":["../../../src/components/chip/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ToggleButtonProps as RACToggleButtonProps, ToggleButtonRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ToggleButton } from 'react-aria-components';\nimport { chipGlyph } from '../../chip';\nimport { chipStyles } from '../../chip/styles';\nimport { ariaAttributesOf, toggleButtonRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The pill, its two containers, its check and its disabled treatment are the\n// chip module's in `src/chip`, shared with the chips a ChipGroup draws; what\n// is here is React Aria's `ToggleButton` around them, which is what makes a\n// standalone chip a two-state button rather than one of a set.\n//\n// Two of the call site's props go on the element through `src/render/aria`\n// rather than through that spread, as `Button` and `IconButton` do. React\n// Aria builds a button's attributes from an allowlist that holds only the\n// labelling `aria-*` and the state it manages itself, so any other one — a\n// shortcut, an owned element — is dropped before it reaches the DOM. And it\n// wraps a keyboard handler it is given so that the event stops there unless\n// the handler asks otherwise, which is its convention rather than the DOM's;\n// on the element the handler bubbles, so an Escape pressed on a chip inside\n// a dialog still reaches the dialog.\n\ntype ChipProps = Omit<RACToggleButtonProps, 'children'> & {\n  /**\n   * The chip's label. A node rather than React Aria's node-or-function,\n   * since the chip puts its own check before whatever this is and a function\n   * would be handed a `defaultChildren` the chip never rendered. ChipGroup's\n   * chip narrows it the same way, for the same reason.\n   */\n  children?: ReactNode;\n};\n\n/**\n * A chip is a two-state button, so its selected state is React Aria's\n * `isSelected`: pass it with `onChange` to control it, or `defaultSelected` to\n * let it keep its own state. Selection is announced through `aria-pressed`\n * rather than a role of its own.\n */\nfunction Chip({\n  children,\n  onKeyDown,\n  onKeyUp,\n  render,\n  ...props\n}: ChipProps) {\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n  return <ToggleButton render={toggleButtonRenderer(element, render)} {...props} {...mergeStatefulStyles(propsFor, props)}>\n      {chipContent(children)}\n    </ToggleButton>;\n}\n\n// What the chip draws, from React Aria's render state: the check while it is\n// selected, then the label. Built by a call rather than written inline at\n// the prop, which is what react-perf's no-new-function-as-prop is after; the\n// React Compiler memoises the result on its input.\nfunction chipContent(children: ReactNode) {\n  return (state: ToggleButtonRenderProps) => <>\n      {chipGlyph(state.isSelected)}\n      {children}\n    </>;\n}\n\n// StyleX has no way to target [data-selected] on the element it is styling,\n// so the selected styles cannot be chosen in CSS. React Aria's answer is to\n// let className and style be functions of the component's own render state,\n// which is what this is — and it is why an uncontrolled chip styles itself\n// correctly without this component keeping a copy of the state.\n//\n// mergeStatefulStyles takes the function rather than a computed result for\n// exactly that reason, and combines it with whatever the call site passed.\nfunction propsFor(state: ToggleButtonRenderProps) {\n  return stylex.props(chipStyles.base, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));\n}\nexport type { ChipProps };\nexport default Chip;"],"mappings":";;;;;;;;;;;;;;;;AAyCA,SAAAe,KAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAL;CAAA,IAAAM;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAc,MAAA,EAAAF,UAAAS,IAAAC,WAAAC,SAAAC,QAAA,GAAAC,UAAAX;EAAAF,WAAAS;EAOZ,MAAAK,UAAgB;GAAAC,MACRrB,iBAAiBmB,KAAK;GAACH;GAAAC;EAG/B;EACQN,KAAAd;EAAqBe,KAAAX,qBAAqBmB,SAASF,MAAM;EAAOC,KAAAA;EAAWL,KAAAX,oBAAoBmB,UAAUH,KAAK;EAACV,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAH;EAAAG,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAH,KAAAF,EAAA;EAAAH,WAAAG,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAH,UAAA;EAClHS,KAAAQ,YAAYjB,QAAQ;EAACG,EAAA,KAAAH;EAAAG,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,OAAAE,MAAAF,EAAA,OAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,MAAAL,EAAA,QAAAM,IAAA;EADnBS,KAAA,oBAAC,IAAD;GAAsB,QAAAZ;GAAqC,GAAMO;GAAK,GAAML;GAC9EC,UAAAA;EADe,CAAA;EAEHN,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,OAFVe;AAEU;AAOnB,SAASD,YAAYjB,UAAqB;CACxC,QAAQmB,UAAmC,qBAAA,UAAA,EAAA,UAAA,CACtC3B,UAAU2B,MAAMC,UAAU,GAC1BpB,QACH,EAAA,CAAA;AACJ;AAUA,SAASgB,SAASG,OAAgC;CAChD,OAAO7B,MAAaG,WAAW4B,MAAMzB,MAAM0B,MAAMH,MAAMC,aAAa3B,WAAW8B,WAAW9B,WAAW+B,YAAYL,MAAMM,cAAchC,WAAWiC,UAAUP,MAAMM,eAAeN,MAAMC,aAAa3B,WAAWkC,mBAAmBlC,WAAWmC,mBAAmB;AAChQ"}
+{"version":3,"file":"index.js","names":["ReactNode","ToggleButtonProps","RACToggleButtonProps","ToggleButtonRenderProps","stylex","ToggleButton","chipGlyph","chipLabel","chipStyles","ariaAttributesOf","toggleButtonRenderer","focus","mergeStatefulStyles","ChipProps","Omit","children","Chip","t0","$","_c","T0","t1","t2","t3","t4","onKeyDown","onKeyUp","render","props","element","aria","propsFor","chipContent","t5","state","isSelected","base","ring","selected","unselected","isDisabled","disabled","disabledSelected","disabledUnselected"],"sources":["../../../src/components/chip/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ToggleButtonProps as RACToggleButtonProps, ToggleButtonRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ToggleButton } from 'react-aria-components';\nimport { chipGlyph, chipLabel } from '../../chip';\nimport { chipStyles } from '../../chip/styles';\nimport { ariaAttributesOf, toggleButtonRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The pill, its two containers, its check and its disabled treatment are the\n// chip module's in `src/chip`, shared with the chips a ChipGroup draws; what\n// is here is React Aria's `ToggleButton` around them, which is what makes a\n// standalone chip a two-state button rather than one of a set.\n//\n// Two of the call site's props go on the element through `src/render/aria`\n// rather than through that spread, as `Button` and `IconButton` do. React\n// Aria builds a button's attributes from an allowlist that holds only the\n// labelling `aria-*` and the state it manages itself, so any other one — a\n// shortcut, an owned element — is dropped before it reaches the DOM. And it\n// wraps a keyboard handler it is given so that the event stops there unless\n// the handler asks otherwise, which is its convention rather than the DOM's;\n// on the element the handler bubbles, so an Escape pressed on a chip inside\n// a dialog still reaches the dialog.\n\ntype ChipProps = Omit<RACToggleButtonProps, 'children'> & {\n  /**\n   * The chip's label. A node rather than React Aria's node-or-function,\n   * since the chip puts its own check before whatever this is and a function\n   * would be handed a `defaultChildren` the chip never rendered. ChipGroup's\n   * chip narrows it the same way, for the same reason.\n   */\n  children?: ReactNode;\n};\n\n/**\n * A chip is a two-state button, so its selected state is React Aria's\n * `isSelected`: pass it with `onChange` to control it, or `defaultSelected` to\n * let it keep its own state. Selection is announced through `aria-pressed`\n * rather than a role of its own.\n */\nfunction Chip({\n  children,\n  onKeyDown,\n  onKeyUp,\n  render,\n  ...props\n}: ChipProps) {\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n  return <ToggleButton render={toggleButtonRenderer(element, render)} {...props} {...mergeStatefulStyles(propsFor, props)}>\n      {chipContent(children)}\n    </ToggleButton>;\n}\n\n// What the chip draws, from React Aria's render state: the check while it is\n// selected, then the label. Built by a call rather than written inline at\n// the prop, which is what react-perf's no-new-function-as-prop is after; the\n// React Compiler memoises the result on its input.\nfunction chipContent(children: ReactNode) {\n  return (state: ToggleButtonRenderProps) => <>\n      {chipGlyph(state.isSelected)}\n      {chipLabel(children)}\n    </>;\n}\n\n// StyleX has no way to target [data-selected] on the element it is styling,\n// so the selected styles cannot be chosen in CSS. React Aria's answer is to\n// let className and style be functions of the component's own render state,\n// which is what this is — and it is why an uncontrolled chip styles itself\n// correctly without this component keeping a copy of the state.\n//\n// mergeStatefulStyles takes the function rather than a computed result for\n// exactly that reason, and combines it with whatever the call site passed.\nfunction propsFor(state: ToggleButtonRenderProps) {\n  return stylex.props(chipStyles.base, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));\n}\nexport type { ChipProps };\nexport default Chip;"],"mappings":";;;;;;;;;;;;;;;;AAyCA,SAAAgB,KAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAL;CAAA,IAAAM;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAc,MAAA,EAAAF,UAAAS,IAAAC,WAAAC,SAAAC,QAAA,GAAAC,UAAAX;EAAAF,WAAAS;EAOZ,MAAAK,UAAgB;GAAAC,MACRrB,iBAAiBmB,KAAK;GAACH;GAAAC;EAG/B;EACQN,KAAAf;EAAqBgB,KAAAX,qBAAqBmB,SAASF,MAAM;EAAOC,KAAAA;EAAWL,KAAAX,oBAAoBmB,UAAUH,KAAK;EAACV,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAH;EAAAG,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAH,KAAAF,EAAA;EAAAH,WAAAG,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAH,UAAA;EAClHS,KAAAQ,YAAYjB,QAAQ;EAACG,EAAA,KAAAH;EAAAG,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,OAAAE,MAAAF,EAAA,OAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,MAAAL,EAAA,QAAAM,IAAA;EADnBS,KAAA,oBAAC,IAAD;GAAsB,QAAAZ;GAAqC,GAAMO;GAAK,GAAML;GAC9EC,UAAAA;EADe,CAAA;EAEHN,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,OAFVe;AAEU;AAOnB,SAASD,YAAYjB,UAAqB;CACxC,QAAQmB,UAAmC,qBAAA,UAAA,EAAA,UAAA,CACtC5B,UAAU4B,MAAMC,UAAU,GAC1B5B,UAAUQ,QAAQ,CACrB,EAAA,CAAA;AACJ;AAUA,SAASgB,SAASG,OAAgC;CAChD,OAAO9B,MAAaI,WAAW4B,MAAMzB,MAAM0B,MAAMH,MAAMC,aAAa3B,WAAW8B,WAAW9B,WAAW+B,YAAYL,MAAMM,cAAchC,WAAWiC,UAAUP,MAAMM,eAAeN,MAAMC,aAAa3B,WAAWkC,mBAAmBlC,WAAWmC,mBAAmB;AAChQ"}

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

@@ -6,7 +6,7 @@ import { invalidFrom } from "../../field/root.js";
 import { groupStyles } from "../../field/styles.js";
 import { FieldLabel, FieldMessage } from "../../field/index.js";
 import { chipStyles } from "../../chip/styles.js";
-import { chipGlyph } from "../../chip/index.js";
+import { chipGlyph, chipLabel } from "../../chip/index.js";
 import { c } from "react/compiler-runtime";
 import { createContext, useContext } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -15,7 +15,7 @@ import { Button, Tag, TagGroup, TagList } from "react-aria-components";
 function chipContent(children, removeLabel) {
 	return (state) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		chipGlyph(state.isSelected),
-		children,
+		chipLabel(children),
 		state.allowsRemoving ? /* @__PURE__ */ jsx(Button, {
 			"aria-label": removeLabel,
 			slot: "remove",

package/dist/components/chip-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","TagGroupProps","RACTagGroupProps","TagListProps","RACTagListProps","TagProps","RACTagProps","TagRenderProps","stylex","createContext","useContext","Button","RACButton","Tag","RACTag","TagGroup","RACTagGroup","TagList","RACTagList","chipGlyph","chipStyles","FieldLabel","FieldMessage","invalidFrom","groupStyles","CloseGlyph","focus","mergeStatefulStyles","mergeStyles","spacing","ChipGroupChipProps","Omit","children","className","style","ChipGroupProps","description","error","label","removeLabel","Pick","T","chipContent","state","isSelected","allowsRemoving","props","remove","removeGlyph","RemoveLabelContext","LABEL_STATE_VALID","isInvalid","LABEL_STATE_INVALID","ChipGroup","t0","$","_c","T0","invalid","items","renderEmptyState","t1","t2","t3","t4","t5","t6","t7","t8","t9","undefined","root","ChipGroupChip","textValue","textOf","chipPropsFor","base","ring","selected","unselected","isDisabled","disabled","disabledSelected","disabledUnselected","Chip"],"sources":["../../../src/components/chip-group/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TagGroupProps as RACTagGroupProps, TagListProps as RACTagListProps, TagProps as RACTagProps, TagRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { Button as RACButton, Tag as RACTag, TagGroup as RACTagGroup, TagList as RACTagList } from 'react-aria-components';\nimport { chipGlyph } from '../../chip';\nimport { chipStyles } from '../../chip/styles';\nimport { FieldLabel, FieldMessage } from '../../field';\nimport { invalidFrom } from '../../field/root';\nimport { groupStyles } from '../../field/styles';\nimport { CloseGlyph } from '../../glyphs';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { spacing } from '../../tokens/design.tokens.stylex';\n\n// The chips page's filter and input chips as a set: one or more chosen from a\n// row, each one removable. The pill is the chip module's in `src/chip`,\n// shared with the standalone Chip, so the two cannot drift; what is here is\n// the group around them.\n//\n// Three things it adds over a row of Chips.\n//\n// **It is a group, not a row of buttons.** React Aria's `TagGroup` names the\n// set, describes it, reports it invalid as a whole, and moves between its\n// chips with the arrow keys rather than making each one a tab stop — which\n// is what a set of a dozen filters needs. The label, the supporting line and\n// the error are the field chrome's, so a group reads like the fields beside\n// it, exactly as CheckboxGroup and RadioGroup do.\n//\n// **A chip can be removed.** Give the group `onRemove` and each chip draws\n// the page's trailing close target, an 18dp glyph in a target of its own so a\n// press there removes rather than toggles. Backspace and Delete remove the\n// focused chip too, which is React Aria's. A chosen chip's check sits at the\n// other end, so a chip that is both selected and removable carries one glyph\n// on each side of its label.\n//\n// **Selection is the group's, not each chip's.** `selectionMode` and\n// `selectedKeys` live on the group, so a set that chooses one of its chips\n// and a set that chooses several are the same component with a different\n// word. A chip on its own that toggles nothing else is still Chip.\n//\n// One thing is worth knowing about how this maps onto React Aria. A chip's\n// text value is read off its children and found only when they are a plain\n// string, and a chip here is always an element — the label sits beside a\n// close target. So a plain-string label is passed through as the text value,\n// which is what typeahead and a screen reader's announcement are made of;\n// see ListBox.Item, where the same thing bit.\n\ntype ChipGroupChipProps = Omit<RACTagProps, 'children' | 'className' | 'style'> & {\n  /** The chip's label. */\n  children?: ReactNode;\n  /** A function may compute the class from the chip's render state. */\n  className?: RACTagProps['className'];\n  /** A function may compute the style from the chip's render state. */\n  style?: RACTagProps['style'];\n};\ntype ChipGroupProps<T extends object = object> = {\n  /** The chips, each with an `id` of its own. */\n  children?: ReactNode;\n  /**\n   * A hint under the group. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current selection, in words. Its presence is what\n   * puts the group in its error state — the message and `aria-invalid` 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   * What the group is for. Required rather than optional: a set of chips\n   * with no name is a row a screen reader cannot introduce.\n   */\n  label: string;\n  /**\n   * What the close target on each chip is called, for a screen reader. React\n   * Aria adds the chip's own label after it, so this is the verb rather than\n   * the whole phrase — \"Remove\" becomes \"Remove First item\".\n   * @default 'Remove'\n   */\n  removeLabel?: string;\n} & Omit<RACTagGroupProps, 'children'> & Pick<RACTagListProps<T>, 'items' | 'renderEmptyState'>;\n\n// What the chip draws, from React Aria's render state. Built by a call rather\n// than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result on\n// its inputs.\n//\n// The check is the chip module's, so a chip in a group and a chip on its own\n// draw the same one. The close target is drawn only where the group allows\n// removing, which React Aria reports rather than the call site saying so on\n// every chip.\nfunction chipContent(children: ReactNode, removeLabel: string) {\n  return (state: TagRenderProps) => <>\n      {chipGlyph(state.isSelected)}\n      {children}\n      {state.allowsRemoving ? <RACButton aria-label={removeLabel} slot=\"remove\" {...stylex.props(chipStyles.remove)}>\n          <CloseGlyph {...stylex.props(chipStyles.removeGlyph)} />\n        </RACButton> : null}\n    </>;\n}\n\n/**\n * A labelled set of chips, one or more of which can be chosen, each of which\n * can be removed. Selection is React Aria's: set `selectionMode` to `single`\n * or `multiple` and pass `selectedKeys` with `onSelectionChange` to control\n * it, or `defaultSelectedKeys` to let it keep its own.\n *\n * ```tsx\n * <ChipGroup label=\"Label\" selectionMode=\"multiple\" onRemove={remove}>\n *   <ChipGroup.Chip id=\"first\">First item</ChipGroup.Chip>\n * </ChipGroup>\n * ```\n *\n * Give the group `onRemove` and each chip draws a close target. The arrow\n * keys move between chips, so a set of many is one tab stop rather than many.\n *\n * A chip that toggles nothing else is Chip; this is for a set that shares a\n * value.\n *\n * The call site's `className` and `style` land on the group as a whole,\n * which is the element a layout positions.\n */\n// What each chip calls its close target. A context rather than a prop on the\n// chip, since it is the group's decision and repeating it on every chip is\n// how the two drift.\nconst RemoveLabelContext = createContext('Remove');\n\n// Hoisted so neither is a new object on every render.\nconst LABEL_STATE_VALID = {\n  isInvalid: false\n};\nconst LABEL_STATE_INVALID = {\n  isInvalid: true\n};\nfunction ChipGroup<T extends object = object>({\n  children,\n  description,\n  error,\n  items,\n  label,\n  removeLabel = 'Remove',\n  renderEmptyState,\n  ...props\n}: ChipGroupProps<T>) {\n  const invalid = invalidFrom(error);\n  return <RACTagGroup {...props} {...mergeStyles(stylex.props(groupStyles.root), props)}>\n      {/* React Aria's tag group has no disabled state of its own — a chip is\n          disabled through the group's `disabledKeys` — so the label follows\n          validity alone. */}\n      <FieldLabel state={invalid ? LABEL_STATE_INVALID : LABEL_STATE_VALID} variant=\"group\">\n        {label}\n      </FieldLabel>\n      <RemoveLabelContext value={removeLabel}>\n        <RACTagList<T> items={items} renderEmptyState={renderEmptyState} className=\"x9f619 x78zum5 x1a02dak x126z3so x1t137rt\">\n          {children}\n        </RACTagList>\n      </RemoveLabelContext>\n      <FieldMessage description={description} error={error} inset={false} />\n    </RACTagGroup>;\n}\n\n/**\n * One chip. Give every chip an `id` — that is the key selection and removal\n * are reported by.\n */\nfunction ChipGroupChip({\n  children,\n  ...props\n}: ChipGroupChipProps) {\n  const removeLabel = useContext(RemoveLabelContext);\n  return <RACTag textValue={props.textValue ?? textOf(children)} {...props} {...mergeStatefulStyles(chipPropsFor, props)}>\n      {chipContent(children, removeLabel)}\n    </RACTag>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// chip's state comes from the render state React Aria hands its className.\n// Disabled is applied last so it wins over both containers, and StyleX\n// replaces a property whole, so it takes their hover branches with it.\nfunction chipPropsFor(state: TagRenderProps) {\n  return stylex.props(chipStyles.base, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));\n}\n\n// What the chip is worth as text, for the typeahead React Aria drives from a\n// chip's words and for what a screen reader announces. It reads it off the\n// children when they are a string and finds nothing when they are not — and a\n// chip here is always an element once it can be removed. So a plain-string\n// label becomes the text value, and anything else has to say what it is worth\n// through `textValue`.\nfunction textOf(children: ReactNode) {\n  return typeof children === 'string' ? children : undefined;\n}\nChipGroup.Chip = ChipGroupChip;\nexport type { ChipGroupChipProps, ChipGroupProps };\nexport default ChipGroup;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","TagGroupProps","RACTagGroupProps","TagListProps","RACTagListProps","TagProps","RACTagProps","TagRenderProps","stylex","createContext","useContext","Button","RACButton","Tag","RACTag","TagGroup","RACTagGroup","TagList","RACTagList","chipGlyph","chipLabel","chipStyles","FieldLabel","FieldMessage","invalidFrom","groupStyles","CloseGlyph","focus","mergeStatefulStyles","mergeStyles","spacing","ChipGroupChipProps","Omit","children","className","style","ChipGroupProps","description","error","label","removeLabel","Pick","T","chipContent","state","isSelected","allowsRemoving","props","remove","removeGlyph","RemoveLabelContext","LABEL_STATE_VALID","isInvalid","LABEL_STATE_INVALID","ChipGroup","t0","$","_c","T0","invalid","items","renderEmptyState","t1","t2","t3","t4","t5","t6","t7","t8","t9","undefined","root","ChipGroupChip","textValue","textOf","chipPropsFor","base","ring","selected","unselected","isDisabled","disabled","disabledSelected","disabledUnselected","Chip"],"sources":["../../../src/components/chip-group/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TagGroupProps as RACTagGroupProps, TagListProps as RACTagListProps, TagProps as RACTagProps, TagRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { Button as RACButton, Tag as RACTag, TagGroup as RACTagGroup, TagList as RACTagList } from 'react-aria-components';\nimport { chipGlyph, chipLabel } from '../../chip';\nimport { chipStyles } from '../../chip/styles';\nimport { FieldLabel, FieldMessage } from '../../field';\nimport { invalidFrom } from '../../field/root';\nimport { groupStyles } from '../../field/styles';\nimport { CloseGlyph } from '../../glyphs';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { spacing } from '../../tokens/design.tokens.stylex';\n\n// The chips page's filter and input chips as a set: one or more chosen from a\n// row, each one removable. The pill is the chip module's in `src/chip`,\n// shared with the standalone Chip, so the two cannot drift; what is here is\n// the group around them.\n//\n// Three things it adds over a row of Chips.\n//\n// **It is a group, not a row of buttons.** React Aria's `TagGroup` names the\n// set, describes it, reports it invalid as a whole, and moves between its\n// chips with the arrow keys rather than making each one a tab stop — which\n// is what a set of a dozen filters needs. The label, the supporting line and\n// the error are the field chrome's, so a group reads like the fields beside\n// it, exactly as CheckboxGroup and RadioGroup do.\n//\n// **A chip can be removed.** Give the group `onRemove` and each chip draws\n// the page's trailing close target, an 18dp glyph in a target of its own so a\n// press there removes rather than toggles. Backspace and Delete remove the\n// focused chip too, which is React Aria's. A chosen chip's check sits at the\n// other end, so a chip that is both selected and removable carries one glyph\n// on each side of its label.\n//\n// **Selection is the group's, not each chip's.** `selectionMode` and\n// `selectedKeys` live on the group, so a set that chooses one of its chips\n// and a set that chooses several are the same component with a different\n// word. A chip on its own that toggles nothing else is still Chip.\n//\n// One thing is worth knowing about how this maps onto React Aria. A chip's\n// text value is read off its children and found only when they are a plain\n// string, and a chip here is always an element — the label sits beside a\n// close target. So a plain-string label is passed through as the text value,\n// which is what typeahead and a screen reader's announcement are made of;\n// see ListBox.Item, where the same thing bit.\n\ntype ChipGroupChipProps = Omit<RACTagProps, 'children' | 'className' | 'style'> & {\n  /** The chip's label. */\n  children?: ReactNode;\n  /** A function may compute the class from the chip's render state. */\n  className?: RACTagProps['className'];\n  /** A function may compute the style from the chip's render state. */\n  style?: RACTagProps['style'];\n};\ntype ChipGroupProps<T extends object = object> = {\n  /** The chips, each with an `id` of its own. */\n  children?: ReactNode;\n  /**\n   * A hint under the group. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current selection, in words. Its presence is what\n   * puts the group in its error state — the message and `aria-invalid` 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   * What the group is for. Required rather than optional: a set of chips\n   * with no name is a row a screen reader cannot introduce.\n   */\n  label: string;\n  /**\n   * What the close target on each chip is called, for a screen reader. React\n   * Aria adds the chip's own label after it, so this is the verb rather than\n   * the whole phrase — \"Remove\" becomes \"Remove First item\".\n   * @default 'Remove'\n   */\n  removeLabel?: string;\n} & Omit<RACTagGroupProps, 'children'> & Pick<RACTagListProps<T>, 'items' | 'renderEmptyState'>;\n\n// What the chip draws, from React Aria's render state. Built by a call rather\n// than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result on\n// its inputs.\n//\n// The check is the chip module's, so a chip in a group and a chip on its own\n// draw the same one. The close target is drawn only where the group allows\n// removing, which React Aria reports rather than the call site saying so on\n// every chip.\nfunction chipContent(children: ReactNode, removeLabel: string) {\n  return (state: TagRenderProps) => <>\n      {chipGlyph(state.isSelected)}\n      {chipLabel(children)}\n      {state.allowsRemoving ? <RACButton aria-label={removeLabel} slot=\"remove\" {...stylex.props(chipStyles.remove)}>\n          <CloseGlyph {...stylex.props(chipStyles.removeGlyph)} />\n        </RACButton> : null}\n    </>;\n}\n\n/**\n * A labelled set of chips, one or more of which can be chosen, each of which\n * can be removed. Selection is React Aria's: set `selectionMode` to `single`\n * or `multiple` and pass `selectedKeys` with `onSelectionChange` to control\n * it, or `defaultSelectedKeys` to let it keep its own.\n *\n * ```tsx\n * <ChipGroup label=\"Label\" selectionMode=\"multiple\" onRemove={remove}>\n *   <ChipGroup.Chip id=\"first\">First item</ChipGroup.Chip>\n * </ChipGroup>\n * ```\n *\n * Give the group `onRemove` and each chip draws a close target. The arrow\n * keys move between chips, so a set of many is one tab stop rather than many.\n *\n * A chip that toggles nothing else is Chip; this is for a set that shares a\n * value.\n *\n * The call site's `className` and `style` land on the group as a whole,\n * which is the element a layout positions.\n */\n// What each chip calls its close target. A context rather than a prop on the\n// chip, since it is the group's decision and repeating it on every chip is\n// how the two drift.\nconst RemoveLabelContext = createContext('Remove');\n\n// Hoisted so neither is a new object on every render.\nconst LABEL_STATE_VALID = {\n  isInvalid: false\n};\nconst LABEL_STATE_INVALID = {\n  isInvalid: true\n};\nfunction ChipGroup<T extends object = object>({\n  children,\n  description,\n  error,\n  items,\n  label,\n  removeLabel = 'Remove',\n  renderEmptyState,\n  ...props\n}: ChipGroupProps<T>) {\n  const invalid = invalidFrom(error);\n  return <RACTagGroup {...props} {...mergeStyles(stylex.props(groupStyles.root), props)}>\n      {/* React Aria's tag group has no disabled state of its own — a chip is\n          disabled through the group's `disabledKeys` — so the label follows\n          validity alone. */}\n      <FieldLabel state={invalid ? LABEL_STATE_INVALID : LABEL_STATE_VALID} variant=\"group\">\n        {label}\n      </FieldLabel>\n      <RemoveLabelContext value={removeLabel}>\n        <RACTagList<T> items={items} renderEmptyState={renderEmptyState} className=\"x9f619 x78zum5 x1a02dak x126z3so x1t137rt\">\n          {children}\n        </RACTagList>\n      </RemoveLabelContext>\n      <FieldMessage description={description} error={error} inset={false} />\n    </RACTagGroup>;\n}\n\n/**\n * One chip. Give every chip an `id` — that is the key selection and removal\n * are reported by.\n */\nfunction ChipGroupChip({\n  children,\n  ...props\n}: ChipGroupChipProps) {\n  const removeLabel = useContext(RemoveLabelContext);\n  return <RACTag textValue={props.textValue ?? textOf(children)} {...props} {...mergeStatefulStyles(chipPropsFor, props)}>\n      {chipContent(children, removeLabel)}\n    </RACTag>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// chip's state comes from the render state React Aria hands its className.\n// Disabled is applied last so it wins over both containers, and StyleX\n// replaces a property whole, so it takes their hover branches with it.\nfunction chipPropsFor(state: TagRenderProps) {\n  return stylex.props(chipStyles.base, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));\n}\n\n// What the chip is worth as text, for the typeahead React Aria drives from a\n// chip's words and for what a screen reader announces. It reads it off the\n// children when they are a string and finds nothing when they are not — and a\n// chip here is always an element once it can be removed. So a plain-string\n// label becomes the text value, and anything else has to say what it is worth\n// through `textValue`.\nfunction textOf(children: ReactNode) {\n  return typeof children === 'string' ? children : undefined;\n}\nChipGroup.Chip = ChipGroupChip;\nexport type { ChipGroupChipProps, ChipGroupProps };\nexport default ChipGroup;"],"mappings":"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"}

package/dist/components/date-field/index.js

@@ -1,7 +1,7 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { fieldStyles, invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
-import { FieldBox, FieldMessage, FieldValue } from "../../field/index.js";
+import { FieldBox, FieldMessage, FieldSegments } from "../../field/index.js";
 import { segmentStyles } from "../../segments/styles.js";
 import { renderSegment } from "../../segments/index.js";
 import { c } from "react/compiler-runtime";
@@ -45,7 +45,7 @@ function DateField$1(t0) {
 	const t5 = mergeStatefulStyles(props(fieldStyles.root), props$1);
 	let t6;
 	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = /* @__PURE__ */ jsx(FieldValue, { children: /* @__PURE__ */ jsx(DateInput, {
+		t6 = /* @__PURE__ */ jsx(FieldSegments, { children: /* @__PURE__ */ jsx(DateInput, {
 			...props(segmentStyles.input),
 			children: renderSegment
 		}) });

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","DateValue","DateFieldProps","RACDateFieldProps","stylex","DateField","RACDateField","DateInput","RACDateInput","FieldVariant","FieldBox","FieldMessage","FieldValue","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/date-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DateValue, DateFieldProps as RACDateFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { DateField as RACDateField, DateInput as RACDateInput } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldValue } 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 date typed a segment at a time, rather than picked from a calendar. The\n// box, label and message are the field chrome in `src/field`, shared with\n// every other field, so a date field on a form is the same box as the text\n// field beside it — which is what the date pickers page means by a date in a\n// text field.\n//\n// Three things are this component's own.\n//\n// **Each segment is its own focus stop, and React Aria decides how many.**\n// The order and the count come from the locale rather than from here: a\n// reader under `I18nProvider` with a British locale gets day before month,\n// and `granularity` of `minute` adds two more. So the segments are rendered\n// from what React Aria hands the input, never written out.\n//\n// **A segment not yet filled is muted, and the field still counts as\n// empty.** The placeholder text is the segment's own — `mm`, `dd`, `yyyy` —\n// and it takes the muted role so a half-typed date reads as half-typed. The\n// floating label stays down until a segment holds a real value.\n//\n// **A focused segment is a filled shape rather than a ring.** A caret cannot\n// show which of three spinbuttons has focus, since React Aria hides it — the\n// segment is what has to say so, and it does it the way a selected row does.\n\ntype DateFieldProps<T extends DateValue = DateValue> = Omit<RACDateFieldProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the field's render state. */\n  className?: RACDateFieldProps<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?: RACDateFieldProps<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 date 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 an `@internationalized/date` value from this\n * package's `./date` subpath.\n *\n * ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n *\n * <DateField defaultValue={new CalendarDate(2026, 9, 15)} label=\"Label\" />\n * ```\n *\n * How many segments there are and what order they come in is the reader's\n * locale, through React Aria's `I18nProvider` — `granularity` adds time\n * segments, and `minValue` and `maxValue` bound what may be typed.\n *\n * The box, label and message are the field chrome in `src/field`, shared\n * with every other field. The call site's `className` and `style` land on\n * the field as a whole, which is the element a layout positions.\n */\nfunction DateField<T extends DateValue>({\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: DateFieldProps<T>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACDateField<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // Always populated, which buys the outlined notch. The box decides\n    // populated twice over — in CSS for the label's type, and in React\n    // for the notch, since CSS cannot cut an outline to a width it has\n    // no way to measure. React Aria renders a hidden\n    // `<input type=\"date\">` carrying no placeholder, so the CSS half\n    // reads as populated on its own; the React half reads React Aria's\n    // input context, which a date field does not provide. Without this\n    // the notch stays shut across segments already showing `mm/dd/yyyy`.\n    isPopulated label={label} leading={leadingIcon} trailing={trailingIcon} variant={variant}>\n        <FieldValue>\n          <RACDateInput {...stylex.props(segmentStyles.input)}>\n            {renderSegment}\n          </RACDateInput>\n        </FieldValue>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACDateField>;\n}\nexport type { DateFieldProps };\nexport default DateField;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+FA,SAAAK,YAAAyB,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,KAAAlC;CAAY,IAAAmC;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;EAW1LF,KAAA,oBAAC,YAAD,EAAA,UACE,oBAAC,WAAD;GAAa,GAAKxC,MAAaa,cAAa8B,KAAM;GAC/C/B,UAAAA;EADU,CAAA,EADJ,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;EAdfmB,KAAA,oBAAC,UAAD;GAAyBxB;GAS3B,aAAA;GAAmBC;GAAgBC,SAAAA;GAAuBE,UAAAA;GAAuBC;GAC7Ee,UAAAA;EAVO,CAAA;EAeEb,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;EAjBrDW,KAAA,qBAAC,IAAD;GAA6BhB;GAAuB,WAAAO;GAAwCF;GAAkB,GAAMF;GAAK,GAAMK;GAA/H,UAAA,CACHM,IAgBAC,EAjBgB;;EAkBHlB,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,OAlBVmB;AAkBU"}
+{"version":3,"file":"index.js","names":["ReactNode","DateValue","DateFieldProps","RACDateFieldProps","stylex","DateField","RACDateField","DateInput","RACDateInput","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/date-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DateValue, DateFieldProps as RACDateFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { DateField as RACDateField, DateInput as RACDateInput } 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 date typed a segment at a time, rather than picked from a calendar. The\n// box, label and message are the field chrome in `src/field`, shared with\n// every other field, so a date field on a form is the same box as the text\n// field beside it — which is what the date pickers page means by a date in a\n// text field.\n//\n// Three things are this component's own.\n//\n// **Each segment is its own focus stop, and React Aria decides how many.**\n// The order and the count come from the locale rather than from here: a\n// reader under `I18nProvider` with a British locale gets day before month,\n// and `granularity` of `minute` adds two more. So the segments are rendered\n// from what React Aria hands the input, never written out.\n//\n// **A segment not yet filled is muted, and the field still counts as\n// empty.** The placeholder text is the segment's own — `mm`, `dd`, `yyyy` —\n// and it takes the muted role so a half-typed date reads as half-typed. The\n// floating label stays down until a segment holds a real value.\n//\n// **A focused segment is a filled shape rather than a ring.** A caret cannot\n// show which of three spinbuttons has focus, since React Aria hides it — the\n// segment is what has to say so, and it does it the way a selected row does.\n\ntype DateFieldProps<T extends DateValue = DateValue> = Omit<RACDateFieldProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the field's render state. */\n  className?: RACDateFieldProps<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?: RACDateFieldProps<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 date 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 an `@internationalized/date` value from this\n * package's `./date` subpath.\n *\n * ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n *\n * <DateField defaultValue={new CalendarDate(2026, 9, 15)} label=\"Label\" />\n * ```\n *\n * How many segments there are and what order they come in is the reader's\n * locale, through React Aria's `I18nProvider` — `granularity` adds time\n * segments, and `minValue` and `maxValue` bound what may be typed.\n *\n * The box, label and message are the field chrome in `src/field`, shared\n * with every other field. The call site's `className` and `style` land on\n * the field as a whole, which is the element a layout positions.\n */\nfunction DateField<T extends DateValue>({\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: DateFieldProps<T>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACDateField<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // Always populated, which buys the outlined notch. The box decides\n    // populated twice over — in CSS for the label's type, and in React\n    // for the notch, since CSS cannot cut an outline to a width it has\n    // no way to measure. React Aria renders a hidden\n    // `<input type=\"date\">` carrying no placeholder, so the CSS half\n    // reads as populated on its own; the React half reads React Aria's\n    // input context, which a date field does not provide. Without this\n    // the notch stays shut across segments already showing `mm/dd/yyyy`.\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    </RACDateField>;\n}\nexport type { DateFieldProps };\nexport default DateField;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+FA,SAAAK,YAAAyB,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,KAAAlC;CAAY,IAAAmC;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;EAW1LF,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;EAdlBmB,KAAA,oBAAC,UAAD;GAAyBxB;GAS3B,aAAA;GAAmBC;GAAgBC,SAAAA;GAAuBE,UAAAA;GAAuBC;GAC7Ee,UAAAA;EAVO,CAAA;EAeEb,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;EAjBrDW,KAAA,qBAAC,IAAD;GAA6BhB;GAAuB,WAAAO;GAAwCF;GAAkB,GAAMF;GAAK,GAAMK;GAA/H,UAAA,CACHM,IAgBAC,EAjBgB;;EAkBHlB,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,OAlBVmB;AAkBU"}

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

@@ -4,7 +4,7 @@ import { CalendarGlyph } from "../../glyphs/index.js";
 import { focus } from "../../styles/focus.js";
 import Calendar$1 from "../calendar/index.js";
 import { fieldStyles, invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
-import { FieldBox, FieldMessage, FieldValue } from "../../field/index.js";
+import { FieldBox, FieldMessage, FieldSegments } from "../../field/index.js";
 import { overlay } from "../../styles/overlay.js";
 import { picker, triggerClassName } from "../../styles/picker.js";
 import { segmentStyles } from "../../segments/styles.js";
@@ -69,7 +69,7 @@ function DatePicker$1(t0) {
 	} else t8 = $[4];
 	let t9;
 	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t9 = /* @__PURE__ */ jsx(FieldValue, { children: /* @__PURE__ */ jsx(Group, {
+		t9 = /* @__PURE__ */ jsx(FieldSegments, { children: /* @__PURE__ */ jsx(Group, {
 			...t8,
 			children: /* @__PURE__ */ jsx(DateInput, {
 				...props(segmentStyles.input),

package/dist/components/date-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","DateValue","DatePickerProps","RACDatePickerProps","stylex","Button","RACButton","DateInput","RACDateInput","DatePicker","RACDatePicker","Dialog","RACDialog","Group","RACGroup","Popover","RACPopover","FieldVariant","FieldBox","FieldMessage","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","CalendarGlyph","renderSegment","segmentStyles","focus","mergeStatefulStyles","overlay","picker","triggerClassName","Calendar","Omit","T","className","container","Element","description","error","floatingLabel","label","leadingIcon","style","triggerLabel","variant","calendarTrigger","props","triggerGlyph","t0","$","_c","t1","isDisabled","t2","t3","t4","undefined","validationBehavior","T0","t5","t6","root","t7","t8","Symbol","for","group","t9","input","t10","t11","t12","popup","popover","t13","popupDialog","ring","t14","t15","t16"],"sources":["../../../src/components/date-picker/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DateValue, DatePickerProps as RACDatePickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, DateInput as RACDateInput, DatePicker as RACDatePicker, Dialog as RACDialog, Group as RACGroup, Popover as RACPopover } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CalendarGlyph } from '../../glyphs';\nimport { renderSegment } from '../../segments';\nimport { segmentStyles } from '../../segments/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport { picker, triggerClassName } from '../../styles/picker';\nimport Calendar from '../calendar';\n\n// The date pickers page's picker: the date field a date is typed into, with\n// a calendar behind a button for picking it instead. Both halves already\n// exist — the segments are `DateField`'s, from `src/segments`, and the\n// calendar is `Calendar` — so what this adds is the button between them and\n// the surface the calendar opens on.\n//\n// Two things are this component's own.\n//\n// **The picker is one field, not a field beside a button.** React Aria's\n// `Group` is what holds the segments and the trigger together, so the box\n// draws once around both and a reader tabs through the segments and reaches\n// the button at the end of them rather than as a separate control.\n//\n// **It is docked above the medium breakpoint and modal below it**, which is\n// the pairing the page draws: below the breakpoint the picker is a dialog,\n// centred over a scrim, and `Sheet` changes presentation at the same width.\n// It is done in CSS rather than by rendering a different tree: a 360dp\n// calendar anchored to a field is unreachable at 375px, and a modal that\n// stayed centred on a desktop would cover a form for no reason. `Sheet`\n// settles its own swap the same way, and doing it twice in two different\n// ways is how the two would drift. The styles are in `src/styles/picker.ts`.\n\ntype DatePickerProps<T extends DateValue = DateValue> = Omit<RACDatePickerProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the picker's render state. */\n  className?: RACDatePickerProps<T>['className'];\n  /**\n   * Where to portal the calendar. 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 calendar renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\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 picker's render state. */\n  style?: RACDatePickerProps<T>['style'];\n  /**\n   * What the button that opens the calendar is called, for a screen reader.\n   * @default 'Choose a date'\n   */\n  triggerLabel?: string;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n};\n\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-jsx-as-prop is after — the same reason Select builds its\n// chevron this way.\nfunction calendarTrigger(triggerLabel: string) {\n  return <RACButton aria-label={triggerLabel} className={triggerClassName}>\n      <CalendarGlyph {...stylex.props(picker.triggerGlyph)} />\n    </RACButton>;\n}\n\n/**\n * A date typed into a field, or picked from a calendar behind a button. The\n * value is React Aria's — pass `value` with `onChange` to control it, or\n * `defaultValue` — as an `@internationalized/date` value from this package's\n * `./date` subpath.\n *\n * ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n *\n * <DatePicker defaultValue={new CalendarDate(2026, 9, 15)} label=\"Label\" />\n * ```\n *\n * The segments are `DateField`'s and the calendar is `Calendar`, so\n * `granularity`, `minValue`, `maxValue` and `isDateUnavailable` all behave\n * as they do there. Above the medium breakpoint the calendar is docked to\n * the field; below it, it opens centred, which is the page's modal picker.\n *\n * The call site's `className` and `style` land on the picker as a whole,\n * which is the element a layout positions.\n */\nfunction DatePicker<T extends DateValue>({\n  container,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  triggerLabel = 'Choose a date',\n  variant = 'filled',\n  ...props\n}: DatePickerProps<T>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACDatePicker<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // Always populated, which buys exactly one thing: the outlined\n    // notch. The box decides populated twice over — in CSS for the\n    // label's type, and in React for the notch, since CSS cannot cut an\n    // outline to a width it has no way to measure. React Aria renders a\n    // hidden `<input type=\"date\">` carrying no placeholder, so the CSS\n    // half reads as populated on its own; the React half reads React\n    // Aria's input context, which a picker does not provide. Without\n    // this the notch stays shut across segments already showing\n    // `mm/dd/yyyy`.\n    isPopulated label={label} leading={leadingIcon}\n    // In the chrome's trailing slot rather than on the segments' line,\n    // which is where Select and ComboBox put their chevron. The slot\n    // cancels the box's top padding and stretches to its full height, so\n    // it centres the 40dp trigger in the box; on the line the trigger\n    // was taller than the row that held it and hung past the underline,\n    // and the segments centred on it rather than on their own line.\n    //\n    // React Aria's `DatePicker` is what gives the trigger its press\n    // behaviour, through context, so the slot reaches it as well as the\n    // group did.\n    trailing={calendarTrigger(triggerLabel)} variant={variant}>\n        <FieldValue>\n          <RACGroup {...stylex.props(picker.group)}>\n            <RACDateInput {...stylex.props(segmentStyles.input)}>\n              {renderSegment}\n            </RACDateInput>\n          </RACGroup>\n        </FieldValue>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover\n    // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n    UNSTABLE_portalContainer={container} {...stylex.props(overlay.popup, picker.popover)}>\n        <RACDialog {...stylex.props(overlay.popupDialog, focus.ring)}>\n          <Calendar aria-label={label} />\n        </RACDialog>\n      </RACPopover>\n    </RACDatePicker>;\n}\nexport type { DatePickerProps };\nexport default DatePicker;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","DateValue","DatePickerProps","RACDatePickerProps","stylex","Button","RACButton","DateInput","RACDateInput","DatePicker","RACDatePicker","Dialog","RACDialog","Group","RACGroup","Popover","RACPopover","FieldVariant","FieldBox","FieldMessage","FieldSegments","fieldStyles","invalidFrom","useFieldValidationBehavior","CalendarGlyph","renderSegment","segmentStyles","focus","mergeStatefulStyles","overlay","picker","triggerClassName","Calendar","Omit","T","className","container","Element","description","error","floatingLabel","label","leadingIcon","style","triggerLabel","variant","calendarTrigger","props","triggerGlyph","t0","$","_c","t1","isDisabled","t2","t3","t4","undefined","validationBehavior","T0","t5","t6","root","t7","t8","Symbol","for","group","t9","input","t10","t11","t12","popup","popover","t13","popupDialog","ring","t14","t15","t16"],"sources":["../../../src/components/date-picker/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DateValue, DatePickerProps as RACDatePickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, DateInput as RACDateInput, DatePicker as RACDatePicker, Dialog as RACDialog, Group as RACGroup, Popover as RACPopover } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldSegments } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CalendarGlyph } from '../../glyphs';\nimport { renderSegment } from '../../segments';\nimport { segmentStyles } from '../../segments/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport { picker, triggerClassName } from '../../styles/picker';\nimport Calendar from '../calendar';\n\n// The date pickers page's picker: the date field a date is typed into, with\n// a calendar behind a button for picking it instead. Both halves already\n// exist — the segments are `DateField`'s, from `src/segments`, and the\n// calendar is `Calendar` — so what this adds is the button between them and\n// the surface the calendar opens on.\n//\n// Two things are this component's own.\n//\n// **The picker is one field, not a field beside a button.** React Aria's\n// `Group` is what holds the segments and the trigger together, so the box\n// draws once around both and a reader tabs through the segments and reaches\n// the button at the end of them rather than as a separate control.\n//\n// **It is docked above the medium breakpoint and modal below it**, which is\n// the pairing the page draws: below the breakpoint the picker is a dialog,\n// centred over a scrim, and `Sheet` changes presentation at the same width.\n// It is done in CSS rather than by rendering a different tree: a 360dp\n// calendar anchored to a field is unreachable at 375px, and a modal that\n// stayed centred on a desktop would cover a form for no reason. `Sheet`\n// settles its own swap the same way, and doing it twice in two different\n// ways is how the two would drift. The styles are in `src/styles/picker.ts`.\n\ntype DatePickerProps<T extends DateValue = DateValue> = Omit<RACDatePickerProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the picker's render state. */\n  className?: RACDatePickerProps<T>['className'];\n  /**\n   * Where to portal the calendar. 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 calendar renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\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 picker's render state. */\n  style?: RACDatePickerProps<T>['style'];\n  /**\n   * What the button that opens the calendar is called, for a screen reader.\n   * @default 'Choose a date'\n   */\n  triggerLabel?: string;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n};\n\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-jsx-as-prop is after — the same reason Select builds its\n// chevron this way.\nfunction calendarTrigger(triggerLabel: string) {\n  return <RACButton aria-label={triggerLabel} className={triggerClassName}>\n      <CalendarGlyph {...stylex.props(picker.triggerGlyph)} />\n    </RACButton>;\n}\n\n/**\n * A date typed into a field, or picked from a calendar behind a button. The\n * value is React Aria's — pass `value` with `onChange` to control it, or\n * `defaultValue` — as an `@internationalized/date` value from this package's\n * `./date` subpath.\n *\n * ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n *\n * <DatePicker defaultValue={new CalendarDate(2026, 9, 15)} label=\"Label\" />\n * ```\n *\n * The segments are `DateField`'s and the calendar is `Calendar`, so\n * `granularity`, `minValue`, `maxValue` and `isDateUnavailable` all behave\n * as they do there. Above the medium breakpoint the calendar is docked to\n * the field; below it, it opens centred, which is the page's modal picker.\n *\n * The call site's `className` and `style` land on the picker as a whole,\n * which is the element a layout positions.\n */\nfunction DatePicker<T extends DateValue>({\n  container,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  triggerLabel = 'Choose a date',\n  variant = 'filled',\n  ...props\n}: DatePickerProps<T>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACDatePicker<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // Always populated, which buys exactly one thing: the outlined\n    // notch. The box decides populated twice over — in CSS for the\n    // label's type, and in React for the notch, since CSS cannot cut an\n    // outline to a width it has no way to measure. React Aria renders a\n    // hidden `<input type=\"date\">` carrying no placeholder, so the CSS\n    // half reads as populated on its own; the React half reads React\n    // Aria's input context, which a picker does not provide. Without\n    // this the notch stays shut across segments already showing\n    // `mm/dd/yyyy`.\n    isPopulated label={label} leading={leadingIcon}\n    // In the chrome's trailing slot rather than on the segments' line,\n    // which is where Select and ComboBox put their chevron. The slot\n    // cancels the box's top padding and stretches to its full height, so\n    // it centres the 40dp trigger in the box; on the line the trigger\n    // was taller than the row that held it and hung past the underline,\n    // and the segments centred on it rather than on their own line.\n    //\n    // React Aria's `DatePicker` is what gives the trigger its press\n    // behaviour, through context, so the slot reaches it as well as the\n    // group did.\n    trailing={calendarTrigger(triggerLabel)} variant={variant}>\n        <FieldSegments>\n          <RACGroup {...stylex.props(picker.group)}>\n            <RACDateInput {...stylex.props(segmentStyles.input)}>\n              {renderSegment}\n            </RACDateInput>\n          </RACGroup>\n        </FieldSegments>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover\n    // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n    UNSTABLE_portalContainer={container} {...stylex.props(overlay.popup, picker.popover)}>\n        <RACDialog {...stylex.props(overlay.popupDialog, focus.ring)}>\n          <Calendar aria-label={label} />\n        </RACDialog>\n      </RACPopover>\n    </RACDatePicker>;\n}\nexport type { DatePickerProps };\nexport default DatePicker;"],"mappings":"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"}

package/dist/components/date-range-picker/index.js

@@ -3,7 +3,7 @@ import { mergeStatefulStyles } from "../../styles/merge.js";
 import { CalendarGlyph } from "../../glyphs/index.js";
 import { focus } from "../../styles/focus.js";
 import { fieldStyles, invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
-import { FieldBox, FieldMessage, FieldValue } from "../../field/index.js";
+import { FieldBox, FieldMessage, FieldSegments } from "../../field/index.js";
 import { overlay } from "../../styles/overlay.js";
 import { picker, triggerClassName } from "../../styles/picker.js";
 import { segmentStyles } from "../../segments/styles.js";
@@ -104,7 +104,7 @@ function DateRangePicker$1(t0) {
 	} else t12 = $[8];
 	let t13;
 	if ($[9] !== t11) {
-		t13 = /* @__PURE__ */ jsx(FieldValue, { children: /* @__PURE__ */ jsxs(Group, {
+		t13 = /* @__PURE__ */ jsx(FieldSegments, { children: /* @__PURE__ */ jsxs(Group, {
 			...t9,
 			children: [
 				t10,

package/dist/components/date-range-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","DateValue","DateRangePickerProps","RACDateRangePickerProps","stylex","Button","RACButton","DateInput","RACDateInput","DateRangePicker","RACDateRangePicker","Dialog","RACDialog","Group","RACGroup","Popover","RACPopover","FieldVariant","FieldBox","FieldMessage","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","CalendarGlyph","renderSegment","segmentStyles","focus","mergeStatefulStyles","overlay","picker","triggerClassName","colors","typography","RangeCalendar","Omit","T","className","container","Element","description","error","floatingLabel","label","leadingIcon","separator","style","triggerLabel","variant","calendarTrigger","props","triggerGlyph","t0","$","_c","t1","isDisabled","t2","t3","t4","t5","undefined","validationBehavior","T0","t6","t7","root","t8","t9","Symbol","for","group","t10","input","t11","t12","t13","t14","t15","t16","popup","popover","t17","popupDialog","ring","t18","t19","t20"],"sources":["../../../src/components/date-range-picker/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DateValue, DateRangePickerProps as RACDateRangePickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, DateInput as RACDateInput, DateRangePicker as RACDateRangePicker, Dialog as RACDialog, Group as RACGroup, Popover as RACPopover } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CalendarGlyph } from '../../glyphs';\nimport { renderSegment } from '../../segments';\nimport { segmentStyles } from '../../segments/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport { picker, triggerClassName } from '../../styles/picker';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\nimport RangeCalendar from '../range-calendar';\n\n// `DatePicker` picking two dates rather than one. Every part it draws is\n// already here — the segments from `src/segments`, the trigger and the\n// overlay from `src/styles/picker`, the calendar from `RangeCalendar` — so\n// the two pickers cannot come apart. What a range adds is a second segment\n// group and the dash between them.\n//\n// The date pickers page draws a range as a configuration of the *modal*\n// picker: a full-screen selector with a header and two text fields, plus a\n// modal date input variant. It carries no docked range picker and no range\n// token of its own — its token set is `docked.*` and `modal.*`, and neither\n// names a range. So the docked shape here follows the docked single picker,\n// the same choice `RangeCalendar` records for the band it draws.\n//\n// Two things are this component's own.\n//\n// **The dash is decoration, not content.** It reads as a range to someone\n// looking, and React Aria has already told a screen reader which group is\n// which — every segment is named \"Start Date\" or \"End Date\" — so repeating\n// it aloud would be a third telling. It is `aria-hidden` and takes the muted\n// role, which is what keeps it quieter than the dates either side.\n//\n// **Both segment groups and the trigger sit in one React Aria `Group`.** The\n// box draws once around all three, so a reader tabs start, end, trigger\n// rather than meeting three controls in a row.\n\ntype DateRangePickerProps<T extends DateValue = DateValue> = Omit<RACDateRangePickerProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the picker's render state. */\n  className?: RACDateRangePickerProps<T>['className'];\n  /**\n   * Where to portal the calendar. 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 calendar renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\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  /**\n   * What is drawn between the two segment groups. Decoration — a screen\n   * reader is told which group is which by React Aria.\n   * @default '–'\n   */\n  separator?: string;\n  /** A function may compute the style from the picker's render state. */\n  style?: RACDateRangePickerProps<T>['style'];\n  /**\n   * What the button that opens the calendar is called, for a screen reader.\n   * @default 'Choose a date range'\n   */\n  triggerLabel?: string;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n};\n\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-jsx-as-prop is after — the same reason Select builds its\n// chevron this way.\nfunction calendarTrigger(triggerLabel: string) {\n  return <RACButton aria-label={triggerLabel} className={triggerClassName}>\n      <CalendarGlyph {...stylex.props(picker.triggerGlyph)} />\n    </RACButton>;\n}\n\n/**\n * A date range typed into a field, or picked from a calendar behind a\n * button. The value is React Aria's — pass `value` with `onChange` to\n * control it, or `defaultValue` — as a `{ start, end }` pair of\n * `@internationalized/date` values from this package's `./date` subpath.\n *\n * ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n *\n * <DateRangePicker\n *   defaultValue={{\n *     end: new CalendarDate(2026, 9, 20),\n *     start: new CalendarDate(2026, 9, 15),\n *   }}\n *   label=\"Label\"\n * />\n * ```\n *\n * The segments are `DateField`'s and the calendar is `RangeCalendar`, so\n * `granularity`, `minValue`, `maxValue` and `isDateUnavailable` all behave\n * as they do there. Above the medium breakpoint the calendar is docked to\n * the field; below it, it opens centred, the same swap `DatePicker` makes.\n *\n * The call site's `className` and `style` land on the picker as a whole,\n * which is the element a layout positions.\n */\nfunction DateRangePicker<T extends DateValue>({\n  container,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  separator = '–',\n  triggerLabel = 'Choose a date range',\n  variant = 'filled',\n  ...props\n}: DateRangePickerProps<T>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACDateRangePicker<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // Always populated, which buys exactly one thing: the outlined\n    // notch. The box decides populated twice over — in CSS for the\n    // label's type, and in React for the notch, since CSS cannot cut an\n    // outline to a width it has no way to measure. React Aria renders a\n    // hidden input per segment group, neither carrying a placeholder, so\n    // the CSS half reads as populated on its own; the React half reads\n    // React Aria's input context, which a picker does not provide.\n    // Without this the notch stays shut across segments already showing\n    // `mm/dd/yyyy`.\n    isPopulated label={label} leading={leadingIcon}\n    // In the chrome's trailing slot rather than on the segments' line —\n    // see the same prop on DatePicker for what that slot does and why\n    // the trigger still opens from there.\n    trailing={calendarTrigger(triggerLabel)} variant={variant}>\n        <FieldValue>\n          <RACGroup {...stylex.props(picker.group)}>\n            <RACDateInput slot=\"start\" {...stylex.props(segmentStyles.input)}>\n              {renderSegment}\n            </RACDateInput>\n            <span aria-hidden=\"true\" className=\"x1w5n3ug x2lah0s x16svsjw x1848etk xh7dzej\">\n              {separator}\n            </span>\n            <RACDateInput slot=\"end\" {...stylex.props(segmentStyles.input)}>\n              {renderSegment}\n            </RACDateInput>\n          </RACGroup>\n        </FieldValue>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover\n    // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n    UNSTABLE_portalContainer={container} {...stylex.props(overlay.popup, picker.popover)}>\n        <RACDialog {...stylex.props(overlay.popupDialog, focus.ring)}>\n          <RangeCalendar aria-label={label} />\n        </RACDialog>\n      </RACPopover>\n    </RACDateRangePicker>;\n}\nexport type { DateRangePickerProps };\nexport default DateRangePicker;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","DateValue","DateRangePickerProps","RACDateRangePickerProps","stylex","Button","RACButton","DateInput","RACDateInput","DateRangePicker","RACDateRangePicker","Dialog","RACDialog","Group","RACGroup","Popover","RACPopover","FieldVariant","FieldBox","FieldMessage","FieldSegments","fieldStyles","invalidFrom","useFieldValidationBehavior","CalendarGlyph","renderSegment","segmentStyles","focus","mergeStatefulStyles","overlay","picker","triggerClassName","colors","typography","RangeCalendar","Omit","T","className","container","Element","description","error","floatingLabel","label","leadingIcon","separator","style","triggerLabel","variant","calendarTrigger","props","triggerGlyph","t0","$","_c","t1","isDisabled","t2","t3","t4","t5","undefined","validationBehavior","T0","t6","t7","root","t8","t9","Symbol","for","group","t10","input","t11","t12","t13","t14","t15","t16","popup","popover","t17","popupDialog","ring","t18","t19","t20"],"sources":["../../../src/components/date-range-picker/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DateValue, DateRangePickerProps as RACDateRangePickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, DateInput as RACDateInput, DateRangePicker as RACDateRangePicker, Dialog as RACDialog, Group as RACGroup, Popover as RACPopover } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldSegments } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CalendarGlyph } from '../../glyphs';\nimport { renderSegment } from '../../segments';\nimport { segmentStyles } from '../../segments/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport { picker, triggerClassName } from '../../styles/picker';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\nimport RangeCalendar from '../range-calendar';\n\n// `DatePicker` picking two dates rather than one. Every part it draws is\n// already here — the segments from `src/segments`, the trigger and the\n// overlay from `src/styles/picker`, the calendar from `RangeCalendar` — so\n// the two pickers cannot come apart. What a range adds is a second segment\n// group and the dash between them.\n//\n// The date pickers page draws a range as a configuration of the *modal*\n// picker: a full-screen selector with a header and two text fields, plus a\n// modal date input variant. It carries no docked range picker and no range\n// token of its own — its token set is `docked.*` and `modal.*`, and neither\n// names a range. So the docked shape here follows the docked single picker,\n// the same choice `RangeCalendar` records for the band it draws.\n//\n// Two things are this component's own.\n//\n// **The dash is decoration, not content.** It reads as a range to someone\n// looking, and React Aria has already told a screen reader which group is\n// which — every segment is named \"Start Date\" or \"End Date\" — so repeating\n// it aloud would be a third telling. It is `aria-hidden` and takes the muted\n// role, which is what keeps it quieter than the dates either side.\n//\n// **Both segment groups and the trigger sit in one React Aria `Group`.** The\n// box draws once around all three, so a reader tabs start, end, trigger\n// rather than meeting three controls in a row.\n\ntype DateRangePickerProps<T extends DateValue = DateValue> = Omit<RACDateRangePickerProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the picker's render state. */\n  className?: RACDateRangePickerProps<T>['className'];\n  /**\n   * Where to portal the calendar. 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 calendar renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\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  /**\n   * What is drawn between the two segment groups. Decoration — a screen\n   * reader is told which group is which by React Aria.\n   * @default '–'\n   */\n  separator?: string;\n  /** A function may compute the style from the picker's render state. */\n  style?: RACDateRangePickerProps<T>['style'];\n  /**\n   * What the button that opens the calendar is called, for a screen reader.\n   * @default 'Choose a date range'\n   */\n  triggerLabel?: string;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n};\n\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-jsx-as-prop is after — the same reason Select builds its\n// chevron this way.\nfunction calendarTrigger(triggerLabel: string) {\n  return <RACButton aria-label={triggerLabel} className={triggerClassName}>\n      <CalendarGlyph {...stylex.props(picker.triggerGlyph)} />\n    </RACButton>;\n}\n\n/**\n * A date range typed into a field, or picked from a calendar behind a\n * button. The value is React Aria's — pass `value` with `onChange` to\n * control it, or `defaultValue` — as a `{ start, end }` pair of\n * `@internationalized/date` values from this package's `./date` subpath.\n *\n * ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n *\n * <DateRangePicker\n *   defaultValue={{\n *     end: new CalendarDate(2026, 9, 20),\n *     start: new CalendarDate(2026, 9, 15),\n *   }}\n *   label=\"Label\"\n * />\n * ```\n *\n * The segments are `DateField`'s and the calendar is `RangeCalendar`, so\n * `granularity`, `minValue`, `maxValue` and `isDateUnavailable` all behave\n * as they do there. Above the medium breakpoint the calendar is docked to\n * the field; below it, it opens centred, the same swap `DatePicker` makes.\n *\n * The call site's `className` and `style` land on the picker as a whole,\n * which is the element a layout positions.\n */\nfunction DateRangePicker<T extends DateValue>({\n  container,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  separator = '–',\n  triggerLabel = 'Choose a date range',\n  variant = 'filled',\n  ...props\n}: DateRangePickerProps<T>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACDateRangePicker<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // Always populated, which buys exactly one thing: the outlined\n    // notch. The box decides populated twice over — in CSS for the\n    // label's type, and in React for the notch, since CSS cannot cut an\n    // outline to a width it has no way to measure. React Aria renders a\n    // hidden input per segment group, neither carrying a placeholder, so\n    // the CSS half reads as populated on its own; the React half reads\n    // React Aria's input context, which a picker does not provide.\n    // Without this the notch stays shut across segments already showing\n    // `mm/dd/yyyy`.\n    isPopulated label={label} leading={leadingIcon}\n    // In the chrome's trailing slot rather than on the segments' line —\n    // see the same prop on DatePicker for what that slot does and why\n    // the trigger still opens from there.\n    trailing={calendarTrigger(triggerLabel)} variant={variant}>\n        <FieldSegments>\n          <RACGroup {...stylex.props(picker.group)}>\n            <RACDateInput slot=\"start\" {...stylex.props(segmentStyles.input)}>\n              {renderSegment}\n            </RACDateInput>\n            <span aria-hidden=\"true\" className=\"x1w5n3ug x2lah0s x16svsjw x1848etk xh7dzej\">\n              {separator}\n            </span>\n            <RACDateInput slot=\"end\" {...stylex.props(segmentStyles.input)}>\n              {renderSegment}\n            </RACDateInput>\n          </RACGroup>\n        </FieldSegments>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover\n    // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n    UNSTABLE_portalContainer={container} {...stylex.props(overlay.popup, picker.popover)}>\n        <RACDialog {...stylex.props(overlay.popupDialog, focus.ring)}>\n          <RangeCalendar aria-label={label} />\n        </RACDialog>\n      </RACPopover>\n    </RACDateRangePicker>;\n}\nexport type { DateRangePickerProps };\nexport default DateRangePicker;"],"mappings":"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"}

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

@@ -52,7 +52,7 @@ declare function DialogHeader(props: HTMLAttributes<HTMLDivElement>): import("re
  * announces itself unnamed.
  */
 declare function DialogTitle(props: DialogTitleProps): import("react").JSX.Element;
-type DialogContentProps = Omit<DialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'isDismissable' | 'isKeyboardDismissDisabled'> & {
+type DialogContentProps = {
   /** A function may compute the class from the container's render state. */
   className?: ClassNameOrFunction<ModalRenderProps>;
   /**
@@ -63,9 +63,18 @@ type DialogContentProps = Omit<DialogProps, 'className' | 'style'> & Pick<ModalO
    * the tokens' `prefers-color-scheme` default.
    */
   container?: Element;
+  /**
+   * Whether a press on the scrim, outside the container, closes the
+   * dialog. `true` here where React Aria's own default is `false`, the
+   * same default `Sheet` takes. Escape is `isKeyboardDismissDisabled`'s,
+   * and this says nothing about it — an alert dialog, which has to be
+   * answered from one of its actions, turns off both.
+   * @default true
+   */
+  isDismissable?: boolean;
   /** A function may compute the style from the container's render state. */
   style?: StyleOrFunction<ModalRenderProps>;
-};
+} & Omit<DialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'isKeyboardDismissDisabled'>;
 type DialogTitleProps = HeadingProps;
 //#endregion
 export { type DialogContentProps, type DialogProps$1 as DialogProps, type DialogTitleProps, Dialog$1 as default };

package/dist/components/dialog/index.js

@@ -123,7 +123,7 @@ function DialogContent(t0) {
 	} else t2 = $[8];
 	let t3;
 	if ($[9] !== className || $[10] !== style) {
-		t3 = mergeStatefulStyles({ className: "x1n1nwrg x1u6grsq xbhiib0 x1ebxanj x16dv9tl xvkjz1l xt7dq6l x1ju3lih x19pkqky x1f120ba x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf xh8yej3 xmz0i5r x27kpxv x6iovhr x1u2d2a2 xxzqys8 xb3r6kr" }, {
+		t3 = mergeStatefulStyles({ className: "x1n1nwrg x1u6grsq xbhiib0 x1ebxanj x16dv9tl xvkjz1l xt7dq6l x1ju3lih x1w1tqly x19pkqky x1f120ba xx61lck x1gb867b x13rsnn2 x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf xh8yej3 xmz0i5r x27kpxv x6iovhr x1u2d2a2 xxzqys8 xb3r6kr" }, {
 			className,
 			style
 		});