@infonomic/uikit 5.16.0 → 5.17.0

package/src/widgets/drawer/drawer.stories.tsx

@@ -4,7 +4,6 @@ import React from 'react'
 import { Button } from '../../components/button/button.js'
 import { IconButton } from '../../components/button/icon-button.js'
 import { CloseIcon } from '../../icons/close-icon.js'
-
 import { Drawer } from './drawer.js'
 
 export default {
@@ -143,46 +142,44 @@ export const Nested = (): React.JSX.Element => {
             <h2>Drawer 1</h2>
           </Drawer.Header>
           <Drawer.Content>
-            <>
-              <p>Drawer 1 actions here...</p>
-              <Button
-                onClick={() => {
-                  setIsOpen2(true)
-                }}
-              >
-                Open Drawer 2
-              </Button>
-              <Drawer
-                id="second-drawer"
-                width="medium"
-                closeOnOverlayClick={true}
-                isOpen={isOpen2}
-                onDismiss={() => setIsOpen2(false)}
-              >
-                <Drawer.Container aria-hidden={!isOpen2}>
-                  <Drawer.TopActions>
-                    <button type="button" tabIndex={0} className="sr-only">
-                      no action
-                    </button>
-                    <IconButton
-                      arial-label="Close"
-                      size="xs"
-                      onClick={() => {
-                        setIsOpen2(false)
-                      }}
-                    >
-                      <CloseIcon width="14px" height="14px" svgClassName="white-icon" />
-                    </IconButton>
-                  </Drawer.TopActions>
-                  <Drawer.Header className="flex items-center justify-between mb-4">
-                    <h2>Drawer 2</h2>
-                  </Drawer.Header>
-                  <Drawer.Content>
-                    <p>Drawer content here...</p>
-                  </Drawer.Content>
-                </Drawer.Container>
-              </Drawer>
-            </>
+            <p>Drawer 1 actions here...</p>
+            <Button
+              onClick={() => {
+                setIsOpen2(true)
+              }}
+            >
+              Open Drawer 2
+            </Button>
+            <Drawer
+              id="second-drawer"
+              width="medium"
+              closeOnOverlayClick={true}
+              isOpen={isOpen2}
+              onDismiss={() => setIsOpen2(false)}
+            >
+              <Drawer.Container aria-hidden={!isOpen2}>
+                <Drawer.TopActions>
+                  <button type="button" tabIndex={0} className="sr-only">
+                    no action
+                  </button>
+                  <IconButton
+                    arial-label="Close"
+                    size="xs"
+                    onClick={() => {
+                      setIsOpen2(false)
+                    }}
+                  >
+                    <CloseIcon width="14px" height="14px" svgClassName="white-icon" />
+                  </IconButton>
+                </Drawer.TopActions>
+                <Drawer.Header className="flex items-center justify-between mb-4">
+                  <h2>Drawer 2</h2>
+                </Drawer.Header>
+                <Drawer.Content>
+                  <p>Drawer content here...</p>
+                </Drawer.Content>
+              </Drawer.Container>
+            </Drawer>
           </Drawer.Content>
         </Drawer.Container>
       </Drawer>

package/src/widgets/drawer/drawer.tsx

@@ -1,26 +1,23 @@
 'use client'
-import type React from 'react'
 
-import cx from 'classnames'
+import type { ReactNode } from 'react'
+import { useEffect } from 'react'
 
+import cx from 'classnames'
 import { AnimatePresence, type FeatureBundle, LazyMotion } from 'motion/react'
-import { useEffect } from 'react'
 import { createPortal } from 'react-dom'
+
 import { Overlay } from '../../components/overlay'
 import { useMediaQuery } from '../../hooks/use-media-query'
 import { getPortalRoot } from '../../utils/getPortalRoot'
-import { useDrawer } from './drawer-context'
-
+import styles from './drawer.module.css'
 import { DrawerContainer } from './drawer-container'
 import { DrawerContent } from './drawer-content'
+import { useDrawer } from './drawer-context'
 import { DrawerHeader } from './drawer-header'
 import { DrawerTopActions } from './drawer-top-actions'
 import { DrawerWrapper } from './drawer-wrapper'
 
-import type { ReactNode } from 'react'
-
-import styles from './drawer.module.css'
-
 type Styles = {
   [key: string]: string
 }

package/src/widgets/drawer/motionDomAnimation.ts

@@ -1,4 +1,5 @@
 'use client'
+
 import { domAnimation } from 'motion/react'
 
 export default domAnimation

package/src/widgets/drawer/motionDomMax.ts

@@ -1,4 +1,5 @@
 'use client'
+
 import { domMax } from 'motion/react'
 
 export default domMax

package/src/widgets/modal/modal-actions.tsx

@@ -1,4 +1,5 @@
 'use client'
+
 import type * as React from 'react'
 
 import cx from 'classnames'

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

@@ -1,4 +1,5 @@
 'use client'
+
 import type * as React from 'react'
 
 import cx from 'classnames'

package/src/widgets/modal/modal-content.tsx

@@ -1,4 +1,5 @@
 'use client'
+
 import type * as React from 'react'
 
 import cx from 'classnames'

package/src/widgets/modal/modal-header.tsx

@@ -1,4 +1,5 @@
 'use client'
+
 import type * as React from 'react'
 
 import cx from 'classnames'

package/src/widgets/modal/modal-wrapper.tsx

@@ -1,12 +1,12 @@
 'use client'
+
 /* eslint-disable @typescript-eslint/consistent-type-imports */
 import type React from 'react'
 import { useEffect } from 'react'
 
 import { useFocusTrap } from '@mantine/hooks'
-import { m } from 'motion/react'
-
 import type { HTMLMotionProps } from 'motion/react'
+import { m } from 'motion/react'
 
 import styles from './modal.module.css'
 

package/src/widgets/modal/modal.module.css

@@ -78,4 +78,4 @@
     padding-left: var(--spacing-16);
     padding-right: var(--spacing-16);
   }
-}
+}

package/src/widgets/modal/modal.stories.tsx

@@ -4,7 +4,6 @@ import React from 'react'
 import { Button } from '../../components/button/button.js'
 import { IconButton } from '../../components/button/icon-button.js'
 import { CloseIcon } from '../../icons/close-icon.js'
-
 import { Modal, useModal } from './modal.js'
 
 export default {

package/src/widgets/modal/modal.tsx

@@ -1,15 +1,15 @@
 'use client'
+
 /* eslint-disable @typescript-eslint/consistent-type-imports */
 import type React from 'react'
 import { createContext, useCallback, useState } from 'react'
-import { createPortal } from 'react-dom'
 
 import { AnimatePresence, type FeatureBundle, LazyMotion } from 'motion/react'
+import { createPortal } from 'react-dom'
 
 import { Overlay } from '../../components/overlay'
 import { useMediaQuery } from '../../hooks/use-media-query'
 import { getPortalRoot } from '../../utils/getPortalRoot'
-
 import { ModalActions } from './modal-actions'
 import { ModalContainer } from './modal-container'
 import { ModalContent } from './modal-content'

package/src/widgets/modal/motionDomAnimation.ts

@@ -1,4 +1,5 @@
 'use client'
+
 import { domAnimation } from 'motion/react'
 
 export default domAnimation

package/src/widgets/modal/motionDomMax.ts

@@ -1,4 +1,5 @@
 'use client'
+
 import { domMax } from 'motion/react'
 
 export default domMax

package/src/widgets/search/search.tsx

@@ -6,8 +6,8 @@ import { useEffect, useRef, useState } from 'react'
 import { IconButton } from '../../components/button/index.js'
 import { Input } from '../../components/forms/input.js'
 import { InputAdornment } from '../../components/forms/input-adornment.js'
-import type { ClassName, Intent, Size, Variant } from '../../components/forms/@types/input.js'
 import { CloseIcon, SearchIcon } from '../../icons'
+import type { ClassName, Intent, Size, Variant } from '../../components/forms/@types/input.js'
 
 export interface SearchProps extends React.InputHTMLAttributes<HTMLInputElement> {
   variant?: Variant

package/src/widgets/timeline/timeline.module.css

@@ -1,4 +1,9 @@
-@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base,
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
 
 @layer infonomic-components {
   .timeline {
@@ -84,4 +89,4 @@
       border-color: var(--canvas-600);
     }
   }
-}
+}