@infonomic/uikit 6.1.0 → 6.2.0

package/dist/widgets/drawer/drawer_module.css

@@ -1,113 +1,91 @@
 @layer infonomic-base, infonomic-utilities, infonomic-theme;
 
 @layer infonomic-components {
-  :is(.drawer-wrapper-q0hBzd, .infonomic-drawer-wrapper) {
-    z-index: 30;
-    opacity: 1;
-    flex-direction: column;
-    justify-content: end;
-    display: flex;
+  :is(.backdrop-Ga1s55, .infonomic-drawer-backdrop) {
+    background-color: #f5f5f559;
+    transition: opacity .2s;
     position: fixed;
     inset: 0;
   }
 
-  :is(.drawer-container-ssf1qn, .infonomic-drawer-container) {
-    background-color: var(--surface-panel);
-    height: 100%;
-    box-shadow: var(--shadow-md);
-    z-index: inherit;
-    position: absolute;
-    right: 0;
+  .backdrop-Ga1s55[data-starting-style], .backdrop-Ga1s55[data-ending-style] {
+    opacity: 0;
   }
 
-  .drawer-container-ssf1qn[aria-hidden="false"] {
-    animation: .15s cubic-bezier(.16, 1, .3, 1) slideIn-dDQJvD;
+  .dark .backdrop-Ga1s55 {
+    background-color: #00000080;
   }
 
-  .infonomic-drawer-container[aria-hidden="false"] {
-    animation: .15s cubic-bezier(.16, 1, .3, 1) slideIn-dDQJvD;
+  [data-theme="dark"] .backdrop-Ga1s55 {
+    background-color: #00000080;
   }
 
-  .drawer-depth-0-VYE9YM.drawer-medium-ZFbdby .drawer-container-ssf1qn, .drawer-depth-0-VYE9YM.drawer-wide-nXbxPs .drawer-container-ssf1qn {
-    width: 90%;
+  .dark .infonomic-drawer-backdrop {
+    background-color: #00000080;
   }
 
-  .infonomic-drawer-depth-0.drawer-medium .drawer-container {
-    width: 90%;
+  [data-theme="dark"] .infonomic-drawer-backdrop {
+    background-color: #00000080;
   }
 
-  .infonomic-drawer-depth-0.drawer-wide .drawer-container {
-    width: 90%;
+  :is(.drawer-wrapper-q0hBzd, .infonomic-drawer-wrapper) {
+    background-color: var(--surface-panel);
+    box-shadow: var(--shadow-md);
+    flex-direction: column;
+    transition: transform .2s cubic-bezier(.16, 1, .3, 1);
+    display: flex;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    overflow: hidden;
   }
 
-  .drawer-depth-1-2CzoWM.drawer-medium-ZFbdby .drawer-container-ssf1qn, .drawer-depth-1-2CzoWM.drawer-wide-nXbxPs .drawer-container-ssf1qn {
-    width: 88%;
+  .drawer-wrapper-q0hBzd[data-open] {
+    transform: translateX(var(--drawer-swipe-movement-x, 0px));
   }
 
-  .infonomic-drawer-depth-1.drawer-medium .drawer-container {
-    width: 88%;
+  .drawer-wrapper-q0hBzd[data-closed], .drawer-wrapper-q0hBzd[data-starting-style] {
+    transform: translateX(100%);
   }
 
-  .infonomic-drawer-depth-1.drawer-wide .drawer-container {
-    width: 88%;
+  .drawer-wrapper-q0hBzd[data-swiping] {
+    transition: none;
   }
 
-  .drawer-depth-2-eR43PT.drawer--tSM0mV .drawer-container-ssf1qn, .drawer-depth-2-eR43PT.drawer-wide-nXbxPs .drawer-container-ssf1qn {
-    width: 86%;
+  :is(.drawer-container-ssf1qn, .infonomic-drawer-container) {
+    height: 100%;
   }
 
-  .infonomic-drawer-depth-2.drawer-medium .drawer-container {
-    width: 86%;
+  :is(.drawer-narrow-lsLgHp, .infonomic-drawer-narrow) {
+    width: calc(100% - 32px);
+    max-width: 400px;
   }
 
-  .infonomic-drawer-depth-2.drawer-wide .drawer-container {
+  .drawer-depth-0-VYE9YM.drawer-medium-ZFbdby, .drawer-depth-0-VYE9YM.drawer-wide-nXbxPs {
+    width: 90%;
+  }
+
+  .drawer-depth-1-2CzoWM.drawer-medium-ZFbdby, .drawer-depth-1-2CzoWM.drawer-wide-nXbxPs {
+    width: 88%;
+  }
+
+  .drawer-depth-2-eR43PT.drawer-medium-ZFbdby, .drawer-depth-2-eR43PT.drawer-wide-nXbxPs {
     width: 86%;
   }
 
   @media (min-width: 48rem) {
-    .drawer-depth-0-VYE9YM.drawer-medium-ZFbdby .drawer-container-ssf1qn {
-      width: 600px;
-    }
-
-    .infonomic-drawer-depth-0.drawer-medium .drawer-container {
+    .drawer-depth-0-VYE9YM.drawer-medium-ZFbdby {
       width: 600px;
     }
 
-    .drawer-depth-1-2CzoWM.drawer-medium-ZFbdby .drawer-container-ssf1qn {
-      width: 580px;
-    }
-
-    .infonomic-drawer-depth-1.drawer-medium .drawer-container {
+    .drawer-depth-1-2CzoWM.drawer-medium-ZFbdby {
       width: 580px;
     }
 
-    .drawer-depth-2-eR43PT.drawer--tSM0mV .drawer-container-ssf1qn {
+    .drawer-depth-2-eR43PT.drawer-medium-ZFbdby {
       width: 560px;
     }
-
-    .infonomic-drawer-depth-2.drawer-medium .drawer-container {
-      width: 560px;
-    }
-  }
-
-  .drawer-narrow-lsLgHp .drawer-container-ssf1qn {
-    width: calc(100% - 32px);
-    max-width: 400px;
-  }
-
-  .infonomic-drawer-narrow .infonomic-drawer-container {
-    width: calc(100% - 32px);
-    max-width: 400px;
-  }
-
-  .drawer-container-ssf1qn[aria-hidden="true"] {
-    opacity: 0;
-    transform: translateX(100%);
-  }
-
-  .infonomic-drawer-container[aria-hidden="true"] {
-    opacity: 0;
-    transform: translateX(100%);
   }
 
   :is(.drawer-top-actions-FiHu4U, .infonomic-drawer-top-actions) {
@@ -147,17 +125,5 @@
   :is(.drawer-content-QQqzOR, .infonomic-drawer-content) {
     padding: var(--spacing-12);
   }
-
-  @keyframes slideIn-dDQJvD {
-    from {
-      opacity: 0;
-      transform: translateX(100%);
-    }
-
-    to {
-      opacity: 1;
-      transform: translateX(0);
-    }
-  }
 }
 

package/dist/widgets/modal/modal.d.ts

@@ -15,7 +15,7 @@ export declare function useModal(): {
     isOpen: boolean;
     setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
-declare function Modal({ isOpen, onDismiss, closeOnOverlayClick, children, ...rest }: ModalProps): React.ReactPortal | null;
+declare function Modal({ isOpen, onDismiss, closeOnOverlayClick, children, }: ModalProps): React.JSX.Element;
 declare namespace Modal {
     var displayName: string;
     var Container: ({ ref, children, className, ...rest }: import("./modal-container").ModalContainerProps & {

package/dist/widgets/modal/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/widgets/modal/modal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAoB9B,MAAM,WAAW,UAAU;IACzB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,eAAO,MAAM,YAAY;gBACX,MAAM,IAAI;EAClB,CAAA;AAEN,MAAM,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAA;AAEvD,wBAAgB,QAAQ,IAAI;IAC1B,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,MAAM,EAAE,OAAO,CAAA;IACf,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAA;CACzD,CAiBA;AAED,iBAAS,KAAK,CAAC,EACb,MAAM,EACN,SAAS,EACT,mBAAmB,EACnB,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,UAAU,GAAG,KAAK,CAAC,WAAW,GAAG,IAAI,CAkCvC;kBAxCQ,KAAK;;;WAjDK,CAAC;;;WAAnB,CAAC;;;WAAK,CAAC;;;WAAD,CAAC;;;AAkGR,OAAO,EAAE,KAAK,EAAE,CAAA"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/widgets/modal/modal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAY9B,MAAM,WAAW,UAAU;IACzB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,eAAO,MAAM,YAAY;gBACX,MAAM,IAAI;EAClB,CAAA;AAEN,MAAM,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAA;AAEvD,wBAAgB,QAAQ,IAAI;IAC1B,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,MAAM,EAAE,OAAO,CAAA;IACf,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAA;CACzD,CAiBA;AAED,iBAAS,KAAK,CAAC,EACb,MAAM,EACN,SAAS,EACT,mBAAmB,EACnB,QAAQ,GACT,EAAE,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA0BhC;kBA/BQ,KAAK;;;WArCN,CAAC;;;WAF2B,CAAC;;;WAAK,CAAC;;;WAAD,CAAC;;;AA+E3C,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/widgets/modal/modal.js

@@ -1,18 +1,13 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useState } from "react";
-import { AnimatePresence, LazyMotion } from "motion/react";
-import { createPortal } from "react-dom";
-import { Overlay } from "../../components/overlay/index.js";
-import { useMediaQuery } from "../../hooks/use-media-query.js";
-import { getPortalRoot } from "../../utils/getPortalRoot.js";
+import { Dialog } from "@base-ui/react/dialog";
+import classnames from "classnames";
+import modal_module from "./modal.module.js";
 import { ModalActions } from "./modal-actions.js";
 import { ModalContainer } from "./modal-container.js";
 import { ModalContent } from "./modal-content.js";
 import { ModalHeader } from "./modal-header.js";
-import { ModalWrapper } from "./modal-wrapper.js";
-const DomMax = async ()=>await import("./motionDomMax.js").then((mod)=>mod.default);
-const DomAnimation = async ()=>await import("./motionDomAnimation.js").then((mod)=>mod.default);
 const ModalContext = /*#__PURE__*/ createContext({});
 function useModal() {
     const [isOpen, setIsOpen] = useState(false);
@@ -29,39 +24,31 @@ function useModal() {
         setIsOpen
     };
 }
-function Modal({ isOpen, onDismiss, closeOnOverlayClick, children, ...rest }) {
-    const isMobile = useMediaQuery('(max-width: 768px)') ?? false;
-    const handleOverlayDismiss = (e)=>{
-        e.stopPropagation();
-        e.preventDefault();
-        if (true === closeOnOverlayClick) onDismiss?.();
-    };
-    const portal = getPortalRoot();
-    if (false === portal) return null;
-    return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx(ModalContext.Provider, {
+function Modal({ isOpen, onDismiss, closeOnOverlayClick, children }) {
+    return /*#__PURE__*/ jsx(ModalContext.Provider, {
         value: {
             onDismiss
         },
-        children: /*#__PURE__*/ jsx(LazyMotion, {
-            features: isMobile ? DomMax : DomAnimation,
-            children: /*#__PURE__*/ jsx(AnimatePresence, {
-                children: true === isOpen && /*#__PURE__*/ jsxs(ModalWrapper, {
-                    transition: {
-                        duration: 0.2
-                    },
-                    onEscapeKey: handleOverlayDismiss,
-                    ...rest,
-                    children: [
-                        /*#__PURE__*/ jsx(Overlay, {
-                            onClick: handleOverlayDismiss,
-                            isUnmounting: !(isOpen ?? false)
-                        }),
-                        children
-                    ]
-                })
+        children: /*#__PURE__*/ jsx(Dialog.Root, {
+            open: isOpen,
+            onOpenChange: (open)=>{
+                if (!open) onDismiss?.();
+            },
+            modal: true,
+            disablePointerDismissal: true !== closeOnOverlayClick,
+            children: /*#__PURE__*/ jsxs(Dialog.Portal, {
+                children: [
+                    /*#__PURE__*/ jsx(Dialog.Backdrop, {
+                        className: classnames('infonomic-modal-backdrop', modal_module.backdrop)
+                    }),
+                    /*#__PURE__*/ jsx(Dialog.Popup, {
+                        className: classnames('infonomic-modal-wrapper', modal_module["modal-wrapper"]),
+                        children: children
+                    })
+                ]
             })
         })
-    }), portal);
+    });
 }
 Modal.displayName = 'Modal';
 Modal.Container = ModalContainer;

package/dist/widgets/modal/modal.module.css

@@ -1,33 +1,72 @@
 @layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
 
 @layer infonomic-components {
+
+  /* Backdrop overlay */
+
+  .backdrop,
+  :global(.infonomic-modal-backdrop) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(245, 245, 245, 0.35);
+    transition: opacity 200ms ease;
+  }
+
+  .backdrop[data-starting-style],
+  .backdrop[data-ending-style] {
+    opacity: 0;
+  }
+
+  :global(.dark) .backdrop,
+  :global([data-theme="dark"]) .backdrop,
+  :global(.dark .infonomic-modal-backdrop),
+  :global([data-theme="dark"] .infonomic-modal-backdrop) {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  /* Modal wrapper / popup — the dialog surface */
+
   .modal-wrapper,
-  :global(.infonomic-modal-open) {
+  :global(.infonomic-modal-wrapper) {
     position: fixed;
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: flex-end;
     align-items: center;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
-    z-index: 30;
-    opacity: 1;
+    transition: opacity 200ms ease;
+  }
+
+  .modal-wrapper[data-starting-style],
+  .modal-wrapper[data-ending-style] {
+    opacity: 0;
   }
 
+  @media screen and (min-width: 40rem) {
+
+    .modal-wrapper,
+    :global(.infonomic-modal-wrapper) {
+      justify-content: center;
+    }
+  }
+
+  /* Container — the visible dialog box */
+
   .modal-container,
   :global(.infonomic-modal-container) {
-    position: absolute;
     display: flex;
     flex-direction: column;
     box-shadow: var(--shadow-md);
     border-radius: var(--border-radius-md);
-    z-index: 20;
     min-height: 300px;
     max-height: 88vh;
     width: 100%;
-    bottom: 0;
     background-color: var(--surface-panel);
     border: 1px solid var(--border-color);
     margin-left: var(--spacing-8);
@@ -35,15 +74,17 @@
   }
 
   @media screen and (min-width: 40rem) {
+
     .modal-container,
     :global(.infonomic-modal-container) {
       max-height: calc(100vh - 24px);
       min-height: auto;
-      bottom: auto;
       width: auto;
     }
   }
 
+  /* Sub-component styles */
+
   .modal-header,
   :global(.infonomic-modal-header) {
     display: flex;
@@ -86,4 +127,4 @@
     padding-left: var(--spacing-16);
     padding-right: var(--spacing-16);
   }
-}
+}

package/dist/widgets/modal/modal.module.js

@@ -1,5 +1,6 @@
 import "./modal_module.css";
 const modal_module = {
+    backdrop: "backdrop-BgKon2",
     "modal-wrapper": "modal-wrapper-wF5Mv1",
     modalWrapper: "modal-wrapper-wF5Mv1",
     "modal-container": "modal-container-PPkPyj",

package/dist/widgets/modal/modal_module.css

@@ -1,21 +1,56 @@
 @layer infonomic-base, infonomic-utilities, infonomic-theme;
 
 @layer infonomic-components {
-  :is(.modal-wrapper-wF5Mv1, .infonomic-modal-open) {
-    z-index: 30;
-    opacity: 1;
+  :is(.backdrop-BgKon2, .infonomic-modal-backdrop) {
+    background-color: #f5f5f559;
+    transition: opacity .2s;
+    position: fixed;
+    inset: 0;
+  }
+
+  .backdrop-BgKon2[data-starting-style], .backdrop-BgKon2[data-ending-style] {
+    opacity: 0;
+  }
+
+  .dark .backdrop-BgKon2 {
+    background-color: #00000080;
+  }
+
+  [data-theme="dark"] .backdrop-BgKon2 {
+    background-color: #00000080;
+  }
+
+  .dark .infonomic-modal-backdrop {
+    background-color: #00000080;
+  }
+
+  [data-theme="dark"] .infonomic-modal-backdrop {
+    background-color: #00000080;
+  }
+
+  :is(.modal-wrapper-wF5Mv1, .infonomic-modal-wrapper) {
     flex-direction: column;
-    justify-content: center;
+    justify-content: flex-end;
     align-items: center;
+    transition: opacity .2s;
     display: flex;
     position: fixed;
     inset: 0;
   }
 
+  .modal-wrapper-wF5Mv1[data-starting-style], .modal-wrapper-wF5Mv1[data-ending-style] {
+    opacity: 0;
+  }
+
+  @media screen and (min-width: 40rem) {
+    :is(.modal-wrapper-wF5Mv1, .infonomic-modal-wrapper) {
+      justify-content: center;
+    }
+  }
+
   :is(.modal-container-PPkPyj, .infonomic-modal-container) {
     box-shadow: var(--shadow-md);
     border-radius: var(--border-radius-md);
-    z-index: 20;
     background-color: var(--surface-panel);
     border: 1px solid var(--border-color);
     width: 100%;
@@ -25,8 +60,6 @@
     margin-right: var(--spacing-8);
     flex-direction: column;
     display: flex;
-    position: absolute;
-    bottom: 0;
   }
 
   @media screen and (min-width: 40rem) {
@@ -34,7 +67,6 @@
       width: auto;
       min-height: auto;
       max-height: calc(100vh - 24px);
-      bottom: auto;
     }
   }
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@infonomic/uikit",
   "private": false,
   "license": "MIT",
-  "version": "6.1.0",
+  "version": "6.2.0",
   "type": "module",
   "description": "Infonomic UI kit is a collection of reusable UI components and utilities for React and Astro.",
   "keywords": [

package/src/components/inputs/input.module.css

@@ -160,6 +160,13 @@ infonomic-components;
     border-bottom: 1px solid var(--input-variant-underlined-hover-border);
   }
 
+  .underlined:focus,
+  .underlined:active,
+  :global(.infonomic-input-underlined):focus,
+  :global(.infonomic-input-underlined):active {
+    outline: none;
+  }
+
   .filled,
   :global(.infonomic-input-filled) {
     background-color: var(--input-variant-filled);

package/src/components/inputs/text-area.module.css

@@ -1,11 +1,12 @@
 @layer infonomic-base,
-  infonomic-functional,
-  infonomic-utilities,
-  infonomic-theme,
-  infonomic-typography,
-  infonomic-components;
+infonomic-functional,
+infonomic-utilities,
+infonomic-theme,
+infonomic-typography,
+infonomic-components;
 
 @layer infonomic-components {
+
   .text-area,
   :global(.infonomic-text-area) {
     font-size: 1rem;
@@ -19,9 +20,14 @@
     padding-right: 0;
   }
 
-  .outlined {
+  .underlined:focus,
+  .underlined:active,
+  :global(.infonomic-text-area--underlined):focus,
+  :global(.infonomic-text-area--underlined):active {
+    outline: none;
   }
 
-  .filled {
-  }
-}
+  .outlined {}
+
+  .filled {}
+}

package/src/styles/local-fonts.css

@@ -5,6 +5,10 @@
   use its own method to load them.
  */
 
+.root {
+  isolation: isolate;
+}
+
 @font-face {
   font-family: "Inter";
   src: url("/fonts/Inter/Inter-VariableFont_opsz_wght.woff2") format("woff2");
@@ -69,4 +73,4 @@
   font-weight: 100 900;
   font-style: italic;
   font-display: swap;
-}
+}

package/src/widgets/drawer/drawer-container.tsx

@@ -22,7 +22,6 @@ export function DrawerContainer({
   return (
     <div
       ref={ref}
-      role="dialog"
       className={cx('infonomic-drawer-container', styles['drawer-container'], className)}
       {...rest}
     >