@kanso-labs/kanso-ui 0.44.1 → 0.45.1

package/dist/components/navigation-bar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","RefAttributes","stylex","useLayoutEffect","useMemo","useState","NavigationItemProps","RenderComponentProps","NavigationItem","NavigationList","NavigationContext","mergeRefs","useRender","mergeStyles","colors","styles","destinations","kGNEyG","k1xSpc","kzQI83","kjj79g","k7Eaqz","$$css","HORIZONTAL","NavigationBarProps","selectedRoute","NavigationBar","t0","$","children","props","render","element","setElement","isCramped","useCramped","t1","ref","undefined","t2","merged","t3","const","t4","form","context","t5","className","t6","t7","t8","defaultTagName","bar","t9","NavigationBarItem","shortfallOf","HTMLElement","total","destination","querySelectorAll","label","lastElementChild","Math","max","scrollWidth","clientWidth","needed","setNeeded","measure","window","matchMedia","matches","shortfall","relabel","resize","ResizeObserver","observe","text","MutationObserver","characterData","childList","subtree","disconnect","Item","NavigationBarItemProps","_c"],"sources":["../../../src/components/navigation-bar/index.tsx"],"sourcesContent":["'use client';\n\nimport type { RefAttributes } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useLayoutEffect, useMemo, useState } from 'react';\nimport type { NavigationItemProps } from '../../navigation';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { NavigationItem, NavigationList } from '../../navigation';\nimport { NavigationContext } from '../../navigation/context';\nimport { mergeRefs } from '../../render/ref';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors } from '../../tokens/design.tokens.stylex';\n\n// The navigation bar page's flexible bar: three to five destinations across\n// the bottom of a compact window, on the surface container, 64dp tall. Below\n// the medium breakpoint each destination is vertical and the destinations\n// share the bar's width equally; at it and above, each is the page's\n// horizontal pill, as wide as what it holds, and the group sits centred with\n// the spare width at the bar's ends. The destinations are `src/navigation`'s,\n// shared with NavigationRail, which holds the two forms' values.\n//\n// The 8dp between two horizontal pills is the library's own. The page puts\n// each pill in an item of a fixed width it does not give, and with no space\n// at all the pills met edge to edge.\n//\n// A horizontal destination is as wide as its icon, its label and 16dp either\n// side, so five of them need far more than the 600dp the breakpoint starts\n// at: five fifteen-letter labels come to about 780. Drawn anyway, every label\n// was cut short the moment the window crossed the breakpoint, while one\n// pixel narrower the vertical form showed them whole. So the bar measures\n// what its horizontal labels lack, and keeps the vertical form until it is\n// that much wider — see `useCramped`.\n//\n// A vertical destination's label stays on one line and is cut short with an\n// ellipsis where the destination's share of the bar ends, and a label cut\n// short shows its full text in the browser's tooltip on hover — see\n// `src/navigation`. Five destinations give each label 69dp at a 375dp\n// window and 66dp at 360dp, about ten characters of label medium, so five\n// destinations' names have to be short.\n//\n// The 64dp is the destinations' row rather than the bar's height, and the\n// bar grows past it: by padding the call site gives it, such as the inset a\n// phone's home indicator asks for, and with its labels under a reader's\n// wider text spacing. The bar adds no inset of its own, since only the call\n// site knows whether the bar sits at the screen's edge.\n//\n// The bar is a `<nav>`, and a page usually has more than one navigation\n// landmark, so name it with `aria-label`.\n\nconst styles = {\n  destinations: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kzQI83: \"x1iyjqo2\",\n    kjj79g: \"xl56j7k\",\n    k7Eaqz: \"xeuugli\",\n    $$css: true\n  }\n};\n\n// The window size the bar draws its horizontal form at, which the styles read\n// as `media.medium`. Spelled again for `matchMedia`, the one thing here that\n// has to know it outside a stylesheet — see `useCramped`.\nconst HORIZONTAL = '(width >= 600px)';\ntype NavigationBarProps = RenderComponentProps<'nav'> & {\n  /**\n   * The route of the current destination, matched exactly against each\n   * destination's `href`. The match carries `aria-current=\"page\"` and the\n   * active indicator. For a route nested under a destination, which no\n   * `href` matches whole, mark that destination with its own `isCurrent`.\n   */\n  selectedRoute?: string;\n};\n\n/**\n * The bar of three to five top-level destinations a compact window keeps at\n * its bottom edge. Each destination is a link, so it routes through React\n * Aria's `RouterProvider` when the app has one.\n *\n * ```tsx\n * <NavigationBar aria-label=\"Label\" selectedRoute=\"/first\">\n *   <NavigationBar.Item href=\"/first\" icon={<FirstIcon />}>\n *     First item\n *   </NavigationBar.Item>\n *   <NavigationBar.Item href=\"/second\" icon={<SecondIcon />}>\n *     Second item\n *   </NavigationBar.Item>\n *   <NavigationBar.Item href=\"/third\" icon={<ThirdIcon />}>\n *     Third item\n *   </NavigationBar.Item>\n * </NavigationBar>\n * ```\n *\n * The call site's `className` and `style` land on the `<nav>`. A bar kept at\n * the bottom edge of a phone's screen clears its home indicator with padding,\n * which adds to the bar's height rather than squeezing the destinations:\n *\n * ```tsx\n * <NavigationBar\n *   aria-label=\"Label\"\n *   style={{ paddingBlockEnd: 'env(safe-area-inset-bottom)' }}\n * >\n * ```\n */\nfunction NavigationBar({\n  children,\n  render,\n  selectedRoute,\n  ...props\n}: NavigationBarProps) {\n  // The element, held as state rather than in a ref object, since the bar\n  // measures it from an effect and has to run again when it changes.\n  const [element, setElement] = useState<HTMLElement | null>(null);\n  const isCramped = useCramped(element);\n  // The call site's ref lands on the same element. Read off `props` rather\n  // than destructured, as `useRender` reads it, so the compiler sees a prop\n  // holding still rather than a ref read during render.\n  const merged = useMemo(() => mergeRefs(setElement, props.ref ?? undefined), [props.ref]);\n  const context = useMemo(() => ({\n    form: isCramped ? 'barCramped' as const : 'bar' as const,\n    selectedRoute\n  }), [isCramped, selectedRoute]);\n  const bar = useRender({\n    defaultTagName: 'nav',\n    props: {\n      ...props,\n      ...mergeStyles({\n        className: \"x6s0dn4 x1mjdul6 x9f619 x78zum5 xh8yej3 x8nclml\"\n      }, props),\n      children: <NavigationList layout={styles.destinations}>{children}</NavigationList>,\n      ref: merged\n    },\n    render\n  });\n  return <NavigationContext value={context}>{bar}</NavigationContext>;\n}\n\n/**\n * One destination of a navigation bar — an icon, a label and, when it is the\n * current one, the active indicator. See `NavigationBar`.\n *\n * Defined here rather than re-exported from `src/navigation`: a re-export\n * let the build hand the package entry that module directly, past this\n * module's client directive, and a server component importing it got the\n * component itself rather than a reference to a client one.\n */\nfunction NavigationBarItem(props: NavigationItemProps & RefAttributes<HTMLAnchorElement>) {\n  return <NavigationItem {...props} />;\n}\n\n/**\n * How much wider the bar would have to be for none of its labels to be cut\n * short: what each one lacks of its own width, summed. A label is the last\n * part of its destination's link, in its item of the bar's list.\n */\nfunction shortfallOf(bar: HTMLElement) {\n  let total = 0;\n  for (const destination of bar.querySelectorAll(':scope > ul > li > a')) {\n    const label = destination.lastElementChild;\n    if (label instanceof HTMLElement) {\n      total += Math.max(0, label.scrollWidth - label.clientWidth);\n    }\n  }\n  return total;\n}\n\n/**\n * Whether `bar`, at a width that draws its horizontal form, is too narrow\n * for it, so it draws the vertical one instead.\n *\n * The horizontal form is measured as it is drawn: where it cuts labels short,\n * the bar records the width it would need and switches, and it switches back\n * once it is that wide. A change to the destinations' text clears the record,\n * since what they need has changed with it. Measured in a layout effect, so\n * a bar that cannot fit is never painted cut short.\n */\nfunction useCramped(bar: HTMLElement | null) {\n  // The bar's width the horizontal form needs, while it is wider than the\n  // bar; undefined while the horizontal form fits, or has not been measured.\n  const [needed, setNeeded] = useState<number | undefined>(undefined);\n  useLayoutEffect(() => {\n    if (bar === null) {\n      return undefined;\n    }\n    const measure = () => {\n      if (needed !== undefined) {\n        if (bar.clientWidth >= needed) {\n          setNeeded(undefined);\n        }\n        return;\n      }\n      if (!window.matchMedia(HORIZONTAL).matches) {\n        return;\n      }\n      const shortfall = shortfallOf(bar);\n      if (shortfall > 0) {\n        // A pixel over, so a bar exactly as wide as the sum of fractional\n        // widths does not flip back and forth.\n        setNeeded(bar.clientWidth + shortfall + 1);\n      }\n    };\n    const relabel = () => {\n      setNeeded(undefined);\n    };\n    measure();\n    const resize = new ResizeObserver(measure);\n    resize.observe(bar);\n    const text = new MutationObserver(relabel);\n    text.observe(bar, {\n      characterData: true,\n      childList: true,\n      subtree: true\n    });\n    return () => {\n      resize.disconnect();\n      text.disconnect();\n    };\n  }, [bar, needed]);\n  return needed !== undefined;\n}\nNavigationBar.Item = NavigationBarItem;\nexport type { NavigationItemProps as NavigationBarItemProps, NavigationBarProps };\nexport { NavigationBarItem };\nexport default NavigationBar;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","RefAttributes","stylex","useLayoutEffect","useMemo","useState","NavigationItemProps","RenderComponentProps","NavigationItem","NavigationList","NavigationContext","mergeRefs","useRender","mergeStyles","colors","styles","destinations","kGNEyG","k1xSpc","kzQI83","kjj79g","k7Eaqz","$$css","HORIZONTAL","NavigationBarProps","selectedRoute","NavigationBar","t0","$","children","props","render","element","setElement","isCramped","useCramped","t1","ref","undefined","t2","merged","t3","const","t4","form","context","t5","className","t6","t7","t8","defaultTagName","bar","t9","NavigationBarItem","shortfallOf","HTMLElement","total","destination","querySelectorAll","label","lastElementChild","Math","max","scrollWidth","clientWidth","needed","setNeeded","measure","window","matchMedia","matches","shortfall","relabel","resize","ResizeObserver","observe","text","MutationObserver","characterData","childList","subtree","disconnect","Item","NavigationBarItemProps","_c"],"sources":["../../../src/components/navigation-bar/index.tsx"],"sourcesContent":["'use client';\n\nimport type { RefAttributes } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useLayoutEffect, useMemo, useState } from 'react';\nimport type { NavigationItemProps } from '../../navigation';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { NavigationItem, NavigationList } from '../../navigation';\nimport { NavigationContext } from '../../navigation/context';\nimport { mergeRefs } from '../../render/ref';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors } from '../../tokens/design.tokens.stylex';\n\n// The navigation bar page's flexible bar: three to five destinations across\n// the bottom of a compact window, on the surface container, 64dp tall. Below\n// the medium breakpoint each destination is vertical and the destinations\n// share the bar's width equally; at it and above, each is the page's\n// horizontal pill, as wide as what it holds, and the group sits centred with\n// the spare width at the bar's ends. The destinations are `src/navigation`'s,\n// shared with NavigationRail, which holds the two forms' values.\n//\n// The 8dp between two horizontal pills is the library's own. The page puts\n// each pill in an item of a fixed width it does not give, and with no space\n// at all the pills met edge to edge.\n//\n// A horizontal destination is as wide as its icon, its label and 16dp either\n// side, so five of them need far more than the 600dp the breakpoint starts\n// at: five fifteen-letter labels come to about 780. Drawn anyway, every label\n// was cut short the moment the window crossed the breakpoint, while one\n// pixel narrower the vertical form showed them whole. So the bar measures\n// what its horizontal labels lack, and keeps the vertical form until it is\n// that much wider — see `useCramped`.\n//\n// A vertical destination's label stays on one line and is cut short with an\n// ellipsis where the destination's share of the bar ends, and a label cut\n// short shows its full text in the browser's tooltip on hover — see\n// `src/navigation`. Five destinations give each label 69dp at a 375dp\n// window and 66dp at 360dp, about ten characters of label medium, so five\n// destinations' names have to be short.\n//\n// The 64dp is the destinations' row rather than the bar's height, and the\n// bar grows past it: by padding the call site gives it, such as the inset a\n// phone's home indicator asks for, and with its labels under a reader's\n// wider text spacing. The bar adds no inset of its own, since only the call\n// site knows whether the bar sits at the screen's edge.\n//\n// The bar is a `<nav>`, and a page usually has more than one navigation\n// landmark, so name it with `aria-label`.\n\nconst styles = {\n  destinations: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kzQI83: \"x1iyjqo2\",\n    kjj79g: \"xl56j7k\",\n    k7Eaqz: \"xeuugli\",\n    $$css: true\n  }\n};\n\n// The window size the bar draws its horizontal form at, which the styles read\n// as `media.medium`. Spelled again for `matchMedia`, the one thing here that\n// has to know it outside a stylesheet — see `useCramped`.\nconst HORIZONTAL = '(width >= 600px)';\ntype NavigationBarProps = RenderComponentProps<'nav'> & {\n  /**\n   * The route of the current destination, matched exactly against each\n   * destination's `href`. The match carries `aria-current=\"page\"` and the\n   * active indicator. For a route nested under a destination, which no\n   * `href` matches whole, mark that destination with its own `isCurrent`.\n   */\n  selectedRoute?: string;\n};\n\n/**\n * The bar of three to five top-level destinations a compact window keeps at\n * its bottom edge. Each destination is a link, so it routes through React\n * Aria's `RouterProvider` when the app has one. The bar is a navigation\n * landmark, so name it with `aria-label`, and give a badge its words in\n * `badgeLabel`, since the badge itself is hidden from assistive technology.\n *\n * Its form follows the window. Below 600px each destination is vertical, its\n * icon over its label, and the destinations share the bar's width; from 600px\n * each is a horizontal pill, once the window is wide enough for every label\n * to show whole.\n *\n * ```tsx\n * <NavigationBar aria-label=\"Label\" selectedRoute=\"/first\">\n *   <NavigationBar.Item href=\"/first\" icon={<FirstIcon />}>\n *     First item\n *   </NavigationBar.Item>\n *   <NavigationBar.Item\n *     badge={3}\n *     badgeLabel=\"3 new\"\n *     href=\"/second\"\n *     icon={<SecondIcon />}\n *   >\n *     Second item\n *   </NavigationBar.Item>\n *   <NavigationBar.Item href=\"/third\" icon={<ThirdIcon />}>\n *     Third item\n *   </NavigationBar.Item>\n * </NavigationBar>\n * ```\n *\n * The call site's `className` and `style` land on the `<nav>`. A bar kept at\n * the bottom edge of a phone's screen clears its home indicator with padding,\n * which adds to the bar's height rather than squeezing the destinations:\n *\n * ```tsx\n * <NavigationBar\n *   aria-label=\"Label\"\n *   style={{ paddingBlockEnd: 'env(safe-area-inset-bottom)' }}\n * >\n * ```\n */\nfunction NavigationBar({\n  children,\n  render,\n  selectedRoute,\n  ...props\n}: NavigationBarProps) {\n  // The element, held as state rather than in a ref object, since the bar\n  // measures it from an effect and has to run again when it changes.\n  const [element, setElement] = useState<HTMLElement | null>(null);\n  const isCramped = useCramped(element);\n  // The call site's ref lands on the same element. Read off `props` rather\n  // than destructured, as `useRender` reads it, so the compiler sees a prop\n  // holding still rather than a ref read during render.\n  const merged = useMemo(() => mergeRefs(setElement, props.ref ?? undefined), [props.ref]);\n  const context = useMemo(() => ({\n    form: isCramped ? 'barCramped' as const : 'bar' as const,\n    selectedRoute\n  }), [isCramped, selectedRoute]);\n  const bar = useRender({\n    defaultTagName: 'nav',\n    props: {\n      ...props,\n      ...mergeStyles({\n        className: \"x6s0dn4 x1mjdul6 x9f619 x78zum5 xh8yej3 x8nclml\"\n      }, props),\n      children: <NavigationList layout={styles.destinations}>{children}</NavigationList>,\n      ref: merged\n    },\n    render\n  });\n  return <NavigationContext value={context}>{bar}</NavigationContext>;\n}\n\n/**\n * One destination of a navigation bar — an icon, a label and, when it is the\n * current one, the active indicator. See `NavigationBar`.\n *\n * Defined here rather than re-exported from `src/navigation`: a re-export\n * let the build hand the package entry that module directly, past this\n * module's client directive, and a server component importing it got the\n * component itself rather than a reference to a client one.\n */\nfunction NavigationBarItem(props: NavigationItemProps & RefAttributes<HTMLAnchorElement>) {\n  return <NavigationItem {...props} />;\n}\n\n/**\n * How much wider the bar would have to be for none of its labels to be cut\n * short: what each one lacks of its own width, summed. A label is the last\n * part of its destination's link, in its item of the bar's list.\n */\nfunction shortfallOf(bar: HTMLElement) {\n  let total = 0;\n  for (const destination of bar.querySelectorAll(':scope > ul > li > a')) {\n    const label = destination.lastElementChild;\n    if (label instanceof HTMLElement) {\n      total += Math.max(0, label.scrollWidth - label.clientWidth);\n    }\n  }\n  return total;\n}\n\n/**\n * Whether `bar`, at a width that draws its horizontal form, is too narrow\n * for it, so it draws the vertical one instead.\n *\n * The horizontal form is measured as it is drawn: where it cuts labels short,\n * the bar records the width it would need and switches, and it switches back\n * once it is that wide. A change to the destinations' text clears the record,\n * since what they need has changed with it. Measured in a layout effect, so\n * a bar that cannot fit is never painted cut short.\n */\nfunction useCramped(bar: HTMLElement | null) {\n  // The bar's width the horizontal form needs, while it is wider than the\n  // bar; undefined while the horizontal form fits, or has not been measured.\n  const [needed, setNeeded] = useState<number | undefined>(undefined);\n  useLayoutEffect(() => {\n    if (bar === null) {\n      return undefined;\n    }\n    const measure = () => {\n      if (needed !== undefined) {\n        if (bar.clientWidth >= needed) {\n          setNeeded(undefined);\n        }\n        return;\n      }\n      if (!window.matchMedia(HORIZONTAL).matches) {\n        return;\n      }\n      const shortfall = shortfallOf(bar);\n      if (shortfall > 0) {\n        // A pixel over, so a bar exactly as wide as the sum of fractional\n        // widths does not flip back and forth.\n        setNeeded(bar.clientWidth + shortfall + 1);\n      }\n    };\n    const relabel = () => {\n      setNeeded(undefined);\n    };\n    measure();\n    const resize = new ResizeObserver(measure);\n    resize.observe(bar);\n    const text = new MutationObserver(relabel);\n    text.observe(bar, {\n      characterData: true,\n      childList: true,\n      subtree: true\n    });\n    return () => {\n      resize.disconnect();\n      text.disconnect();\n    };\n  }, [bar, needed]);\n  return needed !== undefined;\n}\nNavigationBar.Item = NavigationBarItem;\nexport type { NavigationItemProps as NavigationBarItemProps, NavigationBarProps };\nexport { NavigationBarItem };\nexport default NavigationBar;"],"mappings":";;;;;;;;;;AAmDA,MAAMgB,SAAS,EACbC,cAAc;CACZC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,OAAO;AACT,EACF;AAKA,MAAMC,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDnB,SAAAG,cAAAC,IAAA;CAAA,MAAAC,IAAA5B,EAAA,EAAA;CAAA,IAAA6B;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAN;CAAA,IAAAG,EAAA,OAAAD,IAAA;EAAuB,CAAA,CAAAE,UAAAE,QAAAN,eAAA,GAAAK,SAAAH;EAKFC,EAAA,KAAAD;EAAAC,EAAA,KAAAC;EAAAD,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAH;CAAA,OAAA;EAAAI,WAAAD,EAAA;EAAAE,QAAAF,EAAA;EAAAG,SAAAH,EAAA;EAAAH,gBAAAG,EAAA;CAAA;CAGnB,MAAA,CAAAI,SAAAC,cAA8B5B,SAA6B,IAAI;CAC/D,MAAA6B,YAAkBC,WAAWH,OAAO;CAIe,MAAAI,KAAAN,MAAKO,OAALC,KAAAA;CAAsB,IAAAC;CAAA,IAAAX,EAAA,OAAAQ,IAAA;EAA5CG,KAAA5B,UAAUsB,YAAYG,EAAsB;EAACR,EAAA,KAAAQ;EAAAR,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAA1E,MAAAY,SAA6BD;CAErB,MAAAE,KAAAP,YAAY,eAAwB;CAAc,IAAAS;CAAA,IAAAf,EAAA,OAAAH,iBAAAG,EAAA,OAAAa,IAAA;EAD3BE,KAAA;GAAAC,MACvBH;GAAkDhB;EAE1D;EAACG,EAAA,KAAAH;EAAAG,EAAA,KAAAa;EAAAb,EAAA,KAAAe;CAAA,OAAAA,KAAAf,EAAA;CAHD,MAAAiB,UAA+BF;CAGC,IAAAG;CAAA,IAAAlB,EAAA,QAAAE,OAAA;EAKzBgB,KAAAjC,YAAY,EAAAkC,WACF,kDACb,GAAGjB,KAAK;EAACF,EAAA,MAAAE;EAAAF,EAAA,MAAAkB;CAAA,OAAAA,KAAAlB,EAAA;CAAA,IAAAoB;CAAA,IAAApB,EAAA,QAAAC,UAAA;EACCmB,KAAA,oBAAC,gBAAD;GAAwB,QAAAjC,OAAMC;GAAgBa;EAA/B,CAAA;EAAyDD,EAAA,MAAAC;EAAAD,EAAA,MAAAoB;CAAA,OAAAA,KAAApB,EAAA;CAAA,IAAAqB;CAAA,IAAArB,EAAA,QAAAY,UAAAZ,EAAA,QAAAE,SAAAF,EAAA,QAAAkB,MAAAlB,EAAA,QAAAoB,IAAA;EAL7EC,KAAA;GAAA,GACFnB;GAAK,GACLgB;GAEMjB,UACCmB;GAAwEX,KAC7EG;EACP;EAACZ,EAAA,MAAAY;EAAAZ,EAAA,MAAAE;EAAAF,EAAA,MAAAkB;EAAAlB,EAAA,MAAAoB;EAAApB,EAAA,MAAAqB;CAAA,OAAAA,KAAArB,EAAA;CAAA,IAAAsB;CAAA,IAAAtB,EAAA,QAAAG,UAAAH,EAAA,QAAAqB,IAAA;EATmBC,KAAA;GAAAC,gBACJ;GAAKrB,OACdmB;GAONlB;EAEH;EAACH,EAAA,MAAAG;EAAAH,EAAA,MAAAqB;EAAArB,EAAA,MAAAsB;CAAA,OAAAA,KAAAtB,EAAA;CAXD,MAAAwB,MAAYxC,UAAUsC,EAWrB;CAAE,IAAAG;CAAA,IAAAzB,EAAA,QAAAwB,OAAAxB,EAAA,QAAAiB,SAAA;EACIQ,KAAA,oBAAC,mBAAD;GAA0BR,OAAAA;GAAUO,UAAAA;EAAlB,CAAA;EAA0CxB,EAAA,MAAAwB;EAAAxB,EAAA,MAAAiB;EAAAjB,EAAA,MAAAyB;CAAA,OAAAA,KAAAzB,EAAA;CAAA,OAA5DyB;AAA4D;;;;;;;;;;AAYrE,SAAAC,kBAAAxB,OAAA;CAAA,MAAAF,IAAA5B,EAAA,CAAA;CAAA,IAAA2B;CAAA,IAAAC,EAAA,OAAAE,OAAA;EACSH,KAAA,oBAAC,gBAAD,EAAe,GAAKG,MAAK,CAAA;EAAIF,EAAA,KAAAE;EAAAF,EAAA,KAAAD;CAAA,OAAAA,KAAAC,EAAA;CAAA,OAA7BD;AAA6B;;;;;;AAQtC,SAAS4B,YAAYH,KAAkB;CACrC,IAAIK,QAAQ;CACZ,KAAK,MAAMC,eAAeN,IAAIO,iBAAiB,sBAAsB,GAAG;EACtE,MAAMC,QAAQF,YAAYG;EAC1B,IAAID,iBAAiBJ,aACnBC,SAASK,KAAKC,IAAI,GAAGH,MAAMI,cAAcJ,MAAMK,WAAW;CAE9D;CACA,OAAOR;AACT;;;;;;;;;;;AAYA,SAAAtB,WAAAiB,KAAA;CAAA,MAAAxB,IAAA5B,EAAA,CAAA;CAGE,MAAA,CAAAkE,QAAAC,aAA4B9D,SAA6BiC,KAAAA,CAAS;CAAE,IAAAX;CAAA,IAAAS;CAAA,IAAAR,EAAA,OAAAwB,OAAAxB,EAAA,OAAAsC,QAAA;EACpDvC,WAAA;GACd,IAAIyB,QAAQ,MAAI;GAGhB,MAAAgB,gBAAgB;IACd,IAAIF,WAAW5B,KAAAA,GAAS;KACtB,IAAIc,IAAGa,eAAgBC,QACrBC,UAAU7B,KAAAA,CAAS;KACpB;IAAA;IAGH,IAAI,CAAC+B,OAAMC,WAAY/C,UAAU,CAAC,CAAAgD,SAAQ;IAG1C,MAAAC,YAAkBjB,YAAYH,GAAG;IACjC,IAAIoB,YAAY,GAGdL,UAAUf,IAAGa,cAAeO,YAAY,CAAC;GAC1C;GAEH,MAAAC,gBAAgB;IACdN,UAAU7B,KAAAA,CAAS;GAAC;GAEtB8B,QAAQ;GACR,MAAAM,SAAe,IAAIC,eAAeP,OAAO;GACzCM,OAAME,QAASxB,GAAG;GAClB,MAAAyB,OAAa,IAAIC,iBAAiBL,OAAO;GACzCI,KAAID,QAASxB,KAAK;IAAA2B,eACD;IAAIC,WACR;IAAIC,SACN;GACX,CAAC;GAAC,aACK;IACLP,OAAMQ,WAAY;IAClBL,KAAIK,WAAY;GAAC;EAClB;EACA9C,KAAA,CAACgB,KAAKc,MAAM;EAACtC,EAAA,KAAAwB;EAAAxB,EAAA,KAAAsC;EAAAtC,EAAA,KAAAD;EAAAC,EAAA,KAAAQ;CAAA,OAAA;EAAAT,KAAAC,EAAA;EAAAQ,KAAAR,EAAA;CAAA;CArChBzB,gBAAgBwB,IAqCbS,EAAa;CAAC,OACV8B,WAAW5B,KAAAA;AAAS;AAE7BZ,cAAcyD,OAAO7B"}

package/dist/components/navigation-tree/index.js

@@ -47,10 +47,11 @@ function chevronFor(state) {
 }
 function itemContent(label, leading, supporting, trailing, ripple) {
 	return (state) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(RowContent, {
+		chevron: chevronFor(state),
 		isDisabled: state.isDisabled,
 		isEmphasized: state.isCurrentAncestor,
 		isSelected: state.isCurrent,
-		leading: leadingFor(state, leading),
+		leading,
 		supporting,
 		trailing,
 		variant: "drawer",
@@ -64,14 +65,6 @@ function itemStyles(state) {
 	return props(rowStyles.base, rowStyles.drawer, styles.indent, state.isCurrent && rowStyles.selectedDrawer, state.isHovered && rowStyles.hovered, state.isFocusVisible && rowStyles.focusVisible, state.isPressed && rowStyles.pressed, state.isDisabled && rowStyles.disabled);
 }
 /**
-* The caret, then whatever the row was given. Its return type is written out
-* rather than inferred: `ReactNode` is a union that includes a promise, and
-* a function inferred as returning one has to be `async`.
-*/
-function leadingFor(state, leading) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [chevronFor(state), leading] });
-}
-/**
 * A nested set of links, with the current one marked. Which row is current
 * is React Aria's: give the tree a `selectedRoute` and each row an `href`,
 * and the row whose `href` matches is the current one — its ancestors are

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","NavigationTreeItemRenderProps","NavigationTreeItemProps","RACNavigationTreeItemProps","NavigationTreeProps","RACNavigationTreeProps","stylex","Button","RACButton","NavigationTree","RACNavigationTree","NavigationTreeHeader","RACNavigationTreeHeader","NavigationTreeItem","RACNavigationTreeItem","NavigationTreeItemContent","RACNavigationTreeItemContent","NavigationTreeSection","RACNavigationTreeSection","collectionStyles","ChevronEndGlyph","useRipple","RowContent","rowStyles","focus","mergeStatefulStyles","mergeStyles","colors","motion","radii","spacing","typography","styles","chevron","kGNEyG","kWkggS","kaIpWk","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kmuXW","kjj79g","kmVPX3","$$css","indent","kZCmMZ","NavigationTreeHeaderProps","children","NavigationTreeItemText","Omit","T","className","leading","style","supporting","trailing","label","textValue","NavigationTreeSectionProps","Parameters","header","chevronClassName","props","ring","chevronFor","state","hasChildItems","isExpanded","itemContent","ripple","isDisabled","isCurrentAncestor","isCurrent","leadingFor","drawerSurface","itemStyles","base","drawer","selectedDrawer","isHovered","hovered","isFocusVisible","focusVisible","isPressed","pressed","disabled","$","t0","container","t1","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","T0","t2","textValueFor","t3","handlers","t4","t5","surface","t6","t7","section","undefined","Item","Section","stylex.props","RACButton","NavigationTree","_c","props","RACNavigationTree","NavigationTreeHeader","RACNavigationTreeHeader","NavigationTreeItem","RACNavigationTreeItem","RACNavigationTreeItemContent","NavigationTreeSection","RACNavigationTreeSection"],"sources":["../../../src/components/navigation-tree/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { NavigationTreeItemRenderProps, NavigationTreeItemProps as RACNavigationTreeItemProps, NavigationTreeProps as RACNavigationTreeProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, NavigationTree as RACNavigationTree, NavigationTreeHeader as RACNavigationTreeHeader, NavigationTreeItem as RACNavigationTreeItem, NavigationTreeItemContent as RACNavigationTreeItemContent, NavigationTreeSection as RACNavigationTreeSection } from 'react-aria-components';\nimport { collectionStyles } from '../../collection/styles';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// The navigation drawer page's contents: a nested set of links with the\n// current one marked. For an app's top-level destinations Material Design has\n// the expanded navigation rail replace the drawer, and NavigationRail draws\n// it; this is for a tree of links nested deeper than a rail holds. Each row is\n// the row every list here draws — `src/row`, shared with ListItem, ListBox,\n// List, Tree and Disclosure — under that module's `drawer` variant, which is\n// the page's own 56dp row with a label-large label and a secondary-container\n// pill on the current one.\n//\n// This is Tree's shape over React Aria's navigation primitive, and the\n// difference is what the two are for. A tree selects: rows are chosen and\n// the choice is reported. A navigation tree navigates: each row is a link,\n// and which one is current is decided by matching the route rather than by\n// anything the reader selected. So this takes `selectedRoute` where Tree\n// takes `selectedKeys`, and has no selection at all — React Aria omits every\n// selection prop from it.\n//\n// Three things are this component's own.\n//\n// **A level indents by one caret's width**, exactly as Tree does and for the\n// same reason: React Aria writes the depth on each row as a custom property,\n// and 24dp is the size the drawer page gives its icon, so a level of nesting\n// is as wide as the glyph beside it.\n//\n// **An ancestor of the current row is marked too, and softly.** React Aria\n// reports it, and a drawer whose current row is collapsed out of sight would\n// otherwise show nothing at all. It takes the label's weight rather than the\n// pill, so the trail reads as a trail rather than as a second current row.\n//\n// That weight goes on the label itself, through the row module's\n// `isEmphasized`, and it has to: the row's own `font-weight` never reaches\n// the text, since `RowContent` draws the label in a span stating the\n// label-large role in full, weight included. The pair also has to differ by\n// more than a step — the label's own weight is already the medium one, so a\n// trail set in medium is a trail nobody can see.\n//\n// **The pill's shape is the library's own.** The page gives the active\n// indicator's colour, height and width but keeps its shape behind a token\n// set that does not open to a script — the same gap recorded on the buttons\n// and lists pages. It is drawn as a full pill, which is what the page's own\n// images show and what 56dp of height comes to.\n\nconst styles = {\n  chevron: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  indent: {\n    kZCmMZ: \"x1187sqy\",\n    $$css: true\n  }\n};\ntype NavigationTreeHeaderProps = {\n  /** The section's heading. */\n  children?: ReactNode;\n};\ntype NavigationTreeItemProps<T extends object = object> = NavigationTreeItemText & Omit<RACNavigationTreeItemProps<T>, 'children' | 'className' | 'style' | 'textValue'> & {\n  /** The rows nested under this one, as further `NavigationTree.Item` entries. */\n  children?: ReactNode;\n  /** A function may compute the class from the row's render state. */\n  className?: RACNavigationTreeItemProps<T>['className'];\n  /** Content before the label: an icon. */\n  leading?: ReactNode;\n  /** A function may compute the style from the row's render state. */\n  style?: RACNavigationTreeItemProps<T>['style'];\n  /** A second line under the label, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the label, such as a count. */\n  trailing?: ReactNode;\n};\n\n// What the row is worth as text, which React Aria requires: a row here wraps\n// its label in elements, so it cannot read one off the children the way a\n// plain-string child would give it. A string label is taken as the value,\n// which is the common case; anything else has to say what it is worth, and\n// this is what makes the compiler ask rather than leaving a row unnamed.\ntype NavigationTreeItemText = {\n  /** The row's label — where it goes. */\n  label: string;\n  /** What typeahead matches the row on. Defaults to the label. */\n  textValue?: string;\n} | {\n  /** The row's label, as something other than a plain string. */\n  label?: ReactNode;\n  /** What typeahead matches the row on, and what names it. */\n  textValue: string;\n};\ntype NavigationTreeProps<T extends object = object> = Omit<RACNavigationTreeProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the tree's render state. */\n  className?: RACNavigationTreeProps<T>['className'];\n  /** A function may compute the style from the tree's render state. */\n  style?: RACNavigationTreeProps<T>['style'];\n};\ntype NavigationTreeSectionProps<T extends object = object> = Omit<Parameters<typeof RACNavigationTreeSection<T>>[0], 'children'> & {\n  /**\n   * The rows in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\n\n// The button itself never turns — the glyph inside it does, so the press\n// target stays a square whichever way the row is pointing.\nfunction chevronClassName() {\n  return stylex.props(styles.chevron, focus.ring).className ?? '';\n}\n\n// The caret, or the space it would have taken. Written as a call rather than\n// inline at the prop, which is what react-perf's no-new-function-as-prop and\n// jsx-no-jsx-as-prop are after; the React Compiler memoises the result on\n// its inputs.\n//\n// A leaf gets the space rather than nothing, so its label lines up with the\n// label of a sibling that opens.\nfunction chevronFor(state: NavigationTreeItemRenderProps): ReactNode {\n  if (!state.hasChildItems) {\n    return <span className=\"xxk0z11 x2lah0s xvy4d1p\" />;\n  }\n  return <RACButton className={chevronClassName} slot=\"chevron\">\n      <ChevronEndGlyph {...{\n      0: {\n        className: \"x12w9bfk xxk0z11 xvy4d1p xu3v78v x1c071of xkzkux9 x11xpdln xpc4ca7\"\n      },\n      1: {\n        className: \"x12w9bfk xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 xaaet9u x1iffjtl\"\n      }\n    }[!!state.isExpanded << 0]} />\n    </RACButton>;\n}\n\n// What a row draws, from React Aria's render state. The caret comes first,\n// then whatever the row was given — one order, always, which is what keeps a\n// column of rows reading down. The ripple goes in a box carrying the row's\n// pill — see `drawerSurface` in src/row/styles.ts.\nfunction itemContent(label: ReactNode, leading: ReactNode, supporting: ReactNode, trailing: ReactNode, ripple: ReactNode) {\n  return (state: NavigationTreeItemRenderProps): ReactNode => <>\n      <RowContent isDisabled={state.isDisabled} isEmphasized={state.isCurrentAncestor} isSelected={state.isCurrent} leading={leadingFor(state, leading)} supporting={supporting} trailing={trailing} variant=\"drawer\">\n        {label}\n      </RowContent>\n      {state.isDisabled ? null : <span {...stylex.props(rowStyles.drawerSurface)}>{ripple}</span>}\n    </>;\n}\n\n// StyleX cannot target `[data-current]` on the element it is styling, so a\n// row's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so its ground and colour\n// win over the current container's. The state layers come from the render\n// state as well — see `focusVisible` in src/row/styles.ts — and React Aria\n// reports none of them on a disabled row, so nothing has to outrank them.\n// No overline, and so no three-line row: the navigation drawer page gives\n// one item height and one line of text. `List.Item` and `ListBox.Item` take\n// the prop because the lists page is what they draw; this row follows the\n// drawer's own metrics.\nfunction itemStyles(state: NavigationTreeItemRenderProps) {\n  return stylex.props(rowStyles.base, rowStyles.drawer, styles.indent, state.isCurrent && rowStyles.selectedDrawer, state.isHovered && rowStyles.hovered, state.isFocusVisible && rowStyles.focusVisible, state.isPressed && rowStyles.pressed, state.isDisabled && rowStyles.disabled);\n}\n\n/**\n * The caret, then whatever the row was given. Its return type is written out\n * rather than inferred: `ReactNode` is a union that includes a promise, and\n * a function inferred as returning one has to be `async`.\n */\nfunction leadingFor(state: NavigationTreeItemRenderProps, leading: ReactNode): ReactNode {\n  return <>\n      {chevronFor(state)}\n      {leading}\n    </>;\n}\n\n/**\n * A nested set of links, with the current one marked. Which row is current\n * is React Aria's: give the tree a `selectedRoute` and each row an `href`,\n * and the row whose `href` matches is the current one — its ancestors are\n * marked too, so a collapsed trail still shows where you are.\n *\n * ```tsx\n * <NavigationTree aria-label=\"Label\" selectedRoute=\"#second\">\n *   <NavigationTree.Item href=\"#first\" id=\"first\" label=\"First item\">\n *     <NavigationTree.Item href=\"#second\" id=\"second\" label=\"Second item\" />\n *   </NavigationTree.Item>\n * </NavigationTree>\n * ```\n *\n * There is no selection here, and that is React Aria's design rather than an\n * omission: a navigation tree navigates, so what is current comes from the\n * route rather than from anything the reader picked. `Tree` is the one that\n * selects.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction NavigationTree<T extends object>(props: NavigationTreeProps<T> & RefAttributes<HTMLDivElement>) {\n  return <RACNavigationTree<T> {...props} {...mergeStatefulStyles(stylex.props(collectionStyles.container), props)} />;\n}\n\n/**\n * A named group of rows. `header` names it, and is what a screen reader\n * reads before the rows inside.\n */\nfunction NavigationTreeHeader({\n  children\n}: NavigationTreeHeaderProps) {\n  return <RACNavigationTreeHeader className=\"x9f619 x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xw3mh6e x1clyivc x140yoea\">\n      {children}\n    </RACNavigationTreeHeader>;\n}\n\n/**\n * One row, and the rows under it. Give it an `href` — that is what\n * `selectedRoute` is matched against — and an `id`, which is the key\n * expansion is reported by.\n *\n * Rows nested as `children` are what make it a branch; a row with none is a\n * leaf and draws no caret.\n */\nfunction NavigationTreeItem<T extends object = object>({\n  children,\n  label,\n  leading,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: NavigationTreeItemProps<T> & RefAttributes<HTMLDivElement>) {\n  // The press ripple List's rows draw — see ListItem there.\n  const ripple = useRipple<HTMLDivElement>(true, {\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  }, true);\n  return <RACNavigationTreeItem<T> textValue={textValueFor(textValue, label)} {...ripple.handlers} {...props} {...mergeStatefulStyles(itemStyles, props)}>\n      <RACNavigationTreeItemContent>\n        {itemContent(label, leading, supporting, trailing, ripple.surface)}\n      </RACNavigationTreeItemContent>\n      {children}\n    </RACNavigationTreeItem>;\n}\n\n/**\n * A named group of rows, with its heading above them.\n */\nfunction NavigationTreeSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: NavigationTreeSectionProps<T> & RefAttributes<HTMLDivElement>) {\n  return <RACNavigationTreeSection<T> {...props} {...mergeStyles(stylex.props(collectionStyles.section), props)}>\n      {header === undefined ? null : <NavigationTreeHeader>{header}</NavigationTreeHeader>}\n      {children}\n    </RACNavigationTreeSection>;\n}\n\n// What React Aria matches typeahead on, and what names the row.\n// `NavigationTreeItemText` makes one of the two a string, so the last branch\n// is unreachable through the public type — it is there because destructuring\n// the two apart is what loses the narrowing, not because a row can arrive\n// without either.\nfunction textValueFor(textValue: string | undefined, label: ReactNode) {\n  if (textValue !== undefined) {\n    return textValue;\n  }\n  return typeof label === 'string' ? label : '';\n}\nNavigationTree.Item = NavigationTreeItem;\nNavigationTree.Section = NavigationTreeSection;\nexport type { NavigationTreeItemProps, NavigationTreeProps, NavigationTreeSectionProps };\nexport { NavigationTreeItem, NavigationTreeSection };\nexport default NavigationTree;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","NavigationTreeItemRenderProps","NavigationTreeItemProps","RACNavigationTreeItemProps","NavigationTreeProps","RACNavigationTreeProps","stylex","Button","RACButton","NavigationTree","RACNavigationTree","NavigationTreeHeader","RACNavigationTreeHeader","NavigationTreeItem","RACNavigationTreeItem","NavigationTreeItemContent","RACNavigationTreeItemContent","NavigationTreeSection","RACNavigationTreeSection","collectionStyles","ChevronEndGlyph","useRipple","RowContent","rowStyles","focus","mergeStatefulStyles","mergeStyles","colors","motion","radii","spacing","typography","styles","chevron","kGNEyG","kWkggS","kaIpWk","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kmuXW","kjj79g","kmVPX3","$$css","indent","kZCmMZ","NavigationTreeHeaderProps","children","NavigationTreeItemText","Omit","T","className","leading","style","supporting","trailing","label","textValue","NavigationTreeSectionProps","Parameters","header","chevronClassName","props","ring","chevronFor","state","hasChildItems","isExpanded","itemContent","ripple","isDisabled","isCurrentAncestor","isCurrent","drawerSurface","itemStyles","base","drawer","selectedDrawer","isHovered","hovered","isFocusVisible","focusVisible","isPressed","pressed","disabled","$","t0","container","t1","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","T0","t2","textValueFor","t3","handlers","t4","t5","surface","t6","t7","section","undefined","Item","Section","stylex.props","RACButton","NavigationTree","_c","props","RACNavigationTree","NavigationTreeHeader","RACNavigationTreeHeader","NavigationTreeItem","RACNavigationTreeItem","RACNavigationTreeItemContent","NavigationTreeSection","RACNavigationTreeSection"],"sources":["../../../src/components/navigation-tree/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { NavigationTreeItemRenderProps, NavigationTreeItemProps as RACNavigationTreeItemProps, NavigationTreeProps as RACNavigationTreeProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, NavigationTree as RACNavigationTree, NavigationTreeHeader as RACNavigationTreeHeader, NavigationTreeItem as RACNavigationTreeItem, NavigationTreeItemContent as RACNavigationTreeItemContent, NavigationTreeSection as RACNavigationTreeSection } from 'react-aria-components';\nimport { collectionStyles } from '../../collection/styles';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// The navigation drawer page's contents: a nested set of links with the\n// current one marked. For an app's top-level destinations Material Design has\n// the expanded navigation rail replace the drawer, and NavigationRail draws\n// it; this is for a tree of links nested deeper than a rail holds. Each row is\n// the row every list here draws — `src/row`, shared with ListItem, ListBox,\n// List, Tree and Disclosure — under that module's `drawer` variant, which is\n// the page's own 56dp row with a label-large label and a secondary-container\n// pill on the current one.\n//\n// This is Tree's shape over React Aria's navigation primitive, and the\n// difference is what the two are for. A tree selects: rows are chosen and\n// the choice is reported. A navigation tree navigates: each row is a link,\n// and which one is current is decided by matching the route rather than by\n// anything the reader selected. So this takes `selectedRoute` where Tree\n// takes `selectedKeys`, and has no selection at all — React Aria omits every\n// selection prop from it.\n//\n// Three things are this component's own.\n//\n// **A level indents by one caret's width**, exactly as Tree does and for the\n// same reason: React Aria writes the depth on each row as a custom property,\n// and 24dp is the size the drawer page gives its icon, so a level of nesting\n// is as wide as the glyph beside it.\n//\n// **An ancestor of the current row is marked too, and softly.** React Aria\n// reports it, and a drawer whose current row is collapsed out of sight would\n// otherwise show nothing at all. It takes the label's weight rather than the\n// pill, so the trail reads as a trail rather than as a second current row.\n//\n// That weight goes on the label itself, through the row module's\n// `isEmphasized`, and it has to: the row's own `font-weight` never reaches\n// the text, since `RowContent` draws the label in a span stating the\n// label-large role in full, weight included. The pair also has to differ by\n// more than a step — the label's own weight is already the medium one, so a\n// trail set in medium is a trail nobody can see.\n//\n// **The pill's shape is the library's own.** The page gives the active\n// indicator's colour, height and width but keeps its shape behind a token\n// set that does not open to a script — the same gap recorded on the buttons\n// and lists pages. It is drawn as a full pill, which is what the page's own\n// images show and what 56dp of height comes to.\n\nconst styles = {\n  chevron: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  indent: {\n    kZCmMZ: \"x1187sqy\",\n    $$css: true\n  }\n};\ntype NavigationTreeHeaderProps = {\n  /** The section's heading. */\n  children?: ReactNode;\n};\ntype NavigationTreeItemProps<T extends object = object> = NavigationTreeItemText & Omit<RACNavigationTreeItemProps<T>, 'children' | 'className' | 'style' | 'textValue'> & {\n  /** The rows nested under this one, as further `NavigationTree.Item` entries. */\n  children?: ReactNode;\n  /** A function may compute the class from the row's render state. */\n  className?: RACNavigationTreeItemProps<T>['className'];\n  /** Content before the label: an icon. */\n  leading?: ReactNode;\n  /** A function may compute the style from the row's render state. */\n  style?: RACNavigationTreeItemProps<T>['style'];\n  /** A second line under the label, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the label, such as a count. */\n  trailing?: ReactNode;\n};\n\n// What the row is worth as text, which React Aria requires: a row here wraps\n// its label in elements, so it cannot read one off the children the way a\n// plain-string child would give it. A string label is taken as the value,\n// which is the common case; anything else has to say what it is worth, and\n// this is what makes the compiler ask rather than leaving a row unnamed.\ntype NavigationTreeItemText = {\n  /** The row's label — where it goes. */\n  label: string;\n  /** What typeahead matches the row on. Defaults to the label. */\n  textValue?: string;\n} | {\n  /** The row's label, as something other than a plain string. */\n  label?: ReactNode;\n  /** What typeahead matches the row on, and what names it. */\n  textValue: string;\n};\ntype NavigationTreeProps<T extends object = object> = Omit<RACNavigationTreeProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the tree's render state. */\n  className?: RACNavigationTreeProps<T>['className'];\n  /** A function may compute the style from the tree's render state. */\n  style?: RACNavigationTreeProps<T>['style'];\n};\ntype NavigationTreeSectionProps<T extends object = object> = Omit<Parameters<typeof RACNavigationTreeSection<T>>[0], 'children'> & {\n  /**\n   * The rows in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\n\n// The button itself never turns — the glyph inside it does, so the press\n// target stays a square whichever way the row is pointing.\nfunction chevronClassName() {\n  return stylex.props(styles.chevron, focus.ring).className ?? '';\n}\n\n// The caret, or the space it would have taken. Written as a call rather than\n// inline at the prop, which is what react-perf's no-new-function-as-prop and\n// jsx-no-jsx-as-prop are after; the React Compiler memoises the result on\n// its inputs.\n//\n// A leaf gets the space rather than nothing, so its label lines up with the\n// label of a sibling that opens.\nfunction chevronFor(state: NavigationTreeItemRenderProps): ReactNode {\n  if (!state.hasChildItems) {\n    return <span className=\"xxk0z11 x2lah0s xvy4d1p\" />;\n  }\n  return <RACButton className={chevronClassName} slot=\"chevron\">\n      <ChevronEndGlyph {...{\n      0: {\n        className: \"x12w9bfk xxk0z11 xvy4d1p xu3v78v x1c071of xkzkux9 x11xpdln xpc4ca7\"\n      },\n      1: {\n        className: \"x12w9bfk xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 xaaet9u x1iffjtl\"\n      }\n    }[!!state.isExpanded << 0]} />\n    </RACButton>;\n}\n\n// What a row draws, from React Aria's render state. The caret comes first,\n// then whatever the row was given — one order, always, which is what keeps a\n// column of rows reading down. The ripple goes in a box carrying the row's\n// pill — see `drawerSurface` in src/row/styles.ts.\nfunction itemContent(label: ReactNode, leading: ReactNode, supporting: ReactNode, trailing: ReactNode, ripple: ReactNode) {\n  return (state: NavigationTreeItemRenderProps): ReactNode => <>\n      <RowContent chevron={chevronFor(state)} isDisabled={state.isDisabled} isEmphasized={state.isCurrentAncestor} isSelected={state.isCurrent} leading={leading} supporting={supporting} trailing={trailing} variant=\"drawer\">\n        {label}\n      </RowContent>\n      {state.isDisabled ? null : <span {...stylex.props(rowStyles.drawerSurface)}>{ripple}</span>}\n    </>;\n}\n\n// StyleX cannot target `[data-current]` on the element it is styling, so a\n// row's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so its ground and colour\n// win over the current container's. The state layers come from the render\n// state as well — see `focusVisible` in src/row/styles.ts — and React Aria\n// reports none of them on a disabled row, so nothing has to outrank them.\n// No overline, and so no three-line row: the navigation drawer page gives\n// one item height and one line of text. `List.Item` and `ListBox.Item` take\n// the prop because the lists page is what they draw; this row follows the\n// drawer's own metrics.\nfunction itemStyles(state: NavigationTreeItemRenderProps) {\n  return stylex.props(rowStyles.base, rowStyles.drawer, styles.indent, state.isCurrent && rowStyles.selectedDrawer, state.isHovered && rowStyles.hovered, state.isFocusVisible && rowStyles.focusVisible, state.isPressed && rowStyles.pressed, state.isDisabled && rowStyles.disabled);\n}\n\n/**\n * A nested set of links, with the current one marked. Which row is current\n * is React Aria's: give the tree a `selectedRoute` and each row an `href`,\n * and the row whose `href` matches is the current one — its ancestors are\n * marked too, so a collapsed trail still shows where you are.\n *\n * ```tsx\n * <NavigationTree aria-label=\"Label\" selectedRoute=\"#second\">\n *   <NavigationTree.Item href=\"#first\" id=\"first\" label=\"First item\">\n *     <NavigationTree.Item href=\"#second\" id=\"second\" label=\"Second item\" />\n *   </NavigationTree.Item>\n * </NavigationTree>\n * ```\n *\n * There is no selection here, and that is React Aria's design rather than an\n * omission: a navigation tree navigates, so what is current comes from the\n * route rather than from anything the reader picked. `Tree` is the one that\n * selects.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction NavigationTree<T extends object>(props: NavigationTreeProps<T> & RefAttributes<HTMLDivElement>) {\n  return <RACNavigationTree<T> {...props} {...mergeStatefulStyles(stylex.props(collectionStyles.container), props)} />;\n}\n\n/**\n * A named group of rows. `header` names it, and is what a screen reader\n * reads before the rows inside.\n */\nfunction NavigationTreeHeader({\n  children\n}: NavigationTreeHeaderProps) {\n  return <RACNavigationTreeHeader className=\"x9f619 x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xw3mh6e x1clyivc x140yoea\">\n      {children}\n    </RACNavigationTreeHeader>;\n}\n\n/**\n * One row, and the rows under it. Give it an `href` — that is what\n * `selectedRoute` is matched against — and an `id`, which is the key\n * expansion is reported by.\n *\n * Rows nested as `children` are what make it a branch; a row with none is a\n * leaf and draws no caret.\n */\nfunction NavigationTreeItem<T extends object = object>({\n  children,\n  label,\n  leading,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: NavigationTreeItemProps<T> & RefAttributes<HTMLDivElement>) {\n  // The press ripple List's rows draw — see ListItem there.\n  const ripple = useRipple<HTMLDivElement>(true, {\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  }, true);\n  return <RACNavigationTreeItem<T> textValue={textValueFor(textValue, label)} {...ripple.handlers} {...props} {...mergeStatefulStyles(itemStyles, props)}>\n      <RACNavigationTreeItemContent>\n        {itemContent(label, leading, supporting, trailing, ripple.surface)}\n      </RACNavigationTreeItemContent>\n      {children}\n    </RACNavigationTreeItem>;\n}\n\n/**\n * A named group of rows, with its heading above them.\n */\nfunction NavigationTreeSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: NavigationTreeSectionProps<T> & RefAttributes<HTMLDivElement>) {\n  return <RACNavigationTreeSection<T> {...props} {...mergeStyles(stylex.props(collectionStyles.section), props)}>\n      {header === undefined ? null : <NavigationTreeHeader>{header}</NavigationTreeHeader>}\n      {children}\n    </RACNavigationTreeSection>;\n}\n\n// What React Aria matches typeahead on, and what names the row.\n// `NavigationTreeItemText` makes one of the two a string, so the last branch\n// is unreachable through the public type — it is there because destructuring\n// the two apart is what loses the narrowing, not because a row can arrive\n// without either.\nfunction textValueFor(textValue: string | undefined, label: ReactNode) {\n  if (textValue !== undefined) {\n    return textValue;\n  }\n  return typeof label === 'string' ? label : '';\n}\nNavigationTree.Item = NavigationTreeItem;\nNavigationTree.Section = NavigationTreeSection;\nexport type { NavigationTreeItemProps, NavigationTreeProps, NavigationTreeSectionProps };\nexport { NavigationTreeItem, NavigationTreeSection };\nexport default NavigationTree;"],"mappings":"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"}

package/dist/components/number-field/index.d.ts

@@ -85,10 +85,16 @@ type NumberFieldProps$1 = {
  * its own — and `onChange` is handed the number, `NaN` while the field is
  * empty. `minValue`, `maxValue` and `step` shape it, and `formatOptions`
  * says how it reads, in the locale the page is in: a currency, a percentage,
- * a unit. Arrow keys step the value, and Page Up and Page Down by ten steps.
+ * a unit. The arrow keys and Page Up and Page Down step the value by one
+ * `step` each. Given a `minValue`, Home sets the value to it, and given a
+ * `maxValue`, End sets it to the last step that does not pass it.
  * The mouse wheel scrolls the page past it rather than stepping it, unless
  * `isWheelDisabled` is `false`.
  *
+ * ```tsx
+ * <NumberField defaultValue={1} label="Label" minValue={0} />
+ * ```
+ *
  * The call site's `className` and `style` land on the field as a whole,
  * which is the element a layout positions. The box, label, input and message
  * are the field chrome in `src/field`, shared with every other field.

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

@@ -79,10 +79,16 @@ const styles = {
 * its own — and `onChange` is handed the number, `NaN` while the field is
 * empty. `minValue`, `maxValue` and `step` shape it, and `formatOptions`
 * says how it reads, in the locale the page is in: a currency, a percentage,
-* a unit. Arrow keys step the value, and Page Up and Page Down by ten steps.
+* a unit. The arrow keys and Page Up and Page Down step the value by one
+* `step` each. Given a `minValue`, Home sets the value to it, and given a
+* `maxValue`, End sets it to the last step that does not pass it.
 * The mouse wheel scrolls the page past it rather than stepping it, unless
 * `isWheelDisabled` is `false`.
 *
+* ```tsx
+* <NumberField defaultValue={1} label="Label" minValue={0} />
+* ```
+*
 * The call site's `className` and `style` land on the field as a whole,
 * which is the element a layout positions. The box, label, input and message
 * are the field chrome in `src/field`, shared with every other field.

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","Ref","RefAttributes","ButtonRenderProps","NumberFieldProps","RACNumberFieldProps","stylex","Button","RACButton","NumberField","RACNumberField","FieldVariant","FieldBox","FieldInput","FieldMessage","fieldStyles","invalidFrom","useFieldValidationBehavior","MinusGlyph","PlusGlyph","mergeStatefulStyles","colors","motion","radii","sizing","spacing","stateLayerOpacity","typography","IconButton","BOX_HALF","sm","bodySmallLineHeight","bodyLargeLineHeight","BOX_OUTLINED_HALF","lg","STEPPER_REACH","controlXs","STACKED_INSET","INLINE_INSET","md","END_INSETS","horizontal","none","undefined","vertical","const","styles","stepper","k6CgDc","kGNEyG","kWkggS","kZKoxP","kaIpWk","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kzqmXN","kjj79g","kjBf7l","kInvED","k3XXqK","kMeerF","kmVPX3","kIyJzY","k1ekBW","kAMwcw","$$css","stepperBottomOutlined","kT0f0o","stepperDisabled","stepperFocused","stepperHovered","stepperOutlined","stepperPressed","stepperTop","kfmiAY","decrementLabel","description","error","floatingLabel","incrementLabel","inputRef","HTMLInputElement","isWheelDisabled","label","numeric","steppers","variant","Omit","t0","$","t1","isDisabled","t2","t3","t4","t5","t6","props","inline","validationBehavior","T0","t7","t8","root","t9","t10","0","className","1","2","3","t11","isRequired","t12","t13","StackedStepper","children","outlined","slot","stepperStyles","top","state","isHovered","isPressed","isFocusVisible","NumberField","_c","props","RACNumberField","stylex.props","RACButton"],"sources":["../../../src/components/number-field/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, Ref, RefAttributes } from 'react';\nimport type { ButtonRenderProps, NumberFieldProps as RACNumberFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, NumberField as RACNumberField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { MinusGlyph, PlusGlyph } from '../../glyphs';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport IconButton from '../icon-button';\n\n// The text fields page's field, holding a number: the same box, floating\n// label, underline and message as TextField, with the value in the mono\n// face and tabular figures by default, since a number is what those are\n// for, and two steppers at the trailing end.\n//\n// The steppers come in two layouts. Stacked, the plus over the minus, they\n// are a column flush with the box's top, end and bottom, each half of the\n// box's 56dp and 32dp wide, drawn here since the smallest icon button is\n// 32dp and two of those do not fit; the glyph is the icon buttons page's\n// 20dp for that size, and the hover, pressed, focus and disabled treatments\n// are the standard icon button's. Side by side, they are extra-small icon\n// buttons, the page's trailing icons in the library's own control, 12dp\n// from the end where the page puts a field's icons — the box's 16dp of\n// padding less the 4dp they pull back.\n//\n// **The stacked pair is the one control here that does not reach the 48dp\n// target**, and it is the layout rather than an oversight. Every other small\n// control in the library draws that target out of flow, over whatever sits\n// beside it — src/control/styles.ts carries the decision. These two have only\n// each other beside them: the column is 56dp tall in total, so two 48dp\n// targets inside it would overlap across most of their height, and the half\n// of a press that landed in the overlap would go to whichever box was\n// uppermost rather than to the glyph under the finger. Incrementing when a\n// reader meant to decrement is worse than a target that is short, so the\n// stacked layout keeps its 32 by 28 and the reader who needs the larger one\n// has `steppers=\"horizontal\"`, where each is an extra-small icon button and\n// gets the target from there — with the gap that keeps those two targets off\n// each other, which is the room the column has none of.\n//\n// A value that is typed rather than stepped — an amount, a year, an\n// identifier — can leave the steppers out with `steppers=\"none\"`. The box is\n// then a text field's, the input running to the box's own end padding, and\n// the arrow keys and Page Up and Page Down still step the value.\n//\n// React Aria's `NumberField` is the root and the box is its `Group`, which\n// is what names the box and the two steppers as one control; the steppers\n// are its increment and decrement buttons through context, disabled at the\n// ends of the range and kept out of the tab order, and the formatting is its\n// `formatOptions`.\n// Half the box, spelled from the same tokens the box derives its height\n// from rather than as the 28 that half of 56 comes to. A theme with a longer\n// body line makes the box taller — `Editorial` in src/theming/themes.ts does\n// — and a stated half leaves the pair short of the bottom edge they are\n// flush with.\n//\n// Written here rather than imported from src/field/styles.ts, which spells\n// the same two expressions: the StyleX compiler resolves a constant across\n// files only out of a `.stylex.ts` module, the same reason that file gives\n// for re-declaring the forced-colours query. The two have to move together.\nconst BOX_HALF = `calc((2 * ${spacing.sm} + ${typography.bodySmallLineHeight} + ${typography.bodyLargeLineHeight}) / 2)`;\nconst BOX_OUTLINED_HALF = `calc((2 * ${spacing.lg} + ${typography.bodyLargeLineHeight}) / 2)`;\n\n// How much of the end of the box's column the steppers take, with the 8dp\n// between them and the input, which the label stops short of — FieldBox's\n// `endInset`. Without it the label ran the column's width, under the\n// steppers, and a long one was cut short beneath them. Each is the input's\n// own end, so the label ends where the value does.\n//\n// Stacked, the 32dp column less the 16dp of the box's padding it reaches\n// into; side by side, the two extra-small buttons and the 8dp between them,\n// less the 4dp they reach into the padding.\n// How far a side-by-side stepper reaches past the control's line above and\n// below it: a negative margin, half the difference between the two.\nconst STEPPER_REACH = `calc((${typography.bodyLargeLineHeight} - ${sizing.controlXs}) / 2)`;\nconst STACKED_INSET = `calc(32px - ${spacing.lg} + ${spacing.sm})`;\nconst INLINE_INSET = `calc(2 * ${sizing.controlXs} + ${spacing.sm} + ${spacing.md} - ${spacing.lg} + ${spacing.sm})`;\n\n// Each layout's inset, keyed by the prop. With no steppers there is nothing\n// for the label to stop short of, so the box's own default holds.\nconst END_INSETS = {\n  horizontal: INLINE_INSET,\n  none: undefined,\n  vertical: STACKED_INSET\n} as const;\nconst styles = {\n  stepper: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1viytl0\",\n    kaIpWk: \"x2u8bby\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1td3qas\",\n    kjj79g: \"xl56j7k\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xs2xxs2\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  stepperBottomOutlined: {\n    kT0f0o: \"x4gcak0\",\n    $$css: true\n  },\n  stepperDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  stepperFocused: {\n    k3XXqK: \"xaatb59\",\n    $$css: true\n  },\n  stepperHovered: {\n    kWkggS: \"x14noynh\",\n    $$css: true\n  },\n  stepperOutlined: {\n    kZKoxP: \"x1o675yb\",\n    $$css: true\n  },\n  stepperPressed: {\n    kWkggS: \"x123fei2\",\n    $$css: true\n  },\n  stepperTop: {\n    kfmiAY: \"xirz1nw\",\n    $$css: true\n  }\n};\ntype NumberFieldProps = {\n  /**\n   * The name of the stepper that lowers the value, for a screen reader. Left\n   * out, React Aria names it in the reader's locale, followed by the field's\n   * own label — \"Decrease Quantity\" in English.\n   */\n  decrementLabel?: string;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value, as the text fields page draws it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * The name of the stepper that raises the value, for a screen reader. Left\n   * out, React Aria names it in the reader's locale, followed by the field's\n   * own label — \"Increase Quantity\" in English.\n   */\n  incrementLabel?: string;\n  /**\n   * A ref to the field's own `<input>`, which is the element a call site moves\n   * focus to — after a server's error, say. `ref` is the field as a whole.\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * Whether the mouse wheel and a trackpad's scroll leave the value alone.\n   * React Aria steps a focused number field's value with the wheel, so a\n   * reader scrolling a long form past a field they had left focused changed\n   * its value instead of moving the page. Stepping from the wheel is the\n   * call site's to ask for, with `false`.\n   * @default true\n   */\n  isWheelDisabled?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a field with no\n   * label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * Renders the value in the mono face with tabular figures, for amounts and\n   * other numbers meant to be compared down a column. On by default, since a\n   * number field holds nothing else.\n   * @default true\n   */\n  numeric?: boolean;\n  /**\n   * How the two steppers sit at the end of the box: stacked, the plus over\n   * the minus, flush with the box's edge, or side by side as extra-small\n   * icon buttons. `'none'` draws neither, for a value that is typed rather\n   * than stepped; the keyboard still steps it.\n   * @default 'vertical'\n   */\n  steppers?: 'horizontal' | 'none' | 'vertical';\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats — the text fields page's two fields.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACNumberFieldProps, 'children' | 'isInvalid' | 'isWheelDisabled' | 'validationBehavior'>;\n\n/**\n * A labelled number input with steppers. Its value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep\n * its own — and `onChange` is handed the number, `NaN` while the field is\n * empty. `minValue`, `maxValue` and `step` shape it, and `formatOptions`\n * says how it reads, in the locale the page is in: a currency, a percentage,\n * a unit. Arrow keys step the value, and Page Up and Page Down by ten steps.\n * The mouse wheel scrolls the page past it rather than stepping it, unless\n * `isWheelDisabled` is `false`.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions. The box, label, input and message\n * are the field chrome in `src/field`, shared with every other field.\n */\nfunction NumberField({\n  decrementLabel,\n  description,\n  error,\n  floatingLabel = true,\n  incrementLabel,\n  inputRef,\n  isDisabled = false,\n  isWheelDisabled = true,\n  label,\n  numeric = true,\n  steppers = 'vertical',\n  variant = 'filled',\n  ...props\n}: NumberFieldProps & RefAttributes<HTMLDivElement>) {\n  const inline = steppers === 'horizontal';\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACNumberField isDisabled={isDisabled} isInvalid={invalidFrom(error)} isWheelDisabled={isWheelDisabled} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox endInset={END_INSETS[steppers]} floatingLabel={floatingLabel} isRequired={props.isRequired} label={label} variant={variant}>\n        {steppers === 'none' ? <FieldInput numeric={numeric} ref={inputRef} /> : <div {...{\n        0: {\n          className: \"x1cy8zhl x9f619 x78zum5 x126z3so\"\n        },\n        1: {\n          className: \"x9f619 x78zum5 x126z3so x6s0dn4\"\n        }\n      }[!!inline << 0]}>\n            <FieldInput numeric={numeric} ref={inputRef} />\n            <div {...{\n          0: {\n            className: \"x9f619 x78zum5 xdt5ytf x2lah0s x1motrhk xk4mfur\"\n          },\n          2: {\n            className: \"x9f619 x78zum5 x2lah0s x1q0g3np x126z3so x1jblbm6 x6rec7h x1tn5xpv\"\n          },\n          1: {\n            className: \"x9f619 x78zum5 xdt5ytf x2lah0s xk4mfur x17v9ssf\"\n          },\n          3: {\n            className: \"x9f619 x78zum5 x2lah0s x1q0g3np x126z3so x1jblbm6 x1tn5xpv x17v9ssf\"\n          }\n        }[!!inline << 1 | !!(!inline && variant === 'outlined') << 0]}>\n              {inline ? <>\n                  <IconButton aria-label={decrementLabel} size=\"xs\" slot=\"decrement\">\n                    <MinusGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n                  </IconButton>\n                  <IconButton aria-label={incrementLabel} size=\"xs\" slot=\"increment\">\n                    <PlusGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n                  </IconButton>\n                </> : <>\n                  <StackedStepper label={incrementLabel} outlined={variant === 'outlined'} slot=\"increment\">\n                    <PlusGlyph className=\"x1qx5ct2 x1lliihq xw4jnvo\" />\n                  </StackedStepper>\n                  <StackedStepper label={decrementLabel} outlined={variant === 'outlined'} slot=\"decrement\">\n                    <MinusGlyph className=\"x1qx5ct2 x1lliihq xw4jnvo\" />\n                  </StackedStepper>\n                </>}\n            </div>\n          </div>}\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACNumberField>;\n}\nfunction StackedStepper({\n  children,\n  label,\n  outlined,\n  slot\n}: {\n  children: ReactNode;\n  label: string | undefined;\n  outlined: boolean;\n  slot: 'decrement' | 'increment';\n}) {\n  return <RACButton aria-label={label} slot={slot} {...mergeStatefulStyles(stepperStyles(slot === 'increment', outlined), {})}>\n      {children}\n    </RACButton>;\n}\n\n// A stacked stepper: React Aria's button with the slot the field's context\n// looks for, drawn from its render state. Built by a call rather than\n// written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after.\nfunction stepperStyles(top: boolean, outlined: boolean) {\n  return (state: ButtonRenderProps) => stylex.props(styles.stepper, outlined && styles.stepperOutlined, top && styles.stepperTop, !top && outlined && styles.stepperBottomOutlined, state.isHovered && !state.isDisabled && styles.stepperHovered, state.isPressed && !state.isDisabled && styles.stepperPressed, state.isFocusVisible && styles.stepperFocused, state.isDisabled && styles.stepperDisabled);\n}\nexport type { NumberFieldProps };\nexport default NumberField;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","Ref","RefAttributes","ButtonRenderProps","NumberFieldProps","RACNumberFieldProps","stylex","Button","RACButton","NumberField","RACNumberField","FieldVariant","FieldBox","FieldInput","FieldMessage","fieldStyles","invalidFrom","useFieldValidationBehavior","MinusGlyph","PlusGlyph","mergeStatefulStyles","colors","motion","radii","sizing","spacing","stateLayerOpacity","typography","IconButton","BOX_HALF","sm","bodySmallLineHeight","bodyLargeLineHeight","BOX_OUTLINED_HALF","lg","STEPPER_REACH","controlXs","STACKED_INSET","INLINE_INSET","md","END_INSETS","horizontal","none","undefined","vertical","const","styles","stepper","k6CgDc","kGNEyG","kWkggS","kZKoxP","kaIpWk","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kzqmXN","kjj79g","kjBf7l","kInvED","k3XXqK","kMeerF","kmVPX3","kIyJzY","k1ekBW","kAMwcw","$$css","stepperBottomOutlined","kT0f0o","stepperDisabled","stepperFocused","stepperHovered","stepperOutlined","stepperPressed","stepperTop","kfmiAY","decrementLabel","description","error","floatingLabel","incrementLabel","inputRef","HTMLInputElement","isWheelDisabled","label","numeric","steppers","variant","Omit","t0","$","t1","isDisabled","t2","t3","t4","t5","t6","props","inline","validationBehavior","T0","t7","t8","root","t9","t10","0","className","1","2","3","t11","isRequired","t12","t13","StackedStepper","children","outlined","slot","stepperStyles","top","state","isHovered","isPressed","isFocusVisible","NumberField","_c","props","RACNumberField","stylex.props","RACButton"],"sources":["../../../src/components/number-field/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, Ref, RefAttributes } from 'react';\nimport type { ButtonRenderProps, NumberFieldProps as RACNumberFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, NumberField as RACNumberField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { MinusGlyph, PlusGlyph } from '../../glyphs';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport IconButton from '../icon-button';\n\n// The text fields page's field, holding a number: the same box, floating\n// label, underline and message as TextField, with the value in the mono\n// face and tabular figures by default, since a number is what those are\n// for, and two steppers at the trailing end.\n//\n// The steppers come in two layouts. Stacked, the plus over the minus, they\n// are a column flush with the box's top, end and bottom, each half of the\n// box's 56dp and 32dp wide, drawn here since the smallest icon button is\n// 32dp and two of those do not fit; the glyph is the icon buttons page's\n// 20dp for that size, and the hover, pressed, focus and disabled treatments\n// are the standard icon button's. Side by side, they are extra-small icon\n// buttons, the page's trailing icons in the library's own control, 12dp\n// from the end where the page puts a field's icons — the box's 16dp of\n// padding less the 4dp they pull back.\n//\n// **The stacked pair is the one control here that does not reach the 48dp\n// target**, and it is the layout rather than an oversight. Every other small\n// control in the library draws that target out of flow, over whatever sits\n// beside it — src/control/styles.ts carries the decision. These two have only\n// each other beside them: the column is 56dp tall in total, so two 48dp\n// targets inside it would overlap across most of their height, and the half\n// of a press that landed in the overlap would go to whichever box was\n// uppermost rather than to the glyph under the finger. Incrementing when a\n// reader meant to decrement is worse than a target that is short, so the\n// stacked layout keeps its 32 by 28 and the reader who needs the larger one\n// has `steppers=\"horizontal\"`, where each is an extra-small icon button and\n// gets the target from there — with the gap that keeps those two targets off\n// each other, which is the room the column has none of.\n//\n// A value that is typed rather than stepped — an amount, a year, an\n// identifier — can leave the steppers out with `steppers=\"none\"`. The box is\n// then a text field's, the input running to the box's own end padding, and\n// the arrow keys and Page Up and Page Down still step the value.\n//\n// React Aria's `NumberField` is the root and the box is its `Group`, which\n// is what names the box and the two steppers as one control; the steppers\n// are its increment and decrement buttons through context, disabled at the\n// ends of the range and kept out of the tab order, and the formatting is its\n// `formatOptions`.\n// Half the box, spelled from the same tokens the box derives its height\n// from rather than as the 28 that half of 56 comes to. A theme with a longer\n// body line makes the box taller — `Editorial` in kanso-ui-core's themes does\n// — and a stated half leaves the pair short of the bottom edge they are\n// flush with.\n//\n// Written here rather than imported from src/field/styles.ts, which spells\n// the same two expressions: the StyleX compiler resolves a constant across\n// files only out of a `.stylex.ts` module, the same reason that file gives\n// for re-declaring the forced-colours query. The two have to move together.\nconst BOX_HALF = `calc((2 * ${spacing.sm} + ${typography.bodySmallLineHeight} + ${typography.bodyLargeLineHeight}) / 2)`;\nconst BOX_OUTLINED_HALF = `calc((2 * ${spacing.lg} + ${typography.bodyLargeLineHeight}) / 2)`;\n\n// How much of the end of the box's column the steppers take, with the 8dp\n// between them and the input, which the label stops short of — FieldBox's\n// `endInset`. Without it the label ran the column's width, under the\n// steppers, and a long one was cut short beneath them. Each is the input's\n// own end, so the label ends where the value does.\n//\n// Stacked, the 32dp column less the 16dp of the box's padding it reaches\n// into; side by side, the two extra-small buttons and the 8dp between them,\n// less the 4dp they reach into the padding.\n// How far a side-by-side stepper reaches past the control's line above and\n// below it: a negative margin, half the difference between the two.\nconst STEPPER_REACH = `calc((${typography.bodyLargeLineHeight} - ${sizing.controlXs}) / 2)`;\nconst STACKED_INSET = `calc(32px - ${spacing.lg} + ${spacing.sm})`;\nconst INLINE_INSET = `calc(2 * ${sizing.controlXs} + ${spacing.sm} + ${spacing.md} - ${spacing.lg} + ${spacing.sm})`;\n\n// Each layout's inset, keyed by the prop. With no steppers there is nothing\n// for the label to stop short of, so the box's own default holds.\nconst END_INSETS = {\n  horizontal: INLINE_INSET,\n  none: undefined,\n  vertical: STACKED_INSET\n} as const;\nconst styles = {\n  stepper: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1viytl0\",\n    kaIpWk: \"x2u8bby\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1td3qas\",\n    kjj79g: \"xl56j7k\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xs2xxs2\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  stepperBottomOutlined: {\n    kT0f0o: \"x4gcak0\",\n    $$css: true\n  },\n  stepperDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  stepperFocused: {\n    k3XXqK: \"xaatb59\",\n    $$css: true\n  },\n  stepperHovered: {\n    kWkggS: \"x14noynh\",\n    $$css: true\n  },\n  stepperOutlined: {\n    kZKoxP: \"x1o675yb\",\n    $$css: true\n  },\n  stepperPressed: {\n    kWkggS: \"x123fei2\",\n    $$css: true\n  },\n  stepperTop: {\n    kfmiAY: \"xirz1nw\",\n    $$css: true\n  }\n};\ntype NumberFieldProps = {\n  /**\n   * The name of the stepper that lowers the value, for a screen reader. Left\n   * out, React Aria names it in the reader's locale, followed by the field's\n   * own label — \"Decrease Quantity\" in English.\n   */\n  decrementLabel?: string;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value, as the text fields page draws it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * The name of the stepper that raises the value, for a screen reader. Left\n   * out, React Aria names it in the reader's locale, followed by the field's\n   * own label — \"Increase Quantity\" in English.\n   */\n  incrementLabel?: string;\n  /**\n   * A ref to the field's own `<input>`, which is the element a call site moves\n   * focus to — after a server's error, say. `ref` is the field as a whole.\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * Whether the mouse wheel and a trackpad's scroll leave the value alone.\n   * React Aria steps a focused number field's value with the wheel, so a\n   * reader scrolling a long form past a field they had left focused changed\n   * its value instead of moving the page. Stepping from the wheel is the\n   * call site's to ask for, with `false`.\n   * @default true\n   */\n  isWheelDisabled?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a field with no\n   * label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * Renders the value in the mono face with tabular figures, for amounts and\n   * other numbers meant to be compared down a column. On by default, since a\n   * number field holds nothing else.\n   * @default true\n   */\n  numeric?: boolean;\n  /**\n   * How the two steppers sit at the end of the box: stacked, the plus over\n   * the minus, flush with the box's edge, or side by side as extra-small\n   * icon buttons. `'none'` draws neither, for a value that is typed rather\n   * than stepped; the keyboard still steps it.\n   * @default 'vertical'\n   */\n  steppers?: 'horizontal' | 'none' | 'vertical';\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats — the text fields page's two fields.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACNumberFieldProps, 'children' | 'isInvalid' | 'isWheelDisabled' | 'validationBehavior'>;\n\n/**\n * A labelled number input with steppers. Its value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep\n * its own — and `onChange` is handed the number, `NaN` while the field is\n * empty. `minValue`, `maxValue` and `step` shape it, and `formatOptions`\n * says how it reads, in the locale the page is in: a currency, a percentage,\n * a unit. The arrow keys and Page Up and Page Down step the value by one\n * `step` each. Given a `minValue`, Home sets the value to it, and given a\n * `maxValue`, End sets it to the last step that does not pass it.\n * The mouse wheel scrolls the page past it rather than stepping it, unless\n * `isWheelDisabled` is `false`.\n *\n * ```tsx\n * <NumberField defaultValue={1} label=\"Label\" minValue={0} />\n * ```\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions. The box, label, input and message\n * are the field chrome in `src/field`, shared with every other field.\n */\nfunction NumberField({\n  decrementLabel,\n  description,\n  error,\n  floatingLabel = true,\n  incrementLabel,\n  inputRef,\n  isDisabled = false,\n  isWheelDisabled = true,\n  label,\n  numeric = true,\n  steppers = 'vertical',\n  variant = 'filled',\n  ...props\n}: NumberFieldProps & RefAttributes<HTMLDivElement>) {\n  const inline = steppers === 'horizontal';\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACNumberField isDisabled={isDisabled} isInvalid={invalidFrom(error)} isWheelDisabled={isWheelDisabled} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox endInset={END_INSETS[steppers]} floatingLabel={floatingLabel} isRequired={props.isRequired} label={label} variant={variant}>\n        {steppers === 'none' ? <FieldInput numeric={numeric} ref={inputRef} /> : <div {...{\n        0: {\n          className: \"x1cy8zhl x9f619 x78zum5 x126z3so\"\n        },\n        1: {\n          className: \"x9f619 x78zum5 x126z3so x6s0dn4\"\n        }\n      }[!!inline << 0]}>\n            <FieldInput numeric={numeric} ref={inputRef} />\n            <div {...{\n          0: {\n            className: \"x9f619 x78zum5 xdt5ytf x2lah0s x1motrhk xk4mfur\"\n          },\n          2: {\n            className: \"x9f619 x78zum5 x2lah0s x1q0g3np x126z3so x1jblbm6 x6rec7h x1tn5xpv\"\n          },\n          1: {\n            className: \"x9f619 x78zum5 xdt5ytf x2lah0s xk4mfur x17v9ssf\"\n          },\n          3: {\n            className: \"x9f619 x78zum5 x2lah0s x1q0g3np x126z3so x1jblbm6 x1tn5xpv x17v9ssf\"\n          }\n        }[!!inline << 1 | !!(!inline && variant === 'outlined') << 0]}>\n              {inline ? <>\n                  <IconButton aria-label={decrementLabel} size=\"xs\" slot=\"decrement\">\n                    <MinusGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n                  </IconButton>\n                  <IconButton aria-label={incrementLabel} size=\"xs\" slot=\"increment\">\n                    <PlusGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n                  </IconButton>\n                </> : <>\n                  <StackedStepper label={incrementLabel} outlined={variant === 'outlined'} slot=\"increment\">\n                    <PlusGlyph className=\"x1qx5ct2 x1lliihq xw4jnvo\" />\n                  </StackedStepper>\n                  <StackedStepper label={decrementLabel} outlined={variant === 'outlined'} slot=\"decrement\">\n                    <MinusGlyph className=\"x1qx5ct2 x1lliihq xw4jnvo\" />\n                  </StackedStepper>\n                </>}\n            </div>\n          </div>}\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACNumberField>;\n}\nfunction StackedStepper({\n  children,\n  label,\n  outlined,\n  slot\n}: {\n  children: ReactNode;\n  label: string | undefined;\n  outlined: boolean;\n  slot: 'decrement' | 'increment';\n}) {\n  return <RACButton aria-label={label} slot={slot} {...mergeStatefulStyles(stepperStyles(slot === 'increment', outlined), {})}>\n      {children}\n    </RACButton>;\n}\n\n// A stacked stepper: React Aria's button with the slot the field's context\n// looks for, drawn from its render state. Built by a call rather than\n// written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after.\nfunction stepperStyles(top: boolean, outlined: boolean) {\n  return (state: ButtonRenderProps) => stylex.props(styles.stepper, outlined && styles.stepperOutlined, top && styles.stepperTop, !top && outlined && styles.stepperBottomOutlined, state.isHovered && !state.isDisabled && styles.stepperHovered, state.isPressed && !state.isDisabled && styles.stepperPressed, state.isFocusVisible && styles.stepperFocused, state.isDisabled && styles.stepperDisabled);\n}\nexport type { NumberFieldProps };\nexport default NumberField;"],"mappings":"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"}

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

@@ -57,7 +57,21 @@ type PopoverTrigger = 'hover' | 'press';
  * arbitrary — the parts are `Popover.Content`, `Popover.Title`, and
  * `Popover.Description`. A `Button` or `IconButton` placed directly inside
  * `Popover` opens it, and one given `slot="close"` inside the content closes
- * it; neither needs a part of its own.
+ * it; neither needs a part of its own. Where the panel sits against its
+ * trigger is `Popover.Content`'s `side` and `align`.
+ *
+ * ```tsx
+ * <Popover>
+ *   <Button>Open</Button>
+ *   <Popover.Content side="end">
+ *     <Popover.Title>Headline</Popover.Title>
+ *     <Popover.Description>Supporting line</Popover.Description>
+ *     <Button slot="close" variant="text">
+ *       Dismiss
+ *     </Button>
+ *   </Popover.Content>
+ * </Popover>
+ * ```
  */
 declare function Popover$1({ children, closeDelay, delay, modal, size, trigger, ...props }: PopoverProps): import("react").JSX.Element;
 declare namespace Popover$1 {

package/dist/components/popover/index.js

@@ -270,7 +270,21 @@ function PanelDialog(t0) {
 * arbitrary — the parts are `Popover.Content`, `Popover.Title`, and
 * `Popover.Description`. A `Button` or `IconButton` placed directly inside
 * `Popover` opens it, and one given `slot="close"` inside the content closes
-* it; neither needs a part of its own.
+* it; neither needs a part of its own. Where the panel sits against its
+* trigger is `Popover.Content`'s `side` and `align`.
+*
+* ```tsx
+* <Popover>
+*   <Button>Open</Button>
+*   <Popover.Content side="end">
+*     <Popover.Title>Headline</Popover.Title>
+*     <Popover.Description>Supporting line</Popover.Description>
+*     <Button slot="close" variant="text">
+*       Dismiss
+*     </Button>
+*   </Popover.Content>
+* </Popover>
+* ```
 */
 function Popover$1(t0) {
 	const $ = c(25);