thread-ui 0.16.5 → 0.17.0

package/dist/components/layouts/split-view/components/split-view-column.js

@@ -0,0 +1,204 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { css, cva } from '../../../../styled-system/css';
+import { useDismiss } from '../../../../hooks';
+import { SplitViewColumnProvider, useSplitView } from '../split-view-context';
+import { SplitViewHeader } from './split-view-header';
+// Surface layer card, shared by the detail and the joined list + detail
+const cardStyles = {
+    borderWidth: '1px',
+    borderColor: 'structure.subtle',
+    borderRadius: 'lg',
+    boxShadow: 'sm',
+};
+const styles = {
+    column: cva({
+        base: {
+            display: 'flex',
+            flexDirection: 'column',
+            minWidth: 0,
+            overflowY: 'auto',
+            backgroundColor: 'surface',
+            outline: 'none',
+            transitionProperty: 'transform, margin, visibility',
+            transitionDuration: '300ms',
+            transitionTimingFunction: 'ease-in-out',
+            _motionReduce: { transition: 'none' },
+            // Compact: columns stack; earlier ones sit behind, later ones wait offscreen
+            mdDown: {
+                position: 'absolute',
+                inset: 0,
+                '&[data-position=before]': { transform: 'translateX(-30%)', zIndex: 0 },
+                '&[data-position=current]': { transform: 'translateX(0)', zIndex: 1 },
+                '&[data-position=after]': { transform: 'translateX(100%)', zIndex: 2 },
+            },
+        },
+        variants: {
+            column: {
+                // Elevated card in both variants; rises to the overlay layer when it covers content
+                sidebar: {
+                    md: {
+                        flexShrink: 0,
+                        width: 'var(--split-view-sidebar-width)',
+                        backgroundColor: 'elevated',
+                        borderWidth: '1px',
+                        borderColor: 'structure.subtle',
+                        borderRadius: 'lg',
+                        boxShadow: 'md',
+                    },
+                    // Medium: overlay drawer, open only once mounted in medium mode
+                    mdToLg: {
+                        position: 'absolute',
+                        top: 'var(--split-view-gap)',
+                        bottom: 'var(--split-view-gap)',
+                        left: 'var(--split-view-gap)',
+                        zIndex: 4,
+                        backgroundColor: 'overlay',
+                        borderColor: 'transparent',
+                        boxShadow: 'lg',
+                        transform: 'translateX(calc(-100% - 2 * var(--split-view-gap)))',
+                        visibility: 'hidden',
+                        '&[data-overlay=open]': {
+                            transform: 'translateX(0)',
+                            visibility: 'visible',
+                        },
+                    },
+                    // Wide: docked, slides out of flow (with its gap) when closed
+                    lg: {
+                        // Hidden once slid out, so its shadow can't show at the edge
+                        _closed: {
+                            visibility: 'hidden',
+                            marginLeft: 'calc(-1 * (var(--split-view-sidebar-width) + var(--split-view-gap)))',
+                        },
+                    },
+                },
+                list: {
+                    md: { flexShrink: 0, width: 'var(--split-view-list-width)' },
+                },
+                detail: {
+                    md: { flex: 1 },
+                },
+            },
+            variant: {
+                floating: {},
+                layered: {},
+            },
+            // Whether the detail shares its card with the list
+            joined: {
+                true: {},
+                false: {},
+            },
+        },
+        compoundVariants: [
+            // Floating: list and detail join into one surface card beside the sidebar
+            {
+                column: 'sidebar',
+                variant: 'floating',
+                css: { lg: { marginRight: 'var(--split-view-gap)' } },
+            },
+            {
+                column: 'list',
+                variant: 'floating',
+                css: {
+                    md: {
+                        ...cardStyles,
+                        borderTopRightRadius: '0',
+                        borderBottomRightRadius: '0',
+                        // Clip the shadow where the list meets the detail
+                        clipPath: 'inset(-12px 0 -12px -12px)',
+                    },
+                },
+            },
+            {
+                column: 'detail',
+                variant: 'floating',
+                joined: true,
+                css: {
+                    md: {
+                        ...cardStyles,
+                        borderLeftWidth: '0',
+                        borderTopLeftRadius: '0',
+                        borderBottomLeftRadius: '0',
+                        clipPath: 'inset(-12px -12px -12px 0)',
+                    },
+                },
+            },
+            // Without a list, the detail is a card of its own
+            {
+                column: 'detail',
+                variant: 'floating',
+                joined: false,
+                css: { md: cardStyles },
+            },
+            // Layered: list on the canvas, detail as its own surface card
+            {
+                column: 'list',
+                variant: 'layered',
+                css: { md: { backgroundColor: 'canvas' } },
+            },
+            {
+                column: 'detail',
+                variant: 'layered',
+                css: { md: cardStyles },
+            },
+        ],
+    }),
+};
+// Sticky to the bottom of the scrolling column; pushed down when the content is short
+const footerStyles = css({
+    position: 'sticky',
+    bottom: 0,
+    zIndex: 1,
+    flexShrink: 0,
+    marginTop: 'auto',
+    paddingX: '4',
+    paddingY: '3',
+    borderTopWidth: '1px',
+    borderColor: 'structure.subtle',
+    backgroundColor: 'inherit',
+});
+const elements = { sidebar: 'nav', list: 'section', detail: 'section' };
+/** Internal column shared by `SplitView.Sidebar`, `SplitView.List` and `SplitView.Detail`. */
+export const SplitViewColumn = ({ column, title, actions, footer, ariaLabel = typeof title === 'string' ? title : undefined, children, }) => {
+    const { variant, mode, column: activeColumn, columns, sidebarOpen, setSidebarOpen, } = useSplitView();
+    const ref = useRef(null);
+    const Element = elements[column];
+    const index = columns.indexOf(column);
+    const activeIndex = columns.indexOf(activeColumn);
+    const position = index < activeIndex ? 'before' : index === activeIndex ? 'current' : 'after';
+    const isOverlay = column === 'sidebar' && mode === 'medium';
+    const isOverlayOpen = isOverlay && sidebarOpen;
+    const isHidden = mode === 'compact'
+        ? position !== 'current'
+        : column === 'sidebar'
+            ? !sidebarOpen
+            : mode === 'medium' && sidebarOpen;
+    // A column comes to the front when pushed in compact mode or opened as the overlay
+    const isForeground = mode === 'compact' ? position === 'current' : isOverlayOpen;
+    const previous = useRef({ mode, isForeground });
+    const returnFocusRef = useRef(null);
+    // Move focus with navigation, but not when the mode itself changes (mount, resize)
+    useEffect(() => {
+        const { mode: prevMode, isForeground: wasForeground } = previous.current;
+        previous.current = { mode, isForeground };
+        if (prevMode !== mode || wasForeground === isForeground)
+            return;
+        if (isForeground) {
+            if (isOverlay)
+                returnFocusRef.current = document.activeElement;
+            ref.current?.focus({ preventScroll: true });
+        }
+        else if (isOverlay && ref.current?.contains(document.activeElement)) {
+            returnFocusRef.current?.focus({ preventScroll: true });
+        }
+    }, [mode, isForeground, isOverlay]);
+    useDismiss({
+        elementRef: ref,
+        isOpen: isOverlayOpen,
+        onClose: () => setSidebarOpen(false),
+        dismissOnClick: false,
+    });
+    return (_jsx(Element, { ref: ref, tabIndex: -1, "aria-label": ariaLabel, role: isOverlay ? 'dialog' : undefined, "aria-modal": isOverlayOpen || undefined, inert: isHidden, "data-position": position, "data-state": column === 'sidebar' ? (sidebarOpen ? 'open' : 'closed') : undefined, "data-overlay": isOverlay ? (sidebarOpen ? 'open' : 'closed') : undefined, className: styles.column({ column, variant, joined: columns.includes('list') }), children: _jsxs(SplitViewColumnProvider, { value: column, children: [(title || actions) && _jsx(SplitViewHeader, { title: title, actions: actions }), children, footer && _jsx("footer", { className: footerStyles, children: footer })] }) }));
+};
+//# sourceMappingURL=split-view-column.js.map

package/dist/components/layouts/split-view/components/split-view-column.js.map

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

package/dist/components/layouts/split-view/components/split-view-header.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+/** Sticky column header: back button, sidebar toggle on the first content column, title, actions. */
+export declare const SplitViewHeader: ({ title, actions }: {
+    title?: ReactNode;
+    actions?: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/layouts/split-view/components/split-view-header.js

@@ -0,0 +1,44 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { css } from '../../../../styled-system/css';
+import { useSplitView, useSplitViewColumn } from '../split-view-context';
+import { SplitViewBackButton } from './split-view-back-button';
+import { SplitViewSidebarToggle } from './split-view-sidebar-toggle';
+const styles = {
+    header: css({
+        position: 'sticky',
+        top: 0,
+        zIndex: 1,
+        // Flex child of a scrolling column: keep its full height so the backing covers the title row
+        flexShrink: 0,
+        display: 'flex',
+        alignItems: 'center',
+        gap: '2',
+        minHeight: '12',
+        paddingX: '4',
+        paddingY: '2',
+        backgroundColor: 'inherit',
+        // Compact: controls on the first row, a large title on its own row below, like iOS
+        mdDown: { flexWrap: 'wrap', rowGap: '1' },
+    }),
+    title: css({
+        flex: 1,
+        minWidth: 0,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        fontFamily: 'heading',
+        fontSize: 'heading.sm',
+        lineHeight: 'tight',
+        color: 'text.standard',
+        mdDown: { order: 1, flexBasis: '100%', fontSize: 'heading.md' },
+    }),
+    actions: css({ display: 'flex', alignItems: 'center', gap: '1', marginLeft: 'auto' }),
+};
+/** Sticky column header: back button, sidebar toggle on the first content column, title, actions. */
+export const SplitViewHeader = ({ title, actions }) => {
+    const { columns } = useSplitView();
+    const column = useSplitViewColumn();
+    return (_jsxs("header", { className: styles.header, children: [_jsx(SplitViewBackButton, {}), column === columns[1] && _jsx(SplitViewSidebarToggle, {}), title && _jsx("h2", { className: styles.title, children: title }), actions && _jsx("div", { className: styles.actions, children: actions })] }));
+};
+//# sourceMappingURL=split-view-header.js.map

package/dist/components/layouts/split-view/components/split-view-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-view-header.js","sourceRoot":"","sources":["../../../../../src/components/layouts/split-view/components/split-view-header.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAErE,MAAM,MAAM,GAAG;IACd,MAAM,EAAE,GAAG,CAAC;QACX,QAAQ,EAAE,QAAQ;QAClB,GAAG,EAAE,CAAC;QACN,MAAM,EAAE,CAAC;QACT,6FAA6F;QAC7F,UAAU,EAAE,CAAC;QACb,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,GAAG;QACR,SAAS,EAAE,IAAI;QACf,QAAQ,EAAE,GAAG;QACb,QAAQ,EAAE,GAAG;QACb,eAAe,EAAE,SAAS;QAC1B,mFAAmF;QACnF,MAAM,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE;KACzC,CAAC;IACF,KAAK,EAAE,GAAG,CAAC;QACV,IAAI,EAAE,CAAC;QACP,QAAQ,EAAE,CAAC;QACX,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,UAAU;QACxB,UAAU,EAAE,QAAQ;QACpB,UAAU,EAAE,SAAS;QACrB,QAAQ,EAAE,YAAY;QACtB,UAAU,EAAE,OAAO;QACnB,KAAK,EAAE,eAAe;QACtB,MAAM,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE;KAC/D,CAAC;IACF,OAAO,EAAE,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,CAAC;CACrF,CAAC;AAEF,qGAAqG;AACrG,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAA8C,EAAE,EAAE;IACjG,MAAM,EAAE,OAAO,EAAE,GAAG,YAAY,EAAE,CAAC;IACnC,MAAM,MAAM,GAAG,kBAAkB,EAAE,CAAC;IAEpC,OAAO,CACN,kBAAQ,SAAS,EAAE,MAAM,CAAC,MAAM,aAC/B,KAAC,mBAAmB,KAAG,EACtB,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,KAAC,sBAAsB,KAAG,EACnD,KAAK,IAAI,aAAI,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,KAAK,GAAM,EAClD,OAAO,IAAI,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,YAAG,OAAO,GAAO,IACnD,CACT,CAAC;AACH,CAAC,CAAC"}

package/dist/components/layouts/split-view/components/split-view-item.d.ts

@@ -0,0 +1,11 @@
+import { SplitViewItemProps } from '../split-view.types';
+/**
+ * Selectable row inside a `SplitView` column: a pill in the sidebar, a rounded row in the list.
+ * Shows the active marker in the column's color (`sidebarActiveColor` / `listActiveColor`).
+ *
+ * @example
+ * <SplitView.Item active={folder === 'Inbox'} icon="Tray" onClick={() => openFolder('Inbox')}>
+ *   Inbox
+ * </SplitView.Item>
+ */
+export declare const SplitViewItem: (props: SplitViewItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/layouts/split-view/components/split-view-item.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NavItem } from '../../../../internal';
+import { useSplitView, useSplitViewColumn } from '../split-view-context';
+/**
+ * Selectable row inside a `SplitView` column: a pill in the sidebar, a rounded row in the list.
+ * Shows the active marker in the column's color (`sidebarActiveColor` / `listActiveColor`).
+ *
+ * @example
+ * <SplitView.Item active={folder === 'Inbox'} icon="Tray" onClick={() => openFolder('Inbox')}>
+ *   Inbox
+ * </SplitView.Item>
+ */
+export const SplitViewItem = (props) => {
+    const { activeColors } = useSplitView();
+    const column = useSplitViewColumn();
+    return (_jsx(NavItem, { ...props, shape: column === 'sidebar' ? 'pill' : 'row', activeColor: activeColors[column] }));
+};
+//# sourceMappingURL=split-view-item.js.map

package/dist/components/layouts/split-view/components/split-view-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-view-item.js","sourceRoot":"","sources":["../../../../../src/components/layouts/split-view/components/split-view-item.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAGzE;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAE,EAAE;IAC1D,MAAM,EAAE,YAAY,EAAE,GAAG,YAAY,EAAE,CAAC;IACxC,MAAM,MAAM,GAAG,kBAAkB,EAAE,CAAC;IAEpC,OAAO,CACN,KAAC,OAAO,OACH,KAAK,EACT,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAC5C,WAAW,EAAE,YAAY,CAAC,MAAM,CAAC,GAChC,CACF,CAAC;AACH,CAAC,CAAC"}

package/dist/components/layouts/split-view/components/split-view-panes.d.ts

@@ -0,0 +1,7 @@
+import { SplitViewColumnProps } from '../split-view.types';
+/** Leading column, usually top-level navigation. Docks in wide mode, overlays in medium. */
+export declare const SplitViewSidebar: (props: SplitViewColumnProps) => import("react/jsx-runtime").JSX.Element;
+/** Optional middle column, usually the items within the selected sidebar section. */
+export declare const SplitViewList: (props: SplitViewColumnProps) => import("react/jsx-runtime").JSX.Element;
+/** Trailing column showing the selected item. Fills the remaining width. */
+export declare const SplitViewDetail: (props: SplitViewColumnProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/layouts/split-view/components/split-view-panes.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SplitViewColumn } from './split-view-column';
+/** Leading column, usually top-level navigation. Docks in wide mode, overlays in medium. */
+export const SplitViewSidebar = (props) => (_jsx(SplitViewColumn, { column: "sidebar", ...props }));
+/** Optional middle column, usually the items within the selected sidebar section. */
+export const SplitViewList = (props) => (_jsx(SplitViewColumn, { column: "list", ...props }));
+/** Trailing column showing the selected item. Fills the remaining width. */
+export const SplitViewDetail = (props) => (_jsx(SplitViewColumn, { column: "detail", ...props }));
+//# sourceMappingURL=split-view-panes.js.map

package/dist/components/layouts/split-view/components/split-view-panes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-view-panes.js","sourceRoot":"","sources":["../../../../../src/components/layouts/split-view/components/split-view-panes.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,4FAA4F;AAC5F,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAA2B,EAAE,EAAE,CAAC,CAChE,KAAC,eAAe,IAAC,MAAM,EAAC,SAAS,KAAK,KAAK,GAAI,CAC/C,CAAC;AAEF,qFAAqF;AACrF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAA2B,EAAE,EAAE,CAAC,CAC7D,KAAC,eAAe,IAAC,MAAM,EAAC,MAAM,KAAK,KAAK,GAAI,CAC5C,CAAC;AAEF,4EAA4E;AAC5E,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAE,EAAE,CAAC,CAC/D,KAAC,eAAe,IAAC,MAAM,EAAC,QAAQ,KAAK,KAAK,GAAI,CAC9C,CAAC"}

package/dist/components/layouts/split-view/components/split-view-sidebar-toggle.d.ts

@@ -0,0 +1,3 @@
+import { SplitViewSidebarToggleProps } from '../split-view.types';
+/** Shows or hides the sidebar. Hidden in compact mode, where `SplitView.BackButton` navigates instead. */
+export declare const SplitViewSidebarToggle: ({ ariaLabel, }: SplitViewSidebarToggleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/layouts/split-view/components/split-view-sidebar-toggle.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { css } from '../../../../styled-system/css';
+import { IconButton } from '../../../../components/ui';
+import { useSplitView } from '../split-view-context';
+const styles = {
+    wrapper: css({ display: 'contents', mdDown: { display: 'none' } }),
+};
+/** Shows or hides the sidebar. Hidden in compact mode, where `SplitView.BackButton` navigates instead. */
+export const SplitViewSidebarToggle = ({ ariaLabel = 'Toggle sidebar', }) => {
+    const { sidebarOpen, toggleSidebar } = useSplitView();
+    return (_jsx("span", { className: styles.wrapper, children: _jsx(IconButton, { name: "SidebarSimple", color: "neutral", text: true, ariaLabel: ariaLabel, "aria-expanded": sidebarOpen, onClick: toggleSidebar, filled: sidebarOpen }) }));
+};
+//# sourceMappingURL=split-view-sidebar-toggle.js.map

package/dist/components/layouts/split-view/components/split-view-sidebar-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-view-sidebar-toggle.js","sourceRoot":"","sources":["../../../../../src/components/layouts/split-view/components/split-view-sidebar-toggle.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGrD,MAAM,MAAM,GAAG;IACd,OAAO,EAAE,GAAG,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,CAAC;CAClE,CAAC;AAEF,0GAA0G;AAC1G,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,EACtC,SAAS,GAAG,gBAAgB,GACC,EAAE,EAAE;IACjC,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,GAAG,YAAY,EAAE,CAAC;IAEtD,OAAO,CACN,eAAM,SAAS,EAAE,MAAM,CAAC,OAAO,YAC9B,KAAC,UAAU,IACV,IAAI,EAAC,eAAe,EACpB,KAAK,EAAC,SAAS,EACf,IAAI,QACJ,SAAS,EAAE,SAAS,mBACL,WAAW,EAC1B,OAAO,EAAE,aAAa,EACtB,MAAM,EAAE,WAAW,GAClB,GACI,CACP,CAAC;AACH,CAAC,CAAC"}

package/dist/components/layouts/split-view/index.d.ts

@@ -0,0 +1,10 @@
+export type { SplitViewProps, SplitViewColumn, SplitViewColumnProps, SplitViewItemProps, SplitViewVariant, SplitViewActiveColor, SplitViewMode, SplitViewState, SplitViewBackButtonProps, SplitViewSidebarToggleProps, } from './split-view.types';
+export { useSplitView } from './split-view-context';
+export declare const SplitView: (({ children, column: columnProp, defaultColumn, onColumnChange, sidebarOpen: sidebarOpenProp, defaultSidebarOpen, onSidebarOpenChange, sidebarWidth, listWidth, variant, sidebarActiveColor, listActiveColor, }: import("./split-view.types").SplitViewProps) => import("react/jsx-runtime").JSX.Element) & {
+    Sidebar: (props: import("./split-view.types").SplitViewColumnProps) => import("react/jsx-runtime").JSX.Element;
+    List: (props: import("./split-view.types").SplitViewColumnProps) => import("react/jsx-runtime").JSX.Element;
+    Detail: (props: import("./split-view.types").SplitViewColumnProps) => import("react/jsx-runtime").JSX.Element;
+    Item: (props: import("./split-view.types").SplitViewItemProps) => import("react/jsx-runtime").JSX.Element;
+    BackButton: ({ children }: import("./split-view.types").SplitViewBackButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+    SidebarToggle: ({ ariaLabel, }: import("./split-view.types").SplitViewSidebarToggleProps) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/components/layouts/split-view/index.js

@@ -0,0 +1,15 @@
+import { SplitViewRoot } from './split-view';
+import { SplitViewSidebar, SplitViewList, SplitViewDetail } from './components/split-view-panes';
+import { SplitViewBackButton } from './components/split-view-back-button';
+import { SplitViewSidebarToggle } from './components/split-view-sidebar-toggle';
+import { SplitViewItem } from './components/split-view-item';
+export { useSplitView } from './split-view-context';
+export const SplitView = Object.assign(SplitViewRoot, {
+    Sidebar: SplitViewSidebar,
+    List: SplitViewList,
+    Detail: SplitViewDetail,
+    Item: SplitViewItem,
+    BackButton: SplitViewBackButton,
+    SidebarToggle: SplitViewSidebarToggle,
+});
+//# sourceMappingURL=index.js.map

package/dist/components/layouts/split-view/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/layouts/split-view/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AACjG,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAChF,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAc7D,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEpD,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,aAAa,EAAE;IACrD,OAAO,EAAE,gBAAgB;IACzB,IAAI,EAAE,aAAa;IACnB,MAAM,EAAE,eAAe;IACvB,IAAI,EAAE,aAAa;IACnB,UAAU,EAAE,mBAAmB;IAC/B,aAAa,EAAE,sBAAsB;CACrC,CAAC,CAAC"}

package/dist/components/layouts/split-view/split-view-context.d.ts

@@ -0,0 +1,4 @@
+import { SplitViewColumn, SplitViewState } from './split-view.types';
+export declare const SplitViewProvider: import("react").Provider<SplitViewState | undefined>, useSplitView: () => SplitViewState;
+/** The column a descendant renders in, so items and headers can style themselves for it. */
+export declare const SplitViewColumnProvider: import("react").Provider<SplitViewColumn | undefined>, useSplitViewColumn: () => NonNullable<SplitViewColumn>;

package/dist/components/layouts/split-view/split-view-context.js

@@ -0,0 +1,6 @@
+'use client';
+import { createComponentContext } from '../../../utils';
+export const [SplitViewProvider, useSplitView] = createComponentContext('SplitView');
+/** The column a descendant renders in, so items and headers can style themselves for it. */
+export const [SplitViewColumnProvider, useSplitViewColumn] = createComponentContext('SplitViewColumn');
+//# sourceMappingURL=split-view-context.js.map

package/dist/components/layouts/split-view/split-view-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-view-context.js","sourceRoot":"","sources":["../../../../src/components/layouts/split-view/split-view-context.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAGjD,MAAM,CAAC,MAAM,CAAC,iBAAiB,EAAE,YAAY,CAAC,GAC7C,sBAAsB,CAAiB,WAAW,CAAC,CAAC;AAErD,4FAA4F;AAC5F,MAAM,CAAC,MAAM,CAAC,uBAAuB,EAAE,kBAAkB,CAAC,GACzD,sBAAsB,CAAkB,iBAAiB,CAAC,CAAC"}

package/dist/components/layouts/split-view/split-view.d.ts

@@ -0,0 +1,20 @@
+import { SplitViewProps } from './split-view.types';
+/**
+ * Three-column layout views: sidebar, list and detail side by side on wide screens,
+ * the sidebar as an overlay at medium widths, and a push/pop stack of columns on phones.
+ *
+ * Both the frontmost column and sidebar visibility work controlled (`column`, `sidebarOpen`) or
+ * uncontrolled (`defaultColumn`, `defaultSidebarOpen`). Descendants navigate with `useSplitView`.
+ * `SplitView.List` is optional; without it the layout has two columns.
+ *
+ * @example
+ * <SplitView>
+ *   <SplitView.Sidebar ariaLabel="Folders"><Folders /></SplitView.Sidebar>
+ *   <SplitView.List ariaLabel="Messages"><Messages /></SplitView.List>
+ *   <SplitView.Detail ariaLabel="Message">
+ *     <SplitView.BackButton />
+ *     <Message />
+ *   </SplitView.Detail>
+ * </SplitView>
+ */
+export declare const SplitViewRoot: ({ children, column: columnProp, defaultColumn, onColumnChange, sidebarOpen: sidebarOpenProp, defaultSidebarOpen, onSidebarOpenChange, sidebarWidth, listWidth, variant, sidebarActiveColor, listActiveColor, }: SplitViewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/layouts/split-view/split-view.js

@@ -0,0 +1,153 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, isValidElement, useLayoutEffect, useMemo, useRef } from 'react';
+import { css, cva } from '../../../styled-system/css';
+import { useMediaQuery } from '../../../hooks';
+import { useControllableState } from '../../../internal';
+import { SplitViewProvider } from './split-view-context';
+import { SplitViewDetail, SplitViewList, SplitViewSidebar } from './components/split-view-panes';
+// Match Panda's `mdDown` and `mdToLg` conditions
+const COMPACT_QUERY = '(max-width: 767.98px)';
+const MEDIUM_QUERY = '(min-width: 768px) and (max-width: 1023.98px)';
+const styles = {
+    root: cva({
+        base: {
+            position: 'relative',
+            display: 'flex',
+            width: '100%',
+            height: '100%',
+            overflow: 'hidden',
+            isolation: 'isolate',
+            backgroundColor: 'surface',
+            md: { padding: 'var(--split-view-gap)', backgroundColor: 'canvas' },
+        },
+        variants: {
+            variant: {
+                floating: {},
+                layered: { md: { gap: 'var(--split-view-gap)' } },
+            },
+        },
+    }),
+    scrim: css({
+        display: 'none',
+        mdToLg: {
+            display: 'block',
+            position: 'absolute',
+            inset: 0,
+            zIndex: 3,
+            backgroundColor: 'scrim.medium',
+            opacity: 0,
+            pointerEvents: 'none',
+            transition: 'opacity 300ms ease-in-out',
+            _motionReduce: { transition: 'none' },
+            '&[data-state=open]': { opacity: 1, pointerEvents: 'auto' },
+        },
+    }),
+};
+/**
+ * Three-column layout views: sidebar, list and detail side by side on wide screens,
+ * the sidebar as an overlay at medium widths, and a push/pop stack of columns on phones.
+ *
+ * Both the frontmost column and sidebar visibility work controlled (`column`, `sidebarOpen`) or
+ * uncontrolled (`defaultColumn`, `defaultSidebarOpen`). Descendants navigate with `useSplitView`.
+ * `SplitView.List` is optional; without it the layout has two columns.
+ *
+ * @example
+ * <SplitView>
+ *   <SplitView.Sidebar ariaLabel="Folders"><Folders /></SplitView.Sidebar>
+ *   <SplitView.List ariaLabel="Messages"><Messages /></SplitView.List>
+ *   <SplitView.Detail ariaLabel="Message">
+ *     <SplitView.BackButton />
+ *     <Message />
+ *   </SplitView.Detail>
+ * </SplitView>
+ */
+export const SplitViewRoot = ({ children, column: columnProp, defaultColumn, onColumnChange, sidebarOpen: sidebarOpenProp, defaultSidebarOpen = true, onSidebarOpenChange, sidebarWidth = '240px', listWidth = '320px', variant = 'floating', sidebarActiveColor = 'primary', listActiveColor = 'neutral', }) => {
+    const isCompact = useMediaQuery(COMPACT_QUERY);
+    const isMedium = useMediaQuery(MEDIUM_QUERY);
+    // Neither matches before mount, so SSR renders wide behavior; CSS handles layout at every width
+    const mode = isCompact ? 'compact' : isMedium ? 'medium' : 'wide';
+    // Read columns straight from children so compact mode and back labels are right on first render
+    const columnTypes = [
+        [SplitViewSidebar, 'sidebar'],
+        [SplitViewList, 'list'],
+        [SplitViewDetail, 'detail'],
+    ];
+    const titles = {};
+    let hasList = false;
+    Children.forEach(children, (child) => {
+        if (!isValidElement(child))
+            return;
+        const match = columnTypes.find(([type]) => child.type === type);
+        if (!match)
+            return;
+        if (match[1] === 'list')
+            hasList = true;
+        if (typeof child.props.title === 'string')
+            titles[match[1]] = child.props.title;
+    });
+    const columns = hasList
+        ? ['sidebar', 'list', 'detail']
+        : ['sidebar', 'detail'];
+    const [storedColumn, setColumn] = useControllableState({
+        value: columnProp,
+        defaultValue: defaultColumn ?? (hasList ? 'list' : 'sidebar'),
+        onChange: onColumnChange,
+    });
+    const column = columns.includes(storedColumn) ? storedColumn : 'detail';
+    const [sidebarOpen, setSidebarOpenState] = useControllableState({
+        value: sidebarOpenProp,
+        defaultValue: defaultSidebarOpen,
+        onChange: onSidebarOpenChange,
+    });
+    const setSidebarOpen = (open) => {
+        if (open !== sidebarOpen)
+            setSidebarOpenState(open);
+    };
+    // Like iPadOS: entering medium tucks the overlay away, entering wide docks the sidebar again.
+    // Layout effect so the overlay never paints open when first mounting at medium width.
+    const previousMode = useRef(mode);
+    useLayoutEffect(() => {
+        if (previousMode.current === mode)
+            return;
+        previousMode.current = mode;
+        if (mode === 'medium')
+            setSidebarOpen(false);
+        if (mode === 'wide')
+            setSidebarOpen(true);
+    });
+    const index = columns.indexOf(column);
+    const show = (next) => {
+        if (next !== column)
+            setColumn(next);
+        if (mode === 'medium')
+            setSidebarOpen(next === 'sidebar');
+        if (mode === 'wide' && next === 'sidebar')
+            setSidebarOpen(true);
+    };
+    const state = {
+        variant,
+        activeColors: {
+            sidebar: sidebarActiveColor,
+            list: listActiveColor,
+            detail: listActiveColor,
+        },
+        titles,
+        mode,
+        column,
+        columns,
+        canGoBack: index > 0,
+        sidebarOpen,
+        show,
+        back: () => index > 0 && show(columns[index - 1]),
+        setSidebarOpen,
+        toggleSidebar: () => setSidebarOpen(!sidebarOpen),
+    };
+    const cssVariables = useMemo(() => ({
+        '--split-view-sidebar-width': sidebarWidth,
+        '--split-view-list-width': listWidth,
+        '--split-view-gap': '8px',
+    }), [sidebarWidth, listWidth]);
+    return (_jsx(SplitViewProvider, { value: state, children: _jsxs("div", { className: styles.root({ variant }), style: cssVariables, children: [children, _jsx("div", { "aria-hidden": true, className: styles.scrim, "data-state": mode === 'medium' && sidebarOpen ? 'open' : 'closed', onClick: () => setSidebarOpen(false) })] }) }));
+};
+//# sourceMappingURL=split-view.js.map

package/dist/components/layouts/split-view/split-view.js.map

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