@infonomic/uikit 5.16.0 → 5.18.0

package/src/components/button/button.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 {
-
   .button,
   :global(.button) {
     border: none;
@@ -16,7 +20,9 @@
     justify-content: center;
     outline: 2px solid transparent;
     outline-offset: 2px;
-    transition: background-color var(--transition-normal), box-shadow var(--transition-normal);
+    transition:
+      background-color var(--transition-normal),
+      box-shadow var(--transition-normal);
     border-radius: var(--border-radius-sm);
   }
 
@@ -110,8 +116,14 @@
   .filled[disabled],
   :global(.button-filled):disabled,
   :global(.button-filled)[disabled] {
-    background-color: var(--button-variant-filled-disabled, oklch(from var(--button-variant-filled) calc(l * 1.1) calc(c * 0.85) h));
-    color: var(--button-variant-filled-foreground-disabled, oklch(from var(--button-variant-filled-foreground) calc(l * 0.9) calc(c * 0.85) h));
+    background-color: var(
+      --button-variant-filled-disabled,
+      oklch(from var(--button-variant-filled) calc(l * 1.1) calc(c * 0.85) h)
+    );
+    color: var(
+      --button-variant-filled-foreground-disabled,
+      oklch(from var(--button-variant-filled-foreground) calc(l * 0.9) calc(c * 0.85) h)
+    );
   }
 
   /* -------------------------------------------------------- */
@@ -139,8 +151,14 @@
   .filled-weak[disabled],
   :global(.button-filled-weak):disabled,
   :global(.button-filled-weak)[disabled] {
-    background-color: var(--button-variant-filled-weak-disabled, oklch(from var(--button-variant-filled-weak) calc(l * 1.1) calc(c * 0.85) h));
-    color: var(--button-variant-filled-weak-foreground-disabled, oklch(from var(--button-variant-filled-weak-foreground) calc(l * 0.9) calc(c * 0.85) h));
+    background-color: var(
+      --button-variant-filled-weak-disabled,
+      oklch(from var(--button-variant-filled-weak) calc(l * 1.1) calc(c * 0.85) h)
+    );
+    color: var(
+      --button-variant-filled-weak-foreground-disabled,
+      oklch(from var(--button-variant-filled-weak-foreground) calc(l * 0.9) calc(c * 0.85) h)
+    );
   }
 
   .outlined,
@@ -154,8 +172,14 @@
   .outlined[disabled],
   :global(.button-outlined):disabled,
   :global(.button-outlined)[disabled] {
-    border-color: var(--button-variant-outlined-border-disabled, oklch(from var(--button-variant-outlined-border) calc(l * 1.5) calc(c * 0.8) h));
-    color: var(--button-variant-outlined-foreground-disabled, oklch(from var(--button-variant-outlined-foreground) calc(l * 1.1) calc(c * 0.7) h));
+    border-color: var(
+      --button-variant-outlined-border-disabled,
+      oklch(from var(--button-variant-outlined-border) calc(l * 1.5) calc(c * 0.8) h)
+    );
+    color: var(
+      --button-variant-outlined-foreground-disabled,
+      oklch(from var(--button-variant-outlined-foreground) calc(l * 1.1) calc(c * 0.7) h)
+    );
   }
 
   .outlined:hover,
@@ -173,9 +197,11 @@
   .gradient,
   :global(.button-gradient) {
     color: var(--button-variant-gradient-foreground);
-    background: linear-gradient(45deg,
-        var(--button-variant-gradient-start),
-        var(--button-variant-gradient-end));
+    background: linear-gradient(
+      45deg,
+      var(--button-variant-gradient-start),
+      var(--button-variant-gradient-end)
+    );
   }
 
   .gradient:disabled,
@@ -183,16 +209,24 @@
   :global(.button-gradient):disabled,
   :global(.button-gradient)[disabled] {
     background: unset;
-    background-color: var(--button-variant-gradient-disabled, oklch(from var(--button-variant-gradient-end) calc(l * 1.2) calc(c * 0.85) h));
-    color: var(--button-variant-gradient-foreground-disabled, oklch(from var(--button-variant-gradient-foreground) calc(l * 0.9) calc(c * 0.85) h));
+    background-color: var(
+      --button-variant-gradient-disabled,
+      oklch(from var(--button-variant-gradient-end) calc(l * 1.2) calc(c * 0.85) h)
+    );
+    color: var(
+      --button-variant-gradient-foreground-disabled,
+      oklch(from var(--button-variant-gradient-foreground) calc(l * 0.9) calc(c * 0.85) h)
+    );
   }
 
   .gradient:hover,
   :global(.button-gradient):hover {
     color: var(--button-variant-gradient-foreground);
-    background: linear-gradient(45deg,
-        var(--button-variant-gradient-start),
-        var(--button-variant-gradient-end));
+    background: linear-gradient(
+      45deg,
+      var(--button-variant-gradient-start),
+      var(--button-variant-gradient-end)
+    );
   }
 
   .gradient:focus,
@@ -507,4 +541,4 @@
     width: 100%;
     display: flex;
   }
-}
+}

package/src/components/button/button.tsx

@@ -1,13 +1,14 @@
 'use client'
+
+import type React from 'react'
+
 import { Slot } from '@radix-ui/react-slot'
 import cx from 'classnames'
-// @ts-ignore
+// @ts-expect-error
 import Ripple from 'material-ripple-effects'
-import type React from 'react'
-
-import type { Intent, Size, Variant } from './@types/button.js'
 
 import styles from './button.module.css'
+import type { Intent, Size, Variant } from './@types/button.js'
 
 export type ButtonRefType<C extends React.ElementType> = React.ComponentPropsWithRef<C>['ref']
 

package/src/components/button/control-buttons.module.css

@@ -1,7 +1,6 @@
 @layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
 
 @layer infonomic-components {
-
   .stop-button,
   .play-button,
   .directional-button {
@@ -129,4 +128,4 @@
   /* No dark theme overrides needed! 
    * Tokens automatically switch in .dark and respect .not-dark 
   */
-}
+}

package/src/components/button/control-buttons.stories.tsx

@@ -6,7 +6,7 @@ type Story = StoryObj<typeof DirectionalButton>
 
 const ControlsDemo = (): React.JSX.Element => {
   return (
-     <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
+    <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
       <div className="ml-12 mb-6">
         <h2 style={{ fontSize: '1.2rem', margin: '1rem 0' }}>Small</h2>
         <div className="flex items-center gap-4 mb-6">

package/src/components/button/control-buttons.tsx

@@ -1,8 +1,11 @@
 'use client'
-import cx from 'classnames'
+
 import type React from 'react'
-import type { Size } from './@types/button.js'
+
+import cx from 'classnames'
+
 import styles from './control-buttons.module.css'
+import type { Size } from './@types/button.js'
 
 type ButtonType = React.JSX.IntrinsicElements['button']
 

package/src/components/button/copy-button.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 {
   .copy-button-container,
@@ -53,4 +58,4 @@
     min-height: 54px;
     padding: 0.65rem;
   }
-}
+}

package/src/components/button/copy-button.tsx

@@ -1,14 +1,14 @@
 'use client'
 
-import cx from 'classnames'
 import type React from 'react'
 import { useEffect, useState } from 'react'
 
+import cx from 'classnames'
+
 import { Tooltip } from '../tooltip/tooltip.js'
-import type { ButtonProps } from './button.js'
 import { Button } from './button.js'
-
 import styles from './copy-button.module.css'
+import type { ButtonProps } from './button.js'
 
 interface CopyButtonProps extends Omit<ButtonProps, 'children'> {
   text: string

package/src/components/button/icon-button.stories.tsx

@@ -1,9 +1,9 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import type React from 'react'
 
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { UserIcon } from '../../icons/user-icon.js'
+import type { Meta } from '@storybook/react-vite'
 
+import { UserIcon } from '../../icons/user-icon.js'
 import { size } from '../@types/shared.js'
 import { variant } from './@types/button.js'
 import { IconButton } from './icon-button.js'
@@ -27,109 +27,105 @@ const getUserIconSize = (size: string) => {
 
 export const IconButtonsRound = (): React.JSX.Element => {
   return (
-    <>
-      <div style={{ maxWidth: '800px', margin: '2rem auto' }}>
-        {variant.map((variant: any) => {
-          return (
+    <div style={{ maxWidth: '800px', margin: '2rem auto' }}>
+      {variant.map((variant: any) => {
+        return (
+          <div
+            key={variant}
+            style={{
+              display: 'grid',
+              gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
+              gap: '32px',
+              marginBottom: '32px',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            {size.map((size: any) => {
+              const iconSize = getUserIconSize(size)
+              return (
+                <div
+                  key={`${variant}=${size}`}
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}
+                >
+                  <IconButton size={size} variant={variant}>
+                    <UserIcon width={iconSize.width} height={iconSize.height} />
+                  </IconButton>
+                </div>
+              )
+            })}
             <div
-              key={variant}
+              key={`${variant}=${size}`}
               style={{
-                display: 'grid',
-                gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
-                gap: '32px',
-                marginBottom: '32px',
+                display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
               }}
             >
-              {size.map((size: any) => {
-                const iconSize = getUserIconSize(size)
-                return (
-                  <div
-                    key={`${variant}=${size}`}
-                    style={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                    }}
-                  >
-                    <IconButton size={size} variant={variant}>
-                      <UserIcon width={iconSize.width} height={iconSize.height} />
-                    </IconButton>
-                  </div>
-                )
-              })}
-              <div
-                key={`${variant}=${size}`}
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}
-              >
-                <IconButton disabled variant={variant}>
-                  <UserIcon width="22px" height="22px" />
-                </IconButton>
-              </div>
+              <IconButton disabled variant={variant}>
+                <UserIcon width="22px" height="22px" />
+              </IconButton>
             </div>
-          )
-        })}
-      </div>
-    </>
+          </div>
+        )
+      })}
+    </div>
   )
 }
 
 export const IconButtonsSquare = (): React.JSX.Element => {
   return (
-    <>
-      <div style={{ maxWidth: '800px', margin: '2rem auto' }}>
-        {variant.map((variant: any) => {
-          return (
+    <div style={{ maxWidth: '800px', margin: '2rem auto' }}>
+      {variant.map((variant: any) => {
+        return (
+          <div
+            key={variant}
+            style={{
+              display: 'grid',
+              gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
+              gap: '32px',
+              marginBottom: '32px',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            {size.map((size: any) => {
+              const iconSize = getUserIconSize(size)
+              return (
+                <div
+                  key={`${variant}=${size}`}
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}
+                >
+                  <IconButton size={size} square={true} variant={variant}>
+                    <UserIcon width={iconSize.width} height={iconSize.height} />
+                  </IconButton>
+                </div>
+              )
+            })}
             <div
-              key={variant}
+              key={`${variant}=${size}`}
               style={{
-                display: 'grid',
-                gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
-                gap: '32px',
-                marginBottom: '32px',
+                display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
               }}
             >
-              {size.map((size: any) => {
-                const iconSize = getUserIconSize(size)
-                return (
-                  <div
-                    key={`${variant}=${size}`}
-                    style={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                    }}
-                  >
-                    <IconButton size={size} square={true} variant={variant}>
-                      <UserIcon width={iconSize.width} height={iconSize.height} />
-                    </IconButton>
-                  </div>
-                )
-              })}
-              <div
-                key={`${variant}=${size}`}
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}
-              >
-                <IconButton disabled square={true} variant={variant}>
-                  <UserIcon width="22px" height="22px" />
-                </IconButton>
-              </div>
+              <IconButton disabled square={true} variant={variant}>
+                <UserIcon width="22px" height="22px" />
+              </IconButton>
             </div>
-          )
-        })}
-      </div>
-    </>
+          </div>
+        )
+      })}
+    </div>
   )
 }
 

package/src/components/button/icon-button.tsx

@@ -1,11 +1,12 @@
 'use client'
 
-import cx from 'classnames'
 import type React from 'react'
-import { Button } from './button'
-import type { ButtonProps } from './button.js'
 
+import cx from 'classnames'
+
+import { Button } from './button'
 import styles from './button.module.css'
+import type { ButtonProps } from './button.js'
 
 type IconButtonProps<C extends React.ElementType = 'button'> = ButtonProps<C> & {
   square?: boolean

package/src/components/button/index.ts

@@ -1,5 +1,5 @@
 export * from './button'
-export * from './icon-button'
-export * from './copy-button'
-export * from './control-buttons'
 export * from './button-group'
+export * from './control-buttons'
+export * from './copy-button'
+export * from './icon-button'

package/src/components/card/card.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 {
   .card,
@@ -14,7 +19,7 @@
     border-color: var(--border-color);
     border-style: var(--border-style-solid);
     border-radius: var(--border-radius-md);
-    box-shadow: var(--shadow-sm)
+    box-shadow: var(--shadow-sm);
   }
 
   .card:is(:global(.dark) *),
@@ -74,4 +79,4 @@
     padding: 1rem;
     padding-top: 0;
   }
-}
+}

package/src/components/card/card.stories.tsx

@@ -1,7 +1,6 @@
 import type { Meta } from '@storybook/react-vite'
 
 import { Button } from '../button/button.js'
-
 import { Card as CardComponent } from './card.js'
 
 const meta: Meta = {

package/src/components/card/card.tsx

@@ -1,6 +1,7 @@
+import type React from 'react'
+
 import { Slot } from '@radix-ui/react-slot'
 import cx from 'classnames'
-import type React from 'react'
 
 import styles from './card.module.css'
 

package/src/components/chips/chip.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 {
-
   .chip,
   :global(.chip) {
     --chip-font-size: 0.9rem;
@@ -24,7 +28,9 @@
     min-height: var(--chip-height);
     padding: var(--chip-padding-y) var(--chip-padding-x);
     font-size: var(--chip-font-size);
-    transition: background-color var(--transition-normal), box-shadow var(--transition-normal);
+    transition:
+      background-color var(--transition-normal),
+      box-shadow var(--transition-normal);
   }
 
   .chip:disabled,
@@ -143,8 +149,14 @@
   .filled[disabled],
   :global(.chip-filled):disabled,
   :global(.chip-filled)[disabled] {
-    background-color: var(--chip-variant-filled-disabled, oklch(from var(--chip-variant-filled) calc(l * 1.1) calc(c * 0.85) h));
-    color: var(--chip-variant-filled-foreground-disabled, oklch(from var(--chip-variant-filled-foreground) calc(l * 0.9) calc(c * 0.85) h));
+    background-color: var(
+      --chip-variant-filled-disabled,
+      oklch(from var(--chip-variant-filled) calc(l * 1.1) calc(c * 0.85) h)
+    );
+    color: var(
+      --chip-variant-filled-foreground-disabled,
+      oklch(from var(--chip-variant-filled-foreground) calc(l * 0.9) calc(c * 0.85) h)
+    );
   }
 
   /* -------------------------------------------------------- */
@@ -172,8 +184,14 @@
   .filled-weak[disabled],
   :global(.chip-filled-weak):disabled,
   :global(.chip-filled-weak)[disabled] {
-    background-color: var(--chip-variant-filled-weak-disabled, oklch(from var(--chip-variant-filled-weak) calc(l * 1.1) calc(c * 0.85) h));
-    color: var(--chip-variant-filled-weak-foreground-disabled, oklch(from var(--chip-variant-filled-weak-foreground) calc(l * 0.9) calc(c * 0.85) h));
+    background-color: var(
+      --chip-variant-filled-weak-disabled,
+      oklch(from var(--chip-variant-filled-weak) calc(l * 1.1) calc(c * 0.85) h)
+    );
+    color: var(
+      --chip-variant-filled-weak-foreground-disabled,
+      oklch(from var(--chip-variant-filled-weak-foreground) calc(l * 0.9) calc(c * 0.85) h)
+    );
   }
 
   /* -------------------------------------------------------- */
@@ -190,8 +208,14 @@
   .outlined[disabled],
   :global(.chip-outlined):disabled,
   :global(.chip-outlined)[disabled] {
-    border-color: var(--chip-variant-outlined-border-disabled, oklch(from var(--chip-variant-outlined-border) calc(l * 1.5) calc(c * 0.8) h));
-    color: var(--chip-variant-outlined-foreground-disabled, oklch(from var(--chip-variant-outlined-foreground) calc(l * 1.1) calc(c * 0.7) h));
+    border-color: var(
+      --chip-variant-outlined-border-disabled,
+      oklch(from var(--chip-variant-outlined-border) calc(l * 1.5) calc(c * 0.8) h)
+    );
+    color: var(
+      --chip-variant-outlined-foreground-disabled,
+      oklch(from var(--chip-variant-outlined-foreground) calc(l * 1.1) calc(c * 0.7) h)
+    );
   }
 
   .outlined:hover,
@@ -277,7 +301,6 @@
     --chip-variant-filled-weak-disabled: var(--fill-secondary-weak-disabled);
     --chip-variant-filled-weak-foreground-disabled: var(--text-on-secondary-disabled);
 
-
     /* Outlined */
     --chip-variant-outlined: transparent;
     --chip-variant-outlined-foreground: var(--text-secondary-strong);
@@ -332,7 +355,6 @@
     --chip-variant-filled-weak-disabled: var(--fill-success-weak-disabled);
     --chip-variant-filled-weak-foreground-disabled: var(--text-on-success-disabled);
 
-
     /* Outlined */
     --chip-variant-outlined: transparent;
     --chip-variant-outlined-foreground: var(--text-success-strong);
@@ -422,4 +444,4 @@
     --chip-variant-outlined-border-disabled: var(--stroke-danger-disabled);
     --chip-variant-outlined-foreground-disabled: var(--text-danger-disabled);
   }
-}
+}

package/src/components/chips/chip.stories.tsx

@@ -1,21 +1,24 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
 import { useState } from 'react'
 
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { CalendarIcon } from '../../icons/calendar-icon.js'
 import { capitalize } from '../../utils/capitalize.js'
 import { intent, size } from '../@types/shared.js'
-import { CalendarIcon } from '../../icons/calendar-icon.js'
-import { Chip } from './chip.js'
 import { chipVariant } from './@types/chip.js'
+import { Chip } from './chip.js'
 
 type Story = StoryObj<typeof Chip>
 
 const Row = ({ children }: { children: React.ReactNode }) => (
-  <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', alignItems: 'center' }}>{children}</div>
+  <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', alignItems: 'center' }}>
+    {children}
+  </div>
 )
 
 export const Intents: Story = {
   render: () => (
-     <div style={{ maxWidth: '800px', margin: '2rem auto' }}>
+    <div style={{ maxWidth: '800px', margin: '2rem auto' }}>
       <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
         {intent.map((i) => (
           <Row key={i}>
@@ -32,10 +35,15 @@ export const Intents: Story = {
 
 export const Sizes: Story = {
   render: () => (
-     <div style={{ maxWidth: '800px', margin: '2rem auto' }}>
+    <div style={{ maxWidth: '800px', margin: '2rem auto' }}>
       <Row>
         {size.map((s) => (
-          <Chip variant={"selectable-removable"} selected={true} key={s} size={s}>{`Size ${s}`}</Chip>
+          <Chip
+            variant={'selectable-removable'}
+            selected={true}
+            key={s}
+            size={s}
+          >{`Size ${s}`}</Chip>
         ))}
       </Row>
     </div>
@@ -49,7 +57,11 @@ export const Variants: Story = {
         {chipVariant.map((variant) => (
           <Row key={variant}>
             <Chip variant={variant}>{capitalize(variant)} chip</Chip>
-            <Chip variant={variant} startIcon={<CalendarIcon height="16px" width="16px" />} selected={true}>{`${capitalize(variant)} with icon`}</Chip>
+            <Chip
+              variant={variant}
+              startIcon={<CalendarIcon height="16px" width="16px" />}
+              selected={true}
+            >{`${capitalize(variant)} with icon`}</Chip>
             {(variant === 'removable' || variant === 'selectable-removable') && (
               <Chip variant={variant} onRemove={() => {}}>
                 {`${capitalize(variant)} with remove`}
@@ -85,7 +97,7 @@ export const Selectable: Story = {
 
 export const Removable: Story = {
   render: () => (
-     <div style={{ maxWidth: '800px', margin: '2rem auto' }}>
+    <div style={{ maxWidth: '800px', margin: '2rem auto' }}>
       <Row>
         <Chip
           variant="removable"