thread-ui 0.15.0 → 0.16.0

package/dist/components/navigation/nav-menu/components/nav-drop-down-item.js

@@ -1,11 +1,11 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useId, useState } from 'react';
 import { NavLink } from './nav-link';
-import { css, cx } from '../../../../styled-system/css';
+import { NavItem } from './nav-item';
+import { css, cva } from '../../../../styled-system/css';
 import { Text } from '../../../../components/typography';
 import { Icon } from '../../../../components/ui';
-import { ThreadTheme } from '../../../../theme';
 const styles = {
     parentBlock: css({
         position: 'relative',
@@ -24,50 +24,70 @@ const styles = {
         transform: 'translateX(-50%)',
         bottom: { base: '-0px', lg: '-30px' },
     }),
-    dropdownContent: css({
-        display: 'none',
-        position: { base: 'static', lg: 'absolute' },
-        width: 'fit-content',
-        borderRadius: 'md',
-        padding: '16px',
-        zIndex: 'overlay',
-        top: { lg: 'calc(100% + 30px)' },
-        left: { lg: '50%' },
-        transform: { lg: 'translateX(-50%)' },
-        backgroundColor: 'overlay',
-        boxShadow: 'lg',
+    dropdownContent: cva({
+        base: {
+            position: { base: 'relative', lg: 'absolute' },
+            width: { base: '100vw', lg: 'fit-content' },
+            borderRadius: 'md',
+            padding: { base: '8px 0 8px 0', lg: '16px' },
+            zIndex: 'overlay',
+            top: { lg: 'calc(100% + 30px)' },
+            left: '50%',
+            transform: 'translateX(-50%)',
+            backgroundColor: { lg: 'overlay' },
+            boxShadow: { lg: 'lg' },
+            justifyContent: 'center',
+            gap: '8px 24px',
+            gridTemplateColumns: {
+                base: 'repeat(var(--thread-nav-menu-cols-sm), auto)',
+                lg: 'repeat(var(--thread-nav-menu-cols-lg), auto)',
+            },
+        },
+        variants: {
+            open: {
+                true: {
+                    display: 'grid',
+                },
+                false: {
+                    display: 'none',
+                },
+            },
+        },
+        defaultVariants: {
+            open: false,
+        },
     }),
-    dropdownContentShow: css({
-        display: { base: 'none', lg: 'block' },
-    }),
-    collapsedDropdownContent: css({
-        justifyContent: 'center',
-        columnGap: '24px',
-        alignItems: 'center',
-        width: '100vw',
-        position: 'relative',
-        left: '50%',
-        transform: 'translateX(-50%)',
-        borderRadius: 'md',
-        zIndex: 'overlay',
-    }),
-    dropdownContentNoShow: css({
-        display: 'none',
-    }),
-    collapsedDropdownContentShow: css({
-        display: { base: 'flex', lg: 'none' },
+    caretWrapper: cva({
+        base: {
+            display: 'flex',
+            alignItems: 'center',
+            transition: 'transform 200ms',
+            marginTop: '1px',
+        },
+        variants: {
+            open: {
+                true: { transform: 'rotate(180deg)' },
+                false: { transform: 'rotate(0deg)' },
+            },
+        },
+        defaultVariants: {
+            open: false,
+        },
     }),
 };
 export const NavDropdownItem = ({ title, items, icon }) => {
-    const [isHovered, setIsHovered] = useState(false);
-    const arrow = {
-        color: ThreadTheme.text.standard,
-        marginTop: '1px',
-        height: '12px',
-        width: '12px',
-        transition: 'all 200ms',
-        transform: isHovered ? 'rotate(180deg)' : 'rotate(0deg)',
+    const [isOpen, setIsOpen] = useState(false);
+    const dropdownId = useId();
+    const mobileCols = items.length === 4 ? 2 : Math.min(items.length, 3);
+    const desktopCols = items.length <= 3 ? 1 : 2;
+    const handleBlurCapture = (e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+            setIsOpen(false);
+        }
     };
-    return (_jsxs("div", { className: styles.parentBlock, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: () => setIsHovered(false), children: [_jsxs(NavLink, { href: "#", children: [icon && _jsx(Icon, { size: 16, color: "text", name: icon }), _jsx(Text, { size: "sm", inline: true, children: title }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: arrow, children: _jsx("path", { d: "m6 9 6 6 6-6" }) })] }), isHovered && _jsx("div", { className: styles.targetArea }), _jsx("div", { className: cx(styles.collapsedDropdownContent, isHovered ? styles.collapsedDropdownContentShow : styles.dropdownContentNoShow), children: items.map((item) => (_jsxs(NavLink, { href: item.href, isDropdownItem: true, children: [item.icon && _jsx(Icon, { color: "text", name: item.icon, size: 12 }), _jsx(Text, { size: "sm", inline: true, weight: "medium", children: item.title })] }, item.title))) }), _jsx("div", { className: cx(styles.dropdownContent, isHovered ? styles.dropdownContentShow : styles.dropdownContentNoShow), children: items.map((item) => (_jsxs(NavLink, { href: item.href, isDropdownItem: true, children: [item.icon && _jsx(Icon, { color: "text", name: item.icon, size: 12 }), _jsx(Text, { size: "sm", inline: true, weight: "medium", children: item.title })] }, item.title))) })] }));
+    return (_jsxs("div", { "aria-expanded": isOpen, "aria-haspopup": "true", "aria-controls": dropdownId, className: styles.parentBlock, onMouseEnter: () => setIsOpen(true), onMouseLeave: () => setIsOpen(false), onFocusCapture: () => setIsOpen(true), onBlurCapture: handleBlurCapture, onClick: () => setIsOpen(false), children: [_jsxs(NavLink, { href: "#", children: [icon && _jsx(Icon, { size: 16, color: "text", name: icon }), _jsx(Text, { size: "sm", inline: true, children: title }), _jsx("span", { className: styles.caretWrapper({ open: isOpen }), children: _jsx(Icon, { name: "CaretDownIcon", size: 12, color: "text" }) })] }), isOpen && _jsx("div", { className: styles.targetArea }), _jsx("div", { id: dropdownId, className: styles.dropdownContent({ open: isOpen }), style: {
+                    '--thread-nav-menu-cols-sm': mobileCols,
+                    '--thread-nav-menu-cols-lg': desktopCols,
+                }, children: items.map((item) => (_jsx(NavItem, { ...item, isDropdownItem: true }, item.title))) })] }));
 };
 //# sourceMappingURL=nav-drop-down-item.js.map

package/dist/components/navigation/nav-menu/components/nav-drop-down-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"nav-drop-down-item.js","sourceRoot":"","sources":["../../../../../src/components/navigation/nav-menu/components/nav-drop-down-item.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"nav-drop-down-item.js","sourceRoot":"","sources":["../../../../../src/components/navigation/nav-menu/components/nav-drop-down-item.tsx"],"names":[],"mappings":"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"}

package/dist/components/navigation/nav-menu/components/nav-item.d.ts

@@ -1,2 +1,6 @@
 import { NavigationItem } from '../../navigation.types';
-export declare const NavItem: ({ href, title, icon }: NavigationItem) => import("react/jsx-runtime").JSX.Element;
+type NavItemProps = NavigationItem & {
+    isDropdownItem?: boolean;
+};
+export declare const NavItem: ({ href, title, icon, isDropdownItem }: NavItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/navigation/nav-menu/components/nav-item.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { NavLink } from './nav-link';
 import { Text } from '../../../../components/typography';
 import { Icon } from '../../../../components/ui';
-export const NavItem = ({ href, title, icon }) => {
-    return (_jsxs(NavLink, { href: href, children: [icon && _jsx(Icon, { color: "text", name: icon, size: 16 }), _jsx(Text, { size: "sm", inline: true, weight: "medium", children: title })] }));
+export const NavItem = ({ href, title, icon, isDropdownItem = false }) => {
+    return (_jsxs(NavLink, { href: href, isDropdownItem: isDropdownItem, children: [icon && _jsx(Icon, { color: "text", name: icon, size: isDropdownItem ? 12 : 16 }), _jsx(Text, { size: "sm", inline: true, weight: "medium", children: title })] }));
 };
 //# sourceMappingURL=nav-item.js.map

package/dist/components/navigation/nav-menu/components/nav-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"nav-item.js","sourceRoot":"","sources":["../../../../../src/components/navigation/nav-menu/components/nav-item.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEvC,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAkB,EAAE,EAAE;IAChE,OAAO,CACN,MAAC,OAAO,IAAC,IAAI,EAAE,IAAI,aACjB,IAAI,IAAI,KAAC,IAAI,IAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,GAAI,EACpD,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,MAAM,QAAC,MAAM,EAAC,QAAQ,YACpC,KAAK,GACA,IACE,CACV,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"file":"nav-item.js","sourceRoot":"","sources":["../../../../../src/components/navigation/nav-menu/components/nav-item.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAMvC,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,cAAc,GAAG,KAAK,EAAgB,EAAE,EAAE;IACtF,OAAO,CACN,MAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,cAAc,aACjD,IAAI,IAAI,KAAC,IAAI,IAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,GAAI,EAC1E,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,MAAM,QAAC,MAAM,EAAC,QAAQ,YACpC,KAAK,GACA,IACE,CACV,CAAC;AACH,CAAC,CAAC"}

package/dist/components/navigation/nav-menu/components/{nav-link/nav-link.types.d.ts → nav-link.d.ts}

@@ -5,3 +5,4 @@ export type NavLinkProps = {
     halfPadding?: boolean;
     isDropdownItem?: boolean;
 };
+export declare const NavLink: ({ children, href, halfPadding, isDropdownItem }: NavLinkProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/navigation/nav-menu/components/{nav-link/nav-link.js → nav-link.js}

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Link } from '../../../../../internal-components';
-import { css, cva } from '../../../../../styled-system/css';
+import { Link } from '../../../../internal-components';
+import { css, cva } from '../../../../styled-system/css';
 const styles = {
     li: css({
         display: 'flex',
@@ -40,8 +40,9 @@ const styles = {
             },
             isDropdownItem: {
                 true: {
-                    justifyContent: { base: 'space-between', lg: 'center' },
+                    justifyContent: { base: 'center', lg: 'start' },
                     width: { base: 'fit-content', lg: '100%' },
+                    whiteSpace: 'nowrap',
                 },
                 false: { width: { base: '100%', lg: 'fit-content' } },
             },

package/dist/components/navigation/nav-menu/components/nav-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-link.js","sourceRoot":"","sources":["../../../../../src/components/navigation/nav-menu/components/nav-link.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAU/C,MAAM,MAAM,GAAG;IACd,EAAE,EAAE,GAAG,CAAC;QACP,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,aAAa,EAAE,MAAM;KACrB,CAAC;IACF,IAAI,EAAE,GAAG,CAAC;QACT,IAAI,EAAE;YACL,QAAQ,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE;YAC5C,OAAO,EAAE,aAAa;YACtB,aAAa,EAAE,KAAK;YACpB,GAAG,EAAE,KAAK;YACV,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE;YAClC,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,YAAY,EAAE,IAAI;YAClB,cAAc,EAAE,MAAM;YACtB,UAAU,EAAE,uBAAuB;YACnC,MAAM,EAAE,MAAM;YACd,MAAM,EAAE;gBACP,eAAe,EAAE,OAAO;aACxB;YACD,OAAO,EAAE;gBACR,eAAe,EAAE,QAAQ;aACzB;SACD;QACD,QAAQ,EAAE;YACT,WAAW,EAAE;gBACZ,IAAI,EAAE;oBACL,QAAQ,EAAE,GAAG;oBACb,QAAQ,EAAE,GAAG;iBACb;gBACD,KAAK,EAAE;oBACN,QAAQ,EAAE,GAAG;oBACb,QAAQ,EAAE,GAAG;iBACb;aACD;YACD,cAAc,EAAE;gBACf,IAAI,EAAE;oBACL,cAAc,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,OAAO,EAAE;oBAC/C,KAAK,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,EAAE,EAAE,MAAM,EAAE;oBAC1C,UAAU,EAAE,QAAQ;iBACpB;gBACD,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,aAAa,EAAE,EAAE;aACrD;SACD;QACD,eAAe,EAAE;YAChB,WAAW,EAAE,KAAK;YAClB,cAAc,EAAE,KAAK;SACrB;KACD,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,GAAG,KAAK,EAAE,cAAc,EAAgB,EAAE,EAAE;IAChG,OAAO,CACN,aAAI,SAAS,EAAE,MAAM,CAAC,EAAE,YACvB,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC,YACvE,QAAQ,GACH,GACH,CACL,CAAC;AACH,CAAC,CAAC"}

package/dist/components/navigation/nav-menu/nav-menu.d.ts

@@ -1,7 +1,7 @@
 import { NavMenuProps } from './nav-menu.types';
 /**
  * Sticky site navigation with a logo, nav links, dropdown menus, and a mobile hamburger toggle.
- * Closes on outside click and on viewport resize.
+ * Closes on outside click, on viewport resize, on Escape, or when focus leaves the nav.
  *
  * @example
  * <NavMenu

package/dist/components/navigation/nav-menu/nav-menu.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
-import { useClickOutside, useResize } from '../../../hooks';
+import { useDismiss, useResize } from '../../../hooks';
 import { css, cx } from '../../../styled-system/css';
 import { NavigationLogo } from './components/navigation-logo';
 import { NavItem } from './components/nav-item';
@@ -103,7 +103,7 @@ const style = {
 };
 /**
  * Sticky site navigation with a logo, nav links, dropdown menus, and a mobile hamburger toggle.
- * Closes on outside click and on viewport resize.
+ * Closes on outside click, on viewport resize, on Escape, or when focus leaves the nav.
  *
  * @example
  * <NavMenu
@@ -120,14 +120,15 @@ export const NavMenu = ({ logo, items }) => {
     const closeNavbar = () => setNavIsOpened(false);
     const toggleNavbar = () => setNavIsOpened((prev) => !prev);
     useResize({ onResize: closeNavbar });
-    useClickOutside({
+    useDismiss({
         elementRef: headerRef,
         isOpen: navIsOpened,
         onClose: closeNavbar,
+        dismissOnBlur: true,
     });
     const renderItem = (item) => {
         return 'href' in item ? (_jsx(NavItem, { ...item }, item.title)) : (_jsx(NavDropdownItem, { ...item }, item.title));
     };
-    return (_jsx("header", { ref: headerRef, className: style.header, children: _jsxs("nav", { className: style.nav, children: [logo && _jsx(NavigationLogo, { href: logo.href, logo: logo.logo }), _jsx("div", { className: cx(style.menuItemBlock, navIsOpened ? style.menuOpenItemBlock : style.menuCloseItemBlock), children: _jsx("ul", { className: style.itemList, children: items.map(renderItem) }) }), _jsx("div", { className: style.menuControl, children: _jsxs("button", { onClick: toggleNavbar, "aria-label": "toggle navbar", children: [_jsx("span", { "aria-hidden": true, className: cx(style.menuCross, navIsOpened && style.menuCrossTopOpen) }), _jsx("span", { "aria-hidden": true, className: cx(style.menuCross, style.menuCrossBottom, navIsOpened && style.menuCrossBottomOpen) })] }) })] }) }));
+    return (_jsx("header", { ref: headerRef, className: style.header, children: _jsxs("nav", { "aria-label": "Main", className: style.nav, children: [logo && _jsx(NavigationLogo, { href: logo.href, logo: logo.logo }), _jsx("div", { className: style.menuControl, children: _jsxs("button", { onClick: toggleNavbar, "aria-label": "toggle navbar", "aria-expanded": navIsOpened, children: [_jsx("span", { "aria-hidden": true, className: cx(style.menuCross, navIsOpened && style.menuCrossTopOpen) }), _jsx("span", { "aria-hidden": true, className: cx(style.menuCross, style.menuCrossBottom, navIsOpened && style.menuCrossBottomOpen) })] }) }), _jsx("div", { className: cx(style.menuItemBlock, navIsOpened ? style.menuOpenItemBlock : style.menuCloseItemBlock), onClick: () => setNavIsOpened(false), children: _jsx("ul", { className: style.itemList, children: items.map(renderItem) }) })] }) }));
 };
 //# sourceMappingURL=nav-menu.js.map

package/dist/components/navigation/nav-menu/nav-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"nav-menu.js","sourceRoot":"","sources":["../../../../src/components/navigation/nav-menu/nav-menu.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"nav-menu.js","sourceRoot":"","sources":["../../../../src/components/navigation/nav-menu/nav-menu.tsx"],"names":[],"mappings":"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"}

package/dist/components/ui/modal/modal.js

@@ -9,12 +9,16 @@ const styles = {
         base: {
             position: 'fixed',
             inset: 0,
-            background: 'scrim',
             display: 'flex',
             justifyContent: 'center',
             zIndex: 'modal',
         },
         variants: {
+            scrimLevel: {
+                light: { background: 'scrim.light' },
+                medium: { background: 'scrim.medium' },
+                heavy: { background: 'scrim.heavy' },
+            },
             placement: {
                 center: {
                     alignItems: 'center',
@@ -38,7 +42,7 @@ const styles = {
  * </Modal>
  */
 export const Modal = (props) => {
-    const { isOpen, onClose, portalTarget, preventScroll = true, placement = 'center', closeOnOverlayClick = true, closeOnEsc = true, } = props;
-    return (_jsx(ModalPrimitive, { overlayClassName: styles.overlay({ placement }), isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, preventScroll: preventScroll, portalTarget: portalTarget, children: _jsx(ModalProvider, { value: props, children: _jsx(ModalContent, {}) }) }));
+    const { isOpen, onClose, portalTarget, preventScroll = true, placement = 'center', closeOnOverlayClick = true, closeOnEsc = true, scrimLevel = 'medium', } = props;
+    return (_jsx(ModalPrimitive, { overlayClassName: styles.overlay({ placement, scrimLevel }), isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, preventScroll: preventScroll, portalTarget: portalTarget, children: _jsx(ModalProvider, { value: props, children: _jsx(ModalContent, {}) }) }));
 };
 //# sourceMappingURL=modal.js.map

package/dist/components/ui/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../../src/components/ui/modal/modal.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,MAAM,MAAM,GAAG;IACd,OAAO,EAAE,GAAG,CAAC;QACZ,IAAI,EAAE;YACL,QAAQ,EAAE,OAAO;YACjB,KAAK,EAAE,CAAC;YACR,UAAU,EAAE,OAAO;YACnB,OAAO,EAAE,MAAM;YACf,cAAc,EAAE,QAAQ;YACxB,MAAM,EAAE,OAAO;SACf;QACD,QAAQ,EAAE;YACT,SAAS,EAAE;gBACV,MAAM,EAAE;oBACP,UAAU,EAAE,QAAQ;oBACpB,UAAU,EAAE,GAAG;iBACf;gBACD,GAAG,EAAE;oBACJ,UAAU,EAAE,KAAK;oBACjB,UAAU,EAAE,IAAI;iBAChB;aACD;SACD;KACD,CAAC;CACF,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAiB,EAAE,EAAE;IAC1C,MAAM,EACL,MAAM,EACN,OAAO,EACP,YAAY,EACZ,aAAa,GAAG,IAAI,EACpB,SAAS,GAAG,QAAQ,EACpB,mBAAmB,GAAG,IAAI,EAC1B,UAAU,GAAG,IAAI,GACjB,GAAG,KAAK,CAAC;IACV,OAAO,CACN,KAAC,cAAc,IACd,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC,EAC/C,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,mBAAmB,EAAE,mBAAmB,EACxC,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,YAAY,YAE1B,KAAC,aAAa,IAAC,KAAK,EAAE,KAAK,YAC1B,KAAC,YAAY,KAAG,GACD,GACA,CACjB,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../../src/components/ui/modal/modal.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,MAAM,MAAM,GAAG;IACd,OAAO,EAAE,GAAG,CAAC;QACZ,IAAI,EAAE;YACL,QAAQ,EAAE,OAAO;YACjB,KAAK,EAAE,CAAC;YAER,OAAO,EAAE,MAAM;YACf,cAAc,EAAE,QAAQ;YACxB,MAAM,EAAE,OAAO;SACf;QACD,QAAQ,EAAE;YACT,UAAU,EAAE;gBACX,KAAK,EAAE,EAAE,UAAU,EAAE,aAAa,EAAE;gBACpC,MAAM,EAAE,EAAE,UAAU,EAAE,cAAc,EAAE;gBACtC,KAAK,EAAE,EAAE,UAAU,EAAE,aAAa,EAAE;aACpC;YACD,SAAS,EAAE;gBACV,MAAM,EAAE;oBACP,UAAU,EAAE,QAAQ;oBACpB,UAAU,EAAE,GAAG;iBACf;gBACD,GAAG,EAAE;oBACJ,UAAU,EAAE,KAAK;oBACjB,UAAU,EAAE,IAAI;iBAChB;aACD;SACD;KACD,CAAC;CACF,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAiB,EAAE,EAAE;IAC1C,MAAM,EACL,MAAM,EACN,OAAO,EACP,YAAY,EACZ,aAAa,GAAG,IAAI,EACpB,SAAS,GAAG,QAAQ,EACpB,mBAAmB,GAAG,IAAI,EAC1B,UAAU,GAAG,IAAI,EACjB,UAAU,GAAG,QAAQ,GACrB,GAAG,KAAK,CAAC;IACV,OAAO,CACN,KAAC,cAAc,IACd,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC,EAC3D,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,mBAAmB,EAAE,mBAAmB,EACxC,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,YAAY,YAE1B,KAAC,aAAa,IAAC,KAAK,EAAE,KAAK,YAC1B,KAAC,YAAY,KAAG,GACD,GACA,CACjB,CAAC;AACH,CAAC,CAAC"}

package/dist/components/ui/modal/modal.types.d.ts

@@ -1,5 +1,5 @@
 import { ModalPrimitiveProps } from '../../../internal-components/modal-primitive';
-import { Prettify, UtilitySizeOptions } from '../../../types';
+import { Prettify, ScrimScaleOptions, UtilitySizeOptions } from '../../../types';
 import { ReactNode } from 'react';
 type ModalSizeOptions = UtilitySizeOptions & 'full';
 export type ModalProps = Prettify<ModalPrimitiveProps & {
@@ -11,6 +11,8 @@ export type ModalProps = Prettify<ModalPrimitiveProps & {
     size?: ModalSizeOptions;
     /** Vertical placement of the modal within the page @default `'center'` */
     placement?: 'center' | 'top';
+    /** Scrim Background Opacity @default `medium` */
+    scrimLevel?: ScrimScaleOptions;
 }>;
 export type ModalState = Prettify<Pick<ModalProps, 'children' | 'size' | 'title' | 'footer' | 'onClose'>>;
 export {};

package/dist/hooks/use-dismiss/use-dismiss.d.ts

@@ -5,17 +5,19 @@ type UseDismissProps = {
     onClose: () => void;
     dismissOnClick?: boolean;
     dismissOnEsc?: boolean;
+    dismissOnBlur?: boolean;
 };
 /**
- * Calls `onClose` when a click is detected outside of `elementRef` or when `Escape` is pressed.
- * Each trigger can be independently enabled/disabled. Only active when `isOpen` is true.
+ * Calls `onClose` when a click is detected outside of `elementRef`, when `Escape` is pressed,
+ * or when focus leaves `elementRef`. Each trigger can be independently enabled/disabled.
+ * Only active when `isOpen` is true.
  *
  * @example
  * const ref = useRef<HTMLDivElement>(null);
  * useDismiss({ elementRef: ref, isOpen, onClose: () => setIsOpen(false) });
  *
- * // Disable outside click, keep Escape
- * useDismiss({ elementRef: ref, isOpen, onClose: () => setIsOpen(false), dismissOnClick: false });
+ * // Disable outside click, keep Escape and blur
+ * useDismiss({ elementRef: ref, isOpen, onClose: () => setIsOpen(false), dismissOnClick: false, dismissOnBlur: true });
  */
-export declare const useDismiss: ({ elementRef, isOpen, onClose, dismissOnClick, dismissOnEsc, }: UseDismissProps) => void;
+export declare const useDismiss: ({ elementRef, isOpen, onClose, dismissOnClick, dismissOnEsc, dismissOnBlur, }: UseDismissProps) => void;
 export {};

package/dist/hooks/use-dismiss/use-dismiss.js

@@ -1,21 +1,22 @@
 'use client';
 import { useEffect, useRef } from 'react';
 /**
- * Calls `onClose` when a click is detected outside of `elementRef` or when `Escape` is pressed.
- * Each trigger can be independently enabled/disabled. Only active when `isOpen` is true.
+ * Calls `onClose` when a click is detected outside of `elementRef`, when `Escape` is pressed,
+ * or when focus leaves `elementRef`. Each trigger can be independently enabled/disabled.
+ * Only active when `isOpen` is true.
  *
  * @example
  * const ref = useRef<HTMLDivElement>(null);
  * useDismiss({ elementRef: ref, isOpen, onClose: () => setIsOpen(false) });
  *
- * // Disable outside click, keep Escape
- * useDismiss({ elementRef: ref, isOpen, onClose: () => setIsOpen(false), dismissOnClick: false });
+ * // Disable outside click, keep Escape and blur
+ * useDismiss({ elementRef: ref, isOpen, onClose: () => setIsOpen(false), dismissOnClick: false, dismissOnBlur: true });
  */
-export const useDismiss = ({ elementRef, isOpen, onClose, dismissOnClick = true, dismissOnEsc = true, }) => {
+export const useDismiss = ({ elementRef, isOpen, onClose, dismissOnClick = true, dismissOnEsc = true, dismissOnBlur = true, }) => {
     const onCloseRef = useRef(onClose);
     onCloseRef.current = onClose;
     useEffect(() => {
-        if (!isOpen || (!dismissOnClick && !dismissOnEsc))
+        if (!isOpen || (!dismissOnClick && !dismissOnEsc && !dismissOnBlur))
             return;
         const handleClickOutside = (e) => {
             if (elementRef.current && !elementRef.current.contains(e.target)) {
@@ -27,16 +28,28 @@ export const useDismiss = ({ elementRef, isOpen, onClose, dismissOnClick = true,
                 onCloseRef.current();
             }
         };
+        const handleFocusOut = (e) => {
+            if (!e.relatedTarget)
+                return;
+            if (elementRef.current && !elementRef.current.contains(e.relatedTarget)) {
+                onCloseRef.current();
+            }
+        };
         if (dismissOnClick) {
             document.addEventListener('mousedown', handleClickOutside);
         }
         if (dismissOnEsc) {
             document.addEventListener('keydown', handleKeyDown);
         }
+        if (dismissOnBlur) {
+            elementRef.current?.addEventListener('focusout', handleFocusOut);
+        }
+        const el = elementRef.current;
         return () => {
             document.removeEventListener('mousedown', handleClickOutside);
             document.removeEventListener('keydown', handleKeyDown);
+            el?.removeEventListener('focusout', handleFocusOut);
         };
-    }, [elementRef, isOpen, dismissOnClick, dismissOnEsc]);
+    }, [elementRef, isOpen, dismissOnClick, dismissOnEsc, dismissOnBlur]);
 };
 //# sourceMappingURL=use-dismiss.js.map

package/dist/hooks/use-dismiss/use-dismiss.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-dismiss.js","sourceRoot":"","sources":["../../../src/hooks/use-dismiss/use-dismiss.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,SAAS,EAAE,MAAM,EAAa,MAAM,OAAO,CAAC;AAUrD;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAC1B,UAAU,EACV,MAAM,EACN,OAAO,EACP,cAAc,GAAG,IAAI,EACrB,YAAY,GAAG,IAAI,GACF,EAAE,EAAE;IACrB,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACnC,UAAU,CAAC,OAAO,GAAG,OAAO,CAAC;IAE7B,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,CAAC,MAAM,IAAI,CAAC,CAAC,cAAc,IAAI,CAAC,YAAY,CAAC;YAAE,OAAO;QAE1D,MAAM,kBAAkB,GAAG,CAAC,CAAa,EAAE,EAAE;YAC5C,IAAI,UAAU,CAAC,OAAO,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC,EAAE,CAAC;gBAC1E,UAAU,CAAC,OAAO,EAAE,CAAC;YACtB,CAAC;QACF,CAAC,CAAC;QAEF,MAAM,aAAa,GAAG,CAAC,CAAgB,EAAE,EAAE;YAC1C,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACxB,UAAU,CAAC,OAAO,EAAE,CAAC;YACtB,CAAC;QACF,CAAC,CAAC;QAEF,IAAI,cAAc,EAAE,CAAC;YACpB,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAC5D,CAAC;QAED,IAAI,YAAY,EAAE,CAAC;YAClB,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACrD,CAAC;QAED,OAAO,GAAG,EAAE;YACX,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;YAC9D,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACxD,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,cAAc,EAAE,YAAY,CAAC,CAAC,CAAC;AACxD,CAAC,CAAC"}
+{"version":3,"file":"use-dismiss.js","sourceRoot":"","sources":["../../../src/hooks/use-dismiss/use-dismiss.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,SAAS,EAAE,MAAM,EAAa,MAAM,OAAO,CAAC;AAWrD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAC1B,UAAU,EACV,MAAM,EACN,OAAO,EACP,cAAc,GAAG,IAAI,EACrB,YAAY,GAAG,IAAI,EACnB,aAAa,GAAG,IAAI,GACH,EAAE,EAAE;IACrB,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACnC,UAAU,CAAC,OAAO,GAAG,OAAO,CAAC;IAE7B,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,CAAC,MAAM,IAAI,CAAC,CAAC,cAAc,IAAI,CAAC,YAAY,IAAI,CAAC,aAAa,CAAC;YAAE,OAAO;QAE5E,MAAM,kBAAkB,GAAG,CAAC,CAAa,EAAE,EAAE;YAC5C,IAAI,UAAU,CAAC,OAAO,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC,EAAE,CAAC;gBAC1E,UAAU,CAAC,OAAO,EAAE,CAAC;YACtB,CAAC;QACF,CAAC,CAAC;QAEF,MAAM,aAAa,GAAG,CAAC,CAAgB,EAAE,EAAE;YAC1C,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACxB,UAAU,CAAC,OAAO,EAAE,CAAC;YACtB,CAAC;QACF,CAAC,CAAC;QAEF,MAAM,cAAc,GAAG,CAAC,CAAa,EAAE,EAAE;YACxC,IAAI,CAAC,CAAC,CAAC,aAAa;gBAAE,OAAO;YAC7B,IAAI,UAAU,CAAC,OAAO,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAqB,CAAC,EAAE,CAAC;gBACjF,UAAU,CAAC,OAAO,EAAE,CAAC;YACtB,CAAC;QACF,CAAC,CAAC;QAEF,IAAI,cAAc,EAAE,CAAC;YACpB,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAC5D,CAAC;QAED,IAAI,YAAY,EAAE,CAAC;YAClB,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACrD,CAAC;QACD,IAAI,aAAa,EAAE,CAAC;YACnB,UAAU,CAAC,OAAO,EAAE,gBAAgB,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC;QAClE,CAAC;QAED,MAAM,EAAE,GAAG,UAAU,CAAC,OAAO,CAAC;QAC9B,OAAO,GAAG,EAAE;YACX,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;YAC9D,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;YACvD,EAAE,EAAE,mBAAmB,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC;QACrD,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,cAAc,EAAE,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC;AACvE,CAAC,CAAC"}

package/dist/internal-components/modal-primitive/modal-primitive.d.ts

@@ -1,2 +1,2 @@
 import { ModalPrimitiveProps } from './modal-primitive.types';
-export declare const ModalPrimitive: ({ children, closeOnEsc, closeOnOverlayClick, dismissRef, isOpen, onClose, overlayClassName, portalTarget, preventScroll, }: ModalPrimitiveProps) => import("react").ReactPortal | undefined;
+export declare const ModalPrimitive: ({ autoFocus, children, closeOnEsc, closeOnOverlayClick, dismissRef, isOpen, onClose, overlayClassName, portalTarget, preventScroll, }: ModalPrimitiveProps) => import("react").ReactPortal | undefined;

package/dist/internal-components/modal-primitive/modal-primitive.js

@@ -3,15 +3,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { useDismiss } from '../../hooks';
-import { css } from '../../styled-system/css';
-const styles = {
-    contentWrapperRef: css({
-        display: 'contents',
-    }),
-};
-export const ModalPrimitive = ({ children, closeOnEsc = true, closeOnOverlayClick = true, dismissRef, isOpen, onClose, overlayClassName, portalTarget, preventScroll = true, }) => {
+const FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+export const ModalPrimitive = ({ autoFocus = true, children, closeOnEsc = true, closeOnOverlayClick = true, dismissRef, isOpen, onClose, overlayClassName, portalTarget, preventScroll = true, }) => {
     const internalRef = useRef(null);
     const primitiveRef = dismissRef ?? internalRef;
+    const triggerRef = useRef(null);
     useDismiss({
         elementRef: primitiveRef,
         isOpen,
@@ -27,9 +23,25 @@ export const ModalPrimitive = ({ children, closeOnEsc = true, closeOnOverlayClic
             document.body.style.overflow = '';
         };
     }, [isOpen, preventScroll]);
+    useEffect(() => {
+        if (!isOpen || !autoFocus)
+            return;
+        // Remember what was focused before opening so we can restore it on close
+        triggerRef.current = document.activeElement;
+        // Focus the first focusable descendant after the portal has mounted
+        const raf = requestAnimationFrame(() => {
+            const first = primitiveRef.current?.querySelector(FOCUSABLE_SELECTOR);
+            first?.focus();
+        });
+        return () => {
+            cancelAnimationFrame(raf);
+            // Restore focus to the trigger when the modal closes
+            triggerRef.current?.focus();
+        };
+    }, [isOpen, autoFocus, primitiveRef]);
     if (isOpen) {
         const target = portalTarget ?? document.body;
-        return createPortal(_jsx("div", { className: overlayClassName, children: _jsx("div", { className: styles.contentWrapperRef, ref: primitiveRef, children: children }) }), target);
+        return createPortal(_jsx("div", { className: overlayClassName, children: _jsx("div", { ref: primitiveRef, children: children }) }), target);
     }
 };
 //# sourceMappingURL=modal-primitive.js.map

package/dist/internal-components/modal-primitive/modal-primitive.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-primitive.js","sourceRoot":"","sources":["../../../src/internal-components/modal-primitive/modal-primitive.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C,MAAM,MAAM,GAAG;IACd,iBAAiB,EAAE,GAAG,CAAC;QACtB,OAAO,EAAE,UAAU;KACnB,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC9B,QAAQ,EACR,UAAU,GAAG,IAAI,EACjB,mBAAmB,GAAG,IAAI,EAC1B,UAAU,EACV,MAAM,EACN,OAAO,EACP,gBAAgB,EAChB,YAAY,EACZ,aAAa,GAAG,IAAI,GACC,EAAE,EAAE;IACzB,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACjD,MAAM,YAAY,GAAG,UAAU,IAAI,WAAW,CAAC;IAE/C,UAAU,CAAC;QACV,UAAU,EAAE,YAAY;QACxB,MAAM;QACN,OAAO;QACP,cAAc,EAAE,mBAAmB;QACnC,YAAY,EAAE,UAAU;KACxB,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,MAAM,IAAI,aAAa,EAAE,CAAC;YAC7B,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzC,CAAC;QACD,OAAO,GAAG,EAAE;YACX,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;QACnC,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC;IAE5B,IAAI,MAAM,EAAE,CAAC;QACZ,MAAM,MAAM,GAAG,YAAY,IAAI,QAAQ,CAAC,IAAI,CAAC;QAE7C,OAAO,YAAY,CAClB,cAAK,SAAS,EAAE,gBAAgB,YAC/B,cAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,EAAE,GAAG,EAAE,YAAY,YACzD,QAAQ,GACJ,GACD,EACN,MAAM,CACN,CAAC;IACH,CAAC;AACF,CAAC,CAAC"}
+{"version":3,"file":"modal-primitive.js","sourceRoot":"","sources":["../../../src/internal-components/modal-primitive/modal-primitive.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAGrC,MAAM,kBAAkB,GACvB,0EAA0E,CAAC;AAE5E,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC9B,SAAS,GAAG,IAAI,EAChB,QAAQ,EACR,UAAU,GAAG,IAAI,EACjB,mBAAmB,GAAG,IAAI,EAC1B,UAAU,EACV,MAAM,EACN,OAAO,EACP,gBAAgB,EAChB,YAAY,EACZ,aAAa,GAAG,IAAI,GACC,EAAE,EAAE;IACzB,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACjD,MAAM,YAAY,GAAG,UAAU,IAAI,WAAW,CAAC;IAC/C,MAAM,UAAU,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IAEpD,UAAU,CAAC;QACV,UAAU,EAAE,YAAY;QACxB,MAAM;QACN,OAAO;QACP,cAAc,EAAE,mBAAmB;QACnC,YAAY,EAAE,UAAU;KACxB,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,MAAM,IAAI,aAAa,EAAE,CAAC;YAC7B,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzC,CAAC;QACD,OAAO,GAAG,EAAE;YACX,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;QACnC,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC;IAE5B,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,CAAC,MAAM,IAAI,CAAC,SAAS;YAAE,OAAO;QAElC,yEAAyE;QACzE,UAAU,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAmC,CAAC;QAElE,oEAAoE;QACpE,MAAM,GAAG,GAAG,qBAAqB,CAAC,GAAG,EAAE;YACtC,MAAM,KAAK,GAAG,YAAY,CAAC,OAAO,EAAE,aAAa,CAAc,kBAAkB,CAAC,CAAC;YACnF,KAAK,EAAE,KAAK,EAAE,CAAC;QAChB,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACX,oBAAoB,CAAC,GAAG,CAAC,CAAC;YAC1B,qDAAqD;YACrD,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QAC7B,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC;IAEtC,IAAI,MAAM,EAAE,CAAC;QACZ,MAAM,MAAM,GAAG,YAAY,IAAI,QAAQ,CAAC,IAAI,CAAC;QAC7C,OAAO,YAAY,CAClB,cAAK,SAAS,EAAE,gBAAgB,YAC/B,cAAK,GAAG,EAAE,YAAY,YAAG,QAAQ,GAAO,GACnC,EACN,MAAM,CACN,CAAC;IACH,CAAC;AACF,CAAC,CAAC"}

package/dist/internal-components/modal-primitive/modal-primitive.types.d.ts

@@ -18,4 +18,6 @@ export type ModalPrimitiveProps = {
     preventScroll?: boolean;
     /** DOM element to portal the modal into. Defaults to `document.body` */
     portalTarget?: HTMLElement;
+    /** Optionally automatically focus content @default `true` */
+    autoFocus?: boolean;
 };

package/dist/styled-system/tokens/index.js

@@ -1431,9 +1431,17 @@ const tokens = {
     "value": "var(--thread-info-dark)",
     "variable": "var(--thread-ui-colors-info-dark)"
   },
-  "colors.scrim": {
-    "value": "var(--thread-scrim)",
-    "variable": "var(--thread-ui-colors-scrim)"
+  "colors.scrim.light": {
+    "value": "var(--thread-scrim-light)",
+    "variable": "var(--thread-ui-colors-scrim-light)"
+  },
+  "colors.scrim.medium": {
+    "value": "var(--thread-scrim-medium)",
+    "variable": "var(--thread-ui-colors-scrim-medium)"
+  },
+  "colors.scrim.heavy": {
+    "value": "var(--thread-scrim-heavy)",
+    "variable": "var(--thread-ui-colors-scrim-heavy)"
   },
   "spacing.0": {
     "value": "0rem",
@@ -2247,6 +2255,14 @@ const tokens = {
     "value": "var(--thread-ui-colors-color-palette-dark)",
     "variable": "var(--thread-ui-colors-color-palette-dark)"
   },
+  "colors.colorPalette.medium": {
+    "value": "var(--thread-ui-colors-color-palette-medium)",
+    "variable": "var(--thread-ui-colors-color-palette-medium)"
+  },
+  "colors.colorPalette.heavy": {
+    "value": "var(--thread-ui-colors-color-palette-heavy)",
+    "variable": "var(--thread-ui-colors-color-palette-heavy)"
+  },
   "colors.colorPalette.subtle": {
     "value": "var(--thread-ui-colors-color-palette-subtle)",
     "variable": "var(--thread-ui-colors-color-palette-subtle)"

package/dist/styled-system/tokens/tokens.d.ts

@@ -17,7 +17,7 @@ export type SizeToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9
 
 export type AnimationToken = "spin" | "ping" | "pulse" | "bounce"
 
-export type ColorToken = "current" | "transparent" | "rose.50" | "rose.100" | "rose.200" | "rose.300" | "rose.400" | "rose.500" | "rose.600" | "rose.700" | "rose.800" | "rose.900" | "rose.950" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "pink.950" | "fuchsia.50" | "fuchsia.100" | "fuchsia.200" | "fuchsia.300" | "fuchsia.400" | "fuchsia.500" | "fuchsia.600" | "fuchsia.700" | "fuchsia.800" | "fuchsia.900" | "fuchsia.950" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "purple.950" | "violet.50" | "violet.100" | "violet.200" | "violet.300" | "violet.400" | "violet.500" | "violet.600" | "violet.700" | "violet.800" | "violet.900" | "violet.950" | "indigo.50" | "indigo.100" | "indigo.200" | "indigo.300" | "indigo.400" | "indigo.500" | "indigo.600" | "indigo.700" | "indigo.800" | "indigo.900" | "indigo.950" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "blue.950" | "sky.50" | "sky.100" | "sky.200" | "sky.300" | "sky.400" | "sky.500" | "sky.600" | "sky.700" | "sky.800" | "sky.900" | "sky.950" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "cyan.950" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "teal.950" | "emerald.50" | "emerald.100" | "emerald.200" | "emerald.300" | "emerald.400" | "emerald.500" | "emerald.600" | "emerald.700" | "emerald.800" | "emerald.900" | "emerald.950" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "green.950" | "lime.50" | "lime.100" | "lime.200" | "lime.300" | "lime.400" | "lime.500" | "lime.600" | "lime.700" | "lime.800" | "lime.900" | "lime.950" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "yellow.950" | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | "amber.950" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "orange.950" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "red.950" | "neutral.50" | "neutral.100" | "neutral.200" | "neutral.300" | "neutral.400" | "neutral.500" | "neutral.600" | "neutral.700" | "neutral.800" | "neutral.900" | "neutral.950" | "stone.50" | "stone.100" | "stone.200" | "stone.300" | "stone.400" | "stone.500" | "stone.600" | "stone.700" | "stone.800" | "stone.900" | "stone.950" | "zinc.50" | "zinc.100" | "zinc.200" | "zinc.300" | "zinc.400" | "zinc.500" | "zinc.600" | "zinc.700" | "zinc.800" | "zinc.900" | "zinc.950" | "slate.50" | "slate.100" | "slate.200" | "slate.300" | "slate.400" | "slate.500" | "slate.600" | "slate.700" | "slate.800" | "slate.900" | "slate.950" | "primary.light" | "primary.main" | "primary.dark" | "secondary.light" | "secondary.main" | "secondary.dark" | "tertiary.light" | "tertiary.main" | "tertiary.dark" | "white" | "black" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "gray.950" | "gray.light" | "gray.main" | "gray.dark" | "success.light" | "success.main" | "success.dark" | "warning.light" | "warning.main" | "warning.dark" | "error.light" | "error.main" | "error.dark" | "info.light" | "info.main" | "info.dark" | "scrim" | "canvas" | "inset" | "surface" | "elevated" | "overlay" | "active" | "hover" | "structure.subtle" | "structure.default" | "structure.strong" | "text.standard" | "text.secondary" | "text.tertiary" | "text.disabled" | "text.accent" | "text.inverted" | "colorPalette" | "colorPalette.50" | "colorPalette.100" | "colorPalette.200" | "colorPalette.300" | "colorPalette.400" | "colorPalette.500" | "colorPalette.600" | "colorPalette.700" | "colorPalette.800" | "colorPalette.900" | "colorPalette.950" | "colorPalette.light" | "colorPalette.main" | "colorPalette.dark" | "colorPalette.subtle" | "colorPalette.default" | "colorPalette.strong" | "colorPalette.standard" | "colorPalette.secondary" | "colorPalette.tertiary" | "colorPalette.disabled" | "colorPalette.accent" | "colorPalette.inverted"
+export type ColorToken = "current" | "transparent" | "rose.50" | "rose.100" | "rose.200" | "rose.300" | "rose.400" | "rose.500" | "rose.600" | "rose.700" | "rose.800" | "rose.900" | "rose.950" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "pink.950" | "fuchsia.50" | "fuchsia.100" | "fuchsia.200" | "fuchsia.300" | "fuchsia.400" | "fuchsia.500" | "fuchsia.600" | "fuchsia.700" | "fuchsia.800" | "fuchsia.900" | "fuchsia.950" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "purple.950" | "violet.50" | "violet.100" | "violet.200" | "violet.300" | "violet.400" | "violet.500" | "violet.600" | "violet.700" | "violet.800" | "violet.900" | "violet.950" | "indigo.50" | "indigo.100" | "indigo.200" | "indigo.300" | "indigo.400" | "indigo.500" | "indigo.600" | "indigo.700" | "indigo.800" | "indigo.900" | "indigo.950" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "blue.950" | "sky.50" | "sky.100" | "sky.200" | "sky.300" | "sky.400" | "sky.500" | "sky.600" | "sky.700" | "sky.800" | "sky.900" | "sky.950" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "cyan.950" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "teal.950" | "emerald.50" | "emerald.100" | "emerald.200" | "emerald.300" | "emerald.400" | "emerald.500" | "emerald.600" | "emerald.700" | "emerald.800" | "emerald.900" | "emerald.950" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "green.950" | "lime.50" | "lime.100" | "lime.200" | "lime.300" | "lime.400" | "lime.500" | "lime.600" | "lime.700" | "lime.800" | "lime.900" | "lime.950" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "yellow.950" | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | "amber.950" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "orange.950" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "red.950" | "neutral.50" | "neutral.100" | "neutral.200" | "neutral.300" | "neutral.400" | "neutral.500" | "neutral.600" | "neutral.700" | "neutral.800" | "neutral.900" | "neutral.950" | "stone.50" | "stone.100" | "stone.200" | "stone.300" | "stone.400" | "stone.500" | "stone.600" | "stone.700" | "stone.800" | "stone.900" | "stone.950" | "zinc.50" | "zinc.100" | "zinc.200" | "zinc.300" | "zinc.400" | "zinc.500" | "zinc.600" | "zinc.700" | "zinc.800" | "zinc.900" | "zinc.950" | "slate.50" | "slate.100" | "slate.200" | "slate.300" | "slate.400" | "slate.500" | "slate.600" | "slate.700" | "slate.800" | "slate.900" | "slate.950" | "primary.light" | "primary.main" | "primary.dark" | "secondary.light" | "secondary.main" | "secondary.dark" | "tertiary.light" | "tertiary.main" | "tertiary.dark" | "white" | "black" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "gray.950" | "gray.light" | "gray.main" | "gray.dark" | "success.light" | "success.main" | "success.dark" | "warning.light" | "warning.main" | "warning.dark" | "error.light" | "error.main" | "error.dark" | "info.light" | "info.main" | "info.dark" | "scrim.light" | "scrim.medium" | "scrim.heavy" | "canvas" | "inset" | "surface" | "elevated" | "overlay" | "active" | "hover" | "structure.subtle" | "structure.default" | "structure.strong" | "text.standard" | "text.secondary" | "text.tertiary" | "text.disabled" | "text.accent" | "text.inverted" | "colorPalette" | "colorPalette.50" | "colorPalette.100" | "colorPalette.200" | "colorPalette.300" | "colorPalette.400" | "colorPalette.500" | "colorPalette.600" | "colorPalette.700" | "colorPalette.800" | "colorPalette.900" | "colorPalette.950" | "colorPalette.light" | "colorPalette.main" | "colorPalette.dark" | "colorPalette.medium" | "colorPalette.heavy" | "colorPalette.subtle" | "colorPalette.default" | "colorPalette.strong" | "colorPalette.standard" | "colorPalette.secondary" | "colorPalette.tertiary" | "colorPalette.disabled" | "colorPalette.accent" | "colorPalette.inverted"
 
 export type SpacingToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-none" | "-xxs" | "-xs" | "-sm" | "-md" | "-lg" | "-xl" | "-xxl"