thread-ui 0.16.4 → 0.17.0

package/dist/hooks/use-media-query/use-media-query.js

@@ -0,0 +1,22 @@
+'use client';
+import { useState, useEffect } from 'react';
+/**
+ * Returns whether `query` currently matches, updating as the viewport changes.
+ * Initializes as `false` on the server and before mount to avoid hydration mismatches.
+ *
+ * @example
+ * const isWide = useMediaQuery('(min-width: 1024px)');
+ */
+export const useMediaQuery = (query) => {
+    const [matches, setMatches] = useState(false); // Safe initial state
+    useEffect(() => {
+        const mediaQueryList = window.matchMedia(query);
+        const handleChange = () => setMatches(mediaQueryList.matches);
+        // Set initial match after mount
+        handleChange();
+        mediaQueryList.addEventListener('change', handleChange);
+        return () => mediaQueryList.removeEventListener('change', handleChange);
+    }, [query]);
+    return matches;
+};
+//# sourceMappingURL=use-media-query.js.map

package/dist/hooks/use-media-query/use-media-query.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-query.js","sourceRoot":"","sources":["../../../src/hooks/use-media-query/use-media-query.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAa,EAAE,EAAE;IAC9C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,qBAAqB;IAEpE,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,cAAc,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QAChD,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;QAE9D,gCAAgC;QAChC,YAAY,EAAE,CAAC;QAEf,cAAc,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QACxD,OAAO,GAAG,EAAE,CAAC,cAAc,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;IACzE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,OAAO,CAAC;AAChB,CAAC,CAAC"}

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

@@ -1,5 +1,6 @@
 /**
- * Returns the current `window.location.pathname` and updates on `popstate` events.
+ * Returns the current `window.location.pathname`, updating on back/forward (`popstate`)
+ * and client-side navigations (`history.pushState` / `replaceState`).
  * Initializes as an empty string on the server to avoid hydration mismatches.
  *
  * @example

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

@@ -1,7 +1,26 @@
 'use client';
 import { useState, useEffect } from 'react';
+const LOCATION_CHANGE_EVENT = 'thread:locationchange';
 /**
- * Returns the current `window.location.pathname` and updates on `popstate` events.
+ * Client-side routers (Next.js, React Router, etc.) navigate with `history.pushState` /
+ * `replaceState`, which don't fire `popstate`. Wrap them once so we can hear those navigations too.
+ */
+const patchHistory = () => {
+    const history = window.history;
+    if (history.__threadPatched)
+        return;
+    history.__threadPatched = true;
+    for (const method of ['pushState', 'replaceState']) {
+        const original = history[method].bind(history);
+        history[method] = (...args) => {
+            original(...args);
+            window.dispatchEvent(new Event(LOCATION_CHANGE_EVENT));
+        };
+    }
+};
+/**
+ * Returns the current `window.location.pathname`, updating on back/forward (`popstate`)
+ * and client-side navigations (`history.pushState` / `replaceState`).
  * Initializes as an empty string on the server to avoid hydration mismatches.
  *
  * @example
@@ -10,13 +29,18 @@ import { useState, useEffect } from 'react';
 export const usePathname = () => {
     const [pathname, setPathname] = useState(''); // Safe initial state
     useEffect(() => {
-        // Set initial pathname after mount
-        setPathname(window.location.pathname);
+        patchHistory();
         const handleLocationChange = () => {
             setPathname(window.location.pathname);
         };
+        // Set initial pathname after mount
+        handleLocationChange();
         window.addEventListener('popstate', handleLocationChange);
-        return () => window.removeEventListener('popstate', handleLocationChange);
+        window.addEventListener(LOCATION_CHANGE_EVENT, handleLocationChange);
+        return () => {
+            window.removeEventListener('popstate', handleLocationChange);
+            window.removeEventListener(LOCATION_CHANGE_EVENT, handleLocationChange);
+        };
     }, []);
     return pathname;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"use-pathname.js","sourceRoot":"","sources":["../../../src/hooks/use-pathname/use-pathname.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE;IAC/B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,qBAAqB;IAEnE,SAAS,CAAC,GAAG,EAAE;QACd,mCAAmC;QACnC,WAAW,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAEtC,MAAM,oBAAoB,GAAG,GAAG,EAAE;YACjC,WAAW,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACvC,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,UAAU,EAAE,oBAAoB,CAAC,CAAC;QAC1D,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,UAAU,EAAE,oBAAoB,CAAC,CAAC;IAC3E,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,QAAQ,CAAC;AACjB,CAAC,CAAC"}
+{"version":3,"file":"use-pathname.js","sourceRoot":"","sources":["../../../src/hooks/use-pathname/use-pathname.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,qBAAqB,GAAG,uBAAuB,CAAC;AAEtD;;;GAGG;AACH,MAAM,YAAY,GAAG,GAAG,EAAE;IACzB,MAAM,OAAO,GAAG,MAAM,CAAC,OAAkD,CAAC;IAC1E,IAAI,OAAO,CAAC,eAAe;QAAE,OAAO;IACpC,OAAO,CAAC,eAAe,GAAG,IAAI,CAAC;IAE/B,KAAK,MAAM,MAAM,IAAI,CAAC,WAAW,EAAE,cAAc,CAAU,EAAE,CAAC;QAC7D,MAAM,QAAQ,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC/C,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,IAAsC,EAAE,EAAE;YAC/D,QAAQ,CAAC,GAAG,IAAI,CAAC,CAAC;YAClB,MAAM,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC;QACxD,CAAC,CAAC;IACH,CAAC;AACF,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE;IAC/B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,qBAAqB;IAEnE,SAAS,CAAC,GAAG,EAAE;QACd,YAAY,EAAE,CAAC;QAEf,MAAM,oBAAoB,GAAG,GAAG,EAAE;YACjC,WAAW,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACvC,CAAC,CAAC;QAEF,mCAAmC;QACnC,oBAAoB,EAAE,CAAC;QAEvB,MAAM,CAAC,gBAAgB,CAAC,UAAU,EAAE,oBAAoB,CAAC,CAAC;QAC1D,MAAM,CAAC,gBAAgB,CAAC,qBAAqB,EAAE,oBAAoB,CAAC,CAAC;QACrE,OAAO,GAAG,EAAE;YACX,MAAM,CAAC,mBAAmB,CAAC,UAAU,EAAE,oBAAoB,CAAC,CAAC;YAC7D,MAAM,CAAC,mBAAmB,CAAC,qBAAqB,EAAE,oBAAoB,CAAC,CAAC;QACzE,CAAC,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,QAAQ,CAAC;AACjB,CAAC,CAAC"}

package/dist/internal/components/conditional-wrapper/conditional-wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conditional-wrapper.js","sourceRoot":"","sources":["../../../../src/internal/components/conditional-wrapper/conditional-wrapper.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAClC,QAAQ,EACR,OAAO,EACP,YAAY,GAAG,EAAE,EACjB,eAAe,GACU,EAAE,EAAE;IAC7B,MAAM,QAAQ,GAAG,OAAO,IAAI,eAAe,EAAE,OAAO,IAAI,UAAU,CAAC;IACnE,MAAM,aAAa,GAAG,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,eAAe,EAAE,YAAY,IAAI,EAAE,CAAC,CAAC;IAErF,IAAI,QAAQ,KAAK,UAAU;QAAE,OAAO,4BAAG,QAAQ,GAAI,CAAC;IACpD,IAAI,QAAQ,KAAK,KAAK;QAAE,OAAO,iBAAS,aAAa,YAAG,QAAQ,GAAO,CAAC;IACxE,MAAM,OAAO,GAAG,QAAQ,CAAC;IACzB,OAAO,KAAC,OAAO,OAAM,aAAqB,YAAG,QAAQ,GAAW,CAAC;AAClE,CAAC,CAAC"}

package/dist/internal/components/conditional-wrapper/conditional-wrapper.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conditional-wrapper.types.js","sourceRoot":"","sources":["../../../../src/internal/components/conditional-wrapper/conditional-wrapper.types.ts"],"names":[],"mappings":""}

package/dist/internal/components/conditional-wrapper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/internal/components/conditional-wrapper/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/{internal-components → internal/components}/content-header/content-header.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { css, cx } from '../../styled-system/css';
-import { H2, Text } from '../../components';
+import { css, cx } from '../../../styled-system/css';
+import { H2, Text } from '../../../components';
 const styles = {
     defaultContainer: css({
         marginBottom: '2',
@@ -26,7 +26,7 @@ const styles = {
  * Returns `null` when neither `title` nor `secondaryContent` is provided.
  */
 export const ContentHeader = ({ title, subtitle, secondaryContent, className, description, }) => {
-    const titleDisplay = typeof title === 'string' ? (_jsx(H2, { subtitle: subtitle, inline: true, children: title })) : (title);
+    const titleDisplay = typeof title === 'string' ? (_jsx(H2, { subtitle: subtitle, marginBottom: false, children: title })) : (title);
     if (typeof title !== 'string' && subtitle) {
         console.warn('Thread UI - ContentHeader: `subtitle` prop is ignored when `title` is a ReactElement. ' +
             'Use the `subtitle` prop on your heading component directly.');

package/dist/internal/components/content-header/content-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-header.js","sourceRoot":"","sources":["../../../../src/internal/components/content-header/content-header.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AAE9C,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAExC,MAAM,MAAM,GAAG;IACd,gBAAgB,EAAE,GAAG,CAAC;QACrB,YAAY,EAAE,GAAG;KACjB,CAAC;IACF,MAAM,EAAE,GAAG,CAAC;QACX,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,KAAK;QACpB,cAAc,EAAE,eAAe;QAC/B,UAAU,EAAE,QAAQ;KACpB,CAAC;IACF,gBAAgB,EAAE,GAAG,CAAC;QACrB,UAAU,EAAE,MAAM;KAClB,CAAC;CACF,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,SAAS,EACT,WAAW,GACS,EAAE,EAAE;IACxB,MAAM,YAAY,GACjB,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC3B,KAAC,EAAE,IAAC,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,YACzC,KAAK,GACF,CACL,CAAC,CAAC,CAAC,CACH,KAAK,CACL,CAAC;IAEH,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,QAAQ,EAAE,CAAC;QAC3C,OAAO,CAAC,IAAI,CACX,wFAAwF;YACvF,6DAA6D,CAC9D,CAAC;IACH,CAAC;IAED,IAAI,CAAC,KAAK,IAAI,CAAC,gBAAgB,IAAI,CAAC,WAAW,EAAE,CAAC;QACjD,OAAO,IAAI,CAAC;IACb,CAAC;IAED,OAAO,CACN,eAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,gBAAgB,EAAE,SAAS,CAAC,aACpD,CAAC,KAAK,IAAI,gBAAgB,CAAC,IAAI,CAC/B,eAAK,SAAS,EAAE,MAAM,CAAC,MAAM,aAC3B,KAAK,IAAI,YAAY,EACrB,gBAAgB,IAAI,CACpB,cAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,YAAG,gBAAgB,GAAO,CACjE,IACI,CACN,EACA,WAAW,IAAI,KAAC,IAAI,cAAE,WAAW,GAAQ,IACrC,CACN,CAAC;AACH,CAAC,CAAC"}

package/dist/{internal-components → internal/components}/content-header/content-header.types.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement, ReactNode } from 'react';
-import { Title, H1, H2, H3 } from '../../components/typography';
-import { TypographyHeadingProps } from '../../components/typography/heading/heading.types';
-import { Prettify } from '../../types';
+import { Title, H1, H2, H3 } from '../../../components/typography';
+import { TypographyHeadingProps } from '../../../components/typography/heading/heading.types';
+import { Prettify } from '../../../types';
 type HeadingElement = ReactElement<TypographyHeadingProps, typeof Title | typeof H1 | typeof H2 | typeof H3>;
 /** Accepted title values: a plain string or a Thread UI heading element */
 type TitleType = string | HeadingElement;

package/dist/internal/components/content-header/content-header.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-header.types.js","sourceRoot":"","sources":["../../../../src/internal/components/content-header/content-header.types.ts"],"names":[],"mappings":""}

package/dist/internal/components/content-header/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/internal/components/content-header/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/{internal-components → internal/components}/dynamic-icon/dynamic-icon.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Icon } from '../../components';
+import { Icon } from '../../../components';
 const emoji = (code) => {
     if (code.codePointAt(0) > 255)
         return code;

package/dist/internal/components/dynamic-icon/dynamic-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-icon.js","sourceRoot":"","sources":["../../../../src/internal/components/dynamic-icon/dynamic-icon.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,MAAM,KAAK,GAAG,CAAC,IAAY,EAAE,EAAE;IAC9B,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAE,GAAG,GAAG;QAAE,OAAO,IAAI,CAAC;IAC5C,OAAO,MAAM,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;AACnE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,GAAG,EAAE,EAAoB,EAAE,EAAE;IACpE,IAAI,CAAC,IAAI;QAAE,OAAO;IAElB,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;IACzC,CAAC;SAAM,CAAC;QACP,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YAC3B,OAAO,CACN,eAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,YACrD,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,GACZ,CACP,CAAC;QACH,CAAC;QACD,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;YAC9B,OAAO,CACN,cACC,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,IAAI,EACX,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,EACtB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACd,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;gBACxC,CAAC,GACA,CACF,CAAC;QACH,CAAC;QACD,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM;YAAE,OAAO;IAClC,CAAC;AACF,CAAC,CAAC"}

package/dist/internal/components/dynamic-icon/dynamic-icon.types.d.ts

@@ -0,0 +1,6 @@
+import { IconNames, IconSizes } from '../../../components';
+import { NotionIcon } from '../../../types';
+export type DynamicIconProps = {
+    icon?: IconNames | NotionIcon;
+    size?: IconSizes;
+};

package/dist/internal/components/dynamic-icon/dynamic-icon.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-icon.types.js","sourceRoot":"","sources":["../../../../src/internal/components/dynamic-icon/dynamic-icon.types.ts"],"names":[],"mappings":""}

package/dist/internal/components/dynamic-icon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/internal/components/dynamic-icon/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/internal/components/image/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/internal/components/image/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/{internal-components → internal/components}/image/is-html-image-props.d.ts

@@ -1,2 +1,2 @@
-import { HtmlImageProps } from '../../types';
+import { HtmlImageProps } from '../../../types';
 export declare const isHtmlImageProps: (value: any) => value is HtmlImageProps;

package/dist/internal/components/image/is-html-image-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-html-image-props.js","sourceRoot":"","sources":["../../../../src/internal/components/image/is-html-image-props.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAU,EAA2B,EAAE;IACvE,OAAO,CACN,OAAO,KAAK,KAAK,QAAQ;QACzB,KAAK,KAAK,IAAI;QACd,KAAK,IAAI,KAAK;QACd,OAAO,KAAK,CAAC,GAAG,KAAK,QAAQ;QAC7B,CAAC,CAAC,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,OAAO,KAAK,CAAC,GAAG,KAAK,QAAQ,CAAC,CACpD,CAAC;AACH,CAAC,CAAC"}

package/dist/{internal-components → internal/components}/image/render-image.d.ts

@@ -1,3 +1,3 @@
 import { CSSProperties, ReactElement } from 'react';
-import { ImageProps } from '../../types';
+import { ImageProps } from '../../../types';
 export declare const renderImage: (imageInput: ImageProps, styles?: CSSProperties, className?: string) => ReactElement;

package/dist/{internal-components → internal/components}/image/render-image.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { isValidElement } from 'react';
 import { isHtmlImageProps } from './is-html-image-props';
-import { cx } from '../../styled-system/css'; // Add this import
+import { cx } from '../../../styled-system/css'; // Add this import
 export const renderImage = (imageInput, styles, className) => {
     if (isValidElement(imageInput)) {
         const prevProps = imageInput.props;

package/dist/internal/components/image/render-image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-image.js","sourceRoot":"","sources":["../../../../src/internal/components/image/render-image.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAiB,cAAc,EAAgB,MAAM,OAAO,CAAC;AAE3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC,CAAC,kBAAkB;AAE5D,MAAM,CAAC,MAAM,WAAW,GAAG,CAC1B,UAAsB,EACtB,MAAsB,EACtB,SAAkB,EACH,EAAE;IACjB,IAAI,cAAc,CAAC,UAAU,CAAC,EAAE,CAAC;QAChC,MAAM,SAAS,GAAG,UAAU,CAAC,KAA0C,CAAC;QACxE,MAAM,QAAQ,GAAsC;YACnD,GAAG,SAAS;YACZ,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC;YAC7C,KAAK,EAAE;gBACN,GAAG,SAAS,CAAC,KAAK;gBAClB,GAAG,MAAM;aACT;SACD,CAAC;QACF,OAAO,KAAK,CAAC,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IACjD,CAAC;IAED,IAAI,gBAAgB,CAAC,UAAU,CAAC,EAAE,CAAC;QAClC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,SAAS,EAAE,GAAG,UAAU,CAAC;QACtF,OAAO,CACN,cACC,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,EACtC,KAAK,EAAE,EAAE,GAAG,SAAS,CAAC,MAAM,EAAE,GAAG,MAAM,EAAE,KACrC,SAAS,GACZ,CACF,CAAC;IACH,CAAC;IAED,OAAO,CAAC,IAAI,CAAC,6CAA6C,CAAC,CAAC;IAC5D,OAAO,cAAK,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,eAAe,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAI,CAAC;AACvE,CAAC,CAAC"}

package/dist/{internal-components → internal/components}/index.d.ts

@@ -4,5 +4,6 @@ export * from './dynamic-icon';
 export * from './image';
 export * from './link';
 export * from './modal-primitive';
+export * from './nav-list-item';
 export * from './optional-icon-button';
 export * from './surface';

package/dist/{internal-components → internal/components}/index.js

@@ -5,6 +5,7 @@ export * from './dynamic-icon';
 export * from './image';
 export * from './link';
 export * from './modal-primitive';
+export * from './nav-list-item';
 export * from './optional-icon-button';
 export * from './surface';
 //# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/internal/components/index.ts"],"names":[],"mappings":"AAAA,6BAA6B;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,WAAW,CAAC"}

package/dist/internal/components/link/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/internal/components/link/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC"}

package/dist/{internal-components → internal/components}/link/link.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useLinkComponent } from '../../foundation';
+import { useLinkComponent } from '../../../foundation';
 export const Link = ({ children, ...anchorProps }) => {
     const LinkComponent = useLinkComponent();
     return _jsx(LinkComponent, { ...anchorProps, children: children });

package/dist/internal/components/link/link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.js","sourceRoot":"","sources":["../../../../src/internal/components/link/link.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEhD,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAa,EAAE,EAAE;IAC/D,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;IAEzC,OAAO,KAAC,aAAa,OAAK,WAAW,YAAG,QAAQ,GAAiB,CAAC;AACnE,CAAC,CAAC"}

package/dist/internal/components/link/link.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.types.js","sourceRoot":"","sources":["../../../../src/internal/components/link/link.types.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/internal/components/modal-primitive/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/{internal-components → internal/components}/modal-primitive/modal-primitive.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
-import { useDismiss } from '../../hooks';
+import { useDismiss } from '../../../hooks';
 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);

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

@@ -0,0 +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;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.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-primitive.types.js","sourceRoot":"","sources":["../../../../src/internal/components/modal-primitive/modal-primitive.types.ts"],"names":[],"mappings":""}

package/dist/internal/components/nav-list-item/index.d.ts

@@ -0,0 +1,2 @@
+export type { NavListItemActiveColor, NavListItemCollapse, NavListItemProps, } from './nav-list-item.types';
+export { NavItem } from './nav-list-item';

package/dist/internal/components/nav-list-item/index.js

@@ -0,0 +1,2 @@
+export { NavItem } from './nav-list-item';
+//# sourceMappingURL=index.js.map

package/dist/internal/components/nav-list-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/internal/components/nav-list-item/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/internal/components/nav-list-item/nav-list-item.d.ts

@@ -0,0 +1,9 @@
+import { NavListItemProps } from './nav-list-item.types';
+/**
+ * Selectable navigation row shared by `SideNav` and `SplitView`: rest, hover, active fill,
+ * and a darker fill when hovering the active item.
+ *
+ * @example
+ * <NavItem href="/inbox" icon="Tray" active>Inbox</NavItem>
+ */
+export declare const NavItem: ({ children, active, icon, href, onClick, activeColor, shape, collapse, }: NavListItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/internal/components/nav-list-item/nav-list-item.js

@@ -0,0 +1,105 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from '../../../styled-system/css';
+import { Icon } from '../../../components/ui';
+import { Link } from '../link';
+const styles = {
+    item: cva({
+        base: {
+            position: 'relative',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '2',
+            width: 'calc(100% - token(spacing.4))',
+            marginX: '2',
+            marginY: '0.5',
+            paddingX: '3',
+            paddingY: '2',
+            border: 'none',
+            backgroundColor: 'transparent',
+            color: 'text.secondary',
+            fontSize: 'body.sm',
+            textAlign: 'left',
+            textDecoration: 'none',
+            cursor: 'pointer',
+            transition: 'background-color 150ms ease-in-out, color 150ms ease-in-out',
+            '&:not([data-active]):hover': { backgroundColor: 'hover', color: 'text.standard' },
+            // Colors set `--nav-item-fill` (and `--nav-item-text` when inverted text won't do),
+            // so hover-while-active darkens every fill the same way
+            '&[data-active]': {
+                backgroundColor: 'var(--nav-item-fill)',
+                color: 'var(--nav-item-text, token(colors.text.inverted))',
+            },
+            '&[data-active]:hover': {
+                backgroundColor: 'color-mix(in srgb, var(--nav-item-fill), black 12%)',
+            },
+            _focusVisible: {
+                outline: '2px solid',
+                outlineColor: 'primary.main',
+                outlineOffset: '-2px',
+            },
+        },
+        variants: {
+            shape: {
+                pill: { borderRadius: 'full' },
+                row: { borderRadius: 'md' },
+            },
+            activeColor: {
+                primary: { '--nav-item-fill': 'token(colors.primary.main)' },
+                secondary: { '--nav-item-fill': 'token(colors.secondary.main)' },
+                tertiary: { '--nav-item-fill': 'token(colors.tertiary.main)' },
+                // Inverted text turns dark in dark mode, which would vanish on black
+                black: {
+                    '--nav-item-fill': 'token(colors.black)',
+                    '--nav-item-text': 'token(colors.white)',
+                },
+                gray: { '--nav-item-fill': 'token(colors.gray.main)' },
+                success: { '--nav-item-fill': 'token(colors.success.main)' },
+                error: { '--nav-item-fill': 'token(colors.error.main)' },
+                warning: { '--nav-item-fill': 'token(colors.warning.main)' },
+                info: { '--nav-item-fill': 'token(colors.info.main)' },
+                text: { '--nav-item-fill': 'token(colors.text.standard)' },
+                neutral: {
+                    '--nav-item-fill': 'token(colors.active)',
+                    '--nav-item-text': 'token(colors.text.standard)',
+                },
+            },
+            collapse: {
+                never: {},
+                responsive: {
+                    width: { base: 'auto', lg: 'calc(100% - token(spacing.4))' },
+                    marginX: { base: 'auto', lg: '2' },
+                    paddingX: { base: '2', lg: '3' },
+                },
+                always: { width: 'auto', marginX: 'auto', paddingX: '2' },
+            },
+        },
+    }),
+    label: cva({
+        base: { flex: 1, minWidth: 0 },
+        variants: {
+            // Visually hidden rather than removed, so collapsed links keep their accessible name
+            collapse: {
+                never: {},
+                responsive: { srOnly: { base: true, lg: false } },
+                always: { srOnly: true },
+            },
+        },
+    }),
+};
+/**
+ * Selectable navigation row shared by `SideNav` and `SplitView`: rest, hover, active fill,
+ * and a darker fill when hovering the active item.
+ *
+ * @example
+ * <NavItem href="/inbox" icon="Tray" active>Inbox</NavItem>
+ */
+export const NavItem = ({ children, active = false, icon, href, onClick, activeColor = 'primary', shape = 'pill', collapse = 'never', }) => {
+    const className = styles.item({ shape, activeColor, collapse });
+    const content = (_jsxs(_Fragment, { children: [icon && _jsx(Icon, { name: icon, size: 16, filled: active }), _jsx("span", { className: styles.label({ collapse }), children: children })] }));
+    if (href) {
+        return (_jsx(Link, { href: href, onClick: onClick, className: className, "data-active": active || undefined, "aria-current": active ? 'page' : undefined, children: content }));
+    }
+    return (_jsx("button", { type: "button", onClick: onClick, className: className, "data-active": active || undefined, "aria-current": active || undefined, children: content }));
+};
+//# sourceMappingURL=nav-list-item.js.map

package/dist/internal/components/nav-list-item/nav-list-item.js.map

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

package/dist/internal/components/nav-list-item/nav-list-item.types.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { IconNames } from '../../../components/ui';
+import { UtilityColorOptions } from '../../../types';
+/** Fill of the active item. `neutral` uses the theme's `active` highlight */
+export type NavListItemActiveColor = UtilityColorOptions | 'neutral';
+export type NavListItemCollapse = 'never' | 'responsive' | 'always';
+export type NavListItemProps = {
+    /** Item label */
+    children: ReactNode;
+    /** Shows the active fill @default `false` */
+    active?: boolean;
+    /** Leading icon, filled while active */
+    icon?: IconNames;
+    /** Renders the item as a link */
+    href?: string;
+    /** Click handler */
+    onClick?: () => void;
+    /** Active fill color @default `'primary'` */
+    activeColor?: NavListItemActiveColor;
+    /** `pill` for navigation, `row` for list selections @default `'pill'` */
+    shape?: 'pill' | 'row';
+    /** When to collapse to an icon-only circle; `responsive` collapses below `lg` @default `'never'` */
+    collapse?: NavListItemCollapse;
+};

package/dist/internal/components/nav-list-item/nav-list-item.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=nav-list-item.types.js.map

package/dist/internal/components/nav-list-item/nav-list-item.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-list-item.types.js","sourceRoot":"","sources":["../../../../src/internal/components/nav-list-item/nav-list-item.types.ts"],"names":[],"mappings":""}

package/dist/internal/components/optional-icon-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/internal/components/optional-icon-button/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/{internal-components → internal/components}/optional-icon-button/optional-icon-button.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Button, IconButton } from '../../components';
+import { Button, IconButton } from '../../../components';
 import { ConditionalWrapper } from '../conditional-wrapper';
 export const OptionalIconButton = (props) => {
     const { name, children, ...buttonProps } = props;

package/dist/internal/components/optional-icon-button/optional-icon-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"optional-icon-button.js","sourceRoot":"","sources":["../../../../src/internal/components/optional-icon-button/optional-icon-button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAG5D,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAE,EAAE;IACpE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAE,GAAG,KAAK,CAAC;IAEjD,MAAM,eAAe,GAAG,IAAI,CAAC,CAAC,CAAC,EAAE,GAAG,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IAEpE,OAAO,CACN,KAAC,kBAAkB,IAClB,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EACjD,YAAY,EAAE,eAAe,EAC7B,eAAe,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,YAE9D,QAAQ,GACW,CACrB,CAAC;AACH,CAAC,CAAC"}

package/dist/{internal-components → internal/components}/optional-icon-button/optional-icon-button.types.d.ts

@@ -1,4 +1,4 @@
-import { IconButtonProps } from '../../components';
+import { IconButtonProps } from '../../../components';
 export type OptionalIconButtonProps = Omit<IconButtonProps, 'name'> & {
     name?: IconButtonProps['name'];
 };

package/dist/internal/components/optional-icon-button/optional-icon-button.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"optional-icon-button.types.js","sourceRoot":"","sources":["../../../../src/internal/components/optional-icon-button/optional-icon-button.types.ts"],"names":[],"mappings":""}

package/dist/internal/components/surface/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/internal/components/surface/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/dist/{internal-components → internal/components}/surface/surface.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../../styled-system/css';
-import { getResolvedLayerValues, getSurfaceStyles } from '../../utils';
+import { cx } from '../../../styled-system/css';
+import { getResolvedLayerValues, getSurfaceStyles } from '../../../utils';
 export const Surface = (props) => {
     const { as, surfaceConfig, className, children, ...rest } = props;
     const { layer = 'surface', bg, shadow, structure } = surfaceConfig ?? {};

package/dist/internal/components/surface/surface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"surface.js","sourceRoot":"","sources":["../../../../src/internal/components/surface/surface.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AACzC,OAAO,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAGnE,MAAM,CAAC,MAAM,OAAO,GAAG,CAAgC,KAAsB,EAAE,EAAE;IAChF,MAAM,EAAE,EAAE,EAAE,aAAa,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAElE,MAAM,EAAE,KAAK,GAAG,SAAS,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,aAAa,IAAI,EAAE,CAAC;IACzE,MAAM,SAAS,GAAG,CAAC,EAAE,IAAI,KAAK,CAAgB,CAAC;IAC/C,MAAM,WAAW,GAAG,sBAAsB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;IAE7E,OAAO,CACN,KAAC,SAAS,IAAC,SAAS,EAAE,EAAE,CAAC,gBAAgB,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC,KAAM,IAAI,YAC1E,QAAQ,GACE,CACZ,CAAC;AACH,CAAC,CAAC"}

package/dist/{internal-components → internal/components}/surface/surface.types.d.ts

@@ -1,6 +1,6 @@
 import { ElementType, ComponentPropsWithoutRef } from 'react';
-import { SurfaceConfigOverrides } from '../../theme/theme-surface-system';
-import { Prettify, SurfaceLayerOptions } from '../../types';
+import { SurfaceConfigOverrides } from '../../../theme/theme-surface-system';
+import { Prettify, SurfaceLayerOptions } from '../../../types';
 export type SurfaceInput = Prettify<SurfaceConfigOverrides & {
     layer?: SurfaceLayerOptions | 'none';
 }>;

package/dist/internal/components/surface/surface.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"surface.types.js","sourceRoot":"","sources":["../../../../src/internal/components/surface/surface.types.ts"],"names":[],"mappings":""}

package/dist/internal/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useLatestRef } from './use-latest-ref';
+export { useControllableState } from './use-controllable-state';

package/dist/internal/hooks/index.js

@@ -0,0 +1,3 @@
+export { useLatestRef } from './use-latest-ref';
+export { useControllableState } from './use-controllable-state';
+//# sourceMappingURL=index.js.map

package/dist/internal/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/internal/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/internal/hooks/use-controllable-state.d.ts

@@ -0,0 +1,22 @@
+import { RefObject } from 'react';
+import type { InputElement } from '../../components/data-input/shared/input-props.types';
+/** Props for `useControllableState`. */
+type UseControllableStateProps<T> = {
+    /** Controlled value; the hook is uncontrolled while this is `undefined` */
+    value?: T;
+    /** Initial value for uncontrolled use; restored when the parent form resets */
+    defaultValue: T;
+    /** Called with the next value on every change */
+    onChange?: (value: T) => void | Promise<void>;
+    /** Control inside the form whose `reset` event restores `defaultValue` */
+    elementRef?: RefObject<InputElement | null>;
+};
+/**
+ * Value state that works controlled or uncontrolled.
+ * Internal state only backs the uncontrolled case, and a native form `reset` restores `defaultValue`.
+ *
+ * @example
+ * const [selected, setSelected] = useControllableState({ value, defaultValue: [], onChange, elementRef });
+ */
+export declare const useControllableState: <T>({ value, defaultValue, onChange, elementRef, }: UseControllableStateProps<T>) => readonly [T, (next: T) => void];
+export {};

package/dist/internal/hooks/use-controllable-state.js

@@ -0,0 +1,34 @@
+'use client';
+import { useEffect, useRef, useState } from 'react';
+/**
+ * Value state that works controlled or uncontrolled.
+ * Internal state only backs the uncontrolled case, and a native form `reset` restores `defaultValue`.
+ *
+ * @example
+ * const [selected, setSelected] = useControllableState({ value, defaultValue: [], onChange, elementRef });
+ */
+export const useControllableState = ({ value, defaultValue, onChange, elementRef, }) => {
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const current = isControlled ? value : internalValue;
+    // Latest default, so a reset restores what the parent passes now rather than on mount
+    const defaultValueRef = useRef(defaultValue);
+    defaultValueRef.current = defaultValue;
+    const setValue = (next) => {
+        if (!isControlled) {
+            setInternalValue(next);
+        }
+        onChange?.(next);
+    };
+    // Mirror native form reset; a controlled parent owns its own reset
+    useEffect(() => {
+        const form = elementRef?.current?.form;
+        if (!form || isControlled)
+            return;
+        const handleReset = () => setInternalValue(defaultValueRef.current);
+        form.addEventListener('reset', handleReset);
+        return () => form.removeEventListener('reset', handleReset);
+    }, [elementRef, isControlled]);
+    return [current, setValue];
+};
+//# sourceMappingURL=use-controllable-state.js.map

package/dist/internal/hooks/use-controllable-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-controllable-state.js","sourceRoot":"","sources":["../../../src/internal/hooks/use-controllable-state.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAa,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAe/D;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAI,EACvC,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,UAAU,GACoB,EAAE,EAAE;IAClC,MAAM,YAAY,GAAG,KAAK,KAAK,SAAS,CAAC;IACzC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IACjE,MAAM,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC;IAErD,sFAAsF;IACtF,MAAM,eAAe,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;IAC7C,eAAe,CAAC,OAAO,GAAG,YAAY,CAAC;IAEvC,MAAM,QAAQ,GAAG,CAAC,IAAO,EAAE,EAAE;QAC5B,IAAI,CAAC,YAAY,EAAE,CAAC;YACnB,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACxB,CAAC;QACD,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC,CAAC;IAEF,mEAAmE;IACnE,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,IAAI,GAAG,UAAU,EAAE,OAAO,EAAE,IAAI,CAAC;QACvC,IAAI,CAAC,IAAI,IAAI,YAAY;YAAE,OAAO;QAElC,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,gBAAgB,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;QACpE,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAC5C,OAAO,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;IAC7D,CAAC,EAAE,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC,CAAC;IAE/B,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAU,CAAC;AACrC,CAAC,CAAC"}