@dbcdk/react-components 0.0.4 → 0.0.6

package/dist/components/menu/Menu.module.css

@@ -1,18 +1,3 @@
-/* =========================
-   Panel (apply to dialog content)
-   ========================= */
-.panel {
-  background: var(--color-surface);
-  color: var(--color-text);
-  border: var(--border-width-thin) solid var(--color-border);
-  border-radius: var(--border-radius-md);
-  box-shadow: var(--shadow-md);
-  padding: var(--spacing-xs);
-}
-
-/* =========================
-   List (ul) — reset only
-   ========================= */
 .container {
   list-style: none;
   margin: 0;
@@ -20,35 +5,29 @@
   background: transparent;
   border: 0;
   box-shadow: none;
-
   display: flex;
   flex-direction: column;
 }
 
-/* space between rows without adding inner borders */
 .container > li + li {
   margin-block-start: var(--spacing-2xs);
 }
 
-/* li wrapper (non-focusable) */
 .row {
   display: contents;
 }
 
-/* =========================
-   Interactive child (a/button/Link)
-   ========================= */
 .interactive {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: var(--spacing-xs);
-
   inline-size: 100%;
   text-align: start;
   text-decoration: none;
 
-  padding-block: calc(var(--spacing-xs) + var(--density));
+  /* choose your density */
+  padding-block: calc(var(--spacing-xs) + var(--density-comfortable));
   padding-inline: var(--spacing-md);
 
   background: transparent;
@@ -56,7 +35,7 @@
 
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
-  color: var(--color-text);
+  color: var(--color-fg-default);
   cursor: pointer;
 
   border-radius: var(--border-radius-sm);
@@ -65,31 +44,30 @@
     background-color var(--transition-fast) var(--ease-standard),
     color var(--transition-fast) var(--ease-standard);
 }
+
 .interactive:hover {
-  background-color: var(--color-surface-hover);
+  background-color: var(--color-bg-hover-subtle);
 }
+
 .interactive:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
 
-/* Selected / active */
 .active,
 .interactive[aria-selected='true'] {
   background-color: var(--color-bg-selected);
-  color: var(--color-text);
+  color: var(--color-fg-default);
 }
 
-/* Disabled */
 .interactive[aria-disabled='true'],
 .interactive:disabled {
-  color: var(--color-disabled-text);
+  color: var(--color-disabled-fg);
   cursor: not-allowed;
   pointer-events: none;
 }
 
-/* Icons inside items */
 .interactive svg {
-  inline-size: var(--icon-size);
-  block-size: var(--icon-size);
+  inline-size: var(--icon-size-md);
+  block-size: var(--icon-size-md);
 }

package/dist/components/meta-bar/MetaBar.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode, type JSX } from 'react';
+export interface MetaItem {
+    label?: ReactNode;
+    value: ReactNode;
+}
+interface MetaBarProps {
+    items: MetaItem[];
+    separator?: ReactNode;
+}
+export declare function MetaBar({ items, separator }: MetaBarProps): JSX.Element | null;
+export {};

package/dist/components/meta-bar/MetaBar.js

@@ -0,0 +1,9 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import styles from './MetaBar.module.css';
+export function MetaBar({ items, separator = '•' }) {
+    const visibleItems = items.filter(item => item.value !== null && item.value !== undefined && item.value !== '');
+    if (visibleItems.length === 0)
+        return null;
+    return (_jsx("div", { className: styles.meta, children: visibleItems.map((item, index) => (_jsxs(Fragment, { children: [_jsxs("span", { children: [item.label && _jsxs("span", { children: [item.label, ": "] }), _jsx("span", { children: item.value })] }), index < visibleItems.length - 1 && (_jsx("span", { "aria-hidden": "true", className: styles.dot, children: separator }))] }, index))) }));
+}

package/dist/components/meta-bar/MetaBar.module.css

@@ -0,0 +1,12 @@
+.meta {
+  color: var(--color-fg-subtle);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-xs);
+  font-size: var(--font-size-xs);
+}
+
+.dot {
+  opacity: 0.6;
+}

package/dist/components/nav-bar/NavBar.d.ts

@@ -1,8 +1,8 @@
-import * as React from 'react';
+import type { ElementType, ReactNode, JSX } from 'react';
 export type NavBarItem = {
-    component?: React.ElementType<any>;
+    component?: ElementType<any>;
     label: string;
-    icon?: React.ReactNode;
+    icon?: ReactNode;
     active?: boolean;
     external?: boolean;
     enabled?: boolean;
@@ -11,10 +11,10 @@ export type NavBarItem = {
     children?: NavBarItem[];
 };
 interface NavBarProps {
-    logo?: React.ReactNode;
+    logo?: ReactNode;
     items: NavBarItem[];
     productName?: string;
-    addition?: React.ReactNode;
+    addition?: ReactNode;
 }
 export declare function NavBar({ logo, items, productName, addition }: NavBarProps): JSX.Element;
 export {};

package/dist/components/nav-bar/NavBar.js

@@ -1,49 +1,19 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './NavBar.module.css';
 import { Logo } from '../../assets/logo';
-import { Headline } from '../headline/Headline';
 import { AppHeader } from '../app-header/AppHeader';
-
-function NavBar({ logo, items, productName, addition }) {
-  return /* @__PURE__ */ jsx(AppHeader, { children: /* @__PURE__ */ jsxs(
-    "nav",
-    {
-      className: styles.container,
-      "aria-label": productName ? `${productName} navigation` : "Main navigation",
-      children: [
-        logo,
-        productName && /* @__PURE__ */ jsxs(
-          "span",
-          {
-            className: styles.productName,
-            style: { display: "flex", alignItems: "center", gap: 16 },
-            children: [
-              /* @__PURE__ */ jsx(Logo, {}),
-              /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 1, children: productName })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx("ul", { className: styles.navItems, role: "list", children: items == null ? void 0 : items.filter((i) => i.enabled !== false).map((item, id) => {
-          const { component: Component, label, icon, href, active, external } = item;
-          const linkClass = [styles.link, active ? styles.active : ""].filter(Boolean).join(" ");
-          const commonProps = {
-            className: linkClass,
-            href,
-            ...active ? { "aria-current": "page" } : {},
-            ...external ? { target: "_blank", rel: "noopener noreferrer" } : {}
-          };
-          return /* @__PURE__ */ jsx("li", { className: styles.navItem, role: "listitem", children: Component ? /* @__PURE__ */ jsxs(Component, { ...commonProps, children: [
-            icon,
-            /* @__PURE__ */ jsx("span", { className: styles.label, children: label })
-          ] }) : /* @__PURE__ */ jsxs("a", { ...commonProps, children: [
-            icon,
-            /* @__PURE__ */ jsx("span", { className: styles.label, children: label })
-          ] }) }, id);
-        }) }),
-        addition
-      ]
-    }
-  ) });
+import { Headline } from '../headline/Headline';
+export function NavBar({ logo, items, productName, addition }) {
+    return (_jsx(AppHeader, { children: _jsxs("nav", { className: styles.container, "aria-label": productName ? `${productName} navigation` : 'Main navigation', children: [logo, productName && (_jsxs("span", { className: styles.productName, style: { display: 'flex', alignItems: 'center', gap: 16 }, children: [_jsx(Logo, {}), _jsx(Headline, { disableMargin: true, size: 1, children: productName })] })), _jsx("ul", { className: styles.navItems, role: "list", children: items === null || items === void 0 ? void 0 : items.filter(i => i.enabled !== false).map((item, id) => {
+                        const { component: Component, label, icon, href, active, external } = item;
+                        const linkClass = [styles.link, active ? styles.active : ''].filter(Boolean).join(' ');
+                        const commonProps = {
+                            className: linkClass,
+                            href,
+                            ...(active ? { 'aria-current': 'page' } : {}),
+                            ...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {}),
+                        };
+                        return (_jsx("li", { className: styles.navItem, role: "listitem", children: Component ? (_jsxs(Component, { ...commonProps, children: [icon, _jsx("span", { className: styles.label, children: label })] })) : (_jsxs("a", { ...commonProps, children: [icon, _jsx("span", { className: styles.label, children: label })] })) }, id));
+                    }) }), addition] }) }));
 }
-
-export { NavBar };

package/dist/components/nav-bar/NavBar.module.css

@@ -15,8 +15,8 @@
   text-decoration: none;
 }
 .productName svg {
-  inline-size: var(--icon-size);
-  block-size: var(--icon-size);
+  inline-size: var(--icon-size-md);
+  block-size: var(--icon-size-md);
 }
 
 .navItems {
@@ -41,11 +41,10 @@
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-xs);
-  color: var(--color-text-secondary);
+  color: var(--color-fg-muted);
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
   text-decoration: none;
-  text-transform: var(--nav-link-transform);
   border-radius: var(--border-radius-default);
   padding-block: calc(var(--spacing-xs) + var(--density));
   padding-inline: var(--spacing-sm);
@@ -57,23 +56,18 @@
 
 /* Hover + focus */
 .link:hover {
-  background-color: var(--color-surface-hover);
-  color: var(--color-text);
+  background-color: var(--color-bg-hover-subtle);
+  color: var(--color-fg-default);
 }
 .link:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
 
-/* Active underline (no radius warp) */
-.link {
-  position: relative; /* establish positioning context for ::after */
-}
-
-/* Base: reset any previous inset shadows */
+/* Active underline */
 .link.active,
 .link[aria-current='page'] {
-  color: var(--color-text);
+  color: var(--color-fg-default);
   box-shadow: none;
 }
 
@@ -84,7 +78,7 @@
   inset-block-end: 0;
   inline-size: 0;
   block-size: 2px;
-  background-color: var(--color-primary);
+  background-color: var(--color-brand);
   transition: inline-size var(--transition-fast) var(--ease-standard);
 }
 
@@ -92,10 +86,11 @@
 .link[aria-current='page']::after {
   inline-size: 100%;
 }
+
 /* Icons/images inside links */
 .link svg,
 .link img {
-  inline-size: var(--icon-size);
-  block-size: var(--icon-size);
+  inline-size: var(--icon-size-md);
+  block-size: var(--icon-size-md);
   flex: 0 0 auto;
 }

package/dist/components/overlay/modal/Modal.d.ts

@@ -0,0 +1,23 @@
+import React, { ReactNode } from 'react';
+import { Severity } from '../../../constants/severity.types';
+export type ModalActionConfig = {
+    label: string;
+    onClick?: () => void;
+    icon?: ReactNode;
+    disabled?: boolean;
+};
+export type ModalProps = {
+    isLoading?: boolean;
+    isOpen: boolean;
+    onRequestClose: () => void;
+    header?: ReactNode;
+    content?: ReactNode;
+    children?: ReactNode;
+    primaryAction?: ModalActionConfig;
+    secondaryAction?: ModalActionConfig;
+    closeOnOverlayClick?: boolean;
+    severity?: Severity;
+    disableContentSpacing?: boolean;
+    dataCy?: string;
+};
+export declare function Modal({ isOpen, onRequestClose, header, content, children, primaryAction, secondaryAction, closeOnOverlayClick, severity, disableContentSpacing, isLoading, dataCy, }: ModalProps): React.ReactNode;

package/dist/components/overlay/modal/Modal.js

@@ -0,0 +1,92 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from 'lucide-react';
+import { useEffect, useId, useRef } from 'react';
+import { Button } from '../../../components/button/Button';
+import { Headline } from '../../../components/headline/Headline';
+import styles from './Modal.module.css';
+export function Modal({ isOpen, onRequestClose, header, content, children, primaryAction, secondaryAction, closeOnOverlayClick = true, severity, disableContentSpacing = false, isLoading, dataCy, }) {
+    const titleId = useId();
+    const dialogRef = useRef(null);
+    const lastActiveElementRef = useRef(null);
+    // Always call the latest onRequestClose without re-running effects
+    const onRequestCloseRef = useRef(onRequestClose);
+    useEffect(() => {
+        onRequestCloseRef.current = onRequestClose;
+    }, [onRequestClose]);
+    // Track open transition so we only autofocus once per open
+    const wasOpenRef = useRef(false);
+    useEffect(() => {
+        var _a;
+        const wasOpen = wasOpenRef.current;
+        wasOpenRef.current = isOpen;
+        if (!isOpen)
+            return;
+        // Only do focus setup when opening (false -> true)
+        if (!wasOpen) {
+            lastActiveElementRef.current = document.activeElement;
+            const dialog = dialogRef.current;
+            if (dialog) {
+                const focusableSelectors = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+                const focusable = dialog.querySelectorAll(focusableSelectors);
+                if (focusable.length > 0) {
+                    // Prefer focusing the first input/select/textarea if present
+                    const preferred = (_a = dialog.querySelector('input, select, textarea')) !== null && _a !== void 0 ? _a : focusable[0];
+                    preferred.focus();
+                }
+                else {
+                    dialog.focus();
+                }
+            }
+        }
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                onRequestCloseRef.current();
+                return;
+            }
+            if (event.key === 'Tab' && dialogRef.current) {
+                const focusableSelectors = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+                const focusable = dialogRef.current.querySelectorAll(focusableSelectors);
+                if (focusable.length === 0)
+                    return;
+                const first = focusable[0];
+                const last = focusable[focusable.length - 1];
+                if (event.shiftKey) {
+                    if (document.activeElement === first) {
+                        event.preventDefault();
+                        last.focus();
+                    }
+                }
+                else {
+                    if (document.activeElement === last) {
+                        event.preventDefault();
+                        first.focus();
+                    }
+                }
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+            // Restore focus only when closing (true -> false) happens elsewhere
+            // so we do it when modal unmounts while open.
+            if (lastActiveElementRef.current) {
+                lastActiveElementRef.current.focus();
+            }
+        };
+    }, [isOpen]); // <-- IMPORTANT: only depend on isOpen
+    if (!isOpen)
+        return null;
+    const handleOverlayClick = () => {
+        if (closeOnOverlayClick) {
+            onRequestCloseRef.current();
+        }
+    };
+    const stopPropagation = e => {
+        e.stopPropagation();
+    };
+    const resolvedSecondaryAction = secondaryAction !== null && secondaryAction !== void 0 ? secondaryAction : (primaryAction ? { label: 'Luk', onClick: onRequestCloseRef.current } : undefined);
+    const shouldRenderFooter = Boolean(primaryAction || resolvedSecondaryAction);
+    const body = children !== null && children !== void 0 ? children : content;
+    return (_jsx("div", { className: styles.overlay, onClick: handleOverlayClick, children: _jsxs("div", { "data-cy": dataCy, ref: dialogRef, className: `${styles.modal} ${disableContentSpacing ? '' : styles.contentSpacing}`, onClick: stopPropagation, role: "dialog", "aria-modal": "true", "aria-labelledby": header ? titleId : undefined, children: [_jsxs("div", { className: styles.header, children: [header && (_jsx(Headline, { severity: severity, size: 3, disableMargin: true, children: header })), _jsx(Button, { type: "button", variant: "inline", onClick: () => onRequestCloseRef.current(), "aria-label": "Luk", children: _jsx(X, {}) })] }), _jsx("div", { className: styles.body, children: body }), shouldRenderFooter && (_jsxs("div", { className: styles.footer, children: [resolvedSecondaryAction && (_jsxs(Button, { type: "button", variant: "outlined", onClick: resolvedSecondaryAction.onClick, disabled: isLoading, children: [resolvedSecondaryAction.icon && (_jsx("span", { className: styles.icon, children: resolvedSecondaryAction.icon })), _jsx("span", { children: resolvedSecondaryAction.label })] })), primaryAction && (_jsxs(Button, { type: "button", variant: "primary", onClick: primaryAction.onClick, disabled: primaryAction.disabled || isLoading, loading: isLoading, children: [primaryAction.icon && _jsx("span", { className: styles.icon, children: primaryAction.icon }), _jsx("span", { children: primaryAction.label })] }))] }))] }) }));
+}

package/dist/components/overlay/modal/Modal.module.css

@@ -0,0 +1,66 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--overlay-scrim);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: clamp(var(--spacing-md), 12vh, 24vh);
+  padding-bottom: var(--spacing-md);
+  z-index: var(--z-modal);
+  overflow-y: auto;
+}
+
+.modal {
+  background: var(--color-bg-surface);
+  border-radius: var(--border-radius-lg);
+  min-width: 320px;
+  max-width: 540px;
+  max-height: calc(100vh - (2 * var(--spacing-md)));
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--shadow-lg);
+  font-family: var(--font-family);
+  min-width: 400px;
+  color: var(--color-fg-default);
+}
+
+/* Slightly more relaxed on small screens */
+@media (max-width: var(--bp-sm)) {
+  .modal {
+    width: calc(100% - 2 * var(--spacing-md));
+    max-width: 100%;
+  }
+}
+
+.header {
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-semibold);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spacing-md);
+  padding-bottom: 0;
+}
+
+.body {
+  overflow-y: auto;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+  color: var(--color-fg-muted);
+  padding: var(--spacing-md);
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spacing-xs);
+  padding-top: 0;
+  padding: var(--spacing-md);
+}
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}

package/dist/components/overlay/modal/provider/ModalProvider.d.ts

@@ -0,0 +1,20 @@
+import React, { ReactNode } from 'react';
+import { ModalProps } from '../Modal';
+type ModalConfig = Omit<ModalProps, 'isOpen' | 'onRequestClose'> & {
+    onRequestClose?: () => void;
+};
+type ConfirmModalConfig = Omit<ModalConfig, 'primaryAction' | 'secondaryAction' | 'onRequestClose'> & {
+    confirmLabel?: string;
+    cancelLabel?: string;
+};
+type ModalContextValue = {
+    openModal: (config: ModalConfig) => void;
+    closeModal: () => void;
+    confirm: (config: ConfirmModalConfig) => Promise<boolean>;
+};
+type ModalProviderProps = {
+    children: ReactNode;
+};
+export declare function ModalProvider({ children }: ModalProviderProps): React.ReactNode;
+export declare function useModal(): ModalContextValue;
+export {};

package/dist/components/overlay/modal/provider/ModalProvider.js

@@ -0,0 +1,70 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useState, useRef } from 'react';
+import { Modal } from '../Modal';
+const ModalContext = createContext(undefined);
+export function ModalProvider({ children }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [config, setConfig] = useState(null);
+    // Holds the resolver for the current "confirm" call, if any
+    const pendingResolverRef = useRef(null);
+    const resolvePending = useCallback((value) => {
+        if (pendingResolverRef.current) {
+            pendingResolverRef.current(value);
+            pendingResolverRef.current = null;
+        }
+    }, []);
+    const closeModal = useCallback(() => {
+        setIsOpen(false);
+    }, []);
+    const openModal = useCallback((newConfig) => {
+        // if a confirm was in progress, resolve it as "false" (cancelled/overridden)
+        resolvePending(false);
+        setConfig(newConfig);
+        setIsOpen(true);
+    }, [resolvePending]);
+    const handleRequestClose = useCallback(() => {
+        if (config === null || config === void 0 ? void 0 : config.onRequestClose) {
+            config.onRequestClose();
+        }
+        // Any non-explicit confirm click counts as "false"
+        resolvePending(false);
+        closeModal();
+    }, [config, closeModal, resolvePending]);
+    const confirm = useCallback((confirmConfig) => {
+        return new Promise(resolve => {
+            // cancel any previous pending confirm
+            resolvePending(false);
+            pendingResolverRef.current = resolve;
+            const { confirmLabel = 'Ok', cancelLabel = 'Annuller', ...rest } = confirmConfig;
+            const primaryAction = {
+                label: confirmLabel,
+                onClick: () => {
+                    resolvePending(true);
+                    closeModal();
+                },
+            };
+            const secondaryAction = {
+                label: cancelLabel,
+                onClick: () => {
+                    resolvePending(false);
+                    closeModal();
+                },
+            };
+            setConfig({
+                ...rest,
+                primaryAction,
+                secondaryAction,
+            });
+            setIsOpen(true);
+        });
+    }, [closeModal, resolvePending]);
+    return (_jsxs(ModalContext.Provider, { value: { openModal, closeModal, confirm }, children: [children, _jsx(Modal, { ...(config !== null && config !== void 0 ? config : {}), isOpen: isOpen, onRequestClose: handleRequestClose, children: config === null || config === void 0 ? void 0 : config.children })] }));
+}
+export function useModal() {
+    const ctx = useContext(ModalContext);
+    if (!ctx) {
+        throw new Error('useModal must be used within a ModalProvider');
+    }
+    return ctx;
+}

package/dist/components/overlay/side-panel/SidePanel.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { Severity } from '../../../constants/severity.types';
+interface SidePanelProps {
+    children?: ReactNode;
+    header: ReactNode;
+    headerAddition?: ReactNode;
+    actions: ReactNode;
+    onClose: () => void;
+    isOpen: boolean;
+    showBackdrop?: boolean;
+    severity?: Severity;
+    showHeaderMarker?: boolean;
+    width?: number | string;
+}
+export declare function SidePanel({ isOpen, onClose, children, header, headerAddition, actions, showBackdrop, severity, showHeaderMarker, width, ...props }: SidePanelProps & HTMLAttributes<HTMLElement>): ReactNode;
+export {};

package/dist/components/overlay/side-panel/SidePanel.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { X } from 'lucide-react';
+import { Button } from '../../../components/button/Button';
+import { Headline } from '../../../components/headline/Headline';
+import styles from './SidePanel.module.css';
+export function SidePanel({ isOpen, onClose, children, header, headerAddition, actions, showBackdrop = true, severity, showHeaderMarker = true, width = '300px', ...props }) {
+    return (_jsxs(_Fragment, { children: [isOpen && showBackdrop && (_jsx("div", { className: styles.backdrop, onClick: () => {
+                    onClose();
+                } })), _jsxs("div", { ...props, className: `${styles.sidePanel} ${isOpen ? styles.open : ''}`, style: { '--side-panel-width': width }, children: [_jsx("div", { className: styles.header, children: _jsxs("div", { className: "dbc-flex dbc-justify-between", children: [_jsx(Headline, { size: 3, disableMargin: true, severity: severity, marker: showHeaderMarker, addition: headerAddition, children: header }), _jsx(Button, { type: "button", size: "sm", variant: "inline", onClick: onClose, children: _jsx(X, {}) })] }) }), _jsx("div", { className: styles.content, children: children }), _jsx("div", { className: styles.actions, children: actions })] })] }));
+}

package/dist/components/overlay/side-panel/SidePanel.module.css

@@ -0,0 +1,56 @@
+.sidePanel {
+  padding: 0 var(--spacing-md);
+  height: 100vh;
+  width: var(--side-panel-width, 400px);
+  position: fixed;
+  right: 0;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  transform: translateX(100%);
+  transition: transform 0.2s ease-in-out;
+  box-shadow: var(--shadow-lg);
+  z-index: var(--z-drawer);
+  background-color: var(--color-bg-surface);
+  max-height: 100vh;
+}
+
+.content {
+  flex: 1;
+  font-size: var(--font-size-sm);
+}
+
+.header {
+  position: sticky;
+  top: 0;
+  padding: var(--spacing-md) 0;
+  background: inherit;
+}
+
+.actions {
+  position: sticky;
+  padding: var(--spacing-md) 0;
+  background: inherit;
+  bottom: 0;
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spacing-sm);
+}
+
+.sidePanel.open {
+  transform: translateX(0);
+}
+
+.backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--overlay-scrim);
+  z-index: var(--z-backdrop);
+}

package/dist/components/overlay/side-panel/useSidePanel.d.ts

@@ -0,0 +1,5 @@
+export declare function useSidePanel(): {
+    isOpen: boolean;
+    openSidePanel: () => void;
+    closeSidePanel: () => void;
+};