@infonomic/uikit 5.16.0 → 5.18.0

package/src/components/shimmer/shimmer.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;
 
 /* 'border-collapse w-full text-sm text-left text-gray-700 dark:text-gray-400 m-0', */
 @layer infonomic-components {
@@ -6,20 +11,14 @@
     position: relative;
     overflow: hidden;
     background-color: #f0f0f0;
-    background-image: linear-gradient(90deg,
-        transparent,
-        rgba(255, 255, 255, 0.6),
-        transparent);
+    background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
     background-size: 200% 100%;
     animation: shimmer 1.5s infinite;
   }
 
   .shimmer:is(:global(.dark) *) {
     background-color: #141414;
-    background-image: linear-gradient(90deg,
-        transparent,
-        rgba(255, 255, 255, 0.01),
-        transparent);
+    background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.01), transparent);
   }
 
   .shimmerContainer {
@@ -50,4 +49,4 @@
       background-position: 200% 0;
     }
   }
-}
+}

package/src/components/shimmer/shimmer.tsx

@@ -1,5 +1,7 @@
-import cx from 'classnames'
 import type React from 'react'
+
+import cx from 'classnames'
+
 import styles from './shimmer.module.css'
 
 interface ShimmerProps {
@@ -34,7 +36,6 @@ export function Shimmer({
         return styles.text
       case 'circular':
         return styles.circular
-      case 'rectangular':
       default:
         return styles.rectangular
     }

package/src/components/table/table.module.css

@@ -1,8 +1,12 @@
-@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;
 
 /* 'border-collapse w-full text-sm text-left text-gray-700 dark:text-gray-400 m-0', */
 @layer infonomic-components {
-
   /* 'table--container break-normal overflow-hidden relative shadow-md rounded-md my-[16px] dark:border dark:border-canvas-700', */
   .table-container {
     display: block;
@@ -86,7 +90,7 @@
     }
 
     .table-row:hover:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      background-color: oklch(from var(--canvas-800) calc(l * 1.1) c h)
+      background-color: oklch(from var(--canvas-800) calc(l * 1.1) c h);
     }
 
     .table-heading-cell:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
@@ -97,4 +101,4 @@
       background-color: var(--canvas-800);
     }
   }
-}
+}

package/src/components/table/table.tsx

@@ -1,6 +1,7 @@
-import cx from 'classnames'
 import type * as React from 'react'
 
+import cx from 'classnames'
+
 import styles from './table.module.css'
 
 export type TableProps = React.JSX.IntrinsicElements['table']

package/src/components/tabs/tabs.module.css

@@ -1,7 +1,11 @@
-@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 {
-
   .tabs-root {
     display: flex;
     padding: var(--spacing-8);
@@ -63,4 +67,4 @@
       outline: none;
     }
   }
-}
+}

package/src/components/tabs/tabs.tsx

@@ -1,9 +1,9 @@
 'use client'
 
-import cx from 'classnames'
+import type * as React from 'react'
 
+import cx from 'classnames'
 import { Tabs as TabsPrimitive } from 'radix-ui'
-import type * as React from 'react'
 
 import styles from './tabs.module.css'
 

package/src/components/tooltip/tooltip.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 {
   .tooltip {
@@ -27,14 +32,12 @@
     animation-name: slideLeftAndFade;
   }
 
-
   .tooltip[data-state="delayed-open"][data-side="left"] :global {
     animation-name: slideRightAndFade;
   }
 
   .tooltip[data-state="delayed-open"][data-side="bottom"] :global {
     animation-name: slideUpAndFade;
-
   }
 
   .tooltip-arrow {
@@ -42,4 +45,4 @@
   }
 
   /* Dark mode handled by semantic tokens in theme layer */
-}
+}

package/src/components/tooltip/tooltip.stories.tsx

@@ -1,49 +1,47 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import type React from 'react'
 
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { Meta } from '@storybook/react-vite'
 
 import { Button } from '../button/button.js'
 import { Tooltip as TooltipComponent } from './tooltip.js'
 
 export const Tooltip = (): React.JSX.Element => {
   return (
-    <>
-      <div
-        style={{
-          maxWidth: '100px',
-          marginLeft: '12rem',
-          marginTop: '3rem',
-          display: 'flex',
-          flexDirection: 'column',
-          gap: '46px',
-          alignItems: 'center',
-          justifyContent: 'center',
-          padding: '16px',
-        }}
-      >
-        <TooltipComponent text="I'm a tooltip" side="top" sideOffset={5}>
-          <Button fullWidth={true} size="sm">
-            Top
-          </Button>
-        </TooltipComponent>
-        <TooltipComponent text="I'm a tooltip" side="left" sideOffset={5}>
-          <Button fullWidth={true} size="sm">
-            Left
-          </Button>
-        </TooltipComponent>
-        <TooltipComponent text="I'm a tooltip" side="right" sideOffset={5}>
-          <Button fullWidth={true} size="sm">
-            Right
-          </Button>
-        </TooltipComponent>
-        <TooltipComponent text="I'm a tooltip" side="bottom" sideOffset={5}>
-          <Button fullWidth={true} size="sm">
-            Bottom
-          </Button>
-        </TooltipComponent>
-      </div>
-    </>
+    <div
+      style={{
+        maxWidth: '100px',
+        marginLeft: '12rem',
+        marginTop: '3rem',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '46px',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '16px',
+      }}
+    >
+      <TooltipComponent text="I'm a tooltip" side="top" sideOffset={5}>
+        <Button fullWidth={true} size="sm">
+          Top
+        </Button>
+      </TooltipComponent>
+      <TooltipComponent text="I'm a tooltip" side="left" sideOffset={5}>
+        <Button fullWidth={true} size="sm">
+          Left
+        </Button>
+      </TooltipComponent>
+      <TooltipComponent text="I'm a tooltip" side="right" sideOffset={5}>
+        <Button fullWidth={true} size="sm">
+          Right
+        </Button>
+      </TooltipComponent>
+      <TooltipComponent text="I'm a tooltip" side="bottom" sideOffset={5}>
+        <Button fullWidth={true} size="sm">
+          Bottom
+        </Button>
+      </TooltipComponent>
+    </div>
   )
 }
 

package/src/components/tooltip/tooltip.tsx

@@ -1,8 +1,9 @@
 'use client'
 
-import { Tooltip as TooltipPrimitive } from 'radix-ui'
 import type React from 'react'
 
+import { Tooltip as TooltipPrimitive } from 'radix-ui'
+
 type TooltipIntrinsicProps = React.JSX.IntrinsicElements['div']
 export interface TooltipProps extends TooltipIntrinsicProps {
   text: string

package/src/hooks/use-media-query.ts

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 
 export const useMediaQuery = (query: string): boolean | null => {
   const [matches, setMatches] = useState<boolean | null>(null)

package/src/icons/activity-icon.tsx

@@ -1,6 +1,7 @@
-import cx from 'classnames'
 import type React from 'react'
 
+import cx from 'classnames'
+
 import { IconElement } from './icon-element.js'
 import styles from './icons.module.css'
 import type { IconProps } from './types/icon.js'

package/src/icons/calendar-icon.tsx

@@ -3,10 +3,8 @@ import type React from 'react'
 import cx from 'classnames'
 
 import { IconElement } from './icon-element.js'
-
-import type { IconProps } from './types/icon.js'
-
 import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
 
 export const CalendarIcon = ({
   className,

package/src/icons/check-icon.tsx

@@ -3,14 +3,11 @@ import type React from 'react'
 import cx from 'classnames'
 
 import { IconElement } from './icon-element.js'
-
-import type { IconProps } from './types/icon.js'
-
 import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
 
 export const CheckIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
   const applied = cx(styles['fill-current'], svgClassName)
-  console.log('CheckIcon className:', className)
   return (
     <IconElement className={cx('check-icon', className)} {...rest}>
       <svg

package/src/icons/chevron-down-icon.tsx

@@ -3,10 +3,8 @@ import type React from 'react'
 import cx from 'classnames'
 
 import { IconElement } from './icon-element.js'
-
-import type { IconProps } from './types/icon.js'
-
 import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
 
 export const ChevronDownIcon = ({
   className,

package/src/icons/chevron-left-double-icon.tsx

@@ -19,9 +19,10 @@
  * along with this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import cx from 'classnames'
 import type React from 'react'
 
+import cx from 'classnames'
+
 import { IconElement } from './icon-element.jsx'
 import styles from './icons.module.css'
 import type { IconProps } from './types/icon.js'

package/src/icons/chevron-left-icon.tsx

@@ -19,9 +19,10 @@
  * along with this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import cx from 'classnames'
 import type React from 'react'
 
+import cx from 'classnames'
+
 import { IconElement } from './icon-element.jsx'
 import styles from './icons.module.css'
 import type { IconProps } from './types/icon.js'

package/src/icons/chevron-right-double-icon.tsx

@@ -19,9 +19,10 @@
  * along with this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import cx from 'classnames'
 import type React from 'react'
 
+import cx from 'classnames'
+
 import { IconElement } from './icon-element.jsx'
 import styles from './icons.module.css'
 import type { IconProps } from './types/icon.js'

package/src/icons/chevron-right-icon.tsx

@@ -19,9 +19,10 @@
  * along with this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import cx from 'classnames'
 import type React from 'react'
 
+import cx from 'classnames'
+
 import { IconElement } from './icon-element.jsx'
 import styles from './icons.module.css'
 import type { IconProps } from './types/icon.js'

package/src/icons/chevrons-up-down.tsx

@@ -1,6 +1,7 @@
-import cx from 'classnames'
 import type React from 'react'
 
+import cx from 'classnames'
+
 import { IconElement } from './icon-element.jsx'
 import styles from './icons.module.css'
 import type { IconProps } from './types/icon.js'

package/src/icons/close-icon.tsx

@@ -1,6 +1,7 @@
-import cx from 'classnames'
 import type React from 'react'
 
+import cx from 'classnames'
+
 import { IconElement } from './icon-element.js'
 import styles from './icons.module.css'
 import type { IconProps } from './types/icon.js'
@@ -10,20 +11,21 @@ export const CloseIcon = ({ className, svgClassName, ...rest }: IconProps): Reac
 
   return (
     <IconElement className={cx('close-icon', className)} {...rest}>
-      <svg 
+      <svg
         className={applied}
-        xmlns="http://www.w3.org/2000/svg" 
+        xmlns="http://www.w3.org/2000/svg"
         focusable="false"
         aria-hidden="true"
-        viewBox="0 0 24 24" fill="none" 
-        strokeWidth="2" 
-        strokeLinecap="round" 
+        viewBox="0 0 24 24"
+        fill="none"
+        strokeWidth="2"
+        strokeLinecap="round"
         strokeLinejoin="round"
-        >
-          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-          <path d="M18 6l-12 12" />
-          <path d="M6 6l12 12" />
-        </svg>
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+        <path d="M18 6l-12 12" />
+        <path d="M6 6l12 12" />
+      </svg>
     </IconElement>
   )
 }

package/src/icons/copy-icon.tsx

@@ -3,10 +3,8 @@ import type React from 'react'
 import cx from 'classnames'
 
 import { IconElement } from './icon-element.js'
-
-import type { IconProps } from './types/icon.js'
-
 import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
 
 export const CopyIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
   const applied = cx(styles['fill-current'], svgClassName)

package/src/icons/danger-icon.tsx

@@ -1,6 +1,7 @@
-import cx from 'classnames'
 import type React from 'react'
 
+import cx from 'classnames'
+
 import { IconElement } from './icon-element.js'
 import styles from './icons.module.css'
 import type { IconProps } from './types/icon.js'

package/src/icons/dashboard-icon.tsx

@@ -3,10 +3,8 @@ import type React from 'react'
 import cx from 'classnames'
 
 import { IconElement } from './icon-element.jsx'
-
-import type { IconProps } from './types/icon.js'
-
 import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
 
 export const DashboardIcon = ({
   className,

package/src/icons/delete-icon.tsx

@@ -3,10 +3,8 @@ import type React from 'react'
 import cx from 'classnames'
 
 import { IconElement } from './icon-element.js'
-
-import type { IconProps } from './types/icon.js'
-
 import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
 
 export const DeleteIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
   const applied = cx(styles['fill-none'], styles['stroke-danger'], svgClassName)

package/src/icons/document-icon.tsx

@@ -3,10 +3,8 @@ import type React from 'react'
 import cx from 'classnames'
 
 import { IconElement } from './icon-element.js'
-
-import type { IconProps } from './types/icon.js'
-
 import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
 
 export const DocumentIcon = ({
   className,

package/src/icons/download-icon.tsx

@@ -3,10 +3,8 @@ import type React from 'react'
 import cx from 'classnames'
 
 import { IconElement } from './icon-element.js'
-
-import type { IconProps } from './types/icon.js'
-
 import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
 
 export const DownloadIcon = ({
   className,

package/src/icons/edit-icon.tsx

@@ -3,10 +3,8 @@ import type React from 'react'
 import cx from 'classnames'
 
 import { IconElement } from './icon-element.js'
-
-import type { IconProps } from './types/icon.js'
-
 import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
 
 export const EditIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
   const applied = cx(styles['fill-none'], styles['stroke-current'], svgClassName)

package/src/icons/ellipsis-icon.tsx

@@ -3,10 +3,8 @@ import type React from 'react'
 import cx from 'classnames'
 
 import { IconElement } from './icon-element.js'
-
-import type { IconProps } from './types/icon.js'
-
 import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
 
 export const EllipsisIcon = ({
   className,

package/src/icons/email-icon.tsx

@@ -3,10 +3,8 @@ import type React from 'react'
 import cx from 'classnames'
 
 import { IconElement } from './icon-element.js'
-
-import type { IconProps } from './types/icon.js'
-
 import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
 
 export const EmailIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
   const applied = cx(styles['fill-none'], styles['stroke-current'], svgClassName)

package/src/icons/external-link-icon.tsx

@@ -3,10 +3,8 @@ import type React from 'react'
 import cx from 'classnames'
 
 import { IconElement } from './icon-element.js'
-
-import type { IconProps } from './types/icon.js'
-
 import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
 
 export const ExternalLinkIcon = ({
   className,

package/src/icons/github-icon.tsx

@@ -1,6 +1,7 @@
-import cx from 'classnames'
 import type React from 'react'
 
+import cx from 'classnames'
+
 import { IconElement } from './icon-element.js'
 import styles from './icons.module.css'
 import type { IconProps } from './types/icon.js'

package/src/icons/globe-icon.tsx

@@ -3,10 +3,8 @@ import type React from 'react'
 import cx from 'classnames'
 
 import { IconElement } from './icon-element.js'
-
-import type { IconProps } from './types/icon.js'
-
 import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
 
 export const GlobeIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
   const applied = cx(styles['fill-current'], styles['stroke-none'], svgClassName)

package/src/icons/google-icon.tsx

@@ -3,7 +3,6 @@ import type React from 'react'
 import cx from 'classnames'
 
 import { IconElement } from './icon-element.js'
-
 import type { IconProps } from './types/icon.js'
 
 export const GoogleIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {

package/src/icons/gripper-vertical-icon.tsx

@@ -3,10 +3,8 @@ import type React from 'react'
 import cx from 'classnames'
 
 import { IconElement } from './icon-element.js'
-
-import type { IconProps } from './types/icon.js'
-
 import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
 
 export const GripperVerticalIcon = ({
   className,

package/src/icons/history-icon.tsx

@@ -1,6 +1,7 @@
-import cx from 'classnames'
 import type React from 'react'
 
+import cx from 'classnames'
+
 import { IconElement } from './icon-element.jsx'
 import styles from './icons.module.css'
 import type { IconProps } from './types/icon.js'

package/src/icons/home-icon.tsx

@@ -3,10 +3,8 @@ import type React from 'react'
 import cx from 'classnames'
 
 import { IconElement } from './icon-element.js'
-
-import type { IconProps } from './types/icon.js'
-
 import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
 
 export const HomeIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
   const applied = cx(styles['fill-none'], styles['stroke-current'], svgClassName)

package/src/icons/icon-element.tsx

@@ -1,10 +1,10 @@
-import type { ReactNode } from 'react'
 import type React from 'react'
-
-import styles from './icons.module.css'
+import type { ReactNode } from 'react'
 
 import cx from 'classnames'
 
+import styles from './icons.module.css'
+
 export interface IconElementProps extends React.ComponentProps<'div'> {
   width?: string
   height?: string

package/src/icons/icon-sprite.tsx

@@ -1,8 +1,7 @@
 import type React from 'react'
-import ReactDOM from 'react-dom'
 
 // keep a list of the icon ids we put in the symbol
-const icons = ['icon-1', 'icon-2']
+const _icons = ['icon-1', 'icon-2']
 
 export interface IconSpriteProps {
   id: string
@@ -12,6 +11,7 @@ export interface IconSpriteProps {
 export function IconSprite({ id, ...props }: IconSpriteProps): React.JSX.Element {
   return (
     <svg {...props}>
+      <title>Sprites</title>
       <use href={`/sprite.svg#${id}`} />
     </svg>
   )