entangle-ui 0.1.0 → 0.3.0

package/dist/esm/components/feedback/Dialog/Dialog.styled.js

@@ -0,0 +1,80 @@
+import styled from '@emotion/styled';
+import { keyframes } from '@emotion/react';
+import { processCss } from '../../../utils/styledUtils.js';
+
+// --- Constants ---
+const DIALOG_ANIMATION_MS = 200;
+const DIALOG_SIZE_MAP = {
+    sm: '360px',
+    md: '480px',
+    lg: '640px',
+    xl: '800px',
+    fullscreen: 'calc(100vw - 48px)',
+};
+// --- Animations ---
+const overlayFadeIn = keyframes `
+  from { opacity: 0; }
+  to { opacity: 1; }
+`;
+const overlayFadeOut = keyframes `
+  from { opacity: 1; }
+  to { opacity: 0; }
+`;
+const panelFadeIn = keyframes `
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+const panelFadeOut = keyframes `
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.95);
+  }
+`;
+// --- Styled Components ---
+const StyledOverlay = styled.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: ${props => props.theme.colors.backdrop};
+  backdrop-filter: blur(2px);
+  z-index: ${props => props.theme.zIndex.modal};
+  animation: ${props => (props.$closing ? overlayFadeOut : overlayFadeIn)} 150ms
+    ease-out forwards;
+`;
+const StyledDialogPanel = styled.div `
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: ${props => props.theme.zIndex.modal};
+  width: ${props => DIALOG_SIZE_MAP[props.$size]};
+  max-width: calc(100vw - 48px);
+  max-height: calc(100vh - 48px);
+  display: flex;
+  flex-direction: column;
+  background: ${props => props.theme.colors.background.primary};
+  border: 1px solid ${props => props.theme.colors.border.default};
+  border-radius: ${props => props.theme.borderRadius.lg}px;
+  box-shadow: ${props => props.theme.shadows.lg};
+  font-family: ${props => props.theme.typography.fontFamily.sans};
+  outline: none;
+  animation: ${props => (props.$closing ? panelFadeOut : panelFadeIn)}
+    ${DIALOG_ANIMATION_MS}ms ease-out forwards;
+
+  ${props => processCss(props.$css, props.theme)}
+`;
+
+export { DIALOG_ANIMATION_MS, DIALOG_SIZE_MAP, StyledDialogPanel, StyledOverlay };
+//# sourceMappingURL=Dialog.styled.js.map

package/dist/esm/components/feedback/Dialog/Dialog.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.styled.js","sources":["../../../../../../src/components/feedback/Dialog/Dialog.styled.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAKA;AAEO,MAAM,mBAAmB,GAAG;AAEtB,MAAA,eAAe,GAA+B;AACzD,IAAA,EAAE,EAAE,OAAO;AACX,IAAA,EAAE,EAAE,OAAO;AACX,IAAA,EAAE,EAAE,OAAO;AACX,IAAA,EAAE,EAAE,OAAO;AACX,IAAA,UAAU,EAAE,oBAAoB;;AAGlC;AAEA,MAAM,aAAa,GAAG,SAAS,CAAA;;;CAG9B;AAED,MAAM,cAAc,GAAG,SAAS,CAAA;;;CAG/B;AAED,MAAM,WAAW,GAAG,SAAS,CAAA;;;;;;;;;CAS5B;AAED,MAAM,YAAY,GAAG,SAAS,CAAA;;;;;;;;;CAS7B;AAED;AAEa,MAAA,aAAa,GAAG,MAAM,CAAC,GAAG,CAErC;;;;;;gBAMc,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAA;;aAEvC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAA;AAC/B,aAAA,EAAA,KAAK,KAAK,KAAK,CAAC,QAAQ,GAAG,cAAc,GAAG,aAAa,CAAC,CAAA;;;AAI5D,MAAA,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAIzC;;;;;aAKW,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAA;WACnC,KAAK,IAAI,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;;;;;gBAKhC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,OAAO,CAAA;sBACxC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAA;mBAC7C,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,EAAE,CAAA;gBACvC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;iBAC9B,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,IAAI,CAAA;;AAEjD,aAAA,EAAA,KAAK,KAAK,KAAK,CAAC,QAAQ,GAAG,YAAY,GAAG,WAAW,CAAC;MAC/D,mBAAmB,CAAA;;AAErB,EAAA,EAAA,KAAK,IAAI,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC;;;;;"}

package/dist/esm/components/feedback/Dialog/DialogBody.js

@@ -0,0 +1,33 @@
+import { jsx } from 'react/jsx-runtime';
+import styled from '@emotion/styled';
+import { processCss } from '../../../utils/styledUtils.js';
+
+// --- Styled components ---
+const StyledBody = styled.div `
+  padding: ${props => props.theme.spacing.lg}px;
+  overflow-y: auto;
+  flex: 1;
+  color: ${props => props.theme.colors.text.primary};
+  font-size: ${props => props.theme.typography.fontSize.md}px;
+  line-height: ${props => props.theme.typography.lineHeight.normal};
+
+  ${props => processCss(props.$css, props.theme)}
+`;
+// --- Component ---
+/**
+ * DialogBody renders the scrollable content area of a Dialog.
+ *
+ * @example
+ * ```tsx
+ * <DialogBody>
+ *   <p>Dialog content goes here.</p>
+ * </DialogBody>
+ * ```
+ */
+const DialogBody = ({ children, className, style, css, testId, ref, ...rest }) => {
+    return (jsx(StyledBody, { ref: ref, className: className, style: style, "$css": css, "data-testid": testId, ...rest, children: children }));
+};
+DialogBody.displayName = 'DialogBody';
+
+export { DialogBody };
+//# sourceMappingURL=DialogBody.js.map

package/dist/esm/components/feedback/Dialog/DialogBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogBody.js","sources":["../../../../../../src/components/feedback/Dialog/DialogBody.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAKA;AAEA,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAE3B;aACW,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;;;WAGjC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAA;eACpC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAA;iBACzC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,MAAM,CAAA;;AAE9D,EAAA,EAAA,KAAK,IAAI,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC;CAC/C;AAED;AAEA;;;;;;;;;AASG;MACU,UAAU,GAA8B,CAAC,EACpD,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,EACH,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACR,KAAI;IACH,QACEA,GAAC,CAAA,UAAU,EACT,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACN,MAAA,EAAA,GAAG,EACI,aAAA,EAAA,MAAM,EACf,GAAA,IAAI,EAEP,QAAA,EAAA,QAAQ,EACE,CAAA;AAEjB;AAEA,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}

package/dist/esm/components/feedback/Dialog/DialogClose.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useDialogContext } from './Dialog.js';
+
+/**
+ * DialogClose wraps a child element and adds onClick to close the dialog.
+ *
+ * @example
+ * ```tsx
+ * <DialogClose>
+ *   <Button>Cancel</Button>
+ * </DialogClose>
+ * ```
+ */
+const DialogClose = ({ children }) => {
+    const { onClose } = useDialogContext();
+    return React.cloneElement(children, {
+        onClick: (e) => {
+            children.props.onClick?.(e);
+            onClose();
+        },
+    });
+};
+DialogClose.displayName = 'DialogClose';
+
+export { DialogClose };
+//# sourceMappingURL=DialogClose.js.map

package/dist/esm/components/feedback/Dialog/DialogClose.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogClose.js","sources":["../../../../../../src/components/feedback/Dialog/DialogClose.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;AAQA;;;;;;;;;AASG;MACU,WAAW,GAA+B,CAAC,EAAE,QAAQ,EAAE,KAAI;AACtE,IAAA,MAAM,EAAE,OAAO,EAAE,GAAG,gBAAgB,EAAE;AAEtC,IAAA,OAAO,KAAK,CAAC,YAAY,CAAC,QAAQ,EAAE;AAClC,QAAA,OAAO,EAAE,CAAC,CAAmB,KAAI;YAC/B,QAAQ,CAAC,KAAK,CAAC,OAAO,GAAG,CAAC,CAAC;AAC3B,YAAA,OAAO,EAAE;SACV;AACF,KAAA,CAAC;AACJ;AAEA,WAAW,CAAC,WAAW,GAAG,aAAa;;;;"}

package/dist/esm/components/feedback/Dialog/DialogFooter.js

@@ -0,0 +1,43 @@
+import { jsx } from 'react/jsx-runtime';
+import styled from '@emotion/styled';
+import { processCss } from '../../../utils/styledUtils.js';
+
+// --- Alignment map ---
+const ALIGN_MAP = {
+    left: 'flex-start',
+    center: 'center',
+    right: 'flex-end',
+    'space-between': 'space-between',
+};
+// --- Styled components ---
+const StyledFooter = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: ${props => ALIGN_MAP[props.$align]};
+  gap: ${props => props.theme.spacing.md}px;
+  padding: ${props => props.theme.spacing.md}px
+    ${props => props.theme.spacing.lg}px;
+  border-top: 1px solid ${props => props.theme.colors.border.default};
+  flex-shrink: 0;
+
+  ${props => processCss(props.$css, props.theme)}
+`;
+// --- Component ---
+/**
+ * DialogFooter renders the action area at the bottom of a Dialog.
+ *
+ * @example
+ * ```tsx
+ * <DialogFooter align="right">
+ *   <Button onClick={onCancel}>Cancel</Button>
+ *   <Button variant="filled" onClick={onConfirm}>Confirm</Button>
+ * </DialogFooter>
+ * ```
+ */
+const DialogFooter = ({ children, align = 'right', className, style, css, testId, ref, ...rest }) => {
+    return (jsx(StyledFooter, { ref: ref, "$align": align, className: className, style: style, "$css": css, "data-testid": testId, ...rest, children: children }));
+};
+DialogFooter.displayName = 'DialogFooter';
+
+export { DialogFooter };
+//# sourceMappingURL=DialogFooter.js.map

package/dist/esm/components/feedback/Dialog/DialogFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogFooter.js","sources":["../../../../../../src/components/feedback/Dialog/DialogFooter.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAKA;AAEA,MAAM,SAAS,GAA4D;AACzE,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,KAAK,EAAE,UAAU;AACjB,IAAA,eAAe,EAAE,eAAe;CACjC;AAED;AAEA,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAG7B;;;qBAGmB,KAAK,IAAI,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;SAC5C,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;aAC3B,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;MACtC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;0BACX,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAA;;;AAGhE,EAAA,EAAA,KAAK,IAAI,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC;CAC/C;AAED;AAEA;;;;;;;;;;AAUG;AACU,MAAA,YAAY,GAAgC,CAAC,EACxD,QAAQ,EACR,KAAK,GAAG,OAAO,EACf,SAAS,EACT,KAAK,EACL,GAAG,EACH,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACR,KAAI;IACH,QACEA,GAAC,CAAA,YAAY,EACX,EAAA,GAAG,EAAE,GAAG,EACA,QAAA,EAAA,KAAK,EACb,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACN,MAAA,EAAA,GAAG,EACI,aAAA,EAAA,MAAM,EACf,GAAA,IAAI,EAEP,QAAA,EAAA,QAAQ,EACI,CAAA;AAEnB;AAEA,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}

package/dist/esm/components/feedback/Dialog/DialogHeader.js

@@ -0,0 +1,84 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styled from '@emotion/styled';
+import { processCss } from '../../../utils/styledUtils.js';
+import { useDialogContext } from './Dialog.js';
+
+// --- Styled components ---
+const StyledHeader = styled.div `
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: ${props => props.theme.spacing.md}px
+    ${props => props.theme.spacing.lg}px;
+  border-bottom: 1px solid ${props => props.theme.colors.border.default};
+  flex-shrink: 0;
+
+  ${props => processCss(props.$css, props.theme)}
+`;
+const StyledHeaderContent = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${props => props.theme.spacing.xs}px;
+  min-width: 0;
+  flex: 1;
+`;
+const StyledTitle = styled.div `
+  font-size: ${props => props.theme.typography.fontSize.lg}px;
+  font-weight: ${props => props.theme.typography.fontWeight.semibold};
+  color: ${props => props.theme.colors.text.primary};
+  line-height: ${props => props.theme.typography.lineHeight.tight};
+`;
+const StyledDescription = styled.div `
+  font-size: ${props => props.theme.typography.fontSize.sm}px;
+  color: ${props => props.theme.colors.text.secondary};
+  line-height: ${props => props.theme.typography.lineHeight.normal};
+`;
+const StyledCloseButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  margin: 0;
+  margin-left: ${props => props.theme.spacing.md}px;
+  border: none;
+  border-radius: ${props => props.theme.borderRadius.sm}px;
+  background: transparent;
+  color: ${props => props.theme.colors.text.secondary};
+  cursor: pointer;
+  flex-shrink: 0;
+  transition:
+    background ${props => props.theme.transitions.fast},
+    color ${props => props.theme.transitions.fast};
+
+  &:hover {
+    background: ${props => props.theme.colors.surface.hover};
+    color: ${props => props.theme.colors.text.primary};
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: ${props => props.theme.shadows.focus};
+  }
+`;
+// --- Component ---
+/**
+ * DialogHeader renders the title, optional description, and close button
+ * for a Dialog.
+ *
+ * @example
+ * ```tsx
+ * <DialogHeader description="This cannot be undone">
+ *   Delete Item
+ * </DialogHeader>
+ * ```
+ */
+const DialogHeader = ({ children, showClose = true, description, className, style, css, testId, ref, ...rest }) => {
+    const { onClose, titleId, descriptionId } = useDialogContext();
+    return (jsxs(StyledHeader, { ref: ref, className: className, style: style, "$css": css, "data-testid": testId, ...rest, children: [jsxs(StyledHeaderContent, { children: [jsx(StyledTitle, { id: titleId, children: children }), description && (jsx(StyledDescription, { id: descriptionId, children: description }))] }), showClose && (jsx(StyledCloseButton, { type: "button", onClick: onClose, "aria-label": "Close dialog", "data-testid": testId ? `${testId}-close` : undefined, children: jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M1 1L11 11M11 1L1 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) }))] }));
+};
+DialogHeader.displayName = 'DialogHeader';
+
+export { DialogHeader };
+//# sourceMappingURL=DialogHeader.js.map

package/dist/esm/components/feedback/Dialog/DialogHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogHeader.js","sources":["../../../../../../src/components/feedback/Dialog/DialogHeader.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/components/feedback/Dialog/useDialogAnimation.js

@@ -0,0 +1,70 @@
+import { useState, useRef, useEffect } from 'react';
+import { FOCUSABLE_SELECTOR } from './useFocusTrap.js';
+import { DIALOG_ANIMATION_MS } from './Dialog.styled.js';
+
+/**
+ * Manages Dialog mount/unmount animation lifecycle and focus management.
+ *
+ * Combines three concerns into a single hook:
+ * 1. Mount/unmount with closing animation delay
+ * 2. Initial focus on open (respects initialFocusRef)
+ * 3. Return focus to previously focused element on close
+ */
+function useDialogAnimation({ open, panelRef, initialFocusRef, }) {
+    const [mounted, setMounted] = useState(false);
+    const [closing, setClosing] = useState(false);
+    const previousFocusRef = useRef(null);
+    const wasOpenRef = useRef(false);
+    useEffect(() => {
+        if (open) {
+            // Opening: capture previous focus, mount immediately
+            previousFocusRef.current = document.activeElement;
+            setClosing(false);
+            setMounted(true);
+            wasOpenRef.current = true;
+        }
+        else if (wasOpenRef.current) {
+            // Closing: start close animation, unmount after delay
+            wasOpenRef.current = false;
+            setClosing(true);
+            const timer = setTimeout(() => {
+                setMounted(false);
+                setClosing(false);
+                // Return focus after unmount
+                if (previousFocusRef.current) {
+                    previousFocusRef.current.focus();
+                    previousFocusRef.current = null;
+                }
+            }, DIALOG_ANIMATION_MS);
+            return () => clearTimeout(timer);
+        }
+        return undefined;
+    }, [open]);
+    // Initial focus after mount
+    useEffect(() => {
+        if (!open || !mounted)
+            return;
+        const timer = setTimeout(() => {
+            if (initialFocusRef?.current) {
+                initialFocusRef.current.focus();
+            }
+            else {
+                const panel = panelRef.current;
+                if (panel) {
+                    const firstFocusable = panel.querySelector(FOCUSABLE_SELECTOR);
+                    if (firstFocusable) {
+                        firstFocusable.focus();
+                    }
+                    else {
+                        panel.focus();
+                    }
+                }
+            }
+        }, 0);
+        return () => clearTimeout(timer);
+    }, [open, mounted, initialFocusRef, panelRef]);
+    return { mounted, closing };
+}
+
+export { useDialogAnimation };
+//# sourceMappingURL=useDialogAnimation.js.map

package/dist/esm/components/feedback/Dialog/useDialogAnimation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDialogAnimation.js","sources":["../../../../../../src/components/feedback/Dialog/useDialogAnimation.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAeA;;;;;;;AAOG;AACG,SAAU,kBAAkB,CAAC,EACjC,IAAI,EACJ,QAAQ,EACR,eAAe,GACW,EAAA;IAC1B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAC7C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAC7C,IAAA,MAAM,gBAAgB,GAAG,MAAM,CAAqB,IAAI,CAAC;AACzD,IAAA,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC;IAEhC,SAAS,CAAC,MAAK;QACb,IAAI,IAAI,EAAE;;AAER,YAAA,gBAAgB,CAAC,OAAO,GAAG,QAAQ,CAAC,aAA4B;YAChE,UAAU,CAAC,KAAK,CAAC;YACjB,UAAU,CAAC,IAAI,CAAC;AAChB,YAAA,UAAU,CAAC,OAAO,GAAG,IAAI;;AACpB,aAAA,IAAI,UAAU,CAAC,OAAO,EAAE;;AAE7B,YAAA,UAAU,CAAC,OAAO,GAAG,KAAK;YAC1B,UAAU,CAAC,IAAI,CAAC;AAChB,YAAA,MAAM,KAAK,GAAG,UAAU,CAAC,MAAK;gBAC5B,UAAU,CAAC,KAAK,CAAC;gBACjB,UAAU,CAAC,KAAK,CAAC;;AAGjB,gBAAA,IAAI,gBAAgB,CAAC,OAAO,EAAE;AAC5B,oBAAA,gBAAgB,CAAC,OAAO,CAAC,KAAK,EAAE;AAChC,oBAAA,gBAAgB,CAAC,OAAO,GAAG,IAAI;;aAElC,EAAE,mBAAmB,CAAC;AACvB,YAAA,OAAO,MAAM,YAAY,CAAC,KAAK,CAAC;;AAElC,QAAA,OAAO,SAAS;AAClB,KAAC,EAAE,CAAC,IAAI,CAAC,CAAC;;IAGV,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,IAAI,IAAI,CAAC,OAAO;YAAE;AAEvB,QAAA,MAAM,KAAK,GAAG,UAAU,CAAC,MAAK;AAC5B,YAAA,IAAI,eAAe,EAAE,OAAO,EAAE;AAC5B,gBAAA,eAAe,CAAC,OAAO,CAAC,KAAK,EAAE;;iBAC1B;AACL,gBAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO;gBAC9B,IAAI,KAAK,EAAE;oBACT,MAAM,cAAc,GAAG,KAAK,CAAC,aAAa,CACxC,kBAAkB,CACJ;oBAChB,IAAI,cAAc,EAAE;wBAClB,cAAc,CAAC,KAAK,EAAE;;yBACjB;wBACL,KAAK,CAAC,KAAK,EAAE;;;;SAIpB,EAAE,CAAC,CAAC;AACL,QAAA,OAAO,MAAM,YAAY,CAAC,KAAK,CAAC;KACjC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,QAAQ,CAAC,CAAC;AAE9C,IAAA,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE;AAC7B;;;;"}

package/dist/esm/components/feedback/Dialog/useFocusTrap.js

@@ -0,0 +1,55 @@
+import { useCallback } from 'react';
+
+const FOCUSABLE_SELECTOR = [
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled])',
+    'textarea:not([disabled])',
+    'select:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+].join(', ');
+/**
+ * Reusable focus trap hook.
+ *
+ * Traps Tab/Shift+Tab navigation within a container element,
+ * wrapping focus from last to first element and vice versa.
+ *
+ * @returns onKeyDown handler to attach to the container element
+ *
+ * @example
+ * ```tsx
+ * const handleKeyDown = useFocusTrap({ containerRef: panelRef, enabled: true });
+ * <div ref={panelRef} onKeyDown={handleKeyDown}>...</div>
+ * ```
+ */
+function useFocusTrap({ containerRef, enabled = true, }) {
+    return useCallback((e) => {
+        if (!enabled || e.key !== 'Tab')
+            return;
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const focusableElements = Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR));
+        if (focusableElements.length === 0) {
+            e.preventDefault();
+            return;
+        }
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+        if (e.shiftKey) {
+            if (document.activeElement === firstElement) {
+                e.preventDefault();
+                lastElement.focus();
+            }
+        }
+        else {
+            if (document.activeElement === lastElement) {
+                e.preventDefault();
+                firstElement.focus();
+            }
+        }
+    }, [enabled, containerRef]);
+}
+
+export { FOCUSABLE_SELECTOR, useFocusTrap };
+//# sourceMappingURL=useFocusTrap.js.map

package/dist/esm/components/feedback/Dialog/useFocusTrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusTrap.js","sources":["../../../../../../src/components/feedback/Dialog/useFocusTrap.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAEA,MAAM,kBAAkB,GAAG;IACzB,SAAS;IACT,wBAAwB;IACxB,uBAAuB;IACvB,0BAA0B;IAC1B,wBAAwB;IACxB,iCAAiC;AAClC,CAAA,CAAC,IAAI,CAAC,IAAI;AAOX;;;;;;;;;;;;;AAaG;AACG,SAAU,YAAY,CAAC,EAC3B,YAAY,EACZ,OAAO,GAAG,IAAI,GACM,EAAA;AACpB,IAAA,OAAO,WAAW,CAChB,CAAC,CAAgB,KAAI;AACnB,QAAA,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK;YAAE;AAEjC,QAAA,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO;AACtC,QAAA,IAAI,CAAC,SAAS;YAAE;AAEhB,QAAA,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAClC,SAAS,CAAC,gBAAgB,CAAc,kBAAkB,CAAC,CAC5D;AAED,QAAA,IAAI,iBAAiB,CAAC,MAAM,KAAK,CAAC,EAAE;YAClC,CAAC,CAAC,cAAc,EAAE;YAClB;;AAGF,QAAA,MAAM,YAAY,GAAG,iBAAiB,CAAC,CAAC,CAAgB;QACxD,MAAM,WAAW,GAAG,iBAAiB,CACnC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CACd;AAEhB,QAAA,IAAI,CAAC,CAAC,QAAQ,EAAE;AACd,YAAA,IAAI,QAAQ,CAAC,aAAa,KAAK,YAAY,EAAE;gBAC3C,CAAC,CAAC,cAAc,EAAE;gBAClB,WAAW,CAAC,KAAK,EAAE;;;aAEhB;AACL,YAAA,IAAI,QAAQ,CAAC,aAAa,KAAK,WAAW,EAAE;gBAC1C,CAAC,CAAC,cAAc,EAAE;gBAClB,YAAY,CAAC,KAAK,EAAE;;;AAG1B,KAAC,EACD,CAAC,OAAO,EAAE,YAAY,CAAC,CACxB;AACH;;;;"}

package/dist/esm/components/feedback/Toast/ToastContainer.js

@@ -0,0 +1,34 @@
+import { jsx } from 'react/jsx-runtime';
+import styled from '@emotion/styled';
+import { ToastItem } from './ToastItem.js';
+
+// --- Position style map ---
+const POSITION_STYLES = {
+    'top-right': { top: 16, right: 16 },
+    'top-left': { top: 16, left: 16 },
+    'top-center': { top: 16, left: '50%', transform: 'translateX(-50%)' },
+    'bottom-right': { bottom: 16, right: 16 },
+    'bottom-left': { bottom: 16, left: 16 },
+    'bottom-center': { bottom: 16, left: '50%', transform: 'translateX(-50%)' },
+};
+const StyledContainer = styled.div `
+  position: fixed;
+  display: flex;
+  flex-direction: ${props => (props.$isBottom ? 'column-reverse' : 'column')};
+  gap: ${props => props.$gap}px;
+  z-index: ${props => props.$zIndex};
+  pointer-events: none;
+`;
+/**
+ * ToastContainer positions toast items at the specified screen edge.
+ * Bottom positions use column-reverse so the newest toast appears at the bottom.
+ */
+const ToastContainer = ({ toasts, position, gap, zIndex, onDismiss, }) => {
+    const isBottom = position.startsWith('bottom');
+    const positionStyle = POSITION_STYLES[position];
+    return (jsx(StyledContainer, { "$gap": gap, "$zIndex": zIndex, "$isBottom": isBottom, style: positionStyle, "aria-label": "Notifications", role: "region", children: toasts.map(toast => (jsx(ToastItem, { toast: toast, onDismiss: onDismiss }, toast.id))) }));
+};
+ToastContainer.displayName = 'ToastContainer';
+
+export { ToastContainer };
+//# sourceMappingURL=ToastContainer.js.map

package/dist/esm/components/feedback/Toast/ToastContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastContainer.js","sources":["../../../../../../src/components/feedback/Toast/ToastContainer.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAKA;AAEA,MAAM,eAAe,GAA+C;IAClE,WAAW,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;IACnC,UAAU,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;AACjC,IAAA,YAAY,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,kBAAkB,EAAE;IACrE,cAAc,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;IACzC,aAAa,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;AACvC,IAAA,eAAe,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,kBAAkB,EAAE;CAC5E;AAUD,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAsB;;;AAGpC,kBAAA,EAAA,KAAK,KAAK,KAAK,CAAC,SAAS,GAAG,gBAAgB,GAAG,QAAQ,CAAC,CAAA;AACnE,OAAA,EAAA,KAAK,IAAI,KAAK,CAAC,IAAI,CAAA;AACf,WAAA,EAAA,KAAK,IAAI,KAAK,CAAC,OAAO,CAAA;;CAElC;AAYD;;;AAGG;AACU,MAAA,cAAc,GAAkC,CAAC,EAC5D,MAAM,EACN,QAAQ,EACR,GAAG,EACH,MAAM,EACN,SAAS,GACV,KAAI;IACH,MAAM,QAAQ,GAAG,QAAQ,CAAC,UAAU,CAAC,QAAQ,CAAC;AAC9C,IAAA,MAAM,aAAa,GAAG,eAAe,CAAC,QAAQ,CAAC;IAE/C,QACEA,IAAC,eAAe,EAAA,EAAA,MAAA,EACR,GAAG,EACA,SAAA,EAAA,MAAM,EACJ,WAAA,EAAA,QAAQ,EACnB,KAAK,EAAE,aAAa,EAAA,YAAA,EACT,eAAe,EAC1B,IAAI,EAAC,QAAQ,EAAA,QAAA,EAEZ,MAAM,CAAC,GAAG,CAAC,KAAK,KACfA,GAAA,CAAC,SAAS,EAAgB,EAAA,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAA,EAA5C,KAAK,CAAC,EAAE,CAAwC,CACjE,CAAC,EACc,CAAA;AAEtB;AAEA,cAAc,CAAC,WAAW,GAAG,gBAAgB;;;;"}