@flipdish/ui-library 0.30.0 → 0.31.1

package/dist/components/organisms/SidePanel/hooks/useOpenOnMount.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOpenOnMount.cjs","sources":["../../../../../src/components/organisms/SidePanel/hooks/useOpenOnMount.ts"],"sourcesContent":[null],"names":["useSyncExternalStore","useRef","useEffect"],"mappings":";;;;AAIA,MAAM,kBAAkB,GAAG,MAAM,MAAK,EAAE,CAAC;AAEzC;;;;;;;AAOG;AACI,MAAM,cAAc,GAAG,CAAC,MAAe,KAAI;;AAEhD,IAAA,MAAM,kBAAkB,GAAGA,0BAAoB,CAC7C,kBAAkB,EAClB,MAAM,IAAI,EACV,MAAM,KAAK,CACZ;AAED,IAAA,MAAM,cAAc,GAAGC,YAAM,CAAiB,IAAI,CAAC;AACnD,IAAA,IAAI,kBAAkB,IAAI,cAAc,CAAC,OAAO,KAAK,IAAI;AAAE,QAAA,cAAc,CAAC,OAAO,GAAG,MAAM;IAC1FC,eAAS,CAAC,MAAK;;QAEb,IAAI,kBAAkB,IAAI,CAAC,MAAM;AAAE,YAAA,cAAc,CAAC,OAAO,GAAG,KAAK;AACnE,IAAA,CAAC,EAAE,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;IAEhC,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,CAAC,cAAc,CAAC,OAAO,EAAE;AAC5E;;;;"}

package/dist/components/organisms/SidePanel/hooks/useOpenOnMount.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Tells the panel whether opening should move focus into it. A panel that is already open when the
+ * page loads must not pull focus away from the page, and "when the page loads" means the first render
+ * that knows the viewport: on the server and while hydrating nothing renders, so state restored right
+ * after hydration still counts as open on load.
+ *
+ * @returns whether the viewport is known yet, and whether an opening panel should take focus
+ */
+export declare const useOpenOnMount: (isOpen: boolean) => {
+    canMeasureViewport: boolean;
+    shouldFocusOnMount: boolean;
+};
+//# sourceMappingURL=useOpenOnMount.d.ts.map

package/dist/components/organisms/SidePanel/hooks/useOpenOnMount.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOpenOnMount.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/hooks/useOpenOnMount.ts"],"names":[],"mappings":"AAMA;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,GAAI,QAAQ,OAAO;;;CAgB7C,CAAC"}

package/dist/components/organisms/SidePanel/hooks/useOpenOnMount.js

@@ -0,0 +1,27 @@
+import { useSyncExternalStore, useRef, useEffect } from 'react';
+
+const subscribeToNothing = () => () => { };
+/**
+ * Tells the panel whether opening should move focus into it. A panel that is already open when the
+ * page loads must not pull focus away from the page, and "when the page loads" means the first render
+ * that knows the viewport: on the server and while hydrating nothing renders, so state restored right
+ * after hydration still counts as open on load.
+ *
+ * @returns whether the viewport is known yet, and whether an opening panel should take focus
+ */
+const useOpenOnMount = (isOpen) => {
+    // False on the server and while hydrating, where the viewport is unknown. True at once in a client-only app.
+    const canMeasureViewport = useSyncExternalStore(subscribeToNothing, () => true, () => false);
+    const wasOpenOnMount = useRef(null);
+    if (canMeasureViewport && wasOpenOnMount.current === null)
+        wasOpenOnMount.current = isOpen;
+    useEffect(() => {
+        // Once it has been closed, the next open is the user's doing and takes focus.
+        if (canMeasureViewport && !isOpen)
+            wasOpenOnMount.current = false;
+    }, [canMeasureViewport, isOpen]);
+    return { canMeasureViewport, shouldFocusOnMount: !wasOpenOnMount.current };
+};
+
+export { useOpenOnMount };
+//# sourceMappingURL=useOpenOnMount.js.map

package/dist/components/organisms/SidePanel/hooks/useOpenOnMount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOpenOnMount.js","sources":["../../../../../src/components/organisms/SidePanel/hooks/useOpenOnMount.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAIA,MAAM,kBAAkB,GAAG,MAAM,MAAK,EAAE,CAAC;AAEzC;;;;;;;AAOG;AACI,MAAM,cAAc,GAAG,CAAC,MAAe,KAAI;;AAEhD,IAAA,MAAM,kBAAkB,GAAG,oBAAoB,CAC7C,kBAAkB,EAClB,MAAM,IAAI,EACV,MAAM,KAAK,CACZ;AAED,IAAA,MAAM,cAAc,GAAG,MAAM,CAAiB,IAAI,CAAC;AACnD,IAAA,IAAI,kBAAkB,IAAI,cAAc,CAAC,OAAO,KAAK,IAAI;AAAE,QAAA,cAAc,CAAC,OAAO,GAAG,MAAM;IAC1F,SAAS,CAAC,MAAK;;QAEb,IAAI,kBAAkB,IAAI,CAAC,MAAM;AAAE,YAAA,cAAc,CAAC,OAAO,GAAG,KAAK;AACnE,IAAA,CAAC,EAAE,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;IAEhC,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,CAAC,cAAc,CAAC,OAAO,EAAE;AAC5E;;;;"}

package/dist/components/organisms/SidePanel/hooks/usePanelFocus.cjs

@@ -0,0 +1,76 @@
+'use strict';
+
+var React = require('react');
+var focus_utils = require('../../../../utilities/__internal__/focusUtils/focus.utils.cjs');
+
+/** The element before the panel when it can take focus, such as `AppShell`'s scroll area. */
+const focusableSiblingBefore = (panel) => {
+    const sibling = panel.previousElementSibling;
+    return sibling instanceof HTMLElement && sibling.tabIndex >= 0 ? sibling : null;
+};
+/**
+ * Hands focus into the panel when it opens and back to the control that opened it when it closes,
+ * and makes a leaving panel inert. Managed by hand, not with a focus scope: a scope would also
+ * reroute Tab at the panel's edges, as a popover does.
+ *
+ * @returns a capture-phase focus handler to spread onto the panel element
+ */
+const usePanelFocus = ({ panelRef, isPresent, isDesktop, shouldFocusOnMount }) => {
+    const openerRef = React.useRef(null);
+    const previousIsPresent = React.useRef(null);
+    const previousIsDesktop = React.useRef(isDesktop);
+    // Read while rendering, before the content mounts: an `autoFocus` input takes focus during commit, ahead of any effect.
+    const [focusedBeforeMount] = React.useState(focus_utils.getFocusedElement);
+    React.useEffect(() => {
+        const panel = panelRef.current;
+        if (!panel)
+            return;
+        const previous = previousIsPresent.current;
+        previousIsPresent.current = isPresent;
+        // Entering covers a fresh open and a reopen that interrupts the close animation.
+        const isEntering = isPresent && (previous === false || (previous === null && shouldFocusOnMount));
+        const isLeaving = !isPresent && previous === true;
+        const focused = focus_utils.getFocusedElement();
+        const hasFocusInside = focused !== null && panel.contains(focused);
+        // A panel reopened mid-close is still inert from leaving, and an inert element cannot take focus.
+        if (isPresent)
+            panel.inert = false;
+        if (isEntering) {
+            // On mount the content may already hold focus, so the opener is what was focused before it. A reopen mid-close finds focus still outside.
+            openerRef.current = previous === null ? focusedBeforeMount : focused;
+            // Content that focused itself (an `autoFocus` input) keeps focus; otherwise the region takes it.
+            // preventScroll: below `lg` the panel starts off-screen, and scrolling it into view would shift the layout.
+            if (!hasFocusInside)
+                panel.focus({ preventScroll: true });
+        }
+        // Hand focus back only if it is still in the panel, so a user who has moved on is left alone.
+        if (isLeaving && hasFocusInside) {
+            const opener = openerRef.current;
+            // The opener may have unmounted meanwhile, such as a header button that only renders at one breakpoint.
+            (opener?.isConnected ? opener : focusableSiblingBefore(panel))?.focus();
+        }
+        // A leaving panel must not be reachable while another opens; set last, since inert drops any focus inside it.
+        if (!isPresent)
+            panel.inert = true;
+    }, [panelRef, isPresent, shouldFocusOnMount, focusedBeforeMount]);
+    React.useEffect(() => {
+        const hasStartedCoveringPage = previousIsDesktop.current && !isDesktop;
+        previousIsDesktop.current = isDesktop;
+        const panel = panelRef.current;
+        const focused = focus_utils.getFocusedElement();
+        // The page beside the panel is about to go out of reach, so focus must not be left in it.
+        if (hasStartedCoveringPage && panel && focused && !panel.contains(focused) && panel.parentElement?.contains(focused)) {
+            panel.focus({ preventScroll: true });
+        }
+    }, [panelRef, isDesktop]);
+    // A panel that was open on load has no opener, so closing hands focus back to wherever it first came in from.
+    const onFocusCapture = (event) => {
+        const from = event.relatedTarget;
+        if (openerRef.current === null && from instanceof HTMLElement && !event.currentTarget.contains(from))
+            openerRef.current = from;
+    };
+    return { onFocusCapture };
+};
+
+exports.usePanelFocus = usePanelFocus;
+//# sourceMappingURL=usePanelFocus.cjs.map

package/dist/components/organisms/SidePanel/hooks/usePanelFocus.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePanelFocus.cjs","sources":["../../../../../src/components/organisms/SidePanel/hooks/usePanelFocus.ts"],"sourcesContent":[null],"names":["useRef","useState","getFocusedElement","useEffect"],"mappings":"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"}

package/dist/components/organisms/SidePanel/hooks/usePanelFocus.d.ts

@@ -0,0 +1,22 @@
+import type { FocusEvent, RefObject } from 'react';
+interface UsePanelFocusOptions {
+    panelRef: RefObject<HTMLElement | null>;
+    /** From `useIsPresent`: false once the panel is animating out. */
+    isPresent: boolean;
+    /** Whether the panel is docked beside the page rather than covering it. */
+    isDesktop: boolean;
+    /** False for a panel that is open on the first render, which must not pull focus away from the page. */
+    shouldFocusOnMount: boolean;
+}
+/**
+ * Hands focus into the panel when it opens and back to the control that opened it when it closes,
+ * and makes a leaving panel inert. Managed by hand, not with a focus scope: a scope would also
+ * reroute Tab at the panel's edges, as a popover does.
+ *
+ * @returns a capture-phase focus handler to spread onto the panel element
+ */
+export declare const usePanelFocus: ({ panelRef, isPresent, isDesktop, shouldFocusOnMount }: UsePanelFocusOptions) => {
+    onFocusCapture: (event: FocusEvent<HTMLElement>) => void;
+};
+export {};
+//# sourceMappingURL=usePanelFocus.d.ts.map

package/dist/components/organisms/SidePanel/hooks/usePanelFocus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePanelFocus.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/hooks/usePanelFocus.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAWnD,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACxC,kEAAkE;IAClE,SAAS,EAAE,OAAO,CAAC;IACnB,2EAA2E;IAC3E,SAAS,EAAE,OAAO,CAAC;IACnB,wGAAwG;IACxG,kBAAkB,EAAE,OAAO,CAAC;CAC7B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,GAAI,wDAAwD,oBAAoB;4BAmDzE,UAAU,CAAC,WAAW,CAAC;CAMvD,CAAC"}

package/dist/components/organisms/SidePanel/hooks/usePanelFocus.js

@@ -0,0 +1,74 @@
+import { useRef, useState, useEffect } from 'react';
+import { getFocusedElement } from '../../../../utilities/__internal__/focusUtils/focus.utils.js';
+
+/** The element before the panel when it can take focus, such as `AppShell`'s scroll area. */
+const focusableSiblingBefore = (panel) => {
+    const sibling = panel.previousElementSibling;
+    return sibling instanceof HTMLElement && sibling.tabIndex >= 0 ? sibling : null;
+};
+/**
+ * Hands focus into the panel when it opens and back to the control that opened it when it closes,
+ * and makes a leaving panel inert. Managed by hand, not with a focus scope: a scope would also
+ * reroute Tab at the panel's edges, as a popover does.
+ *
+ * @returns a capture-phase focus handler to spread onto the panel element
+ */
+const usePanelFocus = ({ panelRef, isPresent, isDesktop, shouldFocusOnMount }) => {
+    const openerRef = useRef(null);
+    const previousIsPresent = useRef(null);
+    const previousIsDesktop = useRef(isDesktop);
+    // Read while rendering, before the content mounts: an `autoFocus` input takes focus during commit, ahead of any effect.
+    const [focusedBeforeMount] = useState(getFocusedElement);
+    useEffect(() => {
+        const panel = panelRef.current;
+        if (!panel)
+            return;
+        const previous = previousIsPresent.current;
+        previousIsPresent.current = isPresent;
+        // Entering covers a fresh open and a reopen that interrupts the close animation.
+        const isEntering = isPresent && (previous === false || (previous === null && shouldFocusOnMount));
+        const isLeaving = !isPresent && previous === true;
+        const focused = getFocusedElement();
+        const hasFocusInside = focused !== null && panel.contains(focused);
+        // A panel reopened mid-close is still inert from leaving, and an inert element cannot take focus.
+        if (isPresent)
+            panel.inert = false;
+        if (isEntering) {
+            // On mount the content may already hold focus, so the opener is what was focused before it. A reopen mid-close finds focus still outside.
+            openerRef.current = previous === null ? focusedBeforeMount : focused;
+            // Content that focused itself (an `autoFocus` input) keeps focus; otherwise the region takes it.
+            // preventScroll: below `lg` the panel starts off-screen, and scrolling it into view would shift the layout.
+            if (!hasFocusInside)
+                panel.focus({ preventScroll: true });
+        }
+        // Hand focus back only if it is still in the panel, so a user who has moved on is left alone.
+        if (isLeaving && hasFocusInside) {
+            const opener = openerRef.current;
+            // The opener may have unmounted meanwhile, such as a header button that only renders at one breakpoint.
+            (opener?.isConnected ? opener : focusableSiblingBefore(panel))?.focus();
+        }
+        // A leaving panel must not be reachable while another opens; set last, since inert drops any focus inside it.
+        if (!isPresent)
+            panel.inert = true;
+    }, [panelRef, isPresent, shouldFocusOnMount, focusedBeforeMount]);
+    useEffect(() => {
+        const hasStartedCoveringPage = previousIsDesktop.current && !isDesktop;
+        previousIsDesktop.current = isDesktop;
+        const panel = panelRef.current;
+        const focused = getFocusedElement();
+        // The page beside the panel is about to go out of reach, so focus must not be left in it.
+        if (hasStartedCoveringPage && panel && focused && !panel.contains(focused) && panel.parentElement?.contains(focused)) {
+            panel.focus({ preventScroll: true });
+        }
+    }, [panelRef, isDesktop]);
+    // A panel that was open on load has no opener, so closing hands focus back to wherever it first came in from.
+    const onFocusCapture = (event) => {
+        const from = event.relatedTarget;
+        if (openerRef.current === null && from instanceof HTMLElement && !event.currentTarget.contains(from))
+            openerRef.current = from;
+    };
+    return { onFocusCapture };
+};
+
+export { usePanelFocus };
+//# sourceMappingURL=usePanelFocus.js.map

package/dist/components/organisms/SidePanel/hooks/usePanelFocus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePanelFocus.js","sources":["../../../../../src/components/organisms/SidePanel/hooks/usePanelFocus.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/dist/components/organisms/SidePanel/index.cjs

@@ -0,0 +1,51 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var useBreakpoints = require('@flipdish/ui-library/hooks/useBreakpoints');
+var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
+var react = require('motion/react');
+var React = require('react');
+var SidePanelContent = require('./components/SidePanelContent.cjs');
+var SidePanelFooter = require('./components/SidePanelFooter.cjs');
+var SidePanelHeader = require('./components/SidePanelHeader.cjs');
+var SidePanelRegion = require('./components/SidePanelRegion.cjs');
+var useOpenOnMount = require('./hooks/useOpenOnMount.cjs');
+var PageCover_context = require('./providers/PageCover.context.cjs');
+var SidePanel_context = require('./providers/SidePanel.context.cjs');
+
+const SidePanelRoot = ({ isOpen, onOpenChange, 'aria-label': ariaLabel, children, className, 'data-testid': dataTestId, }) => {
+    const rootTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'side-panel', rootName: 'side-panel' });
+    const isDesktop = useBreakpoints.useBreakpoints('lg');
+    const setPageCovered = React.useContext(PageCover_context.PageCoverContext);
+    // Nothing renders until the viewport is known, so server and client markup agree.
+    const { canMeasureViewport, shouldFocusOnMount } = useOpenOnMount.useOpenOnMount(isOpen);
+    const coversPage = canMeasureViewport && isOpen && !isDesktop;
+    React.useEffect(() => {
+        if (!setPageCovered || !coversPage)
+            return;
+        setPageCovered(true);
+        return () => setPageCovered(false);
+    }, [setPageCovered, coversPage]);
+    if (!canMeasureViewport)
+        return null;
+    return (jsxRuntime.jsx(SidePanel_context.SidePanelContext.Provider, { value: { close: () => onOpenChange(false), label: ariaLabel }, children: jsxRuntime.jsx(testIdUtils.TestIdProvider, { value: rootTestId, children: jsxRuntime.jsx(react.AnimatePresence, { initial: false, children: isOpen && (jsxRuntime.jsx(SidePanelRegion.SidePanelRegion, { "aria-label": ariaLabel, className: className, testId: rootTestId, isDesktop: isDesktop, shouldFocusOnMount: shouldFocusOnMount, children: children }, "side-panel")) }) }) }));
+};
+SidePanelRoot.displayName = 'SidePanel';
+/**
+ * A side panel the user can keep open while they work, such as an AI assistant or a notifications
+ * list. It is never a modal: no backdrop, no focus trap, no scroll lock. From `lg` it is docked
+ * beside the page, which narrows to make room. Below `lg` there is no room to push, so it covers
+ * the page area under the header, which stays in reach to close it. Place it in `AppShell`'s `panel`
+ * slot, or as the last child of your own content row, and render it always: `isOpen` decides
+ * whether it shows.
+ *
+ * @summary non-modal side panel that pushes the page on desktop and covers it under the header on mobile
+ */
+const SidePanel = SidePanelRoot;
+SidePanel.Header = SidePanelHeader.SidePanelHeader;
+SidePanel.Content = SidePanelContent.SidePanelContent;
+SidePanel.Footer = SidePanelFooter.SidePanelFooter;
+
+exports.SIDE_PANEL_WIDTH = SidePanelRegion.SIDE_PANEL_WIDTH;
+exports.SidePanel = SidePanel;
+//# sourceMappingURL=index.cjs.map

package/dist/components/organisms/SidePanel/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/organisms/SidePanel/index.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","useBreakpoints","useContext","PageCoverContext","useOpenOnMount","useEffect","_jsx","SidePanelContext","TestIdProvider","AnimatePresence","SidePanelRegion","SidePanelHeader","SidePanelContent","SidePanelFooter"],"mappings":";;;;;;;;;;;;;;;AAwCA,MAAM,aAAa,GAAG,CAAC,EACrB,MAAM,EACN,YAAY,EACZ,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,SAAS,EACT,aAAa,EAAE,UAAU,GACV,KAAe;AAC9B,IAAA,MAAM,UAAU,GAAGA,6BAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC;AAC3G,IAAA,MAAM,SAAS,GAAGC,6BAAc,CAAC,IAAI,CAAC;AACtC,IAAA,MAAM,cAAc,GAAGC,gBAAU,CAACC,kCAAgB,CAAC;;IAEnD,MAAM,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,GAAGC,6BAAc,CAAC,MAAM,CAAC;IAEzE,MAAM,UAAU,GAAG,kBAAkB,IAAI,MAAM,IAAI,CAAC,SAAS;IAC7DC,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,cAAc,IAAI,CAAC,UAAU;YAAE;QACpC,cAAc,CAAC,IAAI,CAAC;AACpB,QAAA,OAAO,MAAM,cAAc,CAAC,KAAK,CAAC;AACpC,IAAA,CAAC,EAAE,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC;AAEhC,IAAA,IAAI,CAAC,kBAAkB;AAAE,QAAA,OAAO,IAAI;AAEpC,IAAA,QACEC,cAAA,CAACC,kCAAgB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAA,QAAA,EACtFD,cAAA,CAACE,0BAAc,EAAA,EAAC,KAAK,EAAE,UAAU,EAAA,QAAA,EAC/BF,cAAA,CAACG,qBAAe,EAAA,EAAC,OAAO,EAAE,KAAK,EAAA,QAAA,EAC5B,MAAM,KACLH,eAACI,+BAAe,EAAA,EAAA,YAAA,EAEF,SAAS,EACrB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,SAAS,EACpB,kBAAkB,EAAE,kBAAkB,EAAA,QAAA,EAErC,QAAQ,EAAA,EAPL,YAAY,CAQA,CACnB,EAAA,CACe,EAAA,CACH,EAAA,CACS;AAEhC,CAAC;AACD,aAAa,CAAC,WAAW,GAAG,WAAW;AAEvC;;;;;;;;;AASG;AACH,MAAM,SAAS,GAAG;AAMlB,SAAS,CAAC,MAAM,GAAGC,+BAAe;AAClC,SAAS,CAAC,OAAO,GAAGC,iCAAgB;AACpC,SAAS,CAAC,MAAM,GAAGC,+BAAe;;;;;"}

package/dist/components/organisms/SidePanel/index.d.ts

@@ -0,0 +1,48 @@
+import type { ReactNode } from 'react';
+import { SidePanelContent } from './components/SidePanelContent';
+import { SidePanelFooter } from './components/SidePanelFooter';
+import { SidePanelHeader } from './components/SidePanelHeader';
+export type { SidePanelContentProps } from './components/SidePanelContent';
+export type { SidePanelFooterProps } from './components/SidePanelFooter';
+export type { SidePanelHeaderProps } from './components/SidePanelHeader';
+export { SIDE_PANEL_WIDTH } from './components/SidePanelRegion';
+export interface SidePanelProps {
+    /**
+     * Whether the panel is open. Share it with the control that opens the panel, e.g. `assistant.isOpen`
+     * on `ApplicationHeader`. Opening moves focus into the panel, except when it is already open on the
+     * first render. So restore a saved open state as the initial state, as `useSidePanel` does, not in a
+     * mount effect, which would pull focus away from the page.
+     */
+    isOpen: boolean;
+    /** Called with `false` when the panel's close button is pressed. */
+    onOpenChange: (isOpen: boolean) => void;
+    /** Names the side region for assistive technology. */
+    'aria-label': string;
+    /** Compose `SidePanel.Header`, `SidePanel.Content` and `SidePanel.Footer`. */
+    children: ReactNode;
+    /** Extra classes merged onto the panel. */
+    className?: string;
+    /** Overrides the root `data-testid` (defaults to `fd-side-panel`). Descendants derive their ids from this prefix. */
+    'data-testid'?: string;
+}
+declare const SidePanelRoot: {
+    ({ isOpen, onOpenChange, "aria-label": ariaLabel, children, className, "data-testid": dataTestId, }: SidePanelProps): ReactNode;
+    displayName: string;
+};
+/**
+ * A side panel the user can keep open while they work, such as an AI assistant or a notifications
+ * list. It is never a modal: no backdrop, no focus trap, no scroll lock. From `lg` it is docked
+ * beside the page, which narrows to make room. Below `lg` there is no room to push, so it covers
+ * the page area under the header, which stays in reach to close it. Place it in `AppShell`'s `panel`
+ * slot, or as the last child of your own content row, and render it always: `isOpen` decides
+ * whether it shows.
+ *
+ * @summary non-modal side panel that pushes the page on desktop and covers it under the header on mobile
+ */
+declare const SidePanel: typeof SidePanelRoot & {
+    Header: typeof SidePanelHeader;
+    Content: typeof SidePanelContent;
+    Footer: typeof SidePanelFooter;
+};
+export { SidePanel };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/organisms/SidePanel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/SidePanel/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAM/D,YAAY,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAC3E,YAAY,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACzE,YAAY,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAEhE,MAAM,WAAW,cAAc;IAC7B;;;;;OAKG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB,oEAAoE;IACpE,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,sDAAsD;IACtD,YAAY,EAAE,MAAM,CAAC;IACrB,8EAA8E;IAC9E,QAAQ,EAAE,SAAS,CAAC;IACpB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qHAAqH;IACrH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,aAAa;yGAOhB,cAAc,GAAG,SAAS;;CAoC5B,CAAC;AAGF;;;;;;;;;GASG;AACH,QAAA,MAAM,SAAS,EAAoB,OAAO,aAAa,GAAG;IACxD,MAAM,EAAE,OAAO,eAAe,CAAC;IAC/B,OAAO,EAAE,OAAO,gBAAgB,CAAC;IACjC,MAAM,EAAE,OAAO,eAAe,CAAC;CAChC,CAAC;AAMF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/organisms/SidePanel/index.js

@@ -0,0 +1,49 @@
+import { jsx } from 'react/jsx-runtime';
+import { useBreakpoints } from '@flipdish/ui-library/hooks/useBreakpoints';
+import { useResolvedTestId, TestIdProvider } from '@flipdish/ui-library/utilities/testIdUtils';
+import { AnimatePresence } from 'motion/react';
+import { useContext, useEffect } from 'react';
+import { SidePanelContent } from './components/SidePanelContent.js';
+import { SidePanelFooter } from './components/SidePanelFooter.js';
+import { SidePanelHeader } from './components/SidePanelHeader.js';
+import { SidePanelRegion } from './components/SidePanelRegion.js';
+export { SIDE_PANEL_WIDTH } from './components/SidePanelRegion.js';
+import { useOpenOnMount } from './hooks/useOpenOnMount.js';
+import { PageCoverContext } from './providers/PageCover.context.js';
+import { SidePanelContext } from './providers/SidePanel.context.js';
+
+const SidePanelRoot = ({ isOpen, onOpenChange, 'aria-label': ariaLabel, children, className, 'data-testid': dataTestId, }) => {
+    const rootTestId = useResolvedTestId({ testId: dataTestId, segment: 'side-panel', rootName: 'side-panel' });
+    const isDesktop = useBreakpoints('lg');
+    const setPageCovered = useContext(PageCoverContext);
+    // Nothing renders until the viewport is known, so server and client markup agree.
+    const { canMeasureViewport, shouldFocusOnMount } = useOpenOnMount(isOpen);
+    const coversPage = canMeasureViewport && isOpen && !isDesktop;
+    useEffect(() => {
+        if (!setPageCovered || !coversPage)
+            return;
+        setPageCovered(true);
+        return () => setPageCovered(false);
+    }, [setPageCovered, coversPage]);
+    if (!canMeasureViewport)
+        return null;
+    return (jsx(SidePanelContext.Provider, { value: { close: () => onOpenChange(false), label: ariaLabel }, children: jsx(TestIdProvider, { value: rootTestId, children: jsx(AnimatePresence, { initial: false, children: isOpen && (jsx(SidePanelRegion, { "aria-label": ariaLabel, className: className, testId: rootTestId, isDesktop: isDesktop, shouldFocusOnMount: shouldFocusOnMount, children: children }, "side-panel")) }) }) }));
+};
+SidePanelRoot.displayName = 'SidePanel';
+/**
+ * A side panel the user can keep open while they work, such as an AI assistant or a notifications
+ * list. It is never a modal: no backdrop, no focus trap, no scroll lock. From `lg` it is docked
+ * beside the page, which narrows to make room. Below `lg` there is no room to push, so it covers
+ * the page area under the header, which stays in reach to close it. Place it in `AppShell`'s `panel`
+ * slot, or as the last child of your own content row, and render it always: `isOpen` decides
+ * whether it shows.
+ *
+ * @summary non-modal side panel that pushes the page on desktop and covers it under the header on mobile
+ */
+const SidePanel = SidePanelRoot;
+SidePanel.Header = SidePanelHeader;
+SidePanel.Content = SidePanelContent;
+SidePanel.Footer = SidePanelFooter;
+
+export { SidePanel };
+//# sourceMappingURL=index.js.map

package/dist/components/organisms/SidePanel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/SidePanel/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;AAwCA,MAAM,aAAa,GAAG,CAAC,EACrB,MAAM,EACN,YAAY,EACZ,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,SAAS,EACT,aAAa,EAAE,UAAU,GACV,KAAe;AAC9B,IAAA,MAAM,UAAU,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC;AAC3G,IAAA,MAAM,SAAS,GAAG,cAAc,CAAC,IAAI,CAAC;AACtC,IAAA,MAAM,cAAc,GAAG,UAAU,CAAC,gBAAgB,CAAC;;IAEnD,MAAM,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,GAAG,cAAc,CAAC,MAAM,CAAC;IAEzE,MAAM,UAAU,GAAG,kBAAkB,IAAI,MAAM,IAAI,CAAC,SAAS;IAC7D,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,cAAc,IAAI,CAAC,UAAU;YAAE;QACpC,cAAc,CAAC,IAAI,CAAC;AACpB,QAAA,OAAO,MAAM,cAAc,CAAC,KAAK,CAAC;AACpC,IAAA,CAAC,EAAE,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC;AAEhC,IAAA,IAAI,CAAC,kBAAkB;AAAE,QAAA,OAAO,IAAI;AAEpC,IAAA,QACEA,GAAA,CAAC,gBAAgB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAA,QAAA,EACtFA,GAAA,CAAC,cAAc,EAAA,EAAC,KAAK,EAAE,UAAU,EAAA,QAAA,EAC/BA,GAAA,CAAC,eAAe,EAAA,EAAC,OAAO,EAAE,KAAK,EAAA,QAAA,EAC5B,MAAM,KACLA,IAAC,eAAe,EAAA,EAAA,YAAA,EAEF,SAAS,EACrB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,SAAS,EACpB,kBAAkB,EAAE,kBAAkB,EAAA,QAAA,EAErC,QAAQ,EAAA,EAPL,YAAY,CAQA,CACnB,EAAA,CACe,EAAA,CACH,EAAA,CACS;AAEhC,CAAC;AACD,aAAa,CAAC,WAAW,GAAG,WAAW;AAEvC;;;;;;;;;AASG;AACH,MAAM,SAAS,GAAG;AAMlB,SAAS,CAAC,MAAM,GAAG,eAAe;AAClC,SAAS,CAAC,OAAO,GAAG,gBAAgB;AACpC,SAAS,CAAC,MAAM,GAAG,eAAe;;;;"}

package/dist/components/organisms/SidePanel/providers/PageCover.context.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+var React = require('react');
+
+/**
+ * Lets the panel tell the layout around it that it is covering the page below `lg`, so the layout
+ * can take the page out of reach. `AppShell` provides it; without a provider the panel calls nothing.
+ */
+const PageCoverContext = React.createContext(undefined);
+
+exports.PageCoverContext = PageCoverContext;
+//# sourceMappingURL=PageCover.context.cjs.map

package/dist/components/organisms/SidePanel/providers/PageCover.context.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageCover.context.cjs","sources":["../../../../../src/components/organisms/SidePanel/providers/PageCover.context.ts"],"sourcesContent":[null],"names":["createContext"],"mappings":";;;;AAIA;;;AAGG;MACU,gBAAgB,GAAGA,mBAAa,CAA6C,SAAS;;;;"}

package/dist/components/organisms/SidePanel/providers/PageCover.context.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Lets the panel tell the layout around it that it is covering the page below `lg`, so the layout
+ * can take the page out of reach. `AppShell` provides it; without a provider the panel calls nothing.
+ */
+export declare const PageCoverContext: import("react").Context<((isCovered: boolean) => void) | undefined>;
+//# sourceMappingURL=PageCover.context.d.ts.map

package/dist/components/organisms/SidePanel/providers/PageCover.context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageCover.context.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/providers/PageCover.context.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,eAAO,MAAM,gBAAgB,uCAA8B,OAAO,KAAK,IAAI,cAAyB,CAAC"}

package/dist/components/organisms/SidePanel/providers/PageCover.context.js

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+
+/**
+ * Lets the panel tell the layout around it that it is covering the page below `lg`, so the layout
+ * can take the page out of reach. `AppShell` provides it; without a provider the panel calls nothing.
+ */
+const PageCoverContext = createContext(undefined);
+
+export { PageCoverContext };
+//# sourceMappingURL=PageCover.context.js.map

package/dist/components/organisms/SidePanel/providers/PageCover.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageCover.context.js","sources":["../../../../../src/components/organisms/SidePanel/providers/PageCover.context.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAIA;;;AAGG;MACU,gBAAgB,GAAG,aAAa,CAA6C,SAAS;;;;"}

package/dist/components/organisms/SidePanel/providers/SidePanel.context.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var React = require('react');
+
+/** Provided by the panel root, read by its header, so the sections never import `../index`. */
+const SidePanelContext = React.createContext(undefined);
+
+exports.SidePanelContext = SidePanelContext;
+//# sourceMappingURL=SidePanel.context.cjs.map

package/dist/components/organisms/SidePanel/providers/SidePanel.context.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanel.context.cjs","sources":["../../../../../src/components/organisms/SidePanel/providers/SidePanel.context.ts"],"sourcesContent":[null],"names":["createContext"],"mappings":";;;;AAUA;MACa,gBAAgB,GAAGA,mBAAa,CAAoC,SAAS;;;;"}

package/dist/components/organisms/SidePanel/providers/SidePanel.context.d.ts

@@ -0,0 +1,8 @@
+export interface SidePanelContextValue {
+    close: () => void;
+    /** The panel's `aria-label`, so the close button can say which panel it closes. */
+    label: string;
+}
+/** Provided by the panel root, read by its header, so the sections never import `../index`. */
+export declare const SidePanelContext: import("react").Context<SidePanelContextValue | undefined>;
+//# sourceMappingURL=SidePanel.context.d.ts.map

package/dist/components/organisms/SidePanel/providers/SidePanel.context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanel.context.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/providers/SidePanel.context.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,mFAAmF;IACnF,KAAK,EAAE,MAAM,CAAC;CACf;AAED,+FAA+F;AAC/F,eAAO,MAAM,gBAAgB,4DAA8D,CAAC"}

package/dist/components/organisms/SidePanel/providers/SidePanel.context.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+/** Provided by the panel root, read by its header, so the sections never import `../index`. */
+const SidePanelContext = createContext(undefined);
+
+export { SidePanelContext };
+//# sourceMappingURL=SidePanel.context.js.map

package/dist/components/organisms/SidePanel/providers/SidePanel.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanel.context.js","sources":["../../../../../src/components/organisms/SidePanel/providers/SidePanel.context.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAUA;MACa,gBAAgB,GAAG,aAAa,CAAoC,SAAS;;;;"}

package/dist/components/organisms/SidebarNavigation/components/LogoLink.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var FlipdishLogo = require('@flipdish/ui-library/components/atoms/FlipdishLogo');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var hrefUtils = require('@flipdish/ui-library/utilities/hrefUtils');
+var reactAriaComponents = require('react-aria-components');
+
+/**
+ * The Flipdish logo as a link home. Sized to the logo so it never swallows clicks meant for neighbouring
+ * controls. When `safeHref` rejects the destination it renders the plain logo, so nothing can be activated
+ * and `onClick` never reports a URL the link itself refused.
+ */
+const LogoLink = ({ href, size, onClick, className, 'data-testid': dataTestId }) => {
+    const destination = hrefUtils.safeHref(href);
+    if (destination === undefined) {
+        return jsxRuntime.jsx(FlipdishLogo.FlipdishLogo, { size: size, className: className, "data-testid": dataTestId });
+    }
+    return (jsxRuntime.jsx(reactAriaComponents.Link, { href: destination, "aria-label": "Go to homepage", "data-testid": dataTestId, onClick: onClick, className: cx.cx('inline-flex rounded-xs outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2', className), children: jsxRuntime.jsx(FlipdishLogo.FlipdishLogo, { size: size, "aria-hidden": "true" }) }));
+};
+
+exports.LogoLink = LogoLink;
+//# sourceMappingURL=LogoLink.cjs.map

package/dist/components/organisms/SidebarNavigation/components/LogoLink.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogoLink.cjs","sources":["../../../../../src/components/organisms/SidebarNavigation/components/LogoLink.tsx"],"sourcesContent":[null],"names":["safeHref","_jsx","FlipdishLogo","AriaLink","cx"],"mappings":";;;;;;;;AAgBA;;;;AAIG;AACI,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAiB,KAAI;AACvG,IAAA,MAAM,WAAW,GAAGA,kBAAQ,CAAC,IAAI,CAAC;AAElC,IAAA,IAAI,WAAW,KAAK,SAAS,EAAE;AAC7B,QAAA,OAAOC,cAAA,CAACC,yBAAY,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAA,aAAA,EAAe,UAAU,GAAI;IACpF;AAEA,IAAA,QACED,cAAA,CAACE,wBAAQ,EAAA,EACP,IAAI,EAAE,WAAW,EAAA,YAAA,EACN,gBAAgB,EAAA,aAAA,EACd,UAAU,EACvB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAEC,KAAE,CAAC,kGAAkG,EAAE,SAAS,CAAC,EAAA,QAAA,EAE5HH,eAACC,yBAAY,EAAA,EAAC,IAAI,EAAE,IAAI,EAAA,aAAA,EAAc,MAAM,EAAA,CAAG,EAAA,CACtC;AAEf;;;;"}

package/dist/components/organisms/SidebarNavigation/components/LogoLink.d.ts

@@ -0,0 +1,16 @@
+interface LogoLinkProps {
+    href: string;
+    size: 'sm' | 'md';
+    /** Called when the link is activated, before the router handles it. Never called for a rejected `href`. */
+    onClick?: () => void;
+    className?: string;
+    'data-testid'?: string;
+}
+/**
+ * The Flipdish logo as a link home. Sized to the logo so it never swallows clicks meant for neighbouring
+ * controls. When `safeHref` rejects the destination it renders the plain logo, so nothing can be activated
+ * and `onClick` never reports a URL the link itself refused.
+ */
+export declare const LogoLink: ({ href, size, onClick, className, "data-testid": dataTestId }: LogoLinkProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=LogoLink.d.ts.map

package/dist/components/organisms/SidebarNavigation/components/LogoLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogoLink.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidebarNavigation/components/LogoLink.tsx"],"names":[],"mappings":"AAOA,UAAU,aAAa;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,2GAA2G;IAC3G,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,+DAA+D,aAAa,gCAkBpG,CAAC"}

package/dist/components/organisms/SidebarNavigation/components/LogoLink.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { FlipdishLogo } from '@flipdish/ui-library/components/atoms/FlipdishLogo';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { safeHref } from '@flipdish/ui-library/utilities/hrefUtils';
+import { Link } from 'react-aria-components';
+
+/**
+ * The Flipdish logo as a link home. Sized to the logo so it never swallows clicks meant for neighbouring
+ * controls. When `safeHref` rejects the destination it renders the plain logo, so nothing can be activated
+ * and `onClick` never reports a URL the link itself refused.
+ */
+const LogoLink = ({ href, size, onClick, className, 'data-testid': dataTestId }) => {
+    const destination = safeHref(href);
+    if (destination === undefined) {
+        return jsx(FlipdishLogo, { size: size, className: className, "data-testid": dataTestId });
+    }
+    return (jsx(Link, { href: destination, "aria-label": "Go to homepage", "data-testid": dataTestId, onClick: onClick, className: cx('inline-flex rounded-xs outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2', className), children: jsx(FlipdishLogo, { size: size, "aria-hidden": "true" }) }));
+};
+
+export { LogoLink };
+//# sourceMappingURL=LogoLink.js.map

package/dist/components/organisms/SidebarNavigation/components/LogoLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogoLink.js","sources":["../../../../../src/components/organisms/SidebarNavigation/components/LogoLink.tsx"],"sourcesContent":[null],"names":["_jsx","AriaLink"],"mappings":";;;;;;AAgBA;;;;AAIG;AACI,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAiB,KAAI;AACvG,IAAA,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC;AAElC,IAAA,IAAI,WAAW,KAAK,SAAS,EAAE;AAC7B,QAAA,OAAOA,GAAA,CAAC,YAAY,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAA,aAAA,EAAe,UAAU,GAAI;IACpF;AAEA,IAAA,QACEA,GAAA,CAACC,IAAQ,EAAA,EACP,IAAI,EAAE,WAAW,EAAA,YAAA,EACN,gBAAgB,EAAA,aAAA,EACd,UAAU,EACvB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,EAAE,CAAC,kGAAkG,EAAE,SAAS,CAAC,EAAA,QAAA,EAE5HD,IAAC,YAAY,EAAA,EAAC,IAAI,EAAE,IAAI,EAAA,aAAA,EAAc,MAAM,EAAA,CAAG,EAAA,CACtC;AAEf;;;;"}

package/dist/components/organisms/SidebarNavigation/components/MobileHeader.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var uiIcons = require('@flipdish/ui-icons');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var reactAriaComponents = require('react-aria-components');
+var LogoLink = require('./LogoLink.cjs');
+var SidebarMenuButton = require('./SidebarMenuButton.cjs');
+
+/**
+ * The built-in mobile top bar: Flipdish logo + hamburger toggle, shown below the
+ * `lg` breakpoint. Rendered by `SidebarNavigation` when `showMobileHeader` is `true`.
+ * Consumers who supply their own header instead should set `showMobileHeader={false}`
+ * and embed a {@link SidebarMenuButton}.
+ */
+const MobileNavigationHeader = ({ isOpen, onOpenChange, controls, homeHref, onHomePress, logoTestId, 'data-testid': dataTestId, }) => (jsxRuntime.jsxs("header", { className: "flex h-14 items-center justify-between border-b border-secondary bg-primary p-3 pl-4 lg:hidden", children: [jsxRuntime.jsx(LogoLink.LogoLink, { href: homeHref, size: "sm", onClick: onHomePress, "data-testid": logoTestId }), jsxRuntime.jsx(SidebarMenuButton.SidebarMenuButton, { isOpen: isOpen, onPress: () => onOpenChange(!isOpen), controls: controls, "data-testid": dataTestId })] }));
+/**
+ * The controlled slide-over drawer that holds the mobile navigation. Its open
+ * state is owned by `SidebarNavigation`, so it can be driven by either the
+ * built-in header or an externally-embedded {@link SidebarMenuButton}. Hidden at
+ * `lg` and up, where the fixed rail takes over.
+ */
+const MobileNavigationDrawer = ({ isOpen, onOpenChange, id, children, 'aria-label': ariaLabel = 'Navigation menu', 'data-testid': dataTestId, }) => (jsxRuntime.jsx(reactAriaComponents.ModalOverlay, { isDismissable: true, isOpen: isOpen, onOpenChange: onOpenChange, className: ({ isEntering, isExiting }) => cx.cx('fixed inset-0 z-50 cursor-pointer bg-overlay/70 pr-16 backdrop-blur-md lg:hidden', isEntering && 'duration-300 ease-in-out animate-in fade-in', isExiting && 'duration-200 ease-in-out animate-out fade-out'), children: ({ state }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactAriaComponents.Button, { "aria-label": "Close navigation menu", "data-testid": dataTestId, onPress: () => state.close(), className: "fixed top-2.5 right-3 flex cursor-pointer items-center justify-center rounded-lg p-2 text-fg-white/70 outline-focus-ring hover:bg-white/10 hover:text-fg-white focus-visible:outline-2 focus-visible:outline-offset-2", children: jsxRuntime.jsx(uiIcons.X, { className: "size-6" }) }), jsxRuntime.jsx(reactAriaComponents.Modal, { className: "w-full max-w-74 cursor-auto will-change-transform", children: jsxRuntime.jsx(reactAriaComponents.Dialog, { id: id, "aria-label": ariaLabel, className: "h-dvh outline-hidden focus:outline-hidden", children: children }) })] })) }));
+
+exports.MobileNavigationDrawer = MobileNavigationDrawer;
+exports.MobileNavigationHeader = MobileNavigationHeader;
+//# sourceMappingURL=MobileHeader.cjs.map