@kanso-labs/kanso-ui 0.35.0 → 0.37.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","Key","TabsProps","RACTabsProps","TabListProps","TabPanelProps","TabPanelsProps","TabProps","TabRenderProps","stylex","createContext","useCallback","useContext","useEffect","useState","SelectionIndicator","RACSelectionIndicator","TabPanels","RACTabPanels","Tabs","RACTabs","Tab","TabList","TabPanel","focus","mergeStatefulStyles","mergeStyles","colors","motion","radii","sizing","spacing","stateLayerOpacity","typography","styles","panel","kB7OPa","$$css","NO_PANELS","ReadonlySet","Set","PanelsContext","RegisterPanelContext","id","Omit","children","tabContent","state","defaultChildren","tabRenderer","hasPanel","render","NonNullable","domProps","adjusted","undefined","t0","$","props","panels","setPanels","t1","Symbol","for","previous","has","next","add","previous_0","next_0","delete","register","t2","t3","TabsList","className","TabsPanel","ring","TabsPanels","TabsTab","T0","tabStyles","t4","isSelected","isDisabled","List","Panel","Panels","TabsListProps","TabsPanelProps","TabsPanelsProps","TabsTabProps","RACSelectionIndicator","Tabs","_c","RACTabs","props","stylex.props","RACTabPanels"],"sources":["../../../src/components/tabs/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { Key, TabsProps as RACTabsProps, TabListProps, TabPanelProps, TabPanelsProps, TabProps, TabRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useCallback, useContext, useEffect, useState } from 'react';\nimport { SelectionIndicator as RACSelectionIndicator, TabPanels as RACTabPanels, Tabs as RACTabs, Tab, TabList, TabPanel } from 'react-aria-components';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The tabs page's primary tabs: a 48dp bar on the surface, divided into equal\n// sections, with a 1dp outline-variant divider inside the bar along its\n// bottom edge and, under the active tab's label, a 3dp primary indicator\n// rounded along its top. The indicator follows the label rather than the\n// tab, inset 2dp from the label's ends and never shorter than 24dp, which is\n// what the page draws.\n//\n// The indicator is React Aria's `SelectionIndicator`, which is a shared\n// element: it is rendered inside every tab but drawn in the selected one,\n// and on a change it keeps the old one until it has finished moving to the\n// new one's place. No `SharedElementTransition` is rendered here — `Tab`\n// scopes its own, and one added around the list changes nothing, which is\n// worth knowing because the primitive throws outside a scope when it is put\n// anywhere else.\n//\n// The label is wrapped in a span of its own so the indicator has the label's\n// width to follow: it is the span's `::after`, and the span is as tall as the\n// tab so the indicator reaches the bottom of the bar. Which tab carries it\n// comes from React Aria's render state rather than a selector, since StyleX\n// cannot target [data-selected] on the element it is styling.\nconst styles = {\n  panel: {\n    kB7OPa: \"x9f619\",\n    $$css: true\n  }\n};\nconst NO_PANELS: ReadonlySet<Key> = new Set();\n\n// Which panels are mounted, by id. React Aria points a selected tab's\n// `aria-controls` at the panel it would control whether or not one exists,\n// and a strip used on its own — tabs that filter the content below rather\n// than swapping a panel — then references an id nothing carries, which axe\n// reports as an invalid attribute value. Each panel registers itself here so\n// a tab can leave the attribute off when its panel is not there.\nconst PanelsContext = createContext<ReadonlySet<Key>>(NO_PANELS);\nconst RegisterPanelContext = createContext<(id: Key) => () => void>(() => () => {});\n\n// `children` is narrowed to nodes. React Aria also accepts a function there,\n// to hand the children the tabs' render state, and that form cannot be\n// wrapped in a context provider without calling it first — which would be\n// doing React Aria's job with none of its state. Nothing here needs it, so\n// the narrower type says so rather than leaving a signature that type-checks\n// and then fails to render.\ntype TabsProps = Omit<RACTabsProps, 'children'> & {\n  children?: ReactNode;\n};\n\n// The label, wrapped so the indicator has its width to follow. Built by a\n// call for the same reason as `tabRenderer` below; React Aria hands the\n// function the tab's state, and it is passed on when the children are a\n// function too.\nfunction tabContent(children: TabProps['children']) {\n  return (state: TabRenderProps & {\n    defaultChildren: ReactNode;\n  }) => <span className=\"x6s0dn4 x5yr21d x9f619 x3nfvp2 x1n2onr6\">\n      {typeof children === 'function' ? children(state) : children}\n      <RACSelectionIndicator className=\"x12w9bfk xnety89 xuoj239 x1pixlao xyooppx x9f619 x17v02zk x1ey2m1c x17y0mx6 xvueqy4 xnei2rj x10l6tqk xioksi3 x1mxbss1 x1seskgd\" />\n    </span>;\n}\n\n// React Aria renders a tab with `href` as an anchor and any other as a div,\n// and expects a `render` function to return the same element it would have.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its two inputs. See PanelsContext for why the attribute is\n// dropped.\nfunction tabRenderer(hasPanel: boolean, render: TabProps['render']): NonNullable<TabProps['render']> {\n  return (domProps, state) => {\n    const adjusted = hasPanel ? domProps : {\n      ...domProps,\n      'aria-controls': undefined\n    };\n    if (render !== undefined) {\n      return render(adjusted, state);\n    }\n    if ('href' in adjusted) {\n      // oxlint-disable-next-line jsx-a11y/anchor-has-content -- filled by React Aria\n      return <a {...adjusted} />;\n    }\n    return <div {...adjusted} />;\n  };\n}\n\n/**\n * A tab bar and its panels. Selection is React Aria's `selectedKey`: pass\n * it with `onSelectionChange` to control it, or `defaultSelectedKey` to let\n * it keep its own. Each `Tabs.Tab` names the `Tabs.Panel` it controls through\n * a shared `id`, and a strip may stand alone without panels.\n *\n * Composed rather than configured by props, because the number of tabs and\n * what each panel holds are the call site's to decide — the parts are\n * `Tabs.List`, `Tabs.Tab`, and `Tabs.Panel`.\n */\nfunction Tabs({\n  children,\n  ...props\n}: RefAttributes<HTMLDivElement> & TabsProps) {\n  const [panels, setPanels] = useState<ReadonlySet<Key>>(NO_PANELS);\n  const register = useCallback((id: Key) => {\n    setPanels(previous => {\n      if (previous.has(id)) {\n        return previous;\n      }\n      const next = new Set(previous);\n      next.add(id);\n      return next;\n    });\n    return () => {\n      setPanels(previous => {\n        if (!previous.has(id)) {\n          return previous;\n        }\n        const next = new Set(previous);\n        next.delete(id);\n        return next;\n      });\n    };\n  }, []);\n  return <RACTabs {...props}>\n      <RegisterPanelContext value={register}>\n        <PanelsContext value={panels}>{children}</PanelsContext>\n      </RegisterPanelContext>\n    </RACTabs>;\n}\nfunction TabsList(props: TabsListProps) {\n  return <TabList {...props} {...mergeStatefulStyles({\n    className: \"xp05xdj x9f619 x78zum5\"\n  }, props)} />;\n}\nfunction TabsPanel(props: TabsPanelProps) {\n  const register = useContext(RegisterPanelContext);\n  const {\n    id\n  } = props;\n  useEffect(() => {\n    if (id === undefined) {\n      return undefined;\n    }\n    return register(id);\n  }, [id, register]);\n  return <TabPanel {...props} {...mergeStatefulStyles(stylex.props(styles.panel, focus.ring), props)} />;\n}\n\n/**\n * An optional box around the panels, which animates its height as one panel\n * gives way to the next. Without it the panels still work; the box around\n * them simply jumps from one height to the other.\n */\nfunction TabsPanels(props: TabsPanelsProps) {\n  return <RACTabPanels {...props} {...mergeStyles({\n    className: \"x12w9bfk x1t2j4n3 x9f619 xb3r6kr xioksi3 x1f55p5c x1seskgd\"\n  }, props)} />;\n}\nfunction TabsTab({\n  children,\n  render,\n  ...props\n}: TabsTabProps) {\n  const panels = useContext(PanelsContext);\n  const hasPanel = props.id !== undefined && panels.has(props.id);\n  return <Tab {...props} render={tabRenderer(hasPanel, render)} {...mergeStatefulStyles(tabStyles, props)}>\n      {tabContent(children)}\n    </Tab>;\n}\n\n// StyleX cannot target [data-selected] on the element it is styling, so the\n// active tab cannot be chosen in CSS. React Aria's answer is a className that\n// is a function of the tab's own state, the same mechanism Chip uses —\n// mergeStatefulStyles wraps this one so a tab still keeps a className the call\n// site passed.\nfunction tabStyles(state: TabRenderProps) {\n  return {\n    0: {\n      className: \"x12w9bfk x6s0dn4 xbg5kjn xc342km x9f619 x1ypdohk x78zum5 x1r8uery x1iyjqo2 xs83m0k xrgwony x12s497w x1szcwkt xl56j7k xo803ec xyl1r0q xeuugli xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1n2onr6 x1hl2dhg x1qno0dh xs2xxs2 xpc4ca7 x12vej0r x1p2om7n xjbqb8w x1w5n3ug\"\n    },\n    2: {\n      className: \"x12w9bfk x6s0dn4 xbg5kjn xc342km x9f619 x1ypdohk x78zum5 x1r8uery x1iyjqo2 xs83m0k xrgwony x12s497w x1szcwkt xl56j7k xo803ec xyl1r0q xeuugli xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1n2onr6 x1hl2dhg x1qno0dh xs2xxs2 xpc4ca7 x12vej0r x14dcer4 xjbqb8w x1mxwv8y\"\n    },\n    1: {\n      className: \"x12w9bfk x6s0dn4 xbg5kjn xc342km x9f619 x78zum5 x1r8uery x1iyjqo2 xs83m0k xrgwony x12s497w x1szcwkt xl56j7k xo803ec xyl1r0q xeuugli xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1n2onr6 x1hl2dhg x1qno0dh xs2xxs2 xpc4ca7 xjbqb8w x1xj74d8 x1h6gzvc\"\n    },\n    3: {\n      className: \"x12w9bfk x6s0dn4 xbg5kjn xc342km x9f619 x78zum5 x1r8uery x1iyjqo2 xs83m0k xrgwony x12s497w x1szcwkt xl56j7k xo803ec xyl1r0q xeuugli xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1n2onr6 x1hl2dhg x1qno0dh xs2xxs2 xpc4ca7 xjbqb8w x1xj74d8 x1h6gzvc\"\n    }\n  }[!!state.isSelected << 1 | !!state.isDisabled << 0];\n}\nTabs.List = TabsList;\nTabs.Panel = TabsPanel;\nTabs.Panels = TabsPanels;\nTabs.Tab = TabsTab;\ntype TabsListProps = TabListProps<object>;\ntype TabsPanelProps = TabPanelProps;\ntype TabsPanelsProps = Omit<TabPanelsProps<object>, 'children'> & {\n  children?: ReactNode;\n};\ntype TabsTabProps = TabProps;\nexport type { TabsListProps, TabsPanelProps, TabsPanelsProps, TabsProps, TabsTabProps };\nexport default Tabs;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","Key","TabsProps","RACTabsProps","TabListProps","TabPanelProps","TabPanelsProps","TabProps","TabRenderProps","stylex","createContext","useCallback","useContext","useEffect","useMemo","useState","SelectionIndicator","RACSelectionIndicator","TabPanels","RACTabPanels","Tabs","RACTabs","Tab","TabList","TabPanel","mergeStatefulStyles","mergeStyles","colors","motion","radii","sizing","spacing","stateLayerOpacity","typography","Badge","FORCED_COLORS","styles","indicator","k6CgDc","kWkggS","kZKoxP","kLZC3w","kPef9Z","kEafiO","kfmiAY","krdFHd","kB7OPa","kzqmXN","krVfgx","kkqhue","kUOVxO","k7Eaqz","kVAEAm","kIyJzY","k1ekBW","kAMwcw","$$css","indicatorSecondary","indicatorSecondaryVertical","kBCPoo","k8ry5P","ke9TFa","kYYq5F","kt4wiu","indicatorVertical","kVL7Gh","kqGvvJ","kAzted","label","kGNEyG","k1xSpc","kjj79g","ks0D6T","labelInline","kOIVth","labelStacked","kXwgrk","tab","kMzoRj","kMwMTN","kkrTdU","kCS8Yb","kzQI83","kmuXW","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","kjBf7l","kInvED","k3XXqK","kMeerF","k8WAf4","kg3NbH","kybGjl","tabActive","tabActiveHovered","tabActiveSecondary","tabDisabled","tabInactive","tabInactiveHovered","tabPressed","tabScrollable","tabSecondaryHovered","tabSecondaryPressed","tabStacked","tabVertical","TabsVariant","VARIANTS","primary","active","activeHovered","inactiveHovered","horizontal","vertical","pressed","secondary","Record","Bar","layout","TabsLayout","orientation","Orientation","variant","NonNullable","BarContext","revealed","WeakSet","Element","NO_PANELS","ReadonlySet","Set","PanelsContext","RegisterPanelContext","id","Omit","children","badgeFor","badge","icon","undefined","className","revealInBar","element","HTMLElement","closest","bar","first","has","add","box","getBoundingClientRect","room","left","Math","min","max","right","top","bottom","scrollBy","behavior","tabClasses","stacked","roles","state","props","isSelected","isHovered","isPressed","isDisabled","tabContent","hasIcon","after","underLabel","defaultChildren","text","tabRenderer","hasPanel","render","domProps","adjusted","t0","$","t1","t2","t3","t4","panels","setPanels","t5","Symbol","for","previous","next","previous_0","next_0","delete","register","T0","t6","0","1","t7","t8","t9","t10","TabsList","2","3","TabsPanel","TabsPanels","TabsTab","List","Panel","Panels","TabsListProps","TabsPanelProps","TabsPanelsProps","TabsTabProps","stylex.props","RACSelectionIndicator","Tabs","_c","RACTabs","RACTabPanels"],"sources":["../../../src/components/tabs/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { Key, TabsProps as RACTabsProps, TabListProps, TabPanelProps, TabPanelsProps, TabProps, TabRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';\nimport { SelectionIndicator as RACSelectionIndicator, TabPanels as RACTabPanels, Tabs as RACTabs, Tab, TabList, TabPanel } from 'react-aria-components';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport Badge from '../badge';\n\n// The tabs page's primary and secondary tabs. Both are a 48dp bar on the\n// surface, divided into equal sections, with a 1dp outline-variant divider\n// inside the bar along its bottom edge.\n//\n// **Primary** draws the active tab in the primary role and, under its label,\n// a 3dp primary indicator rounded along its top. The indicator follows the\n// label rather than the tab, inset 2dp from the label's ends and never\n// shorter than 24dp, which is what the page draws. A primary tab given an\n// icon stacks the page's 24dp icon over its label, 2dp apart, and the bar\n// grows to the page's 64dp.\n//\n// **Secondary** is the strip that sits under a primary one. Its active tab\n// keeps the on-surface role, and its 2dp primary indicator spans the whole\n// tab. An icon sits before the label, 8dp from it, which is the page's\n// spacing for an inline icon and material-web's layout for a secondary tab:\n// the strip keeps its 48dp under the primary one either way.\n//\n// A badge sits on the icon where a primary tab stacks one, placed as the\n// badges page places it, and 4dp after the label anywhere else.\n//\n// **The bar is equal sections unless `layout` says otherwise.**\n// `layout=\"scrollable\"` is the page's scrollable tabs: each tab as wide as\n// its label, between MDC-Android's 72dp and 264dp, in a bar that scrolls\n// without a scrollbar and brings the selected tab into view, as\n// material-web's does.\n//\n// **`orientation=\"vertical\"` turns the bar on its side.** The page draws no\n// vertical tabs, so this follows the horizontal bar's own measurements: the\n// tabs stack, the divider runs down the bar's inline end, and each\n// indicator lies along that edge — 3dp and rounded toward the tab on a\n// primary bar, 2dp and square on a secondary one — spanning the tab rather\n// than a label that no longer runs along it. The bar sits beside the panels\n// rather than above them.\n//\n// The indicator is React Aria's `SelectionIndicator`, which is a shared\n// element: it is rendered inside every tab but drawn in the selected one,\n// and on a change it keeps the old one until it has finished moving to the\n// new one's place. No `SharedElementTransition` is rendered here — `Tab`\n// scopes its own, and one added around the list changes nothing, which is\n// worth knowing because the primitive throws outside a scope when it is put\n// anywhere else.\n//\n// The label is wrapped in a span of its own so a primary indicator has the\n// label's width to follow: it is drawn inside the span, and the span is as\n// tall as the tab so the indicator reaches the bottom of the bar. Which tab\n// carries it comes from React Aria's render state rather than a selector,\n// since StyleX cannot target [data-selected] on the element it is styling.\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst styles = {\n  indicator: {\n    k6CgDc: \"x12w9bfk\",\n    kWkggS: \"xnety89\",\n    kZKoxP: \"xuoj239\",\n    kLZC3w: \"x4hsqty\",\n    kPef9Z: \"x4z998w\",\n    kEafiO: \"x1cuxy5d\",\n    kfmiAY: \"x1pixlao\",\n    krdFHd: \"xyooppx\",\n    kB7OPa: \"x9f619\",\n    kzqmXN: \"x17v02zk\",\n    krVfgx: \"x1ey2m1c\",\n    kkqhue: \"x17y0mx6\",\n    kUOVxO: \"xvueqy4\",\n    k7Eaqz: \"xnei2rj\",\n    kVAEAm: \"x10l6tqk\",\n    kIyJzY: \"xioksi3\",\n    k1ekBW: \"x1mxbss1\",\n    kAMwcw: \"x1seskgd\",\n    $$css: true\n  },\n  indicatorSecondary: {\n    k6CgDc: \"x12w9bfk\",\n    kWkggS: \"xnety89\",\n    kZKoxP: \"x36qwtl\",\n    kLZC3w: \"x4hsqty\",\n    kPef9Z: \"x4z998w\",\n    kEafiO: \"x7sdbh0\",\n    kB7OPa: \"x9f619\",\n    krVfgx: \"x1ey2m1c\",\n    kkqhue: \"x17y0mx6\",\n    kVAEAm: \"x10l6tqk\",\n    kIyJzY: \"xioksi3\",\n    k1ekBW: \"x1mxbss1\",\n    kAMwcw: \"x1seskgd\",\n    $$css: true\n  },\n  indicatorSecondaryVertical: {\n    k6CgDc: \"x12w9bfk\",\n    kWkggS: \"xnety89\",\n    kBCPoo: \"x1ksdfms\",\n    k8ry5P: \"xf1j0q2\",\n    ke9TFa: \"x12inkfj\",\n    kB7OPa: \"x9f619\",\n    kzqmXN: \"xfo62xy\",\n    kYYq5F: \"x10no89f\",\n    kt4wiu: \"xtijo5x\",\n    kVAEAm: \"x10l6tqk\",\n    kIyJzY: \"xioksi3\",\n    k1ekBW: \"xcxfjh9\",\n    kAMwcw: \"x1seskgd\",\n    $$css: true\n  },\n  indicatorVertical: {\n    k6CgDc: \"x12w9bfk\",\n    kWkggS: \"xnety89\",\n    kZKoxP: \"x1qu6c4t\",\n    kVL7Gh: \"x25gbn0\",\n    kBCPoo: \"x1ksdfms\",\n    k8ry5P: \"xf1j0q2\",\n    ke9TFa: \"x1o9zed4\",\n    krdFHd: \"xyooppx\",\n    kB7OPa: \"x9f619\",\n    kzqmXN: \"x1g8rjiy\",\n    kYYq5F: \"x10no89f\",\n    kt4wiu: \"xtijo5x\",\n    kqGvvJ: \"x1nkss2m\",\n    kAzted: \"xjwf9q1\",\n    kVAEAm: \"x10l6tqk\",\n    kIyJzY: \"xioksi3\",\n    k1ekBW: \"xcxfjh9\",\n    kAMwcw: \"x1seskgd\",\n    $$css: true\n  },\n  label: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x5yr21d\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x3nfvp2\",\n    kjj79g: \"xl56j7k\",\n    ks0D6T: \"x193iq5w\",\n    k7Eaqz: \"xeuugli\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  labelInline: {\n    kOIVth: \"x126z3so\",\n    $$css: true\n  },\n  labelStacked: {\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"x14qo01y\",\n    $$css: true\n  },\n  tab: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kCS8Yb: \"x1r8uery\",\n    kzQI83: \"x1iyjqo2\",\n    kmuXW: \"xs83m0k\",\n    kMv6JI: \"xrgwony\",\n    kGuDYH: \"x12s497w\",\n    k63SB2: \"x1szcwkt\",\n    kjj79g: \"xl56j7k\",\n    kb6lSQ: \"xo803ec\",\n    kLWn49: \"xyl1r0q\",\n    kAzted: \"x1dry9sr\",\n    k7Eaqz: \"xeuugli\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    k8WAf4: \"xt970qd\",\n    kg3NbH: \"x790zyz\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xs2xxs2\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  tabActive: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  tabActiveHovered: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  },\n  tabActiveSecondary: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  tabDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  tabInactive: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  tabInactiveHovered: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  },\n  tabPressed: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  },\n  tabScrollable: {\n    kCS8Yb: \"xdl72j9\",\n    kzQI83: \"x1c4vz4f\",\n    kmuXW: \"x2lah0s\",\n    ks0D6T: \"x1pdpmub\",\n    k7Eaqz: \"x187xtus\",\n    $$css: true\n  },\n  tabSecondaryHovered: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  },\n  tabSecondaryPressed: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  tabStacked: {\n    kAzted: \"x8nclml\",\n    $$css: true\n  },\n  tabVertical: {\n    kCS8Yb: \"xdl72j9\",\n    kzQI83: \"x1c4vz4f\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"x1nhvcw1\",\n    $$css: true\n  }\n};\n\n// A vertical bar beside its panels, which take the rest of the row. A style\n// of its own rather than one of the list's, since it is the root that holds\n// the two.\n\n/** The tabs page's two styles of tab bar. */\ntype TabsVariant = 'primary' | 'secondary';\n\n// What each style draws a tab's states in. A table rather than a branch per\n// state, so the two styles cannot differ in which states they answer.\nconst VARIANTS = {\n  primary: {\n    active: styles.tabActive,\n    activeHovered: styles.tabActiveHovered,\n    inactiveHovered: styles.tabInactiveHovered,\n    indicator: {\n      horizontal: styles.indicator,\n      vertical: styles.indicatorVertical\n    },\n    pressed: styles.tabPressed\n  },\n  secondary: {\n    active: styles.tabActiveSecondary,\n    activeHovered: styles.tabSecondaryHovered,\n    inactiveHovered: styles.tabSecondaryHovered,\n    indicator: {\n      horizontal: styles.indicatorSecondary,\n      vertical: styles.indicatorSecondaryVertical\n    },\n    pressed: styles.tabSecondaryPressed\n  }\n} satisfies Record<TabsVariant, unknown>;\n\n// The bar's three decisions, from the root to the list and every tab in it.\n// A context rather than props on each part, since they are the bar's and\n// repeating them on every tab is how the two drift.\ntype Bar = {\n  layout: TabsLayout;\n  orientation: Orientation;\n  variant: TabsVariant;\n};\ntype Orientation = NonNullable<RACTabsProps['orientation']>;\n\n/** How the bar shares its room among the tabs. */\ntype TabsLayout = 'fixed' | 'scrollable';\nconst BarContext = createContext<Bar>({\n  layout: 'fixed',\n  orientation: 'horizontal',\n  variant: 'primary'\n});\n\n// The bars a reveal has already scrolled, so that only the first is instant.\nconst revealed = new WeakSet<Element>();\nconst NO_PANELS: ReadonlySet<Key> = new Set();\n\n// Which panels are mounted, by id. React Aria points a selected tab's\n// `aria-controls` at the panel it would control whether or not one exists,\n// and a strip used on its own — tabs that filter the content below rather\n// than swapping a panel — then references an id nothing carries, which axe\n// reports as an invalid attribute value. Each panel registers itself here so\n// a tab can leave the attribute off when its panel is not there.\nconst PanelsContext = createContext<ReadonlySet<Key>>(NO_PANELS);\nconst RegisterPanelContext = createContext<(id: Key) => () => void>(() => () => {});\n\n// `children` is narrowed to nodes. React Aria also accepts a function there,\n// to hand the children the tabs' render state, and that form cannot be\n// wrapped in a context provider without calling it first — which would be\n// doing React Aria's job with none of its state. Nothing here needs it, so\n// the narrower type says so rather than leaving a signature that type-checks\n// and then fails to render.\ntype TabsProps = Omit<RACTabsProps, 'children'> & {\n  children?: ReactNode;\n  /**\n   * How the bar shares its room: `fixed` divides it into equal sections, and\n   * `scrollable` gives each tab its label's width in a bar that scrolls,\n   * which is the page's choice for more tabs than the room has sections for.\n   * @default 'fixed'\n   */\n  layout?: TabsLayout;\n  /**\n   * Which of the page's two tab bars this is: `primary` for the main one,\n   * `secondary` for a strip under a primary one.\n   * @default 'primary'\n   */\n  variant?: TabsVariant;\n};\n\n// The badge, which wraps the icon where a primary tab stacks one and stands\n// after the label anywhere else: `true` for the small dot, a number for the\n// large badge, and nothing for `false`.\nfunction badgeFor(badge: boolean | number | undefined, icon?: ReactNode): ReactNode {\n  if (badge === undefined || badge === false) {\n    return icon ?? null;\n  }\n  return <Badge count={badge === true ? undefined : badge} {...{\n    0: {},\n    1: {\n      className: \"x2lah0s\"\n    }\n  }[!!(icon === undefined) << 0]}>\n      {icon}\n    </Badge>;\n}\n\n// Scrolls a scrollable bar just far enough to show its selected tab whole,\n// handed to the selected tab's label as a ref so it runs as that tab\n// becomes the selected one. The bar alone, never the page: `scrollIntoView`\n// would scroll every scrolling ancestor, the window included, to bring a\n// bar below the fold up to it. The first reveal is instant, so a bar opens\n// on its selected tab rather than sliding to it; the rest take the bar's own\n// smooth scrolling.\nfunction revealInBar(element: HTMLElement | null) {\n  const tab = element?.closest('[role=\"tab\"]');\n  const bar = tab?.closest('[role=\"tablist\"]');\n  if (tab === undefined || tab === null || bar === undefined || bar === null) {\n    return;\n  }\n  const first = !revealed.has(bar);\n  revealed.add(bar);\n  const box = tab.getBoundingClientRect();\n  const room = bar.getBoundingClientRect();\n  const left = Math.min(0, box.left - room.left) + Math.max(0, box.right - room.right);\n  const top = Math.min(0, box.top - room.top) + Math.max(0, box.bottom - room.bottom);\n  if (left !== 0 || top !== 0) {\n    bar.scrollBy({\n      behavior: first ? 'instant' : 'auto',\n      left,\n      top\n    });\n  }\n}\n\n// StyleX cannot target [data-selected] on the element it is styling, so the\n// active tab cannot be chosen in CSS. React Aria's answer is a className that\n// is a function of the tab's own state, the same mechanism Chip uses —\n// mergeStatefulStyles wraps this one so a tab still keeps a className the call\n// site passed.\nfunction tabClasses({\n  layout,\n  orientation,\n  variant\n}: Bar, stacked: boolean) {\n  const roles = VARIANTS[variant];\n  const vertical = orientation === 'vertical';\n  return (state: TabRenderProps) => stylex.props(styles.tab, layout === 'scrollable' && !vertical && styles.tabScrollable, vertical && styles.tabVertical, stacked && styles.tabStacked, state.isSelected ? roles.active : styles.tabInactive, state.isHovered && (state.isSelected ? roles.activeHovered : roles.inactiveHovered), state.isPressed && roles.pressed, state.isDisabled && styles.tabDisabled);\n}\n\n// The tab's content: the icon, if any, then the label, wrapped so the\n// indicator has its width to follow. A badge after the label shares a line\n// with it, which is the one wrapper a tab without one goes without. Built by\n// a call for the same reason as `tabRenderer` below; React Aria hands the\n// function the tab's state, and it is passed on when the children are a\n// function too.\nfunction tabContent(children: TabProps['children'], {\n  layout,\n  orientation,\n  variant\n}: Bar, icon: ReactNode, badge: boolean | number | undefined) {\n  const hasIcon = icon !== undefined && icon !== null;\n  const stacked = hasIcon && variant === 'primary';\n  const after = stacked ? null : badgeFor(badge);\n  const indicator = <RACSelectionIndicator {...stylex.props(VARIANTS[variant].indicator[orientation])} />;\n  // A primary indicator follows the label along a horizontal bar, and lies\n  // along the tab's edge everywhere else.\n  const underLabel = variant === 'primary' && orientation === 'horizontal';\n  return (state: TabRenderProps & {\n    defaultChildren: ReactNode;\n  }) => {\n    const text = <span {...{\n      0: {\n        className: \"x104kibb xkjl1po xb3r6kr xj0a0fe x2b8uid x1ua5tub x1h7i4cw\"\n      },\n      2: {\n        className: \"x104kibb xkjl1po xb3r6kr xj0a0fe x2b8uid x1ua5tub xh0615m\"\n      },\n      1: {\n        className: \"x104kibb xkjl1po xb3r6kr xj0a0fe x1ua5tub x1h7i4cw x1yc453h\"\n      },\n      3: {\n        className: \"x104kibb xkjl1po xb3r6kr xj0a0fe x1ua5tub xh0615m x1yc453h\"\n      }\n    }[!!stacked << 1 | !!(orientation === 'vertical') << 0]}>\n        {typeof children === 'function' ? children(state) : children}\n      </span>;\n    return <>\n        <span ref={layout === 'scrollable' && state.isSelected ? revealInBar : undefined} {...stylex.props(styles.label, hasIcon && (stacked ? styles.labelStacked : styles.labelInline))}>\n          {hasIcon ? <span className=\"x6s0dn4 xxk0z11 x3nfvp2 x2lah0s x1pvqxga xvy4d1p xl56j7k\">\n              {stacked ? badgeFor(badge, icon) : icon}\n            </span> : null}\n          {after === null ? text : <span className=\"x6s0dn4 x9f619 x3nfvp2 xzoy561 x193iq5w xeuugli\">\n              {text}\n              {after}\n            </span>}\n          {underLabel ? indicator : null}\n        </span>\n        {underLabel ? null : indicator}\n      </>;\n  };\n}\n\n// React Aria renders a tab with `href` as an anchor and any other as a div,\n// and expects a `render` function to return the same element it would have.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its two inputs. See PanelsContext for why the attribute is\n// dropped.\nfunction tabRenderer(hasPanel: boolean, render: TabProps['render']): NonNullable<TabProps['render']> {\n  return (domProps, state) => {\n    const adjusted = hasPanel ? domProps : {\n      ...domProps,\n      'aria-controls': undefined\n    };\n    if (render !== undefined) {\n      return render(adjusted, state);\n    }\n    if ('href' in adjusted) {\n      // oxlint-disable-next-line jsx-a11y/anchor-has-content -- filled by React Aria\n      return <a {...adjusted} />;\n    }\n    return <div {...adjusted} />;\n  };\n}\n\n/**\n * A tab bar and its panels. Selection is React Aria's `selectedKey`: pass\n * it with `onSelectionChange` to control it, or `defaultSelectedKey` to let\n * it keep its own. Each `Tabs.Tab` names the `Tabs.Panel` it controls through\n * a shared `id`, and a strip may stand alone without panels.\n *\n * Composed rather than configured by props, because the number of tabs and\n * what each panel holds are the call site's to decide — the parts are\n * `Tabs.List`, `Tabs.Tab`, and `Tabs.Panel`.\n */\nfunction Tabs({\n  children,\n  layout = 'fixed',\n  orientation = 'horizontal',\n  variant = 'primary',\n  ...props\n}: RefAttributes<HTMLDivElement> & TabsProps) {\n  const bar = useMemo(() => ({\n    layout,\n    orientation,\n    variant\n  }), [layout, orientation, variant]);\n  const [panels, setPanels] = useState<ReadonlySet<Key>>(NO_PANELS);\n  const register = useCallback((id: Key) => {\n    setPanels(previous => {\n      if (previous.has(id)) {\n        return previous;\n      }\n      const next = new Set(previous);\n      next.add(id);\n      return next;\n    });\n    return () => {\n      setPanels(previous => {\n        if (!previous.has(id)) {\n          return previous;\n        }\n        const next = new Set(previous);\n        next.delete(id);\n        return next;\n      });\n    };\n  }, []);\n  return <RACTabs {...props} orientation={orientation} {...mergeStatefulStyles({\n    0: {},\n    1: {\n      className: \"x78zum5\"\n    }\n  }[!!(orientation === 'vertical') << 0], props)}>\n      <RegisterPanelContext value={register}>\n        <PanelsContext value={panels}>\n          <BarContext value={bar}>{children}</BarContext>\n        </PanelsContext>\n      </RegisterPanelContext>\n    </RACTabs>;\n}\nfunction TabsList(props: TabsListProps) {\n  const {\n    layout,\n    orientation\n  } = useContext(BarContext);\n  return <TabList {...props} {...mergeStatefulStyles({\n    0: {\n      className: \"xp05xdj x9f619 x78zum5\"\n    },\n    2: {\n      className: \"xp05xdj x9f619 x78zum5 xfk6m8 xysyzu8 x1rohswg xkcv6ua xg83hb1\"\n    },\n    1: {\n      className: \"x9f619 x78zum5 x1kbcym6 xiwn18o xdt5ytf x2lah0s\"\n    },\n    3: {\n      className: \"x9f619 x78zum5 xfk6m8 xysyzu8 x1rohswg xkcv6ua xg83hb1 x1kbcym6 xiwn18o xdt5ytf x2lah0s\"\n    }\n  }[!!(layout === 'scrollable') << 1 | !!(orientation === 'vertical') << 0], props)} />;\n}\nfunction TabsPanel(props: TabsPanelProps) {\n  const register = useContext(RegisterPanelContext);\n  const {\n    id\n  } = props;\n  useEffect(() => {\n    if (id === undefined) {\n      return undefined;\n    }\n    return register(id);\n  }, [id, register]);\n  return <TabPanel {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x1iyjqo2 xeuugli xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn\"\n  }, props)} />;\n}\n\n/**\n * An optional box around the panels, which animates its height as one panel\n * gives way to the next. Without it the panels still work; the box around\n * them simply jumps from one height to the other.\n */\nfunction TabsPanels(props: TabsPanelsProps) {\n  return <RACTabPanels {...props} {...mergeStyles({\n    className: \"x12w9bfk x1t2j4n3 x9f619 x1iyjqo2 xeuugli x7giv3 x1hm618n xioksi3 x1f55p5c x1seskgd\"\n  }, props)} />;\n}\nfunction TabsTab({\n  badge,\n  children,\n  icon,\n  render,\n  ...props\n}: TabsTabProps) {\n  const panels = useContext(PanelsContext);\n  const bar = useContext(BarContext);\n  const hasPanel = props.id !== undefined && panels.has(props.id);\n  const stacked = icon !== undefined && icon !== null && bar.variant === 'primary';\n  return <Tab {...props} render={tabRenderer(hasPanel, render)} {...mergeStatefulStyles(tabClasses(bar, stacked), props)}>\n      {tabContent(children, bar, icon, badge)}\n    </Tab>;\n}\nTabs.List = TabsList;\nTabs.Panel = TabsPanel;\nTabs.Panels = TabsPanels;\nTabs.Tab = TabsTab;\ntype TabsListProps = TabListProps<object>;\ntype TabsPanelProps = TabPanelProps;\ntype TabsPanelsProps = Omit<TabPanelsProps<object>, 'children'> & {\n  children?: ReactNode;\n};\ntype TabsTabProps = {\n  /**\n   * A badge on the tab: `true` for the badges page's small dot, a number for\n   * the large badge holding it. It sits on a primary tab's icon, and after\n   * the label anywhere else. The badge is hidden from assistive technology,\n   * so say what it says in the tab's name too — \"First item, 3 new\".\n   */\n  badge?: boolean | number;\n  /**\n   * An icon with the label, at the page's 24dp: over it on a primary tab,\n   * whose bar grows to 64dp, and before it on a secondary one. An icon drawn\n   * in `em` takes its size from the slot.\n   */\n  icon?: ReactNode;\n} & TabProps;\nexport type { TabsLayout, TabsListProps, TabsPanelProps, TabsPanelsProps, TabsProps, TabsTabProps, TabsVariant };\nexport { TabsList, TabsPanel, TabsPanels, TabsTab };\nexport default Tabs;"],"mappings":"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"}

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

@@ -29,5 +29,5 @@ type TagVariant = 'filled' | 'outlined';
  */
 declare function Tag({ render, tone, variant, ...props }: TagProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //#endregion
-export { type TagProps, Tag as default };
+export { type TagProps, type TagTone, type TagVariant, Tag as default };
 //# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/text-area/index.d.ts

@@ -2,7 +2,7 @@ import { FieldVariant } from "../../field/index.js";
 import { ReactNode, Ref, RefAttributes } from "react";
 import { TextFieldProps } from "react-aria-components";
 //#region src/components/text-area/index.d.ts
-type TextAreaProps = {
+type TextAreaProps = Omit<TextFieldProps, 'children' | 'isInvalid' | 'validationBehavior'> & {
   /**
    * Whether the field grows with the text it holds, from `rows` up. `false`
    * keeps it at `rows` and scrolls the text inside.
@@ -12,7 +12,8 @@ type TextAreaProps = {
   /**
    * Whether to count the characters the field holds at the end of the
    * supporting line, against `maxLength` where there is one, as the text
-   * fields page's character counter does.
+   * fields page's character counter does. The count is written in the
+   * `I18nProvider`'s digits and grouping.
    * @default false
    */
   characterCount?: boolean;
@@ -20,8 +21,9 @@ type TextAreaProps = {
    * How the limit is said to a screen reader, where there is a `maxLength`.
    * Read with the field on focus rather than as the value changes, so it
    * names the limit and not what is left of it. The visible count is hidden
-   * from the tree, which is what this replaces.
-   * @default `Up to ${maxLength} characters`, singular for a limit of one
+   * from the tree, which is what this replaces. Left out, it is the
+   * sentence for it in the I18nProvider's locale — "Up to 20 characters" in
+   * English, singular for a limit of one.
    */
   characterLimitLabel?: string;
   /**
@@ -82,7 +84,7 @@ type TextAreaProps = {
    * @default 'filled'
    */
   variant?: FieldVariant;
-} & Omit<TextFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;
+};
 /**
  * A labelled multi-line input. Its value is React Aria's: pass `value` with
  * `onChange` to control it, or `defaultValue` to let it keep its own — and

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

@@ -23,7 +23,7 @@ import { TextField } from "react-aria-components";
 * `TextField` puts around them.
 */
 function TextArea$1(t0) {
-	const $ = c(28);
+	const $ = c(29);
 	const { autosize: t1, characterCount: t2, characterLimitLabel, description, error, floatingLabel: t3, inputRef, isDisabled: t4, label, leadingIcon, rows: t5, trailingIcon, variant: t6, ...props$1 } = t0;
 	const autosize = t1 === void 0 ? true : t1;
 	const characterCount = t2 === void 0 ? false : t2;
@@ -53,9 +53,10 @@ function TextArea$1(t0) {
 		$[5] = t9;
 	} else t9 = $[5];
 	let t10;
-	if ($[6] !== floatingLabel || $[7] !== label || $[8] !== leadingIcon || $[9] !== t9 || $[10] !== trailingIcon || $[11] !== variant) {
+	if ($[6] !== floatingLabel || $[7] !== label || $[8] !== leadingIcon || $[9] !== props$1.isRequired || $[10] !== t9 || $[11] !== trailingIcon || $[12] !== variant) {
 		t10 = /* @__PURE__ */ jsx(FieldBox, {
 			floatingLabel,
+			isRequired: props$1.isRequired,
 			label,
 			leading: leadingIcon,
 			multiline: true,
@@ -66,13 +67,14 @@ function TextArea$1(t0) {
 		$[6] = floatingLabel;
 		$[7] = label;
 		$[8] = leadingIcon;
-		$[9] = t9;
-		$[10] = trailingIcon;
-		$[11] = variant;
-		$[12] = t10;
-	} else t10 = $[12];
+		$[9] = props$1.isRequired;
+		$[10] = t9;
+		$[11] = trailingIcon;
+		$[12] = variant;
+		$[13] = t10;
+	} else t10 = $[13];
 	let t11;
-	if ($[13] !== characterCount || $[14] !== characterLimitLabel || $[15] !== description || $[16] !== error || $[17] !== props$1.maxLength) {
+	if ($[14] !== characterCount || $[15] !== characterLimitLabel || $[16] !== description || $[17] !== error || $[18] !== props$1.maxLength) {
 		t11 = /* @__PURE__ */ jsx(FieldMessage, {
 			characterCount,
 			characterLimitLabel,
@@ -80,15 +82,15 @@ function TextArea$1(t0) {
 			error,
 			maxLength: props$1.maxLength
 		});
-		$[13] = characterCount;
-		$[14] = characterLimitLabel;
-		$[15] = description;
-		$[16] = error;
-		$[17] = props$1.maxLength;
-		$[18] = t11;
-	} else t11 = $[18];
+		$[14] = characterCount;
+		$[15] = characterLimitLabel;
+		$[16] = description;
+		$[17] = error;
+		$[18] = props$1.maxLength;
+		$[19] = t11;
+	} else t11 = $[19];
 	let t12;
-	if ($[19] !== T0 || $[20] !== isDisabled || $[21] !== props$1 || $[22] !== t10 || $[23] !== t11 || $[24] !== t7 || $[25] !== t8 || $[26] !== validationBehavior) {
+	if ($[20] !== T0 || $[21] !== isDisabled || $[22] !== props$1 || $[23] !== t10 || $[24] !== t11 || $[25] !== t7 || $[26] !== t8 || $[27] !== validationBehavior) {
 		t12 = /* @__PURE__ */ jsxs(T0, {
 			isDisabled,
 			isInvalid: t7,
@@ -97,16 +99,16 @@ function TextArea$1(t0) {
 			...t8,
 			children: [t10, t11]
 		});
-		$[19] = T0;
-		$[20] = isDisabled;
-		$[21] = props$1;
-		$[22] = t10;
-		$[23] = t11;
-		$[24] = t7;
-		$[25] = t8;
-		$[26] = validationBehavior;
-		$[27] = t12;
-	} else t12 = $[27];
+		$[20] = T0;
+		$[21] = isDisabled;
+		$[22] = props$1;
+		$[23] = t10;
+		$[24] = t11;
+		$[25] = t7;
+		$[26] = t8;
+		$[27] = validationBehavior;
+		$[28] = t12;
+	} else t12 = $[28];
 	return t12;
 }
 //#endregion

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

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

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

@@ -2,11 +2,12 @@ import { FieldVariant } from "../../field/index.js";
 import { ReactNode, Ref, RefAttributes } from "react";
 import { TextFieldProps } from "react-aria-components";
 //#region src/components/text-field/index.d.ts
-type TextFieldProps$1 = {
+type TextFieldProps$1 = Omit<TextFieldProps, 'children' | 'isInvalid' | 'prefix' | 'validationBehavior'> & {
   /**
    * Whether to count the characters the field holds at the end of the
    * supporting line, against `maxLength` where there is one, as the text
-   * fields page's character counter does.
+   * fields page's character counter does. The count is written in the
+   * `I18nProvider`'s digits and grouping.
    * @default false
    */
   characterCount?: boolean;
@@ -14,8 +15,9 @@ type TextFieldProps$1 = {
    * How the limit is said to a screen reader, where there is a `maxLength`.
    * Read with the field on focus rather than as the value changes, so it
    * names the limit and not what is left of it. The visible count is hidden
-   * from the tree, which is what this replaces.
-   * @default `Up to ${maxLength} characters`, singular for a limit of one
+   * from the tree, which is what this replaces. Left out, it is the
+   * sentence for it in the I18nProvider's locale — "Up to 20 characters" in
+   * English, singular for a limit of one.
    */
   characterLimitLabel?: string;
   /**
@@ -85,7 +87,7 @@ type TextFieldProps$1 = {
    * @default 'filled'
    */
   variant?: FieldVariant;
-} & Omit<TextFieldProps, 'children' | 'isInvalid' | 'prefix' | 'validationBehavior'>;
+};
 /**
  * A labelled single-line input. Its value is React Aria's: pass `value` with
  * `onChange` to control it, or `defaultValue` to let it keep its own — and

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

@@ -24,7 +24,7 @@ import { TextField } from "react-aria-components";
 * `TextField` puts around them.
 */
 function TextField$1(t0) {
-	const $ = c(29);
+	const $ = c(30);
 	const { characterCount: t1, characterLimitLabel, description, error, floatingLabel: t2, inputRef, isDisabled: t3, label, leadingIcon, numeric: t4, prefix, suffix, trailingIcon, variant: t5, ...props$1 } = t0;
 	const characterCount = t1 === void 0 ? false : t1;
 	const floatingLabel = t2 === void 0 ? true : t2;
@@ -55,9 +55,10 @@ function TextField$1(t0) {
 		$[6] = t8;
 	} else t8 = $[6];
 	let t9;
-	if ($[7] !== floatingLabel || $[8] !== label || $[9] !== leadingIcon || $[10] !== t8 || $[11] !== trailingIcon || $[12] !== variant) {
+	if ($[7] !== floatingLabel || $[8] !== label || $[9] !== leadingIcon || $[10] !== props$1.isRequired || $[11] !== t8 || $[12] !== trailingIcon || $[13] !== variant) {
 		t9 = /* @__PURE__ */ jsx(FieldBox, {
 			floatingLabel,
+			isRequired: props$1.isRequired,
 			label,
 			leading: leadingIcon,
 			trailing: trailingIcon,
@@ -67,13 +68,14 @@ function TextField$1(t0) {
 		$[7] = floatingLabel;
 		$[8] = label;
 		$[9] = leadingIcon;
-		$[10] = t8;
-		$[11] = trailingIcon;
-		$[12] = variant;
-		$[13] = t9;
-	} else t9 = $[13];
+		$[10] = props$1.isRequired;
+		$[11] = t8;
+		$[12] = trailingIcon;
+		$[13] = variant;
+		$[14] = t9;
+	} else t9 = $[14];
 	let t10;
-	if ($[14] !== characterCount || $[15] !== characterLimitLabel || $[16] !== description || $[17] !== error || $[18] !== props$1.maxLength) {
+	if ($[15] !== characterCount || $[16] !== characterLimitLabel || $[17] !== description || $[18] !== error || $[19] !== props$1.maxLength) {
 		t10 = /* @__PURE__ */ jsx(FieldMessage, {
 			characterCount,
 			characterLimitLabel,
@@ -81,15 +83,15 @@ function TextField$1(t0) {
 			error,
 			maxLength: props$1.maxLength
 		});
-		$[14] = characterCount;
-		$[15] = characterLimitLabel;
-		$[16] = description;
-		$[17] = error;
-		$[18] = props$1.maxLength;
-		$[19] = t10;
-	} else t10 = $[19];
+		$[15] = characterCount;
+		$[16] = characterLimitLabel;
+		$[17] = description;
+		$[18] = error;
+		$[19] = props$1.maxLength;
+		$[20] = t10;
+	} else t10 = $[20];
 	let t11;
-	if ($[20] !== T0 || $[21] !== isDisabled || $[22] !== props$1 || $[23] !== t10 || $[24] !== t6 || $[25] !== t7 || $[26] !== t9 || $[27] !== validationBehavior) {
+	if ($[21] !== T0 || $[22] !== isDisabled || $[23] !== props$1 || $[24] !== t10 || $[25] !== t6 || $[26] !== t7 || $[27] !== t9 || $[28] !== validationBehavior) {
 		t11 = /* @__PURE__ */ jsxs(T0, {
 			isDisabled,
 			isInvalid: t6,
@@ -98,16 +100,16 @@ function TextField$1(t0) {
 			...t7,
 			children: [t9, t10]
 		});
-		$[20] = T0;
-		$[21] = isDisabled;
-		$[22] = props$1;
-		$[23] = t10;
-		$[24] = t6;
-		$[25] = t7;
-		$[26] = t9;
-		$[27] = validationBehavior;
-		$[28] = t11;
-	} else t11 = $[28];
+		$[21] = T0;
+		$[22] = isDisabled;
+		$[23] = props$1;
+		$[24] = t10;
+		$[25] = t6;
+		$[26] = t7;
+		$[27] = t9;
+		$[28] = validationBehavior;
+		$[29] = t11;
+	} else t11 = $[29];
 	return t11;
 }
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","Ref","RefAttributes","TextFieldProps","RACTextFieldProps","stylex","TextField","RACTextField","FieldVariant","FieldBox","FieldInput","FieldMessage","fieldStyles","invalidFrom","useFieldValidationBehavior","mergeStatefulStyles","characterCount","characterLimitLabel","description","error","floatingLabel","inputRef","HTMLInputElement","label","leadingIcon","numeric","prefix","suffix","trailingIcon","variant","Omit","t0","$","t1","t2","isDisabled","t3","t4","t5","props","undefined","validationBehavior","T0","t6","t7","root","t8","t9","t10","maxLength","t11","TextField","_c","props","RACTextField","stylex.props"],"sources":["../../../src/components/text-field/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, Ref, RefAttributes } from 'react';\nimport type { TextFieldProps as RACTextFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { TextField as RACTextField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { mergeStatefulStyles } from '../../styles/merge';\ntype TextFieldProps = {\n  /**\n   * Whether to count the characters the field holds at the end of the\n   * supporting line, against `maxLength` where there is one, as the text\n   * fields page's character counter does.\n   * @default false\n   */\n  characterCount?: boolean;\n  /**\n   * How the limit is said to a screen reader, where there is a `maxLength`.\n   * Read with the field on focus rather than as the value changes, so it\n   * names the limit and not what is left of it. The visible count is hidden\n   * from the tree, which is what this replaces.\n   * @default `Up to ${maxLength} characters`, singular for a limit of one\n   */\n  characterLimitLabel?: string;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value, as the text fields page draws it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * 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   * What the field is for. Required rather than optional: a text field with\n   * no label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * An icon at the start of the box, before the label and the value: the\n   * page's 24dp leading icon, in the muted role. An icon drawn in `em`\n   * takes that size from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * Renders the value in the mono face with tabular figures, for amounts and\n   * other numbers meant to be compared down a column.\n   * @default false\n   */\n  numeric?: boolean;\n  /**\n   * Text before the value on its line, in the muted role, shown while the\n   * field is focused or holds a value.\n   */\n  prefix?: ReactNode;\n  /**\n   * Text after the value on its line, in the muted role, shown while the\n   * field is focused or holds a value.\n   */\n  suffix?: ReactNode;\n  /**\n   * An icon at the end of the box, after the value: the page's 24dp trailing\n   * icon, in the muted role and the error role while the field has an error.\n   * An icon drawn in `em` takes that size from the slot.\n   */\n  trailingIcon?: ReactNode;\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats — the text fields page's two fields.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACTextFieldProps, 'children' | 'isInvalid' | 'prefix' | 'validationBehavior'>;\n\n/**\n * A labelled single-line input. Its value is React Aria's: pass `value` with\n * `onChange` to control it, or `defaultValue` to let it keep its own — and\n * `onChange` is handed the string, not the event. The call site's\n * `className` and `style` land on the field as a whole, which is the element\n * a layout positions.\n *\n * The text fields page's configurations are props: `leadingIcon` and\n * `trailingIcon` at the box's ends, `prefix` and `suffix` on the value's\n * line, and `characterCount` opposite the supporting text, counting against\n * `maxLength`.\n *\n * The box, label, input and message are the field chrome in `src/field`,\n * shared with every other field; this component is what React Aria's\n * `TextField` puts around them.\n */\nfunction TextField({\n  characterCount = false,\n  characterLimitLabel,\n  description,\n  error,\n  floatingLabel = true,\n  inputRef,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  numeric = false,\n  prefix,\n  suffix,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: RefAttributes<HTMLDivElement> & TextFieldProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACTextField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel} label={label} leading={leadingIcon} trailing={trailingIcon} variant={variant}>\n        <FieldInput numeric={numeric} prefix={prefix} ref={inputRef} suffix={suffix} />\n      </FieldBox>\n      <FieldMessage characterCount={characterCount} characterLimitLabel={characterLimitLabel} description={description} error={error} maxLength={props.maxLength} />\n    </RACTextField>;\n}\nexport type { TextFieldProps };\nexport default TextField;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","Ref","RefAttributes","TextFieldProps","RACTextFieldProps","stylex","TextField","RACTextField","FieldVariant","FieldBox","FieldInput","FieldMessage","fieldStyles","invalidFrom","useFieldValidationBehavior","mergeStatefulStyles","Omit","characterCount","characterLimitLabel","description","error","floatingLabel","inputRef","HTMLInputElement","label","leadingIcon","numeric","prefix","suffix","trailingIcon","variant","t0","$","t1","t2","isDisabled","t3","t4","t5","props","undefined","validationBehavior","T0","t6","t7","root","t8","t9","isRequired","t10","maxLength","t11","TextField","_c","props","RACTextField","stylex.props"],"sources":["../../../src/components/text-field/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, Ref, RefAttributes } from 'react';\nimport type { TextFieldProps as RACTextFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { TextField as RACTextField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { mergeStatefulStyles } from '../../styles/merge';\ntype TextFieldProps = Omit<RACTextFieldProps, 'children' | 'isInvalid' | 'prefix' | 'validationBehavior'> & {\n  /**\n   * Whether to count the characters the field holds at the end of the\n   * supporting line, against `maxLength` where there is one, as the text\n   * fields page's character counter does. The count is written in the\n   * `I18nProvider`'s digits and grouping.\n   * @default false\n   */\n  characterCount?: boolean;\n  /**\n   * How the limit is said to a screen reader, where there is a `maxLength`.\n   * Read with the field on focus rather than as the value changes, so it\n   * names the limit and not what is left of it. The visible count is hidden\n   * from the tree, which is what this replaces. Left out, it is the\n   * sentence for it in the I18nProvider's locale — \"Up to 20 characters\" in\n   * English, singular for a limit of one.\n   */\n  characterLimitLabel?: string;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value, as the text fields page draws it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * 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   * What the field is for. Required rather than optional: a text field with\n   * no label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * An icon at the start of the box, before the label and the value: the\n   * page's 24dp leading icon, in the muted role. An icon drawn in `em`\n   * takes that size from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * Renders the value in the mono face with tabular figures, for amounts and\n   * other numbers meant to be compared down a column.\n   * @default false\n   */\n  numeric?: boolean;\n  /**\n   * Text before the value on its line, in the muted role, shown while the\n   * field is focused or holds a value.\n   */\n  prefix?: ReactNode;\n  /**\n   * Text after the value on its line, in the muted role, shown while the\n   * field is focused or holds a value.\n   */\n  suffix?: ReactNode;\n  /**\n   * An icon at the end of the box, after the value: the page's 24dp trailing\n   * icon, in the muted role and the error role while the field has an error.\n   * An icon drawn in `em` takes that size from the slot.\n   */\n  trailingIcon?: ReactNode;\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats — the text fields page's two fields.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n};\n\n/**\n * A labelled single-line input. Its value is React Aria's: pass `value` with\n * `onChange` to control it, or `defaultValue` to let it keep its own — and\n * `onChange` is handed the string, not the event. The call site's\n * `className` and `style` land on the field as a whole, which is the element\n * a layout positions.\n *\n * The text fields page's configurations are props: `leadingIcon` and\n * `trailingIcon` at the box's ends, `prefix` and `suffix` on the value's\n * line, and `characterCount` opposite the supporting text, counting against\n * `maxLength`.\n *\n * The box, label, input and message are the field chrome in `src/field`,\n * shared with every other field; this component is what React Aria's\n * `TextField` puts around them.\n */\nfunction TextField({\n  characterCount = false,\n  characterLimitLabel,\n  description,\n  error,\n  floatingLabel = true,\n  inputRef,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  numeric = false,\n  prefix,\n  suffix,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: RefAttributes<HTMLDivElement> & TextFieldProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACTextField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel} isRequired={props.isRequired} label={label} leading={leadingIcon} trailing={trailingIcon} variant={variant}>\n        <FieldInput numeric={numeric} prefix={prefix} ref={inputRef} suffix={suffix} />\n      </FieldBox>\n      <FieldMessage characterCount={characterCount} characterLimitLabel={characterLimitLabel} description={description} error={error} maxLength={props.maxLength} />\n    </RACTextField>;\n}\nexport type { TextFieldProps };\nexport default TextField;"],"mappings":"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"}