@umamichi-ui/common-components 0.1.0 → 0.3.0

package/dist/dialog/ConfirmDialogOverlay.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ReactNode, RefObject } from 'react';
 import { type SiteOverlayAlign } from '../overlay/SiteOverlayBackdrop';
 export type ConfirmDialogOverlayProps = {
     open: boolean;
@@ -8,6 +8,8 @@ export type ConfirmDialogOverlayProps = {
     children: ReactNode;
     align?: SiteOverlayAlign;
     dismissOnEscape?: boolean;
+    focusManagement?: boolean;
+    initialFocusRef?: RefObject<HTMLElement | null>;
 };
-export declare function ConfirmDialogOverlay({ open, overlayId, onDismiss, onExited, children, align, dismissOnEscape, }: ConfirmDialogOverlayProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConfirmDialogOverlay({ open, overlayId, onDismiss, onExited, children, align, dismissOnEscape, focusManagement, initialFocusRef, }: ConfirmDialogOverlayProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ConfirmDialogOverlay.d.ts.map

package/dist/dialog/ConfirmDialogOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmDialogOverlay.d.ts","sourceRoot":"","sources":["../../src/dialog/ConfirmDialogOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAuB,KAAK,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAE5F,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,EACnC,IAAI,EACJ,SAAS,EACT,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,KAAkB,EAClB,eAAsB,GACvB,EAAE,yBAAyB,2CAa3B"}
+{"version":3,"file":"ConfirmDialogOverlay.d.ts","sourceRoot":"","sources":["../../src/dialog/ConfirmDialogOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,EAAuB,KAAK,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAI5F,MAAM,MAAM,yBAAyB,GAAG;IAEtC,IAAI,EAAE,OAAO,CAAC;IAEd,SAAS,EAAE,MAAM,CAAC;IAElB,SAAS,EAAE,MAAM,IAAI,CAAC;IAEtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB,QAAQ,EAAE,SAAS,CAAC;IAEpB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IAEzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,eAAe,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAEjD,CAAC;AAIF,wBAAgB,oBAAoB,CAAC,EAEnC,IAAI,EAEJ,SAAS,EAET,SAAS,EAET,QAAQ,EAER,QAAQ,EAER,KAAkB,EAElB,eAAsB,EAEtB,eAAsB,EAEtB,eAAe,GAEhB,EAAE,yBAAyB,2CA8B3B"}

package/dist/dialog/ConfirmDialogOverlay.js

@@ -7,7 +7,9 @@ function ConfirmDialogOverlay({
   onExited,
   children,
   align = "centered",
-  dismissOnEscape = true
+  dismissOnEscape = true,
+  focusManagement = true,
+  initialFocusRef
 }) {
   return /* @__PURE__ */ jsx(
     SiteOverlayBackdrop,
@@ -18,6 +20,8 @@ function ConfirmDialogOverlay({
       onDismiss,
       onExited,
       dismissOnEscape,
+      focusManagement,
+      initialFocusRef,
       children
     }
   );

package/dist/dialog/ConfirmDialogOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmDialogOverlay.js","sources":["../../src/dialog/ConfirmDialogOverlay.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { SiteOverlayBackdrop, type SiteOverlayAlign } from '../overlay/SiteOverlayBackdrop';\n\nexport type ConfirmDialogOverlayProps = {\n  open: boolean;\n  overlayId: string;\n  onDismiss: () => void;\n  onExited?: () => void;\n  children: ReactNode;\n  align?: SiteOverlayAlign;\n  dismissOnEscape?: boolean;\n};\n\nexport function ConfirmDialogOverlay({\n  open,\n  overlayId,\n  onDismiss,\n  onExited,\n  children,\n  align = 'centered',\n  dismissOnEscape = true,\n}: ConfirmDialogOverlayProps) {\n  return (\n    <SiteOverlayBackdrop\n      open={open}\n      overlayId={overlayId}\n      align={align}\n      onDismiss={onDismiss}\n      onExited={onExited}\n      dismissOnEscape={dismissOnEscape}\n    >\n      {children}\n    </SiteOverlayBackdrop>\n  );\n}\n"],"names":[],"mappings":";;AAaO,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,kBAAkB;AACpB,GAA8B;AAC5B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"ConfirmDialogOverlay.js","sources":["../../src/dialog/ConfirmDialogOverlay.tsx"],"sourcesContent":["import type { ReactNode, RefObject } from 'react';\r\r\nimport { SiteOverlayBackdrop, type SiteOverlayAlign } from '../overlay/SiteOverlayBackdrop';\r\r\n\r\r\nexport type ConfirmDialogOverlayProps = {\r\r\n  open: boolean;\r\r\n  overlayId: string;\r\r\n  onDismiss: () => void;\r\r\n  onExited?: () => void;\r\r\n  children: ReactNode;\r\r\n  align?: SiteOverlayAlign;\r\r\n  dismissOnEscape?: boolean;\r\r\n  focusManagement?: boolean;\r\r\n  initialFocusRef?: RefObject<HTMLElement | null>;\r\r\n};\r\r\n\r\r\nexport function ConfirmDialogOverlay({\r\r\n  open,\r\r\n  overlayId,\r\r\n  onDismiss,\r\r\n  onExited,\r\r\n  children,\r\r\n  align = 'centered',\r\r\n  dismissOnEscape = true,\r\r\n  focusManagement = true,\r\r\n  initialFocusRef,\r\r\n}: ConfirmDialogOverlayProps) {\r\r\n  return (\r\r\n    <SiteOverlayBackdrop\r\r\n      open={open}\r\r\n      overlayId={overlayId}\r\r\n      align={align}\r\r\n      onDismiss={onDismiss}\r\r\n      onExited={onExited}\r\r\n      dismissOnEscape={dismissOnEscape}\r\r\n      focusManagement={focusManagement}\r\r\n      initialFocusRef={initialFocusRef}\r\r\n    >\r\r\n      {children}\r\r\n    </SiteOverlayBackdrop>\r\r\n  );\r\r\n}\r\r\n"],"names":[],"mappings":";;AA8BO,SAAS,qBAAqB;AAAA,EAEnC;AAAA,EAEA;AAAA,EAEA;AAAA,EAEA;AAAA,EAEA;AAAA,EAEA,QAAQ;AAAA,EAER,kBAAkB;AAAA,EAElB,kBAAkB;AAAA,EAElB;AAEF,GAA8B;AAE5B,SAEE;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC;AAAA,MAEA;AAAA,MAEA;AAAA,MAEA;AAAA,MAEA;AAAA,MAEA;AAAA,MAEA;AAAA,MAEA;AAAA,MAIC;AAAA,IAAA;AAAA,EAAA;AAMP;"}

package/dist/index.js

@@ -14,6 +14,7 @@ import { SiteOverlayBackdrop } from "./overlay/SiteOverlayBackdrop.js";
 import { computeFloatingMenuGeometry } from "./menu/computeFloatingMenuGeometry.js";
 import { mergeOverlayRefs, useOverlayPresence, withOverlayOpen } from "./presence/useOverlayPresence.js";
 import { useFloatingMenuGeometry } from "./menu/useFloatingMenuGeometry.js";
+import { useOverlayFocus } from "./overlay/useOverlayFocus.js";
 import { useOverlayStackEntry } from "./overlay/useOverlayStackEntry.js";
 export {
   AboutDialog,
@@ -37,6 +38,7 @@ export {
   mergeOverlayRefs,
   pushOverlayHistoryState,
   useFloatingMenuGeometry,
+  useOverlayFocus,
   useOverlayPresence,
   useOverlayStack,
   useOverlayStackEntry,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

package/dist/overlay/SiteOverlayBackdrop.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ReactNode, RefObject } from 'react';
 export type SiteOverlayAlign = 'centered' | 'top' | 'bottom';
 export type SiteOverlayBackdropProps = {
     open: boolean;
@@ -7,7 +7,9 @@ export type SiteOverlayBackdropProps = {
     onDismiss: () => void;
     onExited?: () => void;
     dismissOnEscape?: boolean;
+    focusManagement?: boolean;
+    initialFocusRef?: RefObject<HTMLElement | null>;
     children: ReactNode;
 };
-export declare function SiteOverlayBackdrop({ open, overlayId, align, onDismiss, onExited, dismissOnEscape, children, }: SiteOverlayBackdropProps): import("react").ReactPortal | null;
+export declare function SiteOverlayBackdrop({ open, overlayId, align, onDismiss, onExited, dismissOnEscape, focusManagement, initialFocusRef, children, }: SiteOverlayBackdropProps): import("react").ReactPortal | null;
 //# sourceMappingURL=SiteOverlayBackdrop.d.ts.map

package/dist/overlay/SiteOverlayBackdrop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SiteOverlayBackdrop.d.ts","sourceRoot":"","sources":["../../src/overlay/SiteOverlayBackdrop.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AAM1D,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,KAAK,GAAG,QAAQ,CAAC;AAQ7D,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,SAAS,EACT,KAAkB,EAClB,SAAS,EACT,QAAQ,EACR,eAAsB,EACtB,QAAQ,GACT,EAAE,wBAAwB,sCA0C1B"}
+{"version":3,"file":"SiteOverlayBackdrop.d.ts","sourceRoot":"","sources":["../../src/overlay/SiteOverlayBackdrop.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAqB,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAcrE,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,KAAK,GAAG,QAAQ,CAAC;AAgB7D,MAAM,MAAM,wBAAwB,GAAG;IAErC,IAAI,EAAE,OAAO,CAAC;IAEd,SAAS,EAAE,MAAM,CAAC;IAElB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IAEzB,SAAS,EAAE,MAAM,IAAI,CAAC;IAEtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,eAAe,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAEhD,QAAQ,EAAE,SAAS,CAAC;CAErB,CAAC;AAIF,wBAAgB,mBAAmB,CAAC,EAElC,IAAI,EAEJ,SAAS,EAET,KAAkB,EAElB,SAAS,EAET,QAAQ,EAER,eAAsB,EAEtB,eAAsB,EAEtB,eAAe,EAEf,QAAQ,GAET,EAAE,wBAAwB,sCA8F1B"}

package/dist/overlay/SiteOverlayBackdrop.js

@@ -3,6 +3,7 @@ import { useEffect } from "react";
 import { createPortal } from "react-dom";
 import { useOverlayPresence, withOverlayOpen } from "../presence/useOverlayPresence.js";
 import { useOverlayStackEntry } from "./useOverlayStackEntry.js";
+import { useOverlayFocus } from "./useOverlayFocus.js";
 const alignClassName = {
   centered: "site-overlay-backdrop site-overlay-backdrop--centered",
   top: "site-overlay-backdrop site-overlay-backdrop--top",
@@ -15,6 +16,8 @@ function SiteOverlayBackdrop({
   onDismiss,
   onExited,
   dismissOnEscape = true,
+  focusManagement = true,
+  initialFocusRef,
   children
 }) {
   const { mounted, isOpen, overlayRef } = useOverlayPresence(open);
@@ -24,6 +27,10 @@ function SiteOverlayBackdrop({
     onDismiss,
     dismissOnEscape
   });
+  useOverlayFocus(overlayRef, open, open && isBackdropActive && isOpen, {
+    enabled: focusManagement,
+    initialFocusRef
+  });
   useEffect(() => {
     if (!mounted) {
       onExited?.();

package/dist/overlay/SiteOverlayBackdrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"SiteOverlayBackdrop.js","sources":["../../src/overlay/SiteOverlayBackdrop.tsx"],"sourcesContent":["import type { MouseEventHandler, ReactNode } from 'react';\nimport { useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useOverlayPresence, withOverlayOpen } from '../presence/useOverlayPresence';\nimport { useOverlayStackEntry } from './useOverlayStackEntry';\n\nexport type SiteOverlayAlign = 'centered' | 'top' | 'bottom';\n\nconst alignClassName: Record<SiteOverlayAlign, string> = {\n  centered: 'site-overlay-backdrop site-overlay-backdrop--centered',\n  top: 'site-overlay-backdrop site-overlay-backdrop--top',\n  bottom: 'site-overlay-backdrop site-overlay-backdrop--bottom',\n};\n\nexport type SiteOverlayBackdropProps = {\n  open: boolean;\n  overlayId: string;\n  align?: SiteOverlayAlign;\n  onDismiss: () => void;\n  onExited?: () => void;\n  dismissOnEscape?: boolean;\n  children: ReactNode;\n};\n\nexport function SiteOverlayBackdrop({\n  open,\n  overlayId,\n  align = 'centered',\n  onDismiss,\n  onExited,\n  dismissOnEscape = true,\n  children,\n}: SiteOverlayBackdropProps) {\n  const { mounted, isOpen, overlayRef } = useOverlayPresence<HTMLDivElement>(open);\n  const { isBackdropActive, zIndex } = useOverlayStackEntry({\n    id: overlayId,\n    open,\n    onDismiss,\n    dismissOnEscape,\n  });\n\n  useEffect(() => {\n    if (!mounted) {\n      onExited?.();\n    }\n  }, [mounted, onExited]);\n\n  if (!mounted) {\n    return null;\n  }\n\n  const onBackdropClick: MouseEventHandler<HTMLDivElement> = (event) => {\n    if (!isBackdropActive || event.target !== event.currentTarget) {\n      return;\n    }\n\n    onDismiss();\n  };\n\n  return createPortal(\n    <div\n      ref={overlayRef}\n      className={withOverlayOpen(\n        `${alignClassName[align]}${isBackdropActive ? '' : ' site-overlay-backdrop-inactive'}`,\n        isOpen,\n      )}\n      style={{ zIndex }}\n      role=\"presentation\"\n      onClick={onBackdropClick}\n    >\n      {children}\n    </div>,\n    document.body,\n  );\n}\n"],"names":[],"mappings":";;;;;AAQA,MAAM,iBAAmD;AAAA,EACvD,UAAU;AAAA,EACV,KAAK;AAAA,EACL,QAAQ;AACV;AAYO,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB;AACF,GAA6B;AAC3B,QAAM,EAAE,SAAS,QAAQ,WAAA,IAAe,mBAAmC,IAAI;AAC/E,QAAM,EAAE,kBAAkB,OAAA,IAAW,qBAAqB;AAAA,IACxD,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,YAAU,MAAM;AACd,QAAI,CAAC,SAAS;AACZ,iBAAA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,SAAS,QAAQ,CAAC;AAEtB,MAAI,CAAC,SAAS;AACZ,WAAO;AAAA,EACT;AAEA,QAAM,kBAAqD,CAAC,UAAU;AACpE,QAAI,CAAC,oBAAoB,MAAM,WAAW,MAAM,eAAe;AAC7D;AAAA,IACF;AAEA,cAAA;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW;AAAA,UACT,GAAG,eAAe,KAAK,CAAC,GAAG,mBAAmB,KAAK,iCAAiC;AAAA,UACpF;AAAA,QAAA;AAAA,QAEF,OAAO,EAAE,OAAA;AAAA,QACT,MAAK;AAAA,QACL,SAAS;AAAA,QAER;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH,SAAS;AAAA,EAAA;AAEb;"}
+{"version":3,"file":"SiteOverlayBackdrop.js","sources":["../../src/overlay/SiteOverlayBackdrop.tsx"],"sourcesContent":["import type { MouseEventHandler, ReactNode, RefObject } from 'react';\r\r\nimport { useEffect } from 'react';\r\r\nimport { createPortal } from 'react-dom';\r\r\nimport { useOverlayPresence, withOverlayOpen } from '../presence/useOverlayPresence';\r\r\nimport { useOverlayStackEntry } from './useOverlayStackEntry';\r\r\nimport { useOverlayFocus } from './useOverlayFocus';\r\r\n\r\r\nexport type SiteOverlayAlign = 'centered' | 'top' | 'bottom';\r\r\n\r\r\nconst alignClassName: Record<SiteOverlayAlign, string> = {\r\r\n  centered: 'site-overlay-backdrop site-overlay-backdrop--centered',\r\r\n  top: 'site-overlay-backdrop site-overlay-backdrop--top',\r\r\n  bottom: 'site-overlay-backdrop site-overlay-backdrop--bottom',\r\r\n};\r\r\n\r\r\nexport type SiteOverlayBackdropProps = {\r\r\n  open: boolean;\r\r\n  overlayId: string;\r\r\n  align?: SiteOverlayAlign;\r\r\n  onDismiss: () => void;\r\r\n  onExited?: () => void;\r\r\n  dismissOnEscape?: boolean;\r\r\n  focusManagement?: boolean;\r\r\n  initialFocusRef?: RefObject<HTMLElement | null>;\r\r\n  children: ReactNode;\r\r\n};\r\r\n\r\r\nexport function SiteOverlayBackdrop({\r\r\n  open,\r\r\n  overlayId,\r\r\n  align = 'centered',\r\r\n  onDismiss,\r\r\n  onExited,\r\r\n  dismissOnEscape = true,\r\r\n  focusManagement = true,\r\r\n  initialFocusRef,\r\r\n  children,\r\r\n}: SiteOverlayBackdropProps) {\r\r\n  const { mounted, isOpen, overlayRef } = useOverlayPresence<HTMLDivElement>(open);\r\r\n  const { isBackdropActive, zIndex } = useOverlayStackEntry({\r\r\n    id: overlayId,\r\r\n    open,\r\r\n    onDismiss,\r\r\n    dismissOnEscape,\r\r\n  });\r\r\n\r\r\n  useOverlayFocus(overlayRef, open, open && isBackdropActive && isOpen, {\r\r\n    enabled: focusManagement,\r\r\n    initialFocusRef,\r\r\n  });\r\r\n\r\r\n  useEffect(() => {\r\r\n    if (!mounted) {\r\r\n      onExited?.();\r\r\n    }\r\r\n  }, [mounted, onExited]);\r\r\n\r\r\n  if (!mounted) {\r\r\n    return null;\r\r\n  }\r\r\n\r\r\n  const onBackdropClick: MouseEventHandler<HTMLDivElement> = (event) => {\r\r\n    if (!isBackdropActive || event.target !== event.currentTarget) {\r\r\n      return;\r\r\n    }\r\r\n\r\r\n    onDismiss();\r\r\n  };\r\r\n\r\r\n  return createPortal(\r\r\n    <div\r\r\n      ref={overlayRef}\r\r\n      className={withOverlayOpen(\r\r\n        `${alignClassName[align]}${isBackdropActive ? '' : ' site-overlay-backdrop-inactive'}`,\r\r\n        isOpen,\r\r\n      )}\r\r\n      style={{ zIndex }}\r\r\n      role=\"presentation\"\r\r\n      onClick={onBackdropClick}\r\r\n    >\r\r\n      {children}\r\r\n    </div>,\r\r\n    document.body,\r\r\n  );\r\r\n}\r\r\n"],"names":[],"mappings":";;;;;;AAkBA,MAAM,iBAAmD;AAAA,EAEvD,UAAU;AAAA,EAEV,KAAK;AAAA,EAEL,QAAQ;AAEV;AA4BO,SAAS,oBAAoB;AAAA,EAElC;AAAA,EAEA;AAAA,EAEA,QAAQ;AAAA,EAER;AAAA,EAEA;AAAA,EAEA,kBAAkB;AAAA,EAElB,kBAAkB;AAAA,EAElB;AAAA,EAEA;AAEF,GAA6B;AAE3B,QAAM,EAAE,SAAS,QAAQ,WAAA,IAAe,mBAAmC,IAAI;AAE/E,QAAM,EAAE,kBAAkB,OAAA,IAAW,qBAAqB;AAAA,IAExD,IAAI;AAAA,IAEJ;AAAA,IAEA;AAAA,IAEA;AAAA,EAAA,CAED;AAID,kBAAgB,YAAY,MAAM,QAAQ,oBAAoB,QAAQ;AAAA,IAEpE,SAAS;AAAA,IAET;AAAA,EAAA,CAED;AAID,YAAU,MAAM;AAEd,QAAI,CAAC,SAAS;AAEZ,iBAAA;AAAA,IAEF;AAAA,EAEF,GAAG,CAAC,SAAS,QAAQ,CAAC;AAItB,MAAI,CAAC,SAAS;AAEZ,WAAO;AAAA,EAET;AAIA,QAAM,kBAAqD,CAAC,UAAU;AAEpE,QAAI,CAAC,oBAAoB,MAAM,WAAW,MAAM,eAAe;AAE7D;AAAA,IAEF;AAIA,cAAA;AAAA,EAEF;AAIA,SAAO;AAAA,IAEL;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,KAAK;AAAA,QAEL,WAAW;AAAA,UAET,GAAG,eAAe,KAAK,CAAC,GAAG,mBAAmB,KAAK,iCAAiC;AAAA,UAEpF;AAAA,QAAA;AAAA,QAIF,OAAO,EAAE,OAAA;AAAA,QAET,MAAK;AAAA,QAEL,SAAS;AAAA,QAIR;AAAA,MAAA;AAAA,IAAA;AAAA,IAIH,SAAS;AAAA,EAAA;AAIb;"}

package/dist/overlay/index.d.ts

@@ -2,5 +2,6 @@ export { OverlayStackProvider, useOverlayStack } from './OverlayStackProvider';
 export { isOverlayHistoryState, OVERLAY_HISTORY_STATE_KEY, pushOverlayHistoryState, type OverlayHistoryState, } from './overlayHistory';
 export { computeOverlayZIndex, OVERLAY_Z_BASE, OVERLAY_Z_STEP, type OverlayStackEntry, } from './overlayStackTypes';
 export { SiteOverlayBackdrop, type SiteOverlayAlign, type SiteOverlayBackdropProps } from './SiteOverlayBackdrop';
+export { useOverlayFocus, type UseOverlayFocusOptions } from './useOverlayFocus';
 export { useOverlayStackEntry, type UseOverlayStackEntryOptions } from './useOverlayStackEntry';
 //# sourceMappingURL=index.d.ts.map

package/dist/overlay/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/overlay/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC/E,OAAO,EACL,qBAAqB,EACrB,yBAAyB,EACzB,uBAAuB,EACvB,KAAK,mBAAmB,GACzB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,oBAAoB,EACpB,cAAc,EACd,cAAc,EACd,KAAK,iBAAiB,GACvB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,mBAAmB,EAAE,KAAK,gBAAgB,EAAE,KAAK,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAClH,OAAO,EAAE,oBAAoB,EAAE,KAAK,2BAA2B,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/overlay/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC/E,OAAO,EACL,qBAAqB,EACrB,yBAAyB,EACzB,uBAAuB,EACvB,KAAK,mBAAmB,GACzB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,oBAAoB,EACpB,cAAc,EACd,cAAc,EACd,KAAK,iBAAiB,GACvB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,mBAAmB,EAAE,KAAK,gBAAgB,EAAE,KAAK,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAClH,OAAO,EAAE,eAAe,EAAE,KAAK,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AACjF,OAAO,EAAE,oBAAoB,EAAE,KAAK,2BAA2B,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/overlay/index.js

@@ -2,6 +2,7 @@ import { OverlayStackProvider, useOverlayStack } from "./OverlayStackProvider.js
 import { OVERLAY_HISTORY_STATE_KEY, isOverlayHistoryState, pushOverlayHistoryState } from "./overlayHistory.js";
 import { OVERLAY_Z_BASE, OVERLAY_Z_STEP, computeOverlayZIndex } from "./overlayStackTypes.js";
 import { SiteOverlayBackdrop } from "./SiteOverlayBackdrop.js";
+import { useOverlayFocus } from "./useOverlayFocus.js";
 import { useOverlayStackEntry } from "./useOverlayStackEntry.js";
 export {
   OVERLAY_HISTORY_STATE_KEY,
@@ -12,6 +13,7 @@ export {
   computeOverlayZIndex,
   isOverlayHistoryState,
   pushOverlayHistoryState,
+  useOverlayFocus,
   useOverlayStack,
   useOverlayStackEntry
 };

package/dist/overlay/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/overlay/useOverlayFocus.d.ts

@@ -0,0 +1,11 @@
+import { type RefObject } from 'react';
+export type UseOverlayFocusOptions = {
+    enabled?: boolean;
+    initialFocusRef?: RefObject<HTMLElement | null>;
+};
+/**
+ * Stack-aware focus management for modal overlays: initial focus, Tab trap while active,
+ * restore focus when the overlay session closes. Only traps while `active` (typically top layer).
+ */
+export declare function useOverlayFocus(containerRef: RefObject<HTMLElement | null>, open: boolean, active: boolean, { enabled, initialFocusRef }?: UseOverlayFocusOptions): void;
+//# sourceMappingURL=useOverlayFocus.d.ts.map

package/dist/overlay/useOverlayFocus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOverlayFocus.d.ts","sourceRoot":"","sources":["../../src/overlay/useOverlayFocus.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAW1D,MAAM,MAAM,sBAAsB,GAAG;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CACjD,CAAC;AAEF;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,YAAY,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAC3C,IAAI,EAAE,OAAO,EACb,MAAM,EAAE,OAAO,EACf,EAAE,OAAc,EAAE,eAAe,EAAE,GAAE,sBAA2B,QAmFjE"}

package/dist/overlay/useOverlayFocus.js

@@ -0,0 +1,78 @@
+import { useRef, useEffect } from "react";
+const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function getFocusableElements(container) {
+  return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter(
+    (element) => !element.hasAttribute("disabled") && element.tabIndex !== -1
+  );
+}
+function useOverlayFocus(containerRef, open, active, { enabled = true, initialFocusRef } = {}) {
+  const previouslyFocusedRef = useRef(null);
+  const openSessionRef = useRef(false);
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    if (!open) {
+      const toRestore = previouslyFocusedRef.current;
+      previouslyFocusedRef.current = null;
+      openSessionRef.current = false;
+      toRestore?.focus();
+      return;
+    }
+    if (!openSessionRef.current) {
+      previouslyFocusedRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+      openSessionRef.current = true;
+    }
+    if (!active) {
+      return;
+    }
+    const focusInitial = () => {
+      if (initialFocusRef?.current) {
+        initialFocusRef.current.focus();
+        return;
+      }
+      const container = containerRef.current;
+      if (!container) {
+        return;
+      }
+      getFocusableElements(container)[0]?.focus();
+    };
+    const raf = requestAnimationFrame(focusInitial);
+    const onKeyDown = (event) => {
+      if (event.key !== "Tab") {
+        return;
+      }
+      const container = containerRef.current;
+      if (!container) {
+        return;
+      }
+      const focusables = getFocusableElements(container);
+      if (focusables.length === 0) {
+        return;
+      }
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      const activeElement = document.activeElement;
+      if (event.shiftKey) {
+        if (activeElement === first || !container.contains(activeElement)) {
+          event.preventDefault();
+          last.focus();
+        }
+        return;
+      }
+      if (activeElement === last || !container.contains(activeElement)) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      cancelAnimationFrame(raf);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [active, containerRef, enabled, initialFocusRef, open]);
+}
+export {
+  useOverlayFocus
+};
+//# sourceMappingURL=useOverlayFocus.js.map

package/dist/overlay/useOverlayFocus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOverlayFocus.js","sources":["../../src/overlay/useOverlayFocus.ts"],"sourcesContent":["import { useEffect, useRef, type RefObject } from 'react';\n\nconst FOCUSABLE_SELECTOR =\n  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nfunction getFocusableElements(container: HTMLElement) {\n  return Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)).filter(\n    (element) => !element.hasAttribute('disabled') && element.tabIndex !== -1,\n  );\n}\n\nexport type UseOverlayFocusOptions = {\n  enabled?: boolean;\n  initialFocusRef?: RefObject<HTMLElement | null>;\n};\n\n/**\n * Stack-aware focus management for modal overlays: initial focus, Tab trap while active,\n * restore focus when the overlay session closes. Only traps while `active` (typically top layer).\n */\nexport function useOverlayFocus(\n  containerRef: RefObject<HTMLElement | null>,\n  open: boolean,\n  active: boolean,\n  { enabled = true, initialFocusRef }: UseOverlayFocusOptions = {},\n) {\n  const previouslyFocusedRef = useRef<HTMLElement | null>(null);\n  const openSessionRef = useRef(false);\n\n  useEffect(() => {\n    if (!enabled) {\n      return;\n    }\n\n    if (!open) {\n      const toRestore = previouslyFocusedRef.current;\n      previouslyFocusedRef.current = null;\n      openSessionRef.current = false;\n      toRestore?.focus();\n      return;\n    }\n\n    if (!openSessionRef.current) {\n      previouslyFocusedRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;\n      openSessionRef.current = true;\n    }\n\n    if (!active) {\n      return;\n    }\n\n    const focusInitial = () => {\n      if (initialFocusRef?.current) {\n        initialFocusRef.current.focus();\n        return;\n      }\n\n      const container = containerRef.current;\n      if (!container) {\n        return;\n      }\n\n      getFocusableElements(container)[0]?.focus();\n    };\n\n    const raf = requestAnimationFrame(focusInitial);\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== 'Tab') {\n        return;\n      }\n\n      const container = containerRef.current;\n      if (!container) {\n        return;\n      }\n\n      const focusables = getFocusableElements(container);\n      if (focusables.length === 0) {\n        return;\n      }\n\n      const first = focusables[0];\n      const last = focusables[focusables.length - 1];\n      const activeElement = document.activeElement;\n\n      if (event.shiftKey) {\n        if (activeElement === first || !container.contains(activeElement)) {\n          event.preventDefault();\n          last.focus();\n        }\n        return;\n      }\n\n      if (activeElement === last || !container.contains(activeElement)) {\n        event.preventDefault();\n        first.focus();\n      }\n    };\n\n    document.addEventListener('keydown', onKeyDown);\n\n    return () => {\n      cancelAnimationFrame(raf);\n      document.removeEventListener('keydown', onKeyDown);\n    };\n  }, [active, containerRef, enabled, initialFocusRef, open]);\n}\n"],"names":[],"mappings":";AAEA,MAAM,qBACJ;AAEF,SAAS,qBAAqB,WAAwB;AACpD,SAAO,MAAM,KAAK,UAAU,iBAA8B,kBAAkB,CAAC,EAAE;AAAA,IAC7E,CAAC,YAAY,CAAC,QAAQ,aAAa,UAAU,KAAK,QAAQ,aAAa;AAAA,EAAA;AAE3E;AAWO,SAAS,gBACd,cACA,MACA,QACA,EAAE,UAAU,MAAM,gBAAA,IAA4C,IAC9D;AACA,QAAM,uBAAuB,OAA2B,IAAI;AAC5D,QAAM,iBAAiB,OAAO,KAAK;AAEnC,YAAU,MAAM;AACd,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AAEA,QAAI,CAAC,MAAM;AACT,YAAM,YAAY,qBAAqB;AACvC,2BAAqB,UAAU;AAC/B,qBAAe,UAAU;AACzB,iBAAW,MAAA;AACX;AAAA,IACF;AAEA,QAAI,CAAC,eAAe,SAAS;AAC3B,2BAAqB,UAAU,SAAS,yBAAyB,cAAc,SAAS,gBAAgB;AACxG,qBAAe,UAAU;AAAA,IAC3B;AAEA,QAAI,CAAC,QAAQ;AACX;AAAA,IACF;AAEA,UAAM,eAAe,MAAM;AACzB,UAAI,iBAAiB,SAAS;AAC5B,wBAAgB,QAAQ,MAAA;AACxB;AAAA,MACF;AAEA,YAAM,YAAY,aAAa;AAC/B,UAAI,CAAC,WAAW;AACd;AAAA,MACF;AAEA,2BAAqB,SAAS,EAAE,CAAC,GAAG,MAAA;AAAA,IACtC;AAEA,UAAM,MAAM,sBAAsB,YAAY;AAE9C,UAAM,YAAY,CAAC,UAAyB;AAC1C,UAAI,MAAM,QAAQ,OAAO;AACvB;AAAA,MACF;AAEA,YAAM,YAAY,aAAa;AAC/B,UAAI,CAAC,WAAW;AACd;AAAA,MACF;AAEA,YAAM,aAAa,qBAAqB,SAAS;AACjD,UAAI,WAAW,WAAW,GAAG;AAC3B;AAAA,MACF;AAEA,YAAM,QAAQ,WAAW,CAAC;AAC1B,YAAM,OAAO,WAAW,WAAW,SAAS,CAAC;AAC7C,YAAM,gBAAgB,SAAS;AAE/B,UAAI,MAAM,UAAU;AAClB,YAAI,kBAAkB,SAAS,CAAC,UAAU,SAAS,aAAa,GAAG;AACjE,gBAAM,eAAA;AACN,eAAK,MAAA;AAAA,QACP;AACA;AAAA,MACF;AAEA,UAAI,kBAAkB,QAAQ,CAAC,UAAU,SAAS,aAAa,GAAG;AAChE,cAAM,eAAA;AACN,cAAM,MAAA;AAAA,MACR;AAAA,IACF;AAEA,aAAS,iBAAiB,WAAW,SAAS;AAE9C,WAAO,MAAM;AACX,2BAAqB,GAAG;AACxB,eAAS,oBAAoB,WAAW,SAAS;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,QAAQ,cAAc,SAAS,iBAAiB,IAAI,CAAC;AAC3D;"}

package/package.json

@@ -1,81 +1,81 @@
-{
-  "name": "@umamichi-ui/common-components",
-  "version": "0.1.0",
-  "description": "Reusable React UI components for Umamichi sites (overlay stack, dialogs, menus)",
-  "type": "module",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/umamichi-ui/common-components.git"
-  },
-  "homepage": "https://github.com/umamichi-ui/common-components#readme",
-  "bugs": {
-    "url": "https://github.com/umamichi-ui/common-components/issues"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "keywords": [
-    "react",
-    "ui",
-    "overlay",
-    "modal",
-    "dialog",
-    "umamichi"
-  ],
-  "files": [
-    "dist",
-    "src/styles"
-  ],
-  "sideEffects": [
-    "**/*.css"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
-    "./presence": {
-      "types": "./dist/presence/index.d.ts",
-      "import": "./dist/presence/index.js"
-    },
-    "./overlay": {
-      "types": "./dist/overlay/index.d.ts",
-      "import": "./dist/overlay/index.js"
-    },
-    "./icons": {
-      "types": "./dist/icons/index.d.ts",
-      "import": "./dist/icons/index.js"
-    },
-    "./menu": {
-      "types": "./dist/menu/index.d.ts",
-      "import": "./dist/menu/index.js"
-    },
-    "./dialog": {
-      "types": "./dist/dialog/index.d.ts",
-      "import": "./dist/dialog/index.js"
-    },
-    "./styles.css": "./src/styles/index.css"
-  },
-  "scripts": {
-    "build": "vite build && tsc -p tsconfig.build.json",
-    "dev": "vite build --watch",
-    "prepublishOnly": "npm run build"
-  },
-  "peerDependencies": {
-    "@umamichi-ui/common-css": ">=0.8.0",
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
-  },
-  "devDependencies": {
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.2",
-    "@umamichi-ui/common-css": "^0.8.0",
-    "@vitejs/plugin-react": "^5.1.0",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "typescript": "^5.9.3",
-    "vite": "^7.1.12",
-    "vite-plugin-dts": "^4.5.4"
-  }
-}
+{
+  "name": "@umamichi-ui/common-components",
+  "version": "0.3.0",
+  "description": "Reusable React UI components for Umamichi sites (overlay stack, dialogs, menus)",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/umamichi-ui/common-components.git"
+  },
+  "homepage": "https://github.com/umamichi-ui/common-components#readme",
+  "bugs": {
+    "url": "https://github.com/umamichi-ui/common-components/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "react",
+    "ui",
+    "overlay",
+    "modal",
+    "dialog",
+    "umamichi"
+  ],
+  "files": [
+    "dist",
+    "src/styles"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./presence": {
+      "types": "./dist/presence/index.d.ts",
+      "import": "./dist/presence/index.js"
+    },
+    "./overlay": {
+      "types": "./dist/overlay/index.d.ts",
+      "import": "./dist/overlay/index.js"
+    },
+    "./icons": {
+      "types": "./dist/icons/index.d.ts",
+      "import": "./dist/icons/index.js"
+    },
+    "./menu": {
+      "types": "./dist/menu/index.d.ts",
+      "import": "./dist/menu/index.js"
+    },
+    "./dialog": {
+      "types": "./dist/dialog/index.d.ts",
+      "import": "./dist/dialog/index.js"
+    },
+    "./styles.css": "./src/styles/index.css"
+  },
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.build.json",
+    "dev": "vite build --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "@umamichi-ui/common-css": ">=0.16.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@umamichi-ui/common-css": "^0.16.0",
+    "@vitejs/plugin-react": "^5.1.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "typescript": "^5.9.3",
+    "vite": "^7.1.12",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}

package/src/styles/about-dialog.css

@@ -16,14 +16,15 @@
 .about-dialog-app-name {
   margin: 0 0 6px;
   font-size: 1.05rem;
-  font-weight: 600;
+  font-weight: var(--site-weight-regular);
   line-height: 1.35;
 }
 
 .about-dialog-version {
   margin: 0 0 10px;
   color: var(--site-muted-fg);
-  font-size: 0.92rem;
+  font-size: 0.875rem;
+  font-weight: var(--site-weight-regular);
   line-height: 1.4;
 }
 
@@ -35,6 +36,7 @@
   margin: 0;
   color: var(--site-content-fg);
   font-size: 0.9rem;
+  font-weight: var(--site-weight-regular);
   line-height: 1.55;
 }
 
@@ -43,6 +45,7 @@
   text-align: center;
   color: var(--site-muted-fg);
   font-size: 0.86rem;
+  font-weight: var(--site-weight-regular);
 }
 
 .about-dialog-divider {
@@ -58,7 +61,7 @@
 .about-dialog-section-title {
   margin: 0 0 6px;
   font-size: 0.82rem;
-  font-weight: 600;
+  font-weight: var(--site-weight-semibold);
   letter-spacing: 0.04em;
   color: var(--site-subtle-fg);
   text-transform: uppercase;
@@ -67,6 +70,7 @@
 .about-dialog-section-text {
   margin: 0;
   font-size: 0.9rem;
+  font-weight: var(--site-weight-regular);
   line-height: 1.55;
   color: var(--site-content-fg);
 }
@@ -80,7 +84,8 @@
   grid-template-columns: 5.5rem minmax(0, 1fr);
   gap: 8px 12px;
   align-items: baseline;
-  font-size: 0.88rem;
+  font-size: 0.875rem;
+  font-weight: var(--site-weight-regular);
   line-height: 1.45;
 }
 

package/src/styles/mobile-action-sheet.css

@@ -75,7 +75,7 @@
 
 .mobile-action-sheet-subheader-title {
   font-size: 1rem;
-  font-weight: 600;
+  font-weight: var(--site-weight-regular);
   line-height: 1.35;
 }
 
@@ -103,6 +103,7 @@
   color: inherit;
   font: inherit;
   font-size: 1rem;
+  font-weight: var(--site-weight-regular);
   line-height: 1.35;
   text-align: left;
   cursor: pointer;