@persona/design-system 0.10.10 → 0.10.11

package/dist/lib/useModalInsetRight.mjs

@@ -1,8 +1,10 @@
+import "../variables/transitions.mjs";
 import { useEffect, useRef, useState } from "react";
 //#region src/lib/useModalInsetRight.ts
 const CSS_VAR = "--modal-inset-right";
-const SIDEBAR_OPEN_TRANSITION_MS = 425;
-const SIDEBAR_CLOSE_TRANSITION_MS = 200;
+const SIDEBAR_OPEN_TRANSITION_MS = parseInt("400ms", 10);
+const SIDEBAR_CLOSE_TRANSITION_MS = parseInt("300ms", 10);
+const SIDEBAR_TRANSITION_EASING = "ease-out";
 const getModalInsetRight = () => getComputedStyle(document.documentElement).getPropertyValue(CSS_VAR).trim() || "0px";
 const prefersReducedMotion = () => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 /**
@@ -33,7 +35,7 @@ const useModalInsetRight = () => {
 				setInsetRight("0px");
 				setPanelState("opening");
 				rafRef.current = requestAnimationFrame(() => setInsetRight(next));
-				transitionTimerRef.current = setTimeout(() => setPanelState("open"), 425);
+				transitionTimerRef.current = setTimeout(() => setPanelState("open"), SIDEBAR_OPEN_TRANSITION_MS);
 			}
 			else if (prev !== "0px" && next === "0px") if (prefersReducedMotion()) {
 				setInsetRight("0px");
@@ -44,7 +46,7 @@ const useModalInsetRight = () => {
 				setInsetRight(prev);
 				setPanelState("closing");
 				rafRef.current = requestAnimationFrame(() => setInsetRight("0px"));
-				transitionTimerRef.current = setTimeout(() => setPanelState("closed"), 200);
+				transitionTimerRef.current = setTimeout(() => setPanelState("closed"), SIDEBAR_CLOSE_TRANSITION_MS);
 			}
 			else setInsetRight(next);
 		});
@@ -64,6 +66,6 @@ const useModalInsetRight = () => {
 	};
 };
 //#endregion
-export { SIDEBAR_CLOSE_TRANSITION_MS, SIDEBAR_OPEN_TRANSITION_MS, useModalInsetRight as default };
+export { SIDEBAR_CLOSE_TRANSITION_MS, SIDEBAR_OPEN_TRANSITION_MS, SIDEBAR_TRANSITION_EASING, useModalInsetRight as default };
 
 //# sourceMappingURL=useModalInsetRight.mjs.map

package/dist/lib/useModalInsetRight.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useModalInsetRight.mjs","names":[],"sources":["../../src/lib/useModalInsetRight.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nconst CSS_VAR = '--modal-inset-right';\n\n// Match AgentsPanel sidebar transition durations\nexport const SIDEBAR_OPEN_TRANSITION_MS = 425;\nexport const SIDEBAR_CLOSE_TRANSITION_MS = 200;\n\nconst getModalInsetRight = () =>\n  getComputedStyle(document.documentElement).getPropertyValue(CSS_VAR).trim() || '0px';\n\nconst prefersReducedMotion = () =>\n  typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\nexport type PanelInsetState = 'closed' | 'opening' | 'open' | 'closing';\n\nexport interface ModalInsetRight {\n  /** Animated inset value — starts at 0px on panel open so CSS transition fires */\n  insetRight: string;\n  panelState: PanelInsetState;\n}\n\n/**\n * Returns the current value of --modal-inset-right from :root, reactively updating\n * as the agents side panel animates open/closed or is resized. Also tracks whether\n * the panel is opening, open, closing, or closed.\n *\n * panelState stays 'opening'/'closing' for the full transition duration so that\n * CSS transitions on consumers have time to animate.\n */\nconst useModalInsetRight = (): ModalInsetRight => {\n  const [insetRight, setInsetRight] = useState(getModalInsetRight);\n  const [panelState, setPanelState] = useState<PanelInsetState>(() =>\n    getModalInsetRight() !== '0px' ? 'open' : 'closed',\n  );\n  const prevInsetRight = useRef(getModalInsetRight());\n  const transitionTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const rafRef = useRef<number | null>(null);\n\n  useEffect(() => {\n    const observer = new MutationObserver(() => {\n      const prev = prevInsetRight.current;\n      const next = getModalInsetRight();\n      prevInsetRight.current = next;\n\n      if (prev === '0px' && next !== '0px') {\n        if (prefersReducedMotion()) {\n          setInsetRight(next);\n          setPanelState('open');\n        } else {\n          if (rafRef.current) {\n            cancelAnimationFrame(rafRef.current);\n          }\n          if (transitionTimerRef.current) {\n            clearTimeout(transitionTimerRef.current);\n          }\n          setInsetRight('0px');\n          setPanelState('opening');\n          rafRef.current = requestAnimationFrame(() => setInsetRight(next));\n          transitionTimerRef.current = setTimeout(\n            () => setPanelState('open'),\n            SIDEBAR_OPEN_TRANSITION_MS,\n          );\n        }\n      } else if (prev !== '0px' && next === '0px') {\n        if (prefersReducedMotion()) {\n          setInsetRight('0px');\n          setPanelState('closed');\n        } else {\n          if (rafRef.current) {\n            cancelAnimationFrame(rafRef.current);\n          }\n          if (transitionTimerRef.current) {\n            clearTimeout(transitionTimerRef.current);\n          }\n          setInsetRight(prev);\n          setPanelState('closing');\n          rafRef.current = requestAnimationFrame(() => setInsetRight('0px'));\n          transitionTimerRef.current = setTimeout(\n            () => setPanelState('closed'),\n            SIDEBAR_CLOSE_TRANSITION_MS,\n          );\n        }\n      } else {\n        setInsetRight(next);\n      }\n    });\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['style'],\n    });\n\n    return () => {\n      observer.disconnect();\n      if (transitionTimerRef.current) {\n        clearTimeout(transitionTimerRef.current);\n      }\n      if (rafRef.current) {\n        cancelAnimationFrame(rafRef.current);\n      }\n    };\n  }, []);\n\n  return { insetRight, panelState };\n};\n\nexport default useModalInsetRight;\n"],"mappings":";;AAEA,MAAM,UAAU;AAGhB,MAAa,6BAA6B;AAC1C,MAAa,8BAA8B;AAE3C,MAAM,2BACJ,iBAAiB,SAAS,gBAAgB,CAAC,iBAAiB,QAAQ,CAAC,MAAM,IAAI;AAEjF,MAAM,6BACJ,OAAO,WAAW,eAAe,OAAO,WAAW,mCAAmC,CAAC;;;;;;;;;AAkBzF,MAAM,2BAA4C;CAChD,MAAM,CAAC,YAAY,iBAAiB,SAAS,mBAAmB;CAChE,MAAM,CAAC,YAAY,iBAAiB,eAClC,oBAAoB,KAAK,QAAQ,SAAS,SAC3C;CACD,MAAM,iBAAiB,OAAO,oBAAoB,CAAC;CACnD,MAAM,qBAAqB,OAA6C,KAAK;CAC7E,MAAM,SAAS,OAAsB,KAAK;AAE1C,iBAAgB;EACd,MAAM,WAAW,IAAI,uBAAuB;GAC1C,MAAM,OAAO,eAAe;GAC5B,MAAM,OAAO,oBAAoB;AACjC,kBAAe,UAAU;AAEzB,OAAI,SAAS,SAAS,SAAS,MAC7B,KAAI,sBAAsB,EAAE;AAC1B,kBAAc,KAAK;AACnB,kBAAc,OAAO;UAChB;AACL,QAAI,OAAO,QACT,sBAAqB,OAAO,QAAQ;AAEtC,QAAI,mBAAmB,QACrB,cAAa,mBAAmB,QAAQ;AAE1C,kBAAc,MAAM;AACpB,kBAAc,UAAU;AACxB,WAAO,UAAU,4BAA4B,cAAc,KAAK,CAAC;AACjE,uBAAmB,UAAU,iBACrB,cAAc,OAAO,EAAA,IAE5B;;YAEM,SAAS,SAAS,SAAS,MACpC,KAAI,sBAAsB,EAAE;AAC1B,kBAAc,MAAM;AACpB,kBAAc,SAAS;UAClB;AACL,QAAI,OAAO,QACT,sBAAqB,OAAO,QAAQ;AAEtC,QAAI,mBAAmB,QACrB,cAAa,mBAAmB,QAAQ;AAE1C,kBAAc,KAAK;AACnB,kBAAc,UAAU;AACxB,WAAO,UAAU,4BAA4B,cAAc,MAAM,CAAC;AAClE,uBAAmB,UAAU,iBACrB,cAAc,SAAS,EAAA,IAE9B;;OAGH,eAAc,KAAK;IAErB;AAEF,WAAS,QAAQ,SAAS,iBAAiB;GACzC,YAAY;GACZ,iBAAiB,CAAC,QAAQ;GAC3B,CAAC;AAEF,eAAa;AACX,YAAS,YAAY;AACrB,OAAI,mBAAmB,QACrB,cAAa,mBAAmB,QAAQ;AAE1C,OAAI,OAAO,QACT,sBAAqB,OAAO,QAAQ;;IAGvC,EAAE,CAAC;AAEN,QAAO;EAAE;EAAY;EAAY"}
+{"version":3,"file":"useModalInsetRight.mjs","names":[],"sources":["../../src/lib/useModalInsetRight.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport { TransitionDuration } from '#src/variables/transitions';\n\nconst CSS_VAR = '--modal-inset-right';\n\n// Must equal the agents panel's open and close durations in persona-web, or the modal's edge and the panel's drift apart.\nexport const SIDEBAR_OPEN_TRANSITION_MS = parseInt(TransitionDuration.Medium, 10);\nexport const SIDEBAR_CLOSE_TRANSITION_MS = parseInt(TransitionDuration.MediumFast, 10);\n// The agents panel slides on framer-motion's `easeOut`; switch with it to `TransitionEasing.Enter`/`Exit`.\nexport const SIDEBAR_TRANSITION_EASING = 'ease-out';\n\nconst getModalInsetRight = () =>\n  getComputedStyle(document.documentElement).getPropertyValue(CSS_VAR).trim() || '0px';\n\nconst prefersReducedMotion = () =>\n  typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\nexport type PanelInsetState = 'closed' | 'opening' | 'open' | 'closing';\n\nexport interface ModalInsetRight {\n  /** Animated inset value — starts at 0px on panel open so CSS transition fires */\n  insetRight: string;\n  panelState: PanelInsetState;\n}\n\n/**\n * Returns the current value of --modal-inset-right from :root, reactively updating\n * as the agents side panel animates open/closed or is resized. Also tracks whether\n * the panel is opening, open, closing, or closed.\n *\n * panelState stays 'opening'/'closing' for the full transition duration so that\n * CSS transitions on consumers have time to animate.\n */\nconst useModalInsetRight = (): ModalInsetRight => {\n  const [insetRight, setInsetRight] = useState(getModalInsetRight);\n  const [panelState, setPanelState] = useState<PanelInsetState>(() =>\n    getModalInsetRight() !== '0px' ? 'open' : 'closed',\n  );\n  const prevInsetRight = useRef(getModalInsetRight());\n  const transitionTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const rafRef = useRef<number | null>(null);\n\n  useEffect(() => {\n    const observer = new MutationObserver(() => {\n      const prev = prevInsetRight.current;\n      const next = getModalInsetRight();\n      prevInsetRight.current = next;\n\n      if (prev === '0px' && next !== '0px') {\n        if (prefersReducedMotion()) {\n          setInsetRight(next);\n          setPanelState('open');\n        } else {\n          if (rafRef.current) {\n            cancelAnimationFrame(rafRef.current);\n          }\n          if (transitionTimerRef.current) {\n            clearTimeout(transitionTimerRef.current);\n          }\n          setInsetRight('0px');\n          setPanelState('opening');\n          rafRef.current = requestAnimationFrame(() => setInsetRight(next));\n          transitionTimerRef.current = setTimeout(\n            () => setPanelState('open'),\n            SIDEBAR_OPEN_TRANSITION_MS,\n          );\n        }\n      } else if (prev !== '0px' && next === '0px') {\n        if (prefersReducedMotion()) {\n          setInsetRight('0px');\n          setPanelState('closed');\n        } else {\n          if (rafRef.current) {\n            cancelAnimationFrame(rafRef.current);\n          }\n          if (transitionTimerRef.current) {\n            clearTimeout(transitionTimerRef.current);\n          }\n          setInsetRight(prev);\n          setPanelState('closing');\n          rafRef.current = requestAnimationFrame(() => setInsetRight('0px'));\n          transitionTimerRef.current = setTimeout(\n            () => setPanelState('closed'),\n            SIDEBAR_CLOSE_TRANSITION_MS,\n          );\n        }\n      } else {\n        setInsetRight(next);\n      }\n    });\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['style'],\n    });\n\n    return () => {\n      observer.disconnect();\n      if (transitionTimerRef.current) {\n        clearTimeout(transitionTimerRef.current);\n      }\n      if (rafRef.current) {\n        cancelAnimationFrame(rafRef.current);\n      }\n    };\n  }, []);\n\n  return { insetRight, panelState };\n};\n\nexport default useModalInsetRight;\n"],"mappings":";;;AAIA,MAAM,UAAU;AAGhB,MAAa,6BAA6B,SAAA,SAAoC,GAAG;AACjF,MAAa,8BAA8B,SAAA,SAAwC,GAAG;AAEtF,MAAa,4BAA4B;AAEzC,MAAM,2BACJ,iBAAiB,SAAS,gBAAgB,CAAC,iBAAiB,QAAQ,CAAC,MAAM,IAAI;AAEjF,MAAM,6BACJ,OAAO,WAAW,eAAe,OAAO,WAAW,mCAAmC,CAAC;;;;;;;;;AAkBzF,MAAM,2BAA4C;CAChD,MAAM,CAAC,YAAY,iBAAiB,SAAS,mBAAmB;CAChE,MAAM,CAAC,YAAY,iBAAiB,eAClC,oBAAoB,KAAK,QAAQ,SAAS,SAC3C;CACD,MAAM,iBAAiB,OAAO,oBAAoB,CAAC;CACnD,MAAM,qBAAqB,OAA6C,KAAK;CAC7E,MAAM,SAAS,OAAsB,KAAK;AAE1C,iBAAgB;EACd,MAAM,WAAW,IAAI,uBAAuB;GAC1C,MAAM,OAAO,eAAe;GAC5B,MAAM,OAAO,oBAAoB;AACjC,kBAAe,UAAU;AAEzB,OAAI,SAAS,SAAS,SAAS,MAC7B,KAAI,sBAAsB,EAAE;AAC1B,kBAAc,KAAK;AACnB,kBAAc,OAAO;UAChB;AACL,QAAI,OAAO,QACT,sBAAqB,OAAO,QAAQ;AAEtC,QAAI,mBAAmB,QACrB,cAAa,mBAAmB,QAAQ;AAE1C,kBAAc,MAAM;AACpB,kBAAc,UAAU;AACxB,WAAO,UAAU,4BAA4B,cAAc,KAAK,CAAC;AACjE,uBAAmB,UAAU,iBACrB,cAAc,OAAO,EAC3B,2BACD;;YAEM,SAAS,SAAS,SAAS,MACpC,KAAI,sBAAsB,EAAE;AAC1B,kBAAc,MAAM;AACpB,kBAAc,SAAS;UAClB;AACL,QAAI,OAAO,QACT,sBAAqB,OAAO,QAAQ;AAEtC,QAAI,mBAAmB,QACrB,cAAa,mBAAmB,QAAQ;AAE1C,kBAAc,KAAK;AACnB,kBAAc,UAAU;AACxB,WAAO,UAAU,4BAA4B,cAAc,MAAM,CAAC;AAClE,uBAAmB,UAAU,iBACrB,cAAc,SAAS,EAC7B,4BACD;;OAGH,eAAc,KAAK;IAErB;AAEF,WAAS,QAAQ,SAAS,iBAAiB;GACzC,YAAY;GACZ,iBAAiB,CAAC,QAAQ;GAC3B,CAAC;AAEF,eAAa;AACX,YAAS,YAAY;AACrB,OAAI,mBAAmB,QACrB,cAAa,mBAAmB,QAAQ;AAE1C,OAAI,OAAO,QACT,sBAAqB,OAAO,QAAQ;;IAGvC,EAAE,CAAC;AAEN,QAAO;EAAE;EAAY;EAAY"}

package/dist/lint/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,30 @@
+# Third-party notices
+
+The `pds/duration-token`, `pds/exit-motion`, `pds/motion-origin`, `pds/no-layout-motion`,
+`pds/no-transition-all` and `pds/overlay-motion` rules adapt checks from the transitions.dev Motion
+Agent (<https://github.com/Jakubantalik/transitions.dev>, `agent/lib/rules.mjs`,
+`agent/lib/components.mjs` and `agent/lib/catalog.mjs`), used under the MIT License that the
+repository's `LICENSE` grants its tooling (section 2, covering `agent/`). Nothing is taken from its
+`transitions/` or `skills/` directories, which are under a different licence.
+
+```
+Copyright (c) 2026 Jakub Antalik / Transitions.dev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```