@common-origin/design-system 3.0.0 → 3.1.0

package/dist/data.js

@@ -787,7 +787,7 @@ var component = {
 			}
 		},
 		title: {
-			typography: "500 1.125rem/1.5rem 'Inter', sans-serif",
+			typography: "600 1.125rem/1.5rem 'Inter', sans-serif",
 			fontWeight: "600",
 			lineHeight: "1.25rem"
 		},
@@ -831,6 +831,14 @@ var component = {
 		fontSize: "0.75rem",
 		lineHeight: "1.25rem"
 	},
+	sidebarNav: {
+		width: {
+			rail: "3.5rem",
+			narrow: "14rem",
+			"default": "16rem",
+			wide: "18.75rem"
+		}
+	},
 	slider: {
 		thumb: {
 			shadow: {
@@ -989,12 +997,15 @@ var semantic = {
 		"600": "1.5rem",
 		"800": "2rem",
 		"1200": "3rem",
+		"1400": "3.5rem",
 		"1500": "3.75rem",
 		"1800": "4.5rem",
 		"2000": "5rem",
 		"3000": "7.5rem",
 		"4500": "11.25rem",
 		"5000": "12.5rem",
+		"5600": "14rem",
+		"6400": "16rem",
 		"7500": "18.75rem",
 		"9000": "22.5rem",
 		"10000": "25rem",
@@ -1006,6 +1017,11 @@ var semantic = {
 			md: "2.5rem",
 			lg: "3rem"
 		},
+		row: {
+			sm: "2rem",
+			md: "3rem",
+			lg: "4.5rem"
+		},
 		overlay: {
 			sm: "25rem",
 			md: "35rem",
@@ -1162,12 +1178,12 @@ var semantic = {
 	},
 	typography: {
 		display: "700 5rem/4.5rem 'Inter', sans-serif",
-		h1: "700 3rem/3rem 'Inter', sans-serif",
-		h2: "700 2rem/2.5rem 'Inter', sans-serif",
-		h3: "700 1.75rem/2.25rem 'Inter', sans-serif",
-		h4: "700 1.5rem/2rem 'Inter', sans-serif",
-		h5: "500 1.25rem/1.75rem 'Inter', sans-serif",
-		h6: "500 1.125rem/1.5rem 'Inter', sans-serif",
+		h1: "600 3rem/3rem 'Inter', sans-serif",
+		h2: "600 2rem/2.5rem 'Inter', sans-serif",
+		h3: "600 1.75rem/2.25rem 'Inter', sans-serif",
+		h4: "600 1.5rem/2rem 'Inter', sans-serif",
+		h5: "600 1.25rem/1.75rem 'Inter', sans-serif",
+		h6: "600 1.125rem/1.5rem 'Inter', sans-serif",
 		subtitle: "500 1rem/1.5rem 'Inter', sans-serif",
 		body: "400 1rem/1.5rem 'Inter', sans-serif",
 		small: "400 0.875rem/1.25rem 'Inter', sans-serif",
@@ -1182,6 +1198,9 @@ var semantic = {
 			instant: "0ms",
 			moderate: "200ms"
 		},
+		delay: {
+			hint: "500ms"
+		},
 		easing: {
 			standard: "ease-in-out",
 			decelerate: "ease-out",
@@ -1612,7 +1631,6 @@ var menu = {
 	aliases: [
 		"hamburger",
 		"nav",
-		"sidebar",
 		"navigation"
 	],
 	intent: "Use to open a navigation menu or sidebar",
@@ -2147,6 +2165,36 @@ var statusCancelled = {
 	decorativeDefault: false,
 	ariaLabelDefault: "Cancelled"
 };
+var home = {
+	path: "M12 2.7L21 10.3V21H3V10.3Z M12 5.32L5 11.23V19H19V11.23Z M9 13H15V19H13V15H11V19H9Z",
+	name: "home",
+	description: "House outline with a door",
+	category: "navigation",
+	aliases: [
+		"house",
+		"dashboard",
+		"main",
+		"homepage"
+	],
+	intent: "Use for a link to the product's home or start page",
+	decorativeDefault: false,
+	ariaLabelDefault: "Home"
+};
+var sidebar = {
+	path: "M14 2C17.7712 2 19.6566 2.0003 20.8281 3.17188C21.9997 4.34345 22 6.22876 22 10V14C22 17.7712 21.9997 19.6566 20.8281 20.8281C19.803 21.8533 18.2315 21.982 15.3281 21.998L14 22H10L8.67188 21.998C5.8719 21.9826 4.31033 21.8625 3.2832 20.9346L3.17188 20.8281C2.14675 19.803 2.01797 18.2315 2.00195 15.3281L2 14V10C2 6.34627 2 4.46248 3.06543 3.2832L3.17188 3.17188C4.34345 2.0003 6.22876 2 10 2H14Z M10 4C8.05784 4 6.80197 4.00454 5.87695 4.12891C5.00986 4.24554 4.73816 4.43372 4.58594 4.58594C4.43372 4.73816 4.24554 5.00986 4.12891 5.87695C4.00454 6.80197 4 8.05784 4 10V14C4 15.9422 4.00454 17.198 4.12891 18.123C4.24554 18.9901 4.43372 19.2618 4.58594 19.4141C4.73816 19.5663 5.00986 19.7545 5.87695 19.8711C6.80197 19.9955 8.05784 20 10 20H14C15.9422 20 17.198 19.9955 18.123 19.8711C18.9901 19.7545 19.2618 19.5663 19.4141 19.4141C19.5663 19.2618 19.7545 18.9901 19.8711 18.123C19.9955 17.198 20 15.9422 20 14V10C20 8.05784 19.9955 6.80197 19.8711 5.87695C19.7545 5.00986 19.5663 4.73816 19.4141 4.58594C19.2618 4.43372 18.9901 4.24554 18.123 4.12891C17.198 4.00454 15.9422 4 14 4Z M8 4H10V20H8Z",
+	name: "sidebar",
+	description: "Rounded square with a narrow column on the left",
+	category: "navigation",
+	aliases: [
+		"panel",
+		"side-panel",
+		"drawer",
+		"rail"
+	],
+	intent: "Use for a button that collapses or expands a sidebar",
+	decorativeDefault: false,
+	ariaLabelDefault: "Toggle sidebar"
+};
 var iconsJson = {
 	ai: ai,
 	add: add,
@@ -2222,7 +2270,9 @@ var iconsJson = {
 	statusPending: statusPending,
 	statusScheduled: statusScheduled,
 	statusNotStarted: statusNotStarted,
-	statusCancelled: statusCancelled
+	statusCancelled: statusCancelled,
+	home: home,
+	sidebar: sidebar
 };
 
 // The published types come from the generated `src/styles/tokens.ts`, which carries each token's

package/dist/data.js.map

@@ -1 +1 @@
-{"version":3,"file":"data.js","sources":["../src/types/tokens.ts","../src/types/icons.ts"],"sourcesContent":["import tokensJson from '../styles/tokens.json'\nimport type { Tokens } from '../styles/tokens'\n\n// The published types come from the generated `src/styles/tokens.ts`, which carries each token's\n// description as JSDoc and `@deprecated` on deprecated tokens (decision 0033, #199). Declaring the\n// constant with that type also keeps emitted .d.ts files free of JSON imports, which consumers can\n// only resolve with `resolveJsonModule`.\nexport const tokens: Tokens = tokensJson\n\nexport type { Tokens }\nexport type TokensBase = Tokens['base']\nexport type TokensSemantic = Tokens['semantic']\nexport type TokensComponent = Tokens['component']\n","// Icon type definitions for external consumption\n// This is a self-contained type that doesn't depend on JSON imports\n// to ensure it works correctly in consuming projects\n\nimport iconsJson from '../styles/icons.json'\n\nexport type IconName =\n  | 'add'\n  | 'ai'\n  | 'addRing'\n  | 'arrowDown'\n  | 'arrowLeft'\n  | 'arrowRight'\n  | 'arrowUp'\n  | 'back'\n  | 'bell'\n  | 'cancel'\n  | 'caret'\n  | 'caretDown'\n  | 'caretUp'\n  | 'check'\n  | 'checkRing'\n  | 'close'\n  | 'copy'\n  | 'creditCard'\n  | 'crossCircle'\n  | 'directionRight'\n  | 'directionUp'\n  | 'edit'\n  | 'export'\n  | 'fileDocSearch'\n  | 'filter'\n  | 'info'\n  | 'kebab'\n  | 'lamp'\n  | 'lineOut'\n  | 'link'\n  | 'meatballs'\n  | 'menu'\n  | 'message'\n  | 'move'\n  | 'mic'\n  | 'order'\n  | 'paper'\n  | 'pause'\n  | 'play'\n  | 'playBack'\n  | 'refresh'\n  | 'remove'\n  | 'search'\n  | 'star'\n  | 'starFilled'\n  | 'statusCancelled'\n  | 'statusError'\n  | 'statusInProgress'\n  | 'statusInfo'\n  | 'statusNotStarted'\n  | 'statusPending'\n  | 'statusScheduled'\n  | 'statusSerious'\n  | 'statusSuccess'\n  | 'statusWarning'\n  | 'stop'\n  | 'table'\n  | 'trash'\n  | 'userBox'\n  | 'view'\n  | 'viewHide'\n  | 'wallet'\n\n/** Semantic category for grouping icons by purpose */\nexport type IconCategory =\n  | 'action'\n  | 'communication'\n  | 'content'\n  | 'feedback'\n  | 'media'\n  | 'navigation'\n  | 'object'\n  | 'status'\n  | 'user'\n\n/** Enriched metadata for each icon entry in icons.json */\nexport interface IconMetadata {\n  /** SVG path data */\n  path: string\n  /** Display name of the icon */\n  name: string\n  /** What the icon visually depicts */\n  description: string\n  /** Semantic category for grouping */\n  category: IconCategory\n  /** Alternative names and search terms */\n  aliases: string[]\n  /** When and why to use this icon */\n  intent: string\n  /** Whether the icon is typically decorative (true) or informative (false) */\n  decorativeDefault: boolean\n  /** Suggested accessible label when the icon conveys meaning */\n  ariaLabelDefault: string\n}\n\n/** The full icon registry keyed by IconName */\nexport type IconRegistry = Record<IconName, IconMetadata>\n\n// Typed as IconRegistry so emitted .d.ts files don't import JSON (needs `resolveJsonModule` in consumers).\nexport const iconsData = iconsJson as IconRegistry\n"],"names":["tokens","tokensJson","iconsData","iconsJson"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA;AACA;AACA;AACA;AACO,IAAMA,MAAM,GAAWC;;ACP9B;AACA;AACA;AAuGA;AACO,IAAMC,SAAS,GAAGC;;;;;;;"}
+{"version":3,"file":"data.js","sources":["../src/types/tokens.ts","../src/types/icons.ts"],"sourcesContent":["import tokensJson from '../styles/tokens.json'\nimport type { Tokens } from '../styles/tokens'\n\n// The published types come from the generated `src/styles/tokens.ts`, which carries each token's\n// description as JSDoc and `@deprecated` on deprecated tokens (decision 0033, #199). Declaring the\n// constant with that type also keeps emitted .d.ts files free of JSON imports, which consumers can\n// only resolve with `resolveJsonModule`.\nexport const tokens: Tokens = tokensJson\n\nexport type { Tokens }\nexport type TokensBase = Tokens['base']\nexport type TokensSemantic = Tokens['semantic']\nexport type TokensComponent = Tokens['component']\n","// Icon type definitions for external consumption\n// This is a self-contained type that doesn't depend on JSON imports\n// to ensure it works correctly in consuming projects\n\nimport iconsJson from '../styles/icons.json'\n\nexport type IconName =\n  | 'add'\n  | 'ai'\n  | 'addRing'\n  | 'arrowDown'\n  | 'arrowLeft'\n  | 'arrowRight'\n  | 'arrowUp'\n  | 'back'\n  | 'bell'\n  | 'cancel'\n  | 'caret'\n  | 'caretDown'\n  | 'caretUp'\n  | 'check'\n  | 'checkRing'\n  | 'close'\n  | 'copy'\n  | 'creditCard'\n  | 'crossCircle'\n  | 'directionRight'\n  | 'directionUp'\n  | 'edit'\n  | 'export'\n  | 'fileDocSearch'\n  | 'filter'\n  | 'home'\n  | 'info'\n  | 'kebab'\n  | 'lamp'\n  | 'lineOut'\n  | 'link'\n  | 'meatballs'\n  | 'menu'\n  | 'message'\n  | 'move'\n  | 'mic'\n  | 'order'\n  | 'paper'\n  | 'pause'\n  | 'play'\n  | 'playBack'\n  | 'refresh'\n  | 'remove'\n  | 'search'\n  | 'sidebar'\n  | 'star'\n  | 'starFilled'\n  | 'statusCancelled'\n  | 'statusError'\n  | 'statusInProgress'\n  | 'statusInfo'\n  | 'statusNotStarted'\n  | 'statusPending'\n  | 'statusScheduled'\n  | 'statusSerious'\n  | 'statusSuccess'\n  | 'statusWarning'\n  | 'stop'\n  | 'table'\n  | 'trash'\n  | 'userBox'\n  | 'view'\n  | 'viewHide'\n  | 'wallet'\n\n/** Semantic category for grouping icons by purpose */\nexport type IconCategory =\n  | 'action'\n  | 'communication'\n  | 'content'\n  | 'feedback'\n  | 'media'\n  | 'navigation'\n  | 'object'\n  | 'status'\n  | 'user'\n\n/** Enriched metadata for each icon entry in icons.json */\nexport interface IconMetadata {\n  /** SVG path data */\n  path: string\n  /** Display name of the icon */\n  name: string\n  /** What the icon visually depicts */\n  description: string\n  /** Semantic category for grouping */\n  category: IconCategory\n  /** Alternative names and search terms */\n  aliases: string[]\n  /** When and why to use this icon */\n  intent: string\n  /** Whether the icon is typically decorative (true) or informative (false) */\n  decorativeDefault: boolean\n  /** Suggested accessible label when the icon conveys meaning */\n  ariaLabelDefault: string\n}\n\n/** The full icon registry keyed by IconName */\nexport type IconRegistry = Record<IconName, IconMetadata>\n\n// Typed as IconRegistry so emitted .d.ts files don't import JSON (needs `resolveJsonModule` in consumers).\nexport const iconsData = iconsJson as IconRegistry\n"],"names":["tokens","tokensJson","iconsData","iconsJson"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA;AACA;AACA;AACA;AACO,IAAMA,MAAM,GAAWC;;ACP9B;AACA;AACA;AAyGA;AACO,IAAMC,SAAS,GAAGC;;;;;;;"}

package/dist/index.js

@@ -43,6 +43,12 @@ exports.InlineAlert = client.InlineAlert;
 exports.InputChip = client.InputChip;
 exports.List = client.List;
 exports.ListItem = client.ListItem;
+exports.Menu = client.Menu;
+exports.MenuDivider = client.MenuDivider;
+exports.MenuGroup = client.MenuGroup;
+exports.MenuItem = client.MenuItem;
+exports.MenuItemCheckbox = client.MenuItemCheckbox;
+exports.MenuItemRadio = client.MenuItemRadio;
 exports.Modal = client.Modal;
 exports.MoneyDisplay = client.MoneyDisplay;
 exports.NumberInput = client.NumberInput;
@@ -52,6 +58,9 @@ exports.ProgressBar = client.ProgressBar;
 exports.ResponsiveGrid = client.ResponsiveGrid;
 exports.SearchField = client.SearchField;
 exports.Sheet = client.Sheet;
+exports.SidebarNav = client.SidebarNav;
+exports.SidebarNavItem = client.SidebarNavItem;
+exports.SidebarNavSection = client.SidebarNavSection;
 exports.Slider = client.Slider;
 exports.Stack = client.Stack;
 exports.StatusLabel = client.StatusLabel;
@@ -61,8 +70,10 @@ exports.SuggestionChip = client.SuggestionChip;
 exports.TabBar = client.TabBar;
 exports.Tag = client.Tag;
 exports.TextField = client.TextField;
+exports.Tooltip = client.Tooltip;
 exports.TransactionListItem = client.TransactionListItem;
 exports.Typography = client.Typography;
+exports.WorkspaceSwitcher = client.WorkspaceSwitcher;
 exports.iconsData = data.iconsData;
 exports.tokens = data.tokens;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.mjs

@@ -18,6 +18,7 @@ export { Divider } from './components/atoms/Divider/Divider.mjs';
 export { Stack } from './components/atoms/Stack/Stack.mjs';
 export { StatusLabel } from './components/atoms/StatusLabel/StatusLabel.mjs';
 export { Tag } from './components/atoms/Tag/Tag.mjs';
+export { Tooltip } from './components/atoms/Tooltip/Tooltip.mjs';
 export { Typography } from './components/atoms/Typography/Typography.mjs';
 export { AILabel } from './components/atoms/AILabel/AILabel.mjs';
 export { AccountCard } from './components/molecules/AccountCard/AccountCard.mjs';
@@ -37,6 +38,9 @@ export { FeatureBlock } from './components/molecules/FeatureBlock/FeatureBlock.m
 export { Dropdown } from './components/molecules/Dropdown/Dropdown.mjs';
 export { List } from './components/molecules/List/List.mjs';
 export { ListItem } from './components/molecules/List/ListItem.mjs';
+export { Menu, MenuDivider, MenuGroup, MenuItem, MenuItemCheckbox, MenuItemRadio } from './components/molecules/Menu/Menu.mjs';
+export { SidebarNavItem } from './components/molecules/SidebarNavItem/SidebarNavItem.mjs';
+export { SidebarNavSection } from './components/molecules/SidebarNavSection/SidebarNavSection.mjs';
 export { Modal } from './components/molecules/Modal/Modal.mjs';
 export { NumberInput } from './components/molecules/NumberInput/NumberInput.mjs';
 export { PasswordField } from './components/molecules/PasswordField/PasswordField.mjs';
@@ -47,6 +51,8 @@ export { TabBar } from './components/molecules/TabBar/TabBar.mjs';
 export { TextField } from './components/molecules/TextField/TextField.mjs';
 export { StyledInputBase, StyledTextAreaBase } from './components/molecules/TextField/InputBase.mjs';
 export { TransactionListItem } from './components/molecules/TransactionListItem/TransactionListItem.mjs';
+export { WorkspaceSwitcher } from './components/molecules/WorkspaceSwitcher/WorkspaceSwitcher.mjs';
+export { SidebarNav } from './components/organisms/SidebarNav/SidebarNav.mjs';
 export { Grid, GridCol, ResponsiveGrid } from './components/layout/GridSystem/GridSystem.mjs';
 export { tokens } from './types/tokens.mjs';
 export { iconsData } from './types/icons.mjs';

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/floatingPosition.d.mts

@@ -0,0 +1,43 @@
+export type FloatingSide = 'top' | 'right' | 'bottom' | 'left';
+export type FloatingAlign = 'start' | 'center' | 'end';
+export interface FloatingRect {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+export interface FloatingOptions {
+    /** The anchor's box, from getBoundingClientRect */
+    anchor: FloatingRect;
+    /** The floating element's size */
+    floating: {
+        width: number;
+        height: number;
+    };
+    /** The side to place it on; it flips to the opposite side when that has more room */
+    side: FloatingSide;
+    /** Where it lines up along the anchor's edge */
+    align: FloatingAlign;
+    /** The gap between the anchor and the floating element, in px */
+    offset: number;
+    /** The viewport's size */
+    viewport: {
+        width: number;
+        height: number;
+    };
+    /** The smallest distance kept from the viewport's edges, in px */
+    margin: number;
+}
+export interface FloatingPosition {
+    top: number;
+    left: number;
+    /** The side it ended up on, after any flip */
+    side: FloatingSide;
+}
+export declare function placeFloating(options: FloatingOptions): FloatingPosition;
+/**
+ * The element that actually has a box inside a wrapper: Tooltip and Menu wrap their trigger in a
+ * `display: contents` span, and a trigger can be nested in more than one (a Tooltip inside a Menu's
+ * trigger), so this steps down until it finds an element that lays out.
+ */
+export declare function laidOutElement(wrapper: Element | null): Element | null;

package/dist/lib/floatingPosition.d.ts

@@ -0,0 +1,43 @@
+export type FloatingSide = 'top' | 'right' | 'bottom' | 'left';
+export type FloatingAlign = 'start' | 'center' | 'end';
+export interface FloatingRect {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+export interface FloatingOptions {
+    /** The anchor's box, from getBoundingClientRect */
+    anchor: FloatingRect;
+    /** The floating element's size */
+    floating: {
+        width: number;
+        height: number;
+    };
+    /** The side to place it on; it flips to the opposite side when that has more room */
+    side: FloatingSide;
+    /** Where it lines up along the anchor's edge */
+    align: FloatingAlign;
+    /** The gap between the anchor and the floating element, in px */
+    offset: number;
+    /** The viewport's size */
+    viewport: {
+        width: number;
+        height: number;
+    };
+    /** The smallest distance kept from the viewport's edges, in px */
+    margin: number;
+}
+export interface FloatingPosition {
+    top: number;
+    left: number;
+    /** The side it ended up on, after any flip */
+    side: FloatingSide;
+}
+export declare function placeFloating(options: FloatingOptions): FloatingPosition;
+/**
+ * The element that actually has a box inside a wrapper: Tooltip and Menu wrap their trigger in a
+ * `display: contents` span, and a trigger can be nested in more than one (a Tooltip inside a Menu's
+ * trigger), so this steps down until it finds an element that lays out.
+ */
+export declare function laidOutElement(wrapper: Element | null): Element | null;

package/dist/lib/floatingPosition.mjs

@@ -0,0 +1,86 @@
+'use client';
+// Places a floating element (Tooltip, Menu) next to its anchor, without a positioning library
+// (P8). Pure geometry, so it can be tested without a browser: the caller measures both elements
+// and applies the result as `top` and `left` on a `position: fixed` element.
+var opposite = {
+  top: 'bottom',
+  bottom: 'top',
+  left: 'right',
+  right: 'left'
+};
+// The room between the anchor and the viewport edge on each side
+var room = function room(side, _a) {
+  var anchor = _a.anchor,
+    viewport = _a.viewport,
+    margin = _a.margin;
+  switch (side) {
+    case 'top':
+      return anchor.top - margin;
+    case 'bottom':
+      return viewport.height - (anchor.top + anchor.height) - margin;
+    case 'left':
+      return anchor.left - margin;
+    case 'right':
+      return viewport.width - (anchor.left + anchor.width) - margin;
+  }
+};
+var clamp = function clamp(value, min, max) {
+  return Math.max(min, Math.min(value, max));
+};
+function placeFloating(options) {
+  var anchor = options.anchor,
+    floating = options.floating,
+    align = options.align,
+    offset = options.offset,
+    viewport = options.viewport,
+    margin = options.margin;
+  var vertical = function vertical(s) {
+    return s === 'top' || s === 'bottom';
+  };
+  // Flip when the preferred side is too small and the opposite side has more room
+  var side = options.side;
+  var needed = (vertical(side) ? floating.height : floating.width) + offset;
+  if (room(side, options) < needed && room(opposite[side], options) > room(side, options)) {
+    side = opposite[side];
+  }
+  // Main axis: beside the anchor, `offset` away
+  var top = 0;
+  var left = 0;
+  if (side === 'top') top = anchor.top - offset - floating.height;
+  if (side === 'bottom') top = anchor.top + anchor.height + offset;
+  if (side === 'left') left = anchor.left - offset - floating.width;
+  if (side === 'right') left = anchor.left + anchor.width + offset;
+  // Cross axis: aligned to the anchor's start, centre or end, then kept inside the viewport
+  if (vertical(side)) {
+    if (align === 'start') left = anchor.left;
+    if (align === 'center') left = anchor.left + (anchor.width - floating.width) / 2;
+    if (align === 'end') left = anchor.left + anchor.width - floating.width;
+    left = clamp(left, margin, viewport.width - floating.width - margin);
+  } else {
+    if (align === 'start') top = anchor.top;
+    if (align === 'center') top = anchor.top + (anchor.height - floating.height) / 2;
+    if (align === 'end') top = anchor.top + anchor.height - floating.height;
+    top = clamp(top, margin, viewport.height - floating.height - margin);
+  }
+  return {
+    top: Math.round(top),
+    left: Math.round(left),
+    side: side
+  };
+}
+/**
+ * The element that actually has a box inside a wrapper: Tooltip and Menu wrap their trigger in a
+ * `display: contents` span, and a trigger can be nested in more than one (a Tooltip inside a Menu's
+ * trigger), so this steps down until it finds an element that lays out.
+ */
+function laidOutElement(wrapper) {
+  var _a;
+  var element = (_a = wrapper === null || wrapper === void 0 ? void 0 : wrapper.firstElementChild) !== null && _a !== void 0 ? _a : null;
+  while (element && typeof getComputedStyle !== 'undefined' && getComputedStyle(element).display === 'contents') {
+    element = element.firstElementChild;
+  }
+  return element;
+}
+
+export { laidOutElement, placeFloating };
+//# sourceMappingURL=floatingPosition.mjs.map

package/dist/lib/floatingPosition.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"floatingPosition.mjs","sources":["../../src/lib/floatingPosition.ts"],"sourcesContent":["// Places a floating element (Tooltip, Menu) next to its anchor, without a positioning library\n// (P8). Pure geometry, so it can be tested without a browser: the caller measures both elements\n// and applies the result as `top` and `left` on a `position: fixed` element.\n\nexport type FloatingSide = 'top' | 'right' | 'bottom' | 'left'\nexport type FloatingAlign = 'start' | 'center' | 'end'\n\nexport interface FloatingRect {\n  top: number\n  left: number\n  width: number\n  height: number\n}\n\nexport interface FloatingOptions {\n  /** The anchor's box, from getBoundingClientRect */\n  anchor: FloatingRect\n  /** The floating element's size */\n  floating: { width: number; height: number }\n  /** The side to place it on; it flips to the opposite side when that has more room */\n  side: FloatingSide\n  /** Where it lines up along the anchor's edge */\n  align: FloatingAlign\n  /** The gap between the anchor and the floating element, in px */\n  offset: number\n  /** The viewport's size */\n  viewport: { width: number; height: number }\n  /** The smallest distance kept from the viewport's edges, in px */\n  margin: number\n}\n\nexport interface FloatingPosition {\n  top: number\n  left: number\n  /** The side it ended up on, after any flip */\n  side: FloatingSide\n}\n\nconst opposite: Record<FloatingSide, FloatingSide> = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' }\n\n// The room between the anchor and the viewport edge on each side\nconst room = (side: FloatingSide, { anchor, viewport, margin }: FloatingOptions) => {\n  switch (side) {\n    case 'top': return anchor.top - margin\n    case 'bottom': return viewport.height - (anchor.top + anchor.height) - margin\n    case 'left': return anchor.left - margin\n    case 'right': return viewport.width - (anchor.left + anchor.width) - margin\n  }\n}\n\nconst clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(value, max))\n\nexport function placeFloating(options: FloatingOptions): FloatingPosition {\n  const { anchor, floating, align, offset, viewport, margin } = options\n  const vertical = (s: FloatingSide) => s === 'top' || s === 'bottom'\n\n  // Flip when the preferred side is too small and the opposite side has more room\n  let side = options.side\n  const needed = (vertical(side) ? floating.height : floating.width) + offset\n  if (room(side, options) < needed && room(opposite[side], options) > room(side, options)) {\n    side = opposite[side]\n  }\n\n  // Main axis: beside the anchor, `offset` away\n  let top = 0\n  let left = 0\n  if (side === 'top') top = anchor.top - offset - floating.height\n  if (side === 'bottom') top = anchor.top + anchor.height + offset\n  if (side === 'left') left = anchor.left - offset - floating.width\n  if (side === 'right') left = anchor.left + anchor.width + offset\n\n  // Cross axis: aligned to the anchor's start, centre or end, then kept inside the viewport\n  if (vertical(side)) {\n    if (align === 'start') left = anchor.left\n    if (align === 'center') left = anchor.left + (anchor.width - floating.width) / 2\n    if (align === 'end') left = anchor.left + anchor.width - floating.width\n    left = clamp(left, margin, viewport.width - floating.width - margin)\n  } else {\n    if (align === 'start') top = anchor.top\n    if (align === 'center') top = anchor.top + (anchor.height - floating.height) / 2\n    if (align === 'end') top = anchor.top + anchor.height - floating.height\n    top = clamp(top, margin, viewport.height - floating.height - margin)\n  }\n\n  return { top: Math.round(top), left: Math.round(left), side }\n}\n\n/**\n * The element that actually has a box inside a wrapper: Tooltip and Menu wrap their trigger in a\n * `display: contents` span, and a trigger can be nested in more than one (a Tooltip inside a Menu's\n * trigger), so this steps down until it finds an element that lays out.\n */\nexport function laidOutElement(wrapper: Element | null): Element | null {\n  let element = wrapper?.firstElementChild ?? null\n  while (element && typeof getComputedStyle !== 'undefined' && getComputedStyle(element).display === 'contents') {\n    element = element.firstElementChild\n  }\n  return element\n}\n"],"names":["opposite","top","bottom","left","right","room","side","_a","anchor","viewport","margin","height","width","clamp","value","min","max","Math","placeFloating","options","floating","align","offset","vertical","s","needed","round","laidOutElement","wrapper","element","firstElementChild","getComputedStyle","display"],"mappings":"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"}

package/dist/lib/keyboardFocus.d.mts

@@ -0,0 +1,6 @@
+/**
+ * Whether focus arrived from the keyboard rather than a click or tap, so a component can show
+ * something on keyboard focus only (a Tooltip, SidebarNav's highlight). Browsers without
+ * `:focus-visible` treat every focus as keyboard focus.
+ */
+export declare function isKeyboardFocus(target: EventTarget | null): boolean;

package/dist/lib/keyboardFocus.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Whether focus arrived from the keyboard rather than a click or tap, so a component can show
+ * something on keyboard focus only (a Tooltip, SidebarNav's highlight). Browsers without
+ * `:focus-visible` treat every focus as keyboard focus.
+ */
+export declare function isKeyboardFocus(target: EventTarget | null): boolean;

package/dist/lib/keyboardFocus.mjs

@@ -0,0 +1,17 @@
+'use client';
+/**
+ * Whether focus arrived from the keyboard rather than a click or tap, so a component can show
+ * something on keyboard focus only (a Tooltip, SidebarNav's highlight). Browsers without
+ * `:focus-visible` treat every focus as keyboard focus.
+ */
+function isKeyboardFocus(target) {
+  if (!(target instanceof Element)) return false;
+  try {
+    return target.matches(':focus-visible');
+  } catch (_a) {
+    return true;
+  }
+}
+
+export { isKeyboardFocus };
+//# sourceMappingURL=keyboardFocus.mjs.map

package/dist/lib/keyboardFocus.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboardFocus.mjs","sources":["../../src/lib/keyboardFocus.ts"],"sourcesContent":["/**\n * Whether focus arrived from the keyboard rather than a click or tap, so a component can show\n * something on keyboard focus only (a Tooltip, SidebarNav's highlight). Browsers without\n * `:focus-visible` treat every focus as keyboard focus.\n */\nexport function isKeyboardFocus(target: EventTarget | null): boolean {\n  if (!(target instanceof Element)) return false\n  try {\n    return target.matches(':focus-visible')\n  } catch {\n    return true\n  }\n}\n"],"names":["isKeyboardFocus","target","Element","matches","_a"],"mappings":";AAAA;;;;AAIG;AACG,SAAUA,eAAeA,CAACC,MAA0B,EAAA;AACxD,EAAA,IAAI,EAAEA,MAAM,YAAYC,OAAO,CAAC,EAAE,OAAO,KAAK,CAAA;EAC9C,IAAI;AACF,IAAA,OAAOD,MAAM,CAACE,OAAO,CAAC,gBAAgB,CAAC,CAAA;GACxC,CAAC,OAAAC,EAAA,EAAM;AACN,IAAA,OAAO,IAAI,CAAA;AACb,GAAA;AACF;;;;"}

package/dist/lib/useFloatingLayer.d.mts

@@ -0,0 +1,25 @@
+import { useEffect, type RefObject } from 'react';
+import { type FloatingAlign, type FloatingSide } from './floatingPosition.mjs';
+export declare const useIsomorphicLayoutEffect: typeof useEffect;
+interface FloatingLayerOptions {
+    /** Whether the floating element is rendered */
+    isPresent: boolean;
+    /** The floating element: `position: fixed`, placed with top and left */
+    floatingRef: RefObject<HTMLElement | null>;
+    /** The `display: contents` wrapper around the trigger */
+    anchorRef: RefObject<Element | null>;
+    side: FloatingSide;
+    align: FloatingAlign;
+    /**
+     * Called when the trigger may have moved away from the floating element: the page or a container
+     * scrolled (anything but the floating element itself), or the window resized
+     */
+    onDetach: () => void;
+}
+/**
+ * Shows a floating element (Tooltip, Menu) in the top layer beside its trigger, before the browser
+ * paints, and places it again whenever its size changes. A gap of `space.100` separates it from the
+ * trigger, and it keeps `space.200` from the viewport's edges.
+ */
+export declare function useFloatingLayer({ isPresent, floatingRef, anchorRef, side, align, onDetach }: FloatingLayerOptions): void;
+export {};

package/dist/lib/useFloatingLayer.d.ts

@@ -0,0 +1,25 @@
+import { useEffect, type RefObject } from 'react';
+import { type FloatingAlign, type FloatingSide } from './floatingPosition';
+export declare const useIsomorphicLayoutEffect: typeof useEffect;
+interface FloatingLayerOptions {
+    /** Whether the floating element is rendered */
+    isPresent: boolean;
+    /** The floating element: `position: fixed`, placed with top and left */
+    floatingRef: RefObject<HTMLElement | null>;
+    /** The `display: contents` wrapper around the trigger */
+    anchorRef: RefObject<Element | null>;
+    side: FloatingSide;
+    align: FloatingAlign;
+    /**
+     * Called when the trigger may have moved away from the floating element: the page or a container
+     * scrolled (anything but the floating element itself), or the window resized
+     */
+    onDetach: () => void;
+}
+/**
+ * Shows a floating element (Tooltip, Menu) in the top layer beside its trigger, before the browser
+ * paints, and places it again whenever its size changes. A gap of `space.100` separates it from the
+ * trigger, and it keeps `space.200` from the viewport's edges.
+ */
+export declare function useFloatingLayer({ isPresent, floatingRef, anchorRef, side, align, onDetach }: FloatingLayerOptions): void;
+export {};

package/dist/lib/useFloatingLayer.mjs

@@ -0,0 +1,86 @@
+'use client';
+import { useLayoutEffect, useEffect } from 'react';
+import tokensJson from '../styles/tokens.json.mjs';
+import { laidOutElement, placeFloating } from './floatingPosition.mjs';
+
+var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+// The Popover API puts a floating element in the top layer: above everything, Modal included,
+// never clipped by a scroll container, with no z-index (#326). It's in every current browser;
+// without it the element is still position: fixed, so it escapes overflow clipping.
+var supportsPopover = function supportsPopover() {
+  return typeof HTMLElement !== 'undefined' && 'showPopover' in HTMLElement.prototype;
+};
+var remToPx = function remToPx(value) {
+  return parseFloat(value) * (parseFloat(getComputedStyle(document.documentElement).fontSize) || 16);
+};
+/**
+ * Shows a floating element (Tooltip, Menu) in the top layer beside its trigger, before the browser
+ * paints, and places it again whenever its size changes. A gap of `space.100` separates it from the
+ * trigger, and it keeps `space.200` from the viewport's edges.
+ */
+function useFloatingLayer(_a) {
+  var isPresent = _a.isPresent,
+    floatingRef = _a.floatingRef,
+    anchorRef = _a.anchorRef,
+    side = _a.side,
+    align = _a.align,
+    onDetach = _a.onDetach;
+  useIsomorphicLayoutEffect(function () {
+    var floating = floatingRef.current;
+    if (!isPresent || !floating) return;
+    if (supportsPopover() && !floating.matches(':popover-open')) {
+      floating.setAttribute('popover', 'manual');
+      floating.showPopover();
+    }
+    var place = function place() {
+      var trigger = laidOutElement(anchorRef.current);
+      if (!trigger) return;
+      var anchor = trigger.getBoundingClientRect();
+      var _a = floating.getBoundingClientRect(),
+        width = _a.width,
+        height = _a.height;
+      var position = placeFloating({
+        anchor: anchor,
+        floating: {
+          width: width,
+          height: height
+        },
+        side: side,
+        align: align,
+        offset: remToPx(tokensJson.semantic.space[100]),
+        viewport: {
+          width: window.innerWidth,
+          height: window.innerHeight
+        },
+        margin: remToPx(tokensJson.semantic.space[200])
+      });
+      floating.style.top = "".concat(position.top, "px");
+      floating.style.left = "".concat(position.left, "px");
+      floating.dataset.side = position.side;
+    };
+    place();
+    if (typeof ResizeObserver === 'undefined') return;
+    var observer = new ResizeObserver(place);
+    observer.observe(floating);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [isPresent, side, align, floatingRef, anchorRef]);
+  useEffect(function () {
+    if (!isPresent) return;
+    var onScroll = function onScroll(event) {
+      var _a;
+      if (event.target instanceof Node && ((_a = floatingRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) return;
+      onDetach();
+    };
+    window.addEventListener('scroll', onScroll, true);
+    window.addEventListener('resize', onDetach);
+    return function () {
+      window.removeEventListener('scroll', onScroll, true);
+      window.removeEventListener('resize', onDetach);
+    };
+  }, [isPresent, floatingRef, onDetach]);
+}
+
+export { useFloatingLayer, useIsomorphicLayoutEffect };
+//# sourceMappingURL=useFloatingLayer.mjs.map

package/dist/lib/useFloatingLayer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFloatingLayer.mjs","sources":["../../src/lib/useFloatingLayer.ts"],"sourcesContent":["import { useEffect, useLayoutEffect, type RefObject } from 'react'\n// Placement needs resolved lengths, not CSS variables (decision 0041)\nimport tokenValues from '../styles/tokens.json'\nimport { laidOutElement, placeFloating, type FloatingAlign, type FloatingSide } from './floatingPosition'\n\nexport const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect\n\n// The Popover API puts a floating element in the top layer: above everything, Modal included,\n// never clipped by a scroll container, with no z-index (#326). It's in every current browser;\n// without it the element is still position: fixed, so it escapes overflow clipping.\nconst supportsPopover = () => typeof HTMLElement !== 'undefined' && 'showPopover' in HTMLElement.prototype\n\nconst remToPx = (value: string) =>\n  parseFloat(value) * (parseFloat(getComputedStyle(document.documentElement).fontSize) || 16)\n\ninterface FloatingLayerOptions {\n  /** Whether the floating element is rendered */\n  isPresent: boolean\n  /** The floating element: `position: fixed`, placed with top and left */\n  floatingRef: RefObject<HTMLElement | null>\n  /** The `display: contents` wrapper around the trigger */\n  anchorRef: RefObject<Element | null>\n  side: FloatingSide\n  align: FloatingAlign\n  /**\n   * Called when the trigger may have moved away from the floating element: the page or a container\n   * scrolled (anything but the floating element itself), or the window resized\n   */\n  onDetach: () => void\n}\n\n/**\n * Shows a floating element (Tooltip, Menu) in the top layer beside its trigger, before the browser\n * paints, and places it again whenever its size changes. A gap of `space.100` separates it from the\n * trigger, and it keeps `space.200` from the viewport's edges.\n */\nexport function useFloatingLayer({ isPresent, floatingRef, anchorRef, side, align, onDetach }: FloatingLayerOptions) {\n  useIsomorphicLayoutEffect(() => {\n    const floating = floatingRef.current\n    if (!isPresent || !floating) return\n    if (supportsPopover() && !floating.matches(':popover-open')) {\n      floating.setAttribute('popover', 'manual')\n      floating.showPopover()\n    }\n    const place = () => {\n      const trigger = laidOutElement(anchorRef.current)\n      if (!trigger) return\n      const anchor = trigger.getBoundingClientRect()\n      const { width, height } = floating.getBoundingClientRect()\n      const position = placeFloating({\n        anchor,\n        floating: { width, height },\n        side,\n        align,\n        offset: remToPx(tokenValues.semantic.space[100]),\n        viewport: { width: window.innerWidth, height: window.innerHeight },\n        margin: remToPx(tokenValues.semantic.space[200]),\n      })\n      floating.style.top = `${position.top}px`\n      floating.style.left = `${position.left}px`\n      floating.dataset.side = position.side\n    }\n    place()\n    if (typeof ResizeObserver === 'undefined') return\n    const observer = new ResizeObserver(place)\n    observer.observe(floating)\n    return () => observer.disconnect()\n  }, [isPresent, side, align, floatingRef, anchorRef])\n\n  useEffect(() => {\n    if (!isPresent) return\n    const onScroll = (event: Event) => {\n      if (event.target instanceof Node && floatingRef.current?.contains(event.target)) return\n      onDetach()\n    }\n    window.addEventListener('scroll', onScroll, true)\n    window.addEventListener('resize', onDetach)\n    return () => {\n      window.removeEventListener('scroll', onScroll, true)\n      window.removeEventListener('resize', onDetach)\n    }\n  }, [isPresent, floatingRef, onDetach])\n}\n"],"names":["useIsomorphicLayoutEffect","window","useLayoutEffect","useEffect","supportsPopover","HTMLElement","prototype","remToPx","value","parseFloat","getComputedStyle","document","documentElement","fontSize","useFloatingLayer","_a","isPresent","floatingRef","anchorRef","side","align","onDetach","floating","current","matches","setAttribute","showPopover","place","trigger","laidOutElement","anchor","getBoundingClientRect","width","height","position","placeFloating","offset","tokenValues","semantic","space","viewport","innerWidth","innerHeight","margin","style","top","left","dataset","ResizeObserver","observer","observe","disconnect","onScroll","event","target","Node","contains","addEventListener","removeEventListener"],"mappings":"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"}