@kanso-labs/kanso-ui 0.35.0 → 0.37.0

package/dist/index.js

@@ -1,26 +1,29 @@
+import { colorScheme } from "./color-scheme.js";
 import Text from "./components/text/index.js";
 import AppBar from "./components/app-bar/index.js";
 import Autocomplete from "./components/autocomplete/index.js";
 import Avatar from "./components/avatar/index.js";
+import Badge from "./components/badge/index.js";
 import Link from "./components/link/index.js";
-import Breadcrumbs from "./components/breadcrumbs/index.js";
+import Breadcrumbs, { BreadcrumbsItem } from "./components/breadcrumbs/index.js";
 import ProgressIndicator from "./components/progress-indicator/index.js";
 import Button from "./components/button/index.js";
+import ButtonGroup from "./components/button-group/index.js";
 import Calendar from "./components/calendar/index.js";
 import Card from "./components/card/index.js";
 import Checkbox from "./components/checkbox/index.js";
 import CheckboxGroup from "./components/checkbox-group/index.js";
 import Chip from "./components/chip/index.js";
-import ChipGroup from "./components/chip-group/index.js";
+import ChipGroup, { ChipGroupChip } from "./components/chip-group/index.js";
 import Code from "./components/code/index.js";
 import ColorArea from "./components/color-area/index.js";
 import ColorField from "./components/color-field/index.js";
 import ColorSlider from "./components/color-slider/index.js";
 import ColorSwatch from "./components/color-swatch/index.js";
 import ColorPicker from "./components/color-picker/index.js";
-import ColorSwatchPicker from "./components/color-swatch-picker/index.js";
+import ColorSwatchPicker, { ColorSwatchPickerItem } from "./components/color-swatch-picker/index.js";
 import ColorWheel from "./components/color-wheel/index.js";
-import ListBox from "./components/list-box/index.js";
+import ListBox, { ListBoxItem, ListBoxLoadMore, ListBoxSection } from "./components/list-box/index.js";
 import ComboBox from "./components/combo-box/index.js";
 import Container from "./components/container/index.js";
 import CopyField from "./components/copy-field/index.js";
@@ -29,36 +32,42 @@ import DateField from "./components/date-field/index.js";
 import DatePicker from "./components/date-picker/index.js";
 import RangeCalendar from "./components/range-calendar/index.js";
 import DateRangePicker from "./components/date-range-picker/index.js";
-import Dialog from "./components/dialog/index.js";
-import Disclosure from "./components/disclosure/index.js";
+import Dialog, { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "./components/dialog/index.js";
+import Disclosure, { DisclosureHeader, DisclosurePanel } from "./components/disclosure/index.js";
 import Separator from "./components/separator/index.js";
 import DisclosureGroup from "./components/disclosure-group/index.js";
 import DropZone, { FileTrigger } from "./components/drop-zone/index.js";
+import Fab from "./components/fab/index.js";
+import FabMenu, { FabMenuItem } from "./components/fab-menu/index.js";
 import Feed from "./components/feed/index.js";
 import Form from "./components/form/index.js";
 import IconButton from "./components/icon-button/index.js";
 import Keycap from "./components/keycap/index.js";
-import List from "./components/list/index.js";
+import List, { ListLoadMore, ListRow, ListSection } from "./components/list/index.js";
 import ListDetail from "./components/list-detail/index.js";
 import ListItem from "./components/list-item/index.js";
-import Menu from "./components/menu/index.js";
+import Menu, { MenuContent, MenuItem, MenuLoadMore, MenuSection, MenuSeparator, MenuSubmenu } from "./components/menu/index.js";
 import Meter from "./components/meter/index.js";
-import NavigationTree from "./components/navigation-tree/index.js";
+import NavigationBar, { NavigationBarItem } from "./components/navigation-bar/index.js";
+import NavigationRail, { NavigationRailItem } from "./components/navigation-rail/index.js";
+import NavigationTree, { NavigationTreeItem, NavigationTreeSection } from "./components/navigation-tree/index.js";
 import NumberField from "./components/number-field/index.js";
-import Popover from "./components/popover/index.js";
+import Popover, { PopoverContent, PopoverDescription, PopoverTitle } from "./components/popover/index.js";
 import ProductIcon from "./components/product-icon/index.js";
 import RadioGroup, { Radio } from "./components/radio-group/index.js";
 import SearchField from "./components/search-field/index.js";
-import SegmentedButton from "./components/segmented-button/index.js";
+import SearchView, { SearchViewContent } from "./components/search-view/index.js";
+import SegmentedButton, { SegmentedButtonSegment } from "./components/segmented-button/index.js";
 import Select from "./components/select/index.js";
-import Sheet from "./components/sheet/index.js";
+import Sheet, { SheetBody, SheetContent, SheetFooter, SheetHandle, SheetHeader, SheetTitle } from "./components/sheet/index.js";
 import Slider from "./components/slider/index.js";
 import Snackbar from "./components/snackbar/index.js";
+import SplitButton, { SplitButtonAction, SplitButtonMenu } from "./components/split-button/index.js";
 import Stack from "./components/stack/index.js";
 import SupportingPane from "./components/supporting-pane/index.js";
 import Switch from "./components/switch/index.js";
-import Table from "./components/table/index.js";
-import Tabs from "./components/tabs/index.js";
+import Table, { TableBody, TableCell, TableColumn, TableFooter, TableHeader, TableLoadMore, TableRow } from "./components/table/index.js";
+import Tabs, { TabsList, TabsPanel, TabsPanels, TabsTab } from "./components/tabs/index.js";
 import Tag from "./components/tag/index.js";
 import TextArea from "./components/text-area/index.js";
 import TextField from "./components/text-field/index.js";
@@ -66,9 +75,9 @@ import TimeField from "./components/time-field/index.js";
 import TokenField from "./components/token-field/index.js";
 import Toolbar from "./components/toolbar/index.js";
 import Tooltip from "./components/tooltip/index.js";
-import Tree from "./components/tree/index.js";
+import Tree, { TreeItem, TreeLoadMore, TreeSection } from "./components/tree/index.js";
 import { collectionSizes } from "./layout.js";
 import { useDragAndDrop } from "./drag/hooks.js";
 import { Collection, DIRECTORY_DRAG_TYPE, Focusable, GridLayout, I18nProvider, ListLayout, Pressable, RouterProvider, SharedElement, SharedElementTransition, TableLayout, TokenFieldValue, Virtualizer, VisuallyHidden, WaterfallLayout, getColorChannels, isDirectoryDropItem, isFileDropItem, isTextDropItem, parseColor, useAsyncList, useDrag, useDrop, useFilter, useListData, useLocale, useTreeData } from "./react-aria.js";
 import "./styles.css";
-export { AppBar, Autocomplete, Avatar, Breadcrumbs, Button, Calendar, Card, Checkbox, CheckboxGroup, Chip, ChipGroup, Code, Collection, ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatch, ColorSwatchPicker, ColorWheel, ComboBox, Container, CopyField, Currency, DIRECTORY_DRAG_TYPE, DateField, DatePicker, DateRangePicker, Dialog, Disclosure, DisclosureGroup, DropZone, Feed, FileTrigger, Focusable, Form, GridLayout, I18nProvider, IconButton, Keycap, Link, List, ListBox, ListDetail, ListItem, ListLayout, Menu, Meter, NavigationTree, NumberField, Popover, Pressable, ProductIcon, ProgressIndicator, Radio, RadioGroup, RangeCalendar, RouterProvider, SearchField, SegmentedButton, Select, Separator, SharedElement, SharedElementTransition, Sheet, Slider, Snackbar, Stack, SupportingPane, Switch, Table, TableLayout, Tabs, Tag, Text, TextArea, TextField, TimeField, TokenField, TokenFieldValue, Toolbar, Tooltip, Tree, Virtualizer, VisuallyHidden, WaterfallLayout, collectionSizes, getColorChannels, isDirectoryDropItem, isFileDropItem, isTextDropItem, parseColor, useAsyncList, useDrag, useDragAndDrop, useDrop, useFilter, useListData, useLocale, useTreeData };
+export { AppBar, Autocomplete, Avatar, Badge, Breadcrumbs, BreadcrumbsItem, Button, ButtonGroup, Calendar, Card, Checkbox, CheckboxGroup, Chip, ChipGroup, ChipGroupChip, Code, Collection, ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatch, ColorSwatchPicker, ColorSwatchPickerItem, ColorWheel, ComboBox, Container, CopyField, Currency, DIRECTORY_DRAG_TYPE, DateField, DatePicker, DateRangePicker, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Disclosure, DisclosureGroup, DisclosureHeader, DisclosurePanel, DropZone, Fab, FabMenu, FabMenuItem, Feed, FileTrigger, Focusable, Form, GridLayout, I18nProvider, IconButton, Keycap, Link, List, ListBox, ListBoxItem, ListBoxLoadMore, ListBoxSection, ListDetail, ListItem, ListLayout, ListLoadMore, ListRow, ListSection, Menu, MenuContent, MenuItem, MenuLoadMore, MenuSection, MenuSeparator, MenuSubmenu, Meter, NavigationBar, NavigationBarItem, NavigationRail, NavigationRailItem, NavigationTree, NavigationTreeItem, NavigationTreeSection, NumberField, Popover, PopoverContent, PopoverDescription, PopoverTitle, Pressable, ProductIcon, ProgressIndicator, Radio, RadioGroup, RangeCalendar, RouterProvider, SearchField, SearchView, SearchViewContent, SegmentedButton, SegmentedButtonSegment, Select, Separator, SharedElement, SharedElementTransition, Sheet, SheetBody, SheetContent, SheetFooter, SheetHandle, SheetHeader, SheetTitle, Slider, Snackbar, SplitButton, SplitButtonAction, SplitButtonMenu, Stack, SupportingPane, Switch, Table, TableBody, TableCell, TableColumn, TableFooter, TableHeader, TableLayout, TableLoadMore, TableRow, Tabs, TabsList, TabsPanel, TabsPanels, TabsTab, Tag, Text, TextArea, TextField, TimeField, TokenField, TokenFieldValue, Toolbar, Tooltip, Tree, TreeItem, TreeLoadMore, TreeSection, Virtualizer, VisuallyHidden, WaterfallLayout, collectionSizes, colorScheme, getColorChannels, isDirectoryDropItem, isFileDropItem, isTextDropItem, parseColor, useAsyncList, useDrag, useDragAndDrop, useDrop, useFilter, useListData, useLocale, useTreeData };

package/dist/navigation/context.js

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+//#region src/navigation/context.ts
+const NavigationContext = createContext({ form: "bar" });
+//#endregion
+export { NavigationContext };
+
+//# sourceMappingURL=context.js.map

package/dist/navigation/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":["createContext","NavigationContextValue","form","NavigationForm","selectedRoute","NavigationContext"],"sources":["../../src/navigation/context.ts"],"sourcesContent":["import { createContext } from 'react'\n\n// Apart from ./index.tsx so that file exports components alone, which is what\n// keeps fast refresh working for it — the same arrangement `src/row` uses.\n\n/**\n * What NavigationBar and NavigationRail hand their destinations: the form to\n * draw, and the route of the current one.\n */\ntype NavigationContextValue = {\n  form: NavigationForm\n  selectedRoute?: string | undefined\n}\n\n/** Which of the three forms a destination draws — see ./styles.ts. */\ntype NavigationForm = 'bar' | 'collapsed' | 'expanded'\n\nconst NavigationContext = createContext<NavigationContextValue>({\n  form: 'bar',\n})\n\nexport type { NavigationContextValue, NavigationForm }\n\nexport { NavigationContext }\n"],"mappings":";;AAiBA,MAAMK,oBAAoBL,cAAsC,EAC9DE,MAAM,MACR,CAAC"}

package/dist/navigation/index.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode, RefAttributes } from "react";
+import { LinkProps } from "react-aria-components";
+//#region src/navigation/index.d.ts
+type NavigationItemProps = {
+  /**
+   * A badge on the icon: `true` for the badges page's small dot, a number
+   * for the large badge holding it. The badge is hidden from assistive
+   * technology, so say what it says in the destination's `aria-label` too —
+   * "First item, 3 new".
+   */
+  badge?: boolean | number;
+  /** The destination's name, drawn as its label. */
+  children: ReactNode;
+  /** A function may compute the class from the destination's render state. */
+  className?: LinkProps['className'];
+  /**
+   * Where the destination goes, and what the bar's or the rail's
+   * `selectedRoute` is matched against.
+   */
+  href: string;
+  /** The destination's icon, at the pages' 24dp. */
+  icon: ReactNode;
+  /** A function may compute the style from the destination's render state. */
+  style?: LinkProps['style'];
+} & Omit<LinkProps, 'children' | 'className' | 'href' | 'style'>;
+//#endregion
+export type { NavigationItemProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/navigation/index.js

@@ -0,0 +1,96 @@
+import { props } from "../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { mergeStatefulStyles } from "../styles/merge.js";
+import Badge from "../components/badge/index.js";
+import { focus } from "../styles/focus.js";
+import { NavigationContext } from "./context.js";
+import { barItemStyles, collapsedItemStyles, expandedItemStyles, navigationItemStyles } from "./styles.js";
+import { c } from "react/compiler-runtime";
+import { useContext } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Link } from "react-aria-components";
+//#region src/navigation/index.tsx
+const FORMS = {
+	bar: barItemStyles,
+	collapsed: collapsedItemStyles,
+	expanded: expandedItemStyles
+};
+const RINGS = {
+	bar: {
+		indicator: barItemStyles.indicatorRing,
+		item: barItemStyles.itemRing
+	},
+	collapsed: {
+		indicator: focus.ringVisible,
+		item: null
+	},
+	expanded: {
+		indicator: null,
+		item: focus.ringVisible
+	}
+};
+function itemClasses(form, isCurrent) {
+	const styles = FORMS[form];
+	return (state) => props(navigationItemStyles.link, styles.item, isCurrent && styles.itemCurrent, state.isHovered && (isCurrent ? styles.itemHoveredCurrent : styles.itemHovered), state.isFocusVisible && (isCurrent ? styles.itemFocusedCurrent : styles.itemFocused), state.isPressed && (isCurrent ? styles.itemPressedCurrent : styles.itemPressed), state.isFocusVisible && RINGS[form].item, state.isDisabled && navigationItemStyles.itemDisabled);
+}
+function itemContent(form, isCurrent, badge, icon, label) {
+	const styles = FORMS[form];
+	const glyph = badge === void 0 || badge === false ? icon : /* @__PURE__ */ jsx(Badge, {
+		count: badge === true ? void 0 : badge,
+		children: icon
+	});
+	return (state) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		...props(navigationItemStyles.pill, styles.indicator, isCurrent && styles.indicatorCurrent, state.isHovered && (isCurrent ? styles.indicatorHoveredCurrent : styles.indicatorHovered), state.isFocusVisible && (isCurrent ? styles.indicatorFocusedCurrent : styles.indicatorFocused), state.isPressed && (isCurrent ? styles.indicatorPressedCurrent : styles.indicatorPressed), state.isFocusVisible && RINGS[form].indicator, state.isDisabled && navigationItemStyles.itemDisabled),
+		children: /* @__PURE__ */ jsx("span", {
+			...props(navigationItemStyles.icon),
+			children: glyph
+		})
+	}), /* @__PURE__ */ jsx("span", {
+		...props(navigationItemStyles.label, styles.label, isCurrent && styles.labelCurrent, state.isDisabled && navigationItemStyles.itemDisabled),
+		children: label
+	})] });
+}
+/**
+* One destination in a navigation bar or rail: an icon, a label and, when
+* it is the current one, the active indicator behind them.
+*/
+function NavigationItem(t0) {
+	const $ = c(13);
+	const { badge, children, href, icon, ...props } = t0;
+	const { form, selectedRoute } = useContext(NavigationContext);
+	const isCurrent = selectedRoute !== void 0 && href === selectedRoute;
+	const T0 = Link;
+	const t1 = isCurrent ? "page" : void 0;
+	const t2 = mergeStatefulStyles(itemClasses(form, isCurrent), props);
+	let t3;
+	if ($[0] !== badge || $[1] !== children || $[2] !== form || $[3] !== icon || $[4] !== isCurrent) {
+		t3 = itemContent(form, isCurrent, badge, icon, children);
+		$[0] = badge;
+		$[1] = children;
+		$[2] = form;
+		$[3] = icon;
+		$[4] = isCurrent;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== T0 || $[7] !== href || $[8] !== props || $[9] !== t1 || $[10] !== t2 || $[11] !== t3) {
+		t4 = /* @__PURE__ */ jsx(T0, {
+			"aria-current": t1,
+			href,
+			...props,
+			...t2,
+			children: t3
+		});
+		$[6] = T0;
+		$[7] = href;
+		$[8] = props;
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+		$[12] = t4;
+	} else t4 = $[12];
+	return t4;
+}
+//#endregion
+export { NavigationItem };
+
+//# sourceMappingURL=index.js.map

package/dist/navigation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ReactNode","RefAttributes","LinkRenderProps","LinkProps","RACLinkProps","stylex","useContext","Link","RACLink","NavigationForm","Badge","focus","mergeStatefulStyles","NavigationContext","barItemStyles","collapsedItemStyles","expandedItemStyles","navigationItemStyles","FORMS","bar","collapsed","expanded","RINGS","indicator","indicatorRing","item","itemRing","ringVisible","NavigationItemProps","badge","children","className","href","icon","style","Omit","itemClasses","form","isCurrent","styles","state","props","link","itemCurrent","isHovered","itemHoveredCurrent","itemHovered","isFocusVisible","itemFocusedCurrent","itemFocused","isPressed","itemPressedCurrent","itemPressed","isDisabled","itemDisabled","itemContent","label","glyph","undefined","pill","indicatorCurrent","indicatorHoveredCurrent","indicatorHovered","indicatorFocusedCurrent","indicatorFocused","indicatorPressedCurrent","indicatorPressed","labelCurrent","NavigationItem","t0","$","_c","selectedRoute","T0","t1","t2","t3","t4","stylex.props","_c","RACLink"],"sources":["../../src/navigation/index.tsx"],"sourcesContent":["import type { ReactNode, RefAttributes } from 'react';\nimport type { LinkRenderProps, LinkProps as RACLinkProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext } from 'react';\nimport { Link as RACLink } from 'react-aria-components';\nimport type { NavigationForm } from './context';\nimport Badge from '../components/badge';\nimport { focus } from '../styles/focus';\nimport { mergeStatefulStyles } from '../styles/merge';\nimport { NavigationContext } from './context';\nimport { barItemStyles, collapsedItemStyles, expandedItemStyles, navigationItemStyles } from './styles';\n\n// The destination NavigationBar and NavigationRail both render, and the\n// context each hands it: which of the three forms to draw and which route is\n// current. See ./styles.ts for the forms.\n//\n// A destination is a link — it goes somewhere, rather than selecting\n// something — so it is React Aria's `Link`, which routes through a\n// `RouterProvider` when an app has one. The current one is the one whose\n// `href` is the bar's or the rail's `selectedRoute`, the same matching\n// NavigationTree does, and it carries `aria-current=\"page\"`.\n\nconst FORMS = {\n  bar: barItemStyles,\n  collapsed: collapsedItemStyles,\n  expanded: expandedItemStyles\n};\n\n// The focus ring goes around the pill, wherever a form draws it: the\n// indicator in a vertical destination, the whole destination in a horizontal\n// one. The rail's two forms take the library's shared ring. The bar's pill\n// moves from one element to the other at the medium breakpoint, so its rings\n// are its own, each giving way at the width the other takes over.\nconst RINGS = {\n  bar: {\n    indicator: barItemStyles.indicatorRing,\n    item: barItemStyles.itemRing\n  },\n  collapsed: {\n    indicator: focus.ringVisible,\n    item: null\n  },\n  expanded: {\n    indicator: null,\n    item: focus.ringVisible\n  }\n};\ntype NavigationItemProps = {\n  /**\n   * A badge on the icon: `true` for the badges page's small dot, a number\n   * for the large badge holding it. The badge is hidden from assistive\n   * technology, so say what it says in the destination's `aria-label` too —\n   * \"First item, 3 new\".\n   */\n  badge?: boolean | number;\n  /** The destination's name, drawn as its label. */\n  children: ReactNode;\n  /** A function may compute the class from the destination's render state. */\n  className?: RACLinkProps['className'];\n  /**\n   * Where the destination goes, and what the bar's or the rail's\n   * `selectedRoute` is matched against.\n   */\n  href: string;\n  /** The destination's icon, at the pages' 24dp. */\n  icon: ReactNode;\n  /** A function may compute the style from the destination's render state. */\n  style?: RACLinkProps['style'];\n} & Omit<RACLinkProps, 'children' | 'className' | 'href' | 'style'>;\n\n// A destination's own classes, from React Aria's render state: the pill in a\n// horizontal form, and the layers over it.\nfunction itemClasses(form: NavigationForm, isCurrent: boolean) {\n  const styles = FORMS[form];\n  return (state: LinkRenderProps) => stylex.props(navigationItemStyles.link, styles.item, isCurrent && styles.itemCurrent, state.isHovered && (isCurrent ? styles.itemHoveredCurrent : styles.itemHovered), state.isFocusVisible && (isCurrent ? styles.itemFocusedCurrent : styles.itemFocused), state.isPressed && (isCurrent ? styles.itemPressedCurrent : styles.itemPressed), state.isFocusVisible && RINGS[form].item, state.isDisabled && navigationItemStyles.itemDisabled);\n}\n\n// What a destination draws, from React Aria's render state: the indicator\n// holding the icon, and the label beside or under it. Built by a call rather\n// than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after.\nfunction itemContent(form: NavigationForm, isCurrent: boolean, badge: boolean | number | undefined, icon: ReactNode, label: ReactNode) {\n  const styles = FORMS[form];\n  const glyph = badge === undefined || badge === false ? icon : <Badge count={badge === true ? undefined : badge}>{icon}</Badge>;\n  return (state: LinkRenderProps) => <>\n      <span {...stylex.props(navigationItemStyles.pill, styles.indicator, isCurrent && styles.indicatorCurrent, state.isHovered && (isCurrent ? styles.indicatorHoveredCurrent : styles.indicatorHovered), state.isFocusVisible && (isCurrent ? styles.indicatorFocusedCurrent : styles.indicatorFocused), state.isPressed && (isCurrent ? styles.indicatorPressedCurrent : styles.indicatorPressed), state.isFocusVisible && RINGS[form].indicator, state.isDisabled && navigationItemStyles.itemDisabled)}>\n        <span {...stylex.props(navigationItemStyles.icon)}>{glyph}</span>\n      </span>\n      <span {...stylex.props(navigationItemStyles.label, styles.label, isCurrent && styles.labelCurrent, state.isDisabled && navigationItemStyles.itemDisabled)}>\n        {label}\n      </span>\n    </>;\n}\n\n/**\n * One destination in a navigation bar or rail: an icon, a label and, when\n * it is the current one, the active indicator behind them.\n */\nfunction NavigationItem({\n  badge,\n  children,\n  href,\n  icon,\n  ...props\n}: NavigationItemProps & RefAttributes<HTMLAnchorElement>) {\n  const {\n    form,\n    selectedRoute\n  } = useContext(NavigationContext);\n  const isCurrent = selectedRoute !== undefined && href === selectedRoute;\n  return <RACLink aria-current={isCurrent ? 'page' : undefined} href={href} {...props} {...mergeStatefulStyles(itemClasses(form, isCurrent), props)}>\n      {itemContent(form, isCurrent, badge, icon, children)}\n    </RACLink>;\n}\nexport type { NavigationItemProps };\nexport { NavigationItem };"],"mappings":"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"}

package/dist/navigation/styles.js

@@ -0,0 +1,312 @@
+import { colors, stateLayerOpacity } from "../tokens/design.tokens.stylex.js";
+//#region src/navigation/styles.ts
+`${colors.onSecondaryContainer}${stateLayerOpacity.hover}`;
+`${colors.onSecondaryContainer}${stateLayerOpacity.focus}`;
+`${colors.onSecondaryContainer}${stateLayerOpacity.pressed}`;
+`${colors.onSecondaryContainer}${stateLayerOpacity.hover}${colors.secondaryContainer}`;
+`${colors.onSecondaryContainer}${stateLayerOpacity.focus}${colors.secondaryContainer}`;
+`${colors.onSecondaryContainer}${stateLayerOpacity.pressed}${colors.secondaryContainer}`;
+const navigationItemStyles = {
+	icon: {
+		kGNEyG: "x6s0dn4",
+		k1xSpc: "x78zum5",
+		kGuDYH: "x1pvqxga",
+		kjj79g: "xl56j7k",
+		$$css: true
+	},
+	itemDisabled: {
+		kMwMTN: "x1gpw424",
+		kkrTdU: "xt0e3qv",
+		$$css: true
+	},
+	label: {
+		kMwMTN: "x1w5n3ug",
+		kVQacm: "xb3r6kr",
+		kg5iWk: "xlyipyv",
+		khDVqt: "xuxw1ft",
+		$$css: true
+	},
+	link: {
+		kGNEyG: "x6s0dn4",
+		kB7OPa: "x9f619",
+		kMwMTN: "x1w5n3ug",
+		kkrTdU: "x1ypdohk",
+		k1xSpc: "x78zum5",
+		k3XXqK: "x1t137rt",
+		kVAEAm: "x1n2onr6",
+		kMnn75: "xkrqix3",
+		$$css: true
+	},
+	pill: {
+		kWkggS: "xjbqb8w",
+		kaIpWk: "x1dkaolv",
+		kB7OPa: "x9f619",
+		kMwMTN: "x1w5n3ug",
+		$$css: true
+	}
+};
+const barItemStyles = {
+	indicator: {
+		kGNEyG: "x6s0dn4",
+		kZKoxP: "x10w6t97 x10qpgbh",
+		kaIpWk: "x1dkaolv",
+		kB7OPa: "x9f619",
+		k1xSpc: "x78zum5",
+		kmuXW: "x2lah0s",
+		kzqmXN: "x15yg21f x11lewyt",
+		kjj79g: "xl56j7k",
+		$$css: true
+	},
+	indicatorCurrent: {
+		kWkggS: "x15dekr4 x8jqrm0",
+		kVAM5u: "x1n2ykn",
+		ksu8eU: "xx61lck xnqlxux",
+		kMzoRj: "x2h6xq1",
+		kMwMTN: "x1sawysd",
+		$$css: true
+	},
+	indicatorFocused: {
+		kWkggS: "x1syr9su x8jqrm0",
+		$$css: true
+	},
+	indicatorFocusedCurrent: {
+		kWkggS: "x1s5x49g x8jqrm0",
+		$$css: true
+	},
+	indicatorHovered: {
+		kWkggS: "x173luhf x8jqrm0",
+		$$css: true
+	},
+	indicatorHoveredCurrent: {
+		kWkggS: "x1fctxn6 x8jqrm0",
+		$$css: true
+	},
+	indicatorPressed: {
+		kWkggS: "x1rydsgj x8jqrm0",
+		$$css: true
+	},
+	indicatorPressedCurrent: {
+		kWkggS: "xzpauq9 x8jqrm0",
+		$$css: true
+	},
+	indicatorRing: {
+		kjBf7l: "xrgy624",
+		kInvED: "x1hl8ikr",
+		k3XXqK: "xaatb59 x1t601oj",
+		kMeerF: "x1de99jn",
+		$$css: true
+	},
+	item: {
+		kZKoxP: "x5yr21d xiioxts",
+		kaIpWk: "x1dkaolv",
+		kCS8Yb: "x1r8uery x1a6ly76",
+		kXwgrk: "xdt5ytf xapwh9g",
+		kzQI83: "x1iyjqo2 x10cb59y",
+		kOIVth: "xzoy561",
+		kjj79g: "xl56j7k",
+		k7Eaqz: "xeuugli",
+		k8WAf4: "x1t0vds8 x1nouyz5",
+		kg3NbH: "xnjsko4 xze1m75",
+		$$css: true
+	},
+	itemCurrent: {
+		kWkggS: "xjbqb8w x1xec0pq",
+		kVAM5u: "x1n2ykn",
+		ksu8eU: "x1xldtvv x1wx4lrg",
+		kMzoRj: "x2h6xq1",
+		$$css: true
+	},
+	itemFocused: {
+		kWkggS: "xjbqb8w xdodzsd",
+		$$css: true
+	},
+	itemFocusedCurrent: {
+		kWkggS: "xjbqb8w xnmt8re",
+		$$css: true
+	},
+	itemHovered: {
+		kWkggS: "xjbqb8w xdenq60",
+		$$css: true
+	},
+	itemHoveredCurrent: {
+		kWkggS: "xjbqb8w xjq3nej",
+		$$css: true
+	},
+	itemPressed: {
+		kWkggS: "xjbqb8w x7fq6vu",
+		$$css: true
+	},
+	itemPressedCurrent: {
+		kWkggS: "xjbqb8w x9wewpu",
+		$$css: true
+	},
+	itemRing: {
+		kjBf7l: "xrgy624",
+		kInvED: "x1hl8ikr",
+		k3XXqK: "x1t137rt xxgb522",
+		kMeerF: "x1de99jn",
+		$$css: true
+	},
+	label: {
+		kMv6JI: "xp6n8n2",
+		kGuDYH: "xkucv67",
+		k63SB2: "x14hhc5u",
+		kb6lSQ: "x12utw95",
+		kLWn49: "xvzb9hk",
+		ks0D6T: "x193iq5w",
+		$$css: true
+	},
+	labelCurrent: {
+		kMwMTN: "xzakmg9 x16ybrrz",
+		$$css: true
+	}
+};
+const collapsedItemStyles = {
+	indicator: {
+		kGNEyG: "x6s0dn4",
+		kZKoxP: "x10w6t97",
+		kaIpWk: "x1dkaolv",
+		kB7OPa: "x9f619",
+		k1xSpc: "x78zum5",
+		kmuXW: "x2lah0s",
+		kzqmXN: "x15yg21f",
+		kjj79g: "xl56j7k",
+		$$css: true
+	},
+	indicatorCurrent: {
+		kWkggS: "x15dekr4",
+		kVAM5u: "x1n2ykn",
+		ksu8eU: "xx61lck",
+		kMzoRj: "x2h6xq1",
+		kMwMTN: "x1sawysd",
+		$$css: true
+	},
+	indicatorFocused: {
+		kWkggS: "x1syr9su",
+		$$css: true
+	},
+	indicatorFocusedCurrent: {
+		kWkggS: "x1s5x49g",
+		$$css: true
+	},
+	indicatorHovered: {
+		kWkggS: "x173luhf",
+		$$css: true
+	},
+	indicatorHoveredCurrent: {
+		kWkggS: "x1fctxn6",
+		$$css: true
+	},
+	indicatorPressed: {
+		kWkggS: "x1rydsgj",
+		$$css: true
+	},
+	indicatorPressedCurrent: {
+		kWkggS: "xzpauq9",
+		$$css: true
+	},
+	item: {
+		kXwgrk: "xdt5ytf",
+		kOIVth: "xzoy561",
+		kzqmXN: "xh8yej3",
+		kjj79g: "xl56j7k",
+		k8WAf4: "x1t0vds8",
+		kg3NbH: "ximhkdq",
+		$$css: true
+	},
+	itemCurrent: { $$css: true },
+	itemFocused: { $$css: true },
+	itemFocusedCurrent: { $$css: true },
+	itemHovered: { $$css: true },
+	itemHoveredCurrent: { $$css: true },
+	itemPressed: { $$css: true },
+	itemPressedCurrent: { $$css: true },
+	label: {
+		kMv6JI: "xp6n8n2",
+		kGuDYH: "xkucv67",
+		k63SB2: "x14hhc5u",
+		kb6lSQ: "x12utw95",
+		kLWn49: "xvzb9hk",
+		ks0D6T: "x193iq5w",
+		$$css: true
+	},
+	labelCurrent: {
+		kMwMTN: "xzakmg9",
+		$$css: true
+	}
+};
+const expandedItemStyles = {
+	indicator: {
+		kGNEyG: "x6s0dn4",
+		k1xSpc: "x78zum5",
+		kmuXW: "x2lah0s",
+		$$css: true
+	},
+	indicatorCurrent: {
+		kMwMTN: "x1sawysd",
+		$$css: true
+	},
+	indicatorFocused: { $$css: true },
+	indicatorFocusedCurrent: { $$css: true },
+	indicatorHovered: { $$css: true },
+	indicatorHoveredCurrent: { $$css: true },
+	indicatorPressed: { $$css: true },
+	indicatorPressedCurrent: { $$css: true },
+	item: {
+		kSGwAc: "xqcrz7y",
+		kZKoxP: "xnnlda6",
+		kaIpWk: "x1dkaolv",
+		kXwgrk: "x1q0g3np",
+		kOIVth: "x126z3so",
+		ks0D6T: "x193iq5w",
+		kg3NbH: "x790zyz",
+		$$css: true
+	},
+	itemCurrent: {
+		kWkggS: "x15dekr4",
+		kVAM5u: "x1n2ykn",
+		ksu8eU: "xx61lck",
+		kMzoRj: "x2h6xq1",
+		$$css: true
+	},
+	itemFocused: {
+		kWkggS: "x1syr9su",
+		$$css: true
+	},
+	itemFocusedCurrent: {
+		kWkggS: "x1s5x49g",
+		$$css: true
+	},
+	itemHovered: {
+		kWkggS: "x173luhf",
+		$$css: true
+	},
+	itemHoveredCurrent: {
+		kWkggS: "x1fctxn6",
+		$$css: true
+	},
+	itemPressed: {
+		kWkggS: "x1rydsgj",
+		$$css: true
+	},
+	itemPressedCurrent: {
+		kWkggS: "xzpauq9",
+		$$css: true
+	},
+	label: {
+		kMv6JI: "xkknnkr",
+		kGuDYH: "x14zspaw",
+		k63SB2: "x1v9cpvo",
+		kb6lSQ: "x155f00i",
+		kLWn49: "x1lz68p4",
+		$$css: true
+	},
+	labelCurrent: {
+		kMwMTN: "x1sawysd",
+		$$css: true
+	}
+};
+//#endregion
+export { barItemStyles, collapsedItemStyles, expandedItemStyles, navigationItemStyles };
+
+//# sourceMappingURL=styles.js.map

package/dist/navigation/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["stylex","colors","media","radii","spacing","stateLayerOpacity","typography","FORCED_COLORS","HOVERED_OVER_NOTHING","onSecondaryContainer","hover","FOCUSED_OVER_NOTHING","focus","PRESSED_OVER_NOTHING","pressed","HOVERED_OVER_CURRENT","secondaryContainer","FOCUSED_OVER_CURRENT","PRESSED_OVER_CURRENT","navigationItemStyles","icon","kGNEyG","k1xSpc","kGuDYH","kjj79g","$$css","itemDisabled","kMwMTN","kkrTdU","label","kVQacm","kg5iWk","khDVqt","link","kB7OPa","k3XXqK","kVAEAm","kMnn75","pill","kWkggS","kaIpWk","barItemStyles","indicator","kZKoxP","kmuXW","kzqmXN","indicatorCurrent","kVAM5u","ksu8eU","kMzoRj","indicatorFocused","indicatorFocusedCurrent","indicatorHovered","indicatorHoveredCurrent","indicatorPressed","indicatorPressedCurrent","indicatorRing","kjBf7l","kInvED","kMeerF","item","kCS8Yb","kXwgrk","kzQI83","kOIVth","k7Eaqz","k8WAf4","kg3NbH","itemCurrent","itemFocused","itemFocusedCurrent","itemHovered","itemHoveredCurrent","itemPressed","itemPressedCurrent","itemRing","kMv6JI","k63SB2","kb6lSQ","kLWn49","ks0D6T","labelCurrent","collapsedItemStyles","expandedItemStyles","kSGwAc"],"sources":["../../src/navigation/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, media, radii, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The destinations NavigationBar and NavigationRail both draw, in the three\n// forms the two pages give them. Apart from either component so the two\n// cannot drift, and outside `src/components` for the reason src/row gives.\n//\n// A vertical destination puts its icon in the page's 56dp by 32dp active\n// indicator with the label 4dp under it, in label medium: the navigation bar\n// below the medium breakpoint, and the collapsed rail. A horizontal one is a\n// pill holding the icon and the label side by side, 16dp in at either end:\n// the bar at and above the medium breakpoint at 40dp with 4dp between the\n// two, and the expanded rail at 56dp with 8dp between them, in label large.\n//\n// The current destination's pill is the secondary container, with its icon\n// in on secondary container and, under the pill, its label in secondary;\n// every other is on surface variant. A label set inside the pill, as a\n// horizontal destination sets it, takes on secondary container instead — the\n// library's own call. Secondary over secondary container is not a pair a\n// scheme is held to, and the Poster scheme's came to 4:1, short of the 4.5:1\n// text needs; on secondary container is the pair every scheme guarantees.\n//\n// The hover, focus and pressed layers are the on secondary container role\n// over whatever the pill is, at the pages' 8%, 10% and 10%, drawn on the\n// pill — the indicator in a vertical destination, the whole destination in a\n// horizontal one. They are applied in that order, so where two hold the\n// later wins, as the pages draw one layer at a time. A focused destination's\n// ring goes around the same pill; ./index.tsx says whose ring it is.\n//\n// Under forced colours the mode paints the secondary container over in its\n// background, which left the current destination looking like every other.\n// The pill takes a 2px border in `Highlight` there, which the mode keeps.\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n// The pill's ground and the layers over it, written out whole for each\n// ground, since StyleX replaces a property whole.\nconst HOVERED_OVER_NOTHING = `color-mix(in srgb, ${colors.onSecondaryContainer} calc(${stateLayerOpacity.hover} * 100%), transparent)`;\nconst FOCUSED_OVER_NOTHING = `color-mix(in srgb, ${colors.onSecondaryContainer} calc(${stateLayerOpacity.focus} * 100%), transparent)`;\nconst PRESSED_OVER_NOTHING = `color-mix(in srgb, ${colors.onSecondaryContainer} calc(${stateLayerOpacity.pressed} * 100%), transparent)`;\nconst HOVERED_OVER_CURRENT = `color-mix(in srgb, ${colors.onSecondaryContainer} calc(${stateLayerOpacity.hover} * 100%), ${colors.secondaryContainer})`;\nconst FOCUSED_OVER_CURRENT = `color-mix(in srgb, ${colors.onSecondaryContainer} calc(${stateLayerOpacity.focus} * 100%), ${colors.secondaryContainer})`;\nconst PRESSED_OVER_CURRENT = `color-mix(in srgb, ${colors.onSecondaryContainer} calc(${stateLayerOpacity.pressed} * 100%), ${colors.secondaryContainer})`;\n\n// What every destination draws whatever its form.\nconst navigationItemStyles = {\n  icon: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kGuDYH: \"x1pvqxga\",\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  itemDisabled: {\n    kMwMTN: \"x1gpw424\",\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  label: {\n    kMwMTN: \"x1w5n3ug\",\n    kVQacm: \"xb3r6kr\",\n    kg5iWk: \"xlyipyv\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  link: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    k3XXqK: \"x1t137rt\",\n    kVAEAm: \"x1n2onr6\",\n    kMnn75: \"xkrqix3\",\n    $$css: true\n  },\n  pill: {\n    kWkggS: \"xjbqb8w\",\n    kaIpWk: \"x1dkaolv\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  }\n};\n\n// The navigation bar's destination: vertical below the medium breakpoint and\n// horizontal at it and above, so every value that differs is a pair.\nconst barItemStyles = {\n  indicator: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x10w6t97 x10qpgbh\",\n    kaIpWk: \"x1dkaolv\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x15yg21f x11lewyt\",\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  indicatorCurrent: {\n    kWkggS: \"x15dekr4 x8jqrm0\",\n    kVAM5u: \"x1n2ykn\",\n    ksu8eU: \"xx61lck xnqlxux\",\n    kMzoRj: \"x2h6xq1\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  indicatorFocused: {\n    kWkggS: \"x1syr9su x8jqrm0\",\n    $$css: true\n  },\n  indicatorFocusedCurrent: {\n    kWkggS: \"x1s5x49g x8jqrm0\",\n    $$css: true\n  },\n  indicatorHovered: {\n    kWkggS: \"x173luhf x8jqrm0\",\n    $$css: true\n  },\n  indicatorHoveredCurrent: {\n    kWkggS: \"x1fctxn6 x8jqrm0\",\n    $$css: true\n  },\n  indicatorPressed: {\n    kWkggS: \"x1rydsgj x8jqrm0\",\n    $$css: true\n  },\n  indicatorPressedCurrent: {\n    kWkggS: \"xzpauq9 x8jqrm0\",\n    $$css: true\n  },\n  indicatorRing: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"xaatb59 x1t601oj\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  item: {\n    kZKoxP: \"x5yr21d xiioxts\",\n    kaIpWk: \"x1dkaolv\",\n    kCS8Yb: \"x1r8uery x1a6ly76\",\n    kXwgrk: \"xdt5ytf xapwh9g\",\n    kzQI83: \"x1iyjqo2 x10cb59y\",\n    kOIVth: \"xzoy561\",\n    kjj79g: \"xl56j7k\",\n    k7Eaqz: \"xeuugli\",\n    k8WAf4: \"x1t0vds8 x1nouyz5\",\n    kg3NbH: \"xnjsko4 xze1m75\",\n    $$css: true\n  },\n  itemCurrent: {\n    kWkggS: \"xjbqb8w x1xec0pq\",\n    kVAM5u: \"x1n2ykn\",\n    ksu8eU: \"x1xldtvv x1wx4lrg\",\n    kMzoRj: \"x2h6xq1\",\n    $$css: true\n  },\n  itemFocused: {\n    kWkggS: \"xjbqb8w xdodzsd\",\n    $$css: true\n  },\n  itemFocusedCurrent: {\n    kWkggS: \"xjbqb8w xnmt8re\",\n    $$css: true\n  },\n  itemHovered: {\n    kWkggS: \"xjbqb8w xdenq60\",\n    $$css: true\n  },\n  itemHoveredCurrent: {\n    kWkggS: \"xjbqb8w xjq3nej\",\n    $$css: true\n  },\n  itemPressed: {\n    kWkggS: \"xjbqb8w x7fq6vu\",\n    $$css: true\n  },\n  itemPressedCurrent: {\n    kWkggS: \"xjbqb8w x9wewpu\",\n    $$css: true\n  },\n  itemRing: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x1t137rt xxgb522\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  label: {\n    kMv6JI: \"xp6n8n2\",\n    kGuDYH: \"xkucv67\",\n    k63SB2: \"x14hhc5u\",\n    kb6lSQ: \"x12utw95\",\n    kLWn49: \"xvzb9hk\",\n    ks0D6T: \"x193iq5w\",\n    $$css: true\n  },\n  labelCurrent: {\n    kMwMTN: \"xzakmg9 x16ybrrz\",\n    $$css: true\n  }\n};\n\n// The collapsed rail's destination: always vertical, the pitch from one to\n// the next the rail's 4dp gap.\nconst collapsedItemStyles = {\n  indicator: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x10w6t97\",\n    kaIpWk: \"x1dkaolv\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x15yg21f\",\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  indicatorCurrent: {\n    kWkggS: \"x15dekr4\",\n    kVAM5u: \"x1n2ykn\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"x2h6xq1\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  indicatorFocused: {\n    kWkggS: \"x1syr9su\",\n    $$css: true\n  },\n  indicatorFocusedCurrent: {\n    kWkggS: \"x1s5x49g\",\n    $$css: true\n  },\n  indicatorHovered: {\n    kWkggS: \"x173luhf\",\n    $$css: true\n  },\n  indicatorHoveredCurrent: {\n    kWkggS: \"x1fctxn6\",\n    $$css: true\n  },\n  indicatorPressed: {\n    kWkggS: \"x1rydsgj\",\n    $$css: true\n  },\n  indicatorPressedCurrent: {\n    kWkggS: \"xzpauq9\",\n    $$css: true\n  },\n  item: {\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"xzoy561\",\n    kzqmXN: \"xh8yej3\",\n    kjj79g: \"xl56j7k\",\n    k8WAf4: \"x1t0vds8\",\n    kg3NbH: \"ximhkdq\",\n    $$css: true\n  },\n  itemCurrent: {\n    $$css: true\n  },\n  itemFocused: {\n    $$css: true\n  },\n  itemFocusedCurrent: {\n    $$css: true\n  },\n  itemHovered: {\n    $$css: true\n  },\n  itemHoveredCurrent: {\n    $$css: true\n  },\n  itemPressed: {\n    $$css: true\n  },\n  itemPressedCurrent: {\n    $$css: true\n  },\n  label: {\n    kMv6JI: \"xp6n8n2\",\n    kGuDYH: \"xkucv67\",\n    k63SB2: \"x14hhc5u\",\n    kb6lSQ: \"x12utw95\",\n    kLWn49: \"xvzb9hk\",\n    ks0D6T: \"x193iq5w\",\n    $$css: true\n  },\n  labelCurrent: {\n    kMwMTN: \"xzakmg9\",\n    $$css: true\n  }\n};\n\n// The expanded rail's destination: always horizontal, a 56dp pill as wide as\n// what it holds.\nconst expandedItemStyles = {\n  indicator: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    $$css: true\n  },\n  indicatorCurrent: {\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  indicatorFocused: {\n    $$css: true\n  },\n  indicatorFocusedCurrent: {\n    $$css: true\n  },\n  indicatorHovered: {\n    $$css: true\n  },\n  indicatorHoveredCurrent: {\n    $$css: true\n  },\n  indicatorPressed: {\n    $$css: true\n  },\n  indicatorPressedCurrent: {\n    $$css: true\n  },\n  item: {\n    kSGwAc: \"xqcrz7y\",\n    kZKoxP: \"xnnlda6\",\n    kaIpWk: \"x1dkaolv\",\n    kXwgrk: \"x1q0g3np\",\n    kOIVth: \"x126z3so\",\n    ks0D6T: \"x193iq5w\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  itemCurrent: {\n    kWkggS: \"x15dekr4\",\n    kVAM5u: \"x1n2ykn\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"x2h6xq1\",\n    $$css: true\n  },\n  itemFocused: {\n    kWkggS: \"x1syr9su\",\n    $$css: true\n  },\n  itemFocusedCurrent: {\n    kWkggS: \"x1s5x49g\",\n    $$css: true\n  },\n  itemHovered: {\n    kWkggS: \"x173luhf\",\n    $$css: true\n  },\n  itemHoveredCurrent: {\n    kWkggS: \"x1fctxn6\",\n    $$css: true\n  },\n  itemPressed: {\n    kWkggS: \"x1rydsgj\",\n    $$css: true\n  },\n  itemPressedCurrent: {\n    kWkggS: \"xzpauq9\",\n    $$css: true\n  },\n  label: {\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    $$css: true\n  },\n  labelCurrent: {\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  }\n};\nexport { barItemStyles, collapsedItemStyles, expandedItemStyles, navigationItemStyles };"],"mappings":"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"}

package/dist/react-aria.d.ts

@@ -1,3 +1,3 @@
 import { useDragAndDrop as useDragAndDrop$1 } from "./drag/hooks.js";
-import { Collection, DIRECTORY_DRAG_TYPE, Focusable, GridLayout, I18nProvider, Key, ListLayout, PressEvent, Pressable, RouterProvider, Selection, SharedElement, SharedElementTransition, SortDescriptor, TableLayout, TokenFieldValue as TokenFieldValue$1, Virtualizer, VisuallyHidden as VisuallyHidden$1, WaterfallLayout, getColorChannels, isDirectoryDropItem, isFileDropItem, isTextDropItem, parseColor, useAsyncList, useDrag, useDrop, useFilter as useFilter$1, useListData, useLocale, useTreeData } from "react-aria-components";
-export { Collection, DIRECTORY_DRAG_TYPE, Focusable, GridLayout, I18nProvider, type Key, ListLayout, type PressEvent, Pressable, RouterProvider, type Selection, SharedElement, SharedElementTransition, type SortDescriptor, TableLayout, TokenFieldValue$1 as TokenFieldValue, Virtualizer, VisuallyHidden$1 as VisuallyHidden, WaterfallLayout, getColorChannels, isDirectoryDropItem, isFileDropItem, isTextDropItem, parseColor, useAsyncList, useDrag, useDragAndDrop$1 as useDragAndDrop, useDrop, useFilter$1 as useFilter, useListData, useLocale, useTreeData };
+import { Collection, DIRECTORY_DRAG_TYPE, Focusable, GridLayout, I18nProvider, Key as Key$1, ListLayout, PressEvent, Pressable, RouterProvider, Selection, SharedElement, SharedElementTransition, SortDescriptor, TableLayout, TokenFieldValue as TokenFieldValue$1, Virtualizer, VisuallyHidden as VisuallyHidden$1, WaterfallLayout, getColorChannels, isDirectoryDropItem, isFileDropItem, isTextDropItem, parseColor as parseColor$1, useAsyncList, useDrag, useDrop, useFilter as useFilter$1, useListData, useLocale as useLocale$1, useTreeData } from "react-aria-components";
+export { Collection, DIRECTORY_DRAG_TYPE, Focusable, GridLayout, I18nProvider, type Key$1 as Key, ListLayout, type PressEvent, Pressable, RouterProvider, type Selection, SharedElement, SharedElementTransition, type SortDescriptor, TableLayout, TokenFieldValue$1 as TokenFieldValue, Virtualizer, VisuallyHidden$1 as VisuallyHidden, WaterfallLayout, getColorChannels, isDirectoryDropItem, isFileDropItem, isTextDropItem, parseColor$1 as parseColor, useAsyncList, useDrag, useDragAndDrop$1 as useDragAndDrop, useDrop, useFilter$1 as useFilter, useListData, useLocale$1 as useLocale, useTreeData };

package/dist/react-aria.js

@@ -1,4 +1,4 @@
 "use client";
 import { useDragAndDrop as useDragAndDrop$1 } from "./drag/hooks.js";
-import { Collection, DIRECTORY_DRAG_TYPE, Focusable, GridLayout, I18nProvider, ListLayout, Pressable, RouterProvider, SharedElement, SharedElementTransition, TableLayout, TokenFieldValue as TokenFieldValue$1, Virtualizer, VisuallyHidden as VisuallyHidden$1, WaterfallLayout, getColorChannels, isDirectoryDropItem, isFileDropItem, isTextDropItem, parseColor, useAsyncList, useDrag, useDrop, useFilter as useFilter$1, useListData, useLocale, useTreeData } from "react-aria-components";
-export { Collection, DIRECTORY_DRAG_TYPE, Focusable, GridLayout, I18nProvider, ListLayout, Pressable, RouterProvider, SharedElement, SharedElementTransition, TableLayout, TokenFieldValue$1 as TokenFieldValue, Virtualizer, VisuallyHidden$1 as VisuallyHidden, WaterfallLayout, getColorChannels, isDirectoryDropItem, isFileDropItem, isTextDropItem, parseColor, useAsyncList, useDrag, useDragAndDrop$1 as useDragAndDrop, useDrop, useFilter$1 as useFilter, useListData, useLocale, useTreeData };
+import { Collection, DIRECTORY_DRAG_TYPE, Focusable, GridLayout, I18nProvider, ListLayout, Pressable, RouterProvider, SharedElement, SharedElementTransition, TableLayout, TokenFieldValue as TokenFieldValue$1, Virtualizer, VisuallyHidden as VisuallyHidden$1, WaterfallLayout, getColorChannels, isDirectoryDropItem, isFileDropItem, isTextDropItem, parseColor as parseColor$1, useAsyncList, useDrag, useDrop, useFilter as useFilter$1, useListData, useLocale as useLocale$1, useTreeData } from "react-aria-components";
+export { Collection, DIRECTORY_DRAG_TYPE, Focusable, GridLayout, I18nProvider, ListLayout, Pressable, RouterProvider, SharedElement, SharedElementTransition, TableLayout, TokenFieldValue$1 as TokenFieldValue, Virtualizer, VisuallyHidden$1 as VisuallyHidden, WaterfallLayout, getColorChannels, isDirectoryDropItem, isFileDropItem, isTextDropItem, parseColor$1 as parseColor, useAsyncList, useDrag, useDragAndDrop$1 as useDragAndDrop, useDrop, useFilter$1 as useFilter, useListData, useLocale$1 as useLocale, useTreeData };

package/dist/render/useRender.js

@@ -2,7 +2,6 @@ import { c } from "react/compiler-runtime";
 import { cloneElement, createElement, isValidElement } from "react";
 //#region src/render/useRender.tsx
 function attach(ref, node) {
-	if (ref === null) return () => {};
 	if (typeof ref === "function") {
 		const cleanup = ref(node);
 		return typeof cleanup === "function" ? cleanup : () => {