@infonomic/uikit 5.16.0 → 5.17.0

package/src/components/forms/checkbox.tsx

@@ -1,14 +1,15 @@
 'use client'
 
-import { CheckIcon } from '../../icons/check-icon'
+import type * as React from 'react'
+
 import cx from 'classnames'
 import { Checkbox as CheckboxPrimitive, Label as LabelPrimitive } from 'radix-ui'
-import type * as React from 'react'
 
-import type { Intent, Size, Variant } from './@types/checkbox.js'
+import { CheckIcon } from '../../icons/check-icon'
 import styles from './checkbox.module.css'
 import { ErrorText } from './error-text.js'
 import { HelpText } from './help-text.js'
+import type { Intent, Size, Variant } from './@types/checkbox.js'
 
 export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   id: string
@@ -19,7 +20,7 @@ export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   intent?: Intent
   reverse?: boolean
   checked?: boolean
-  className?: string,
+  className?: string
   checkBoxClasses?: string
   containerClasses?: string
   componentClasses?: string
@@ -84,7 +85,7 @@ export const Checkbox = function Checkbox({
           </CheckboxPrimitive.Indicator>
         </CheckboxPrimitive.Root>
 
-        { label != null && (
+        {label != null && (
           <LabelPrimitive.Label htmlFor={id} className={cx(styles.label, labelClasses)}>
             {label}
           </LabelPrimitive.Label>

package/src/components/forms/error-text.module.css

@@ -1,9 +1,14 @@
-@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 {
   .text,
   :global(.error-text) {
     font-size: 0.875rem;
-    color: var(--error)
+    color: var(--error);
   }
-}
+}

package/src/components/forms/error-text.tsx

@@ -1,6 +1,7 @@
-import cx from 'classnames'
 import type React from 'react'
 
+import cx from 'classnames'
+
 import styles from './error-text.module.css'
 
 interface ErrorTextProps {

package/src/components/forms/help-text.module.css

@@ -1,9 +1,14 @@
-@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 {
   .text,
   :global(.help-text) {
     font-size: 0.875rem;
-    color: var(--muted)
+    color: var(--muted);
   }
-}
+}

package/src/components/forms/help-text.tsx

@@ -1,6 +1,7 @@
-import cx from 'classnames'
 import type React from 'react'
 
+import cx from 'classnames'
+
 import styles from './help-text.module.css'
 
 interface HelpTextProps {

package/src/components/forms/index.tsx

@@ -1,8 +1,8 @@
+export * from './checkbox.js'
+export * from './help-text.js'
 export * from './input.js'
 export * from './input-adornment.js'
 export * from './label.js'
-export * from './help-text.js'
 export * from './select.js'
 export * from './text-area.js'
-export * from './checkbox.js'
 export * from './utils.js'

package/src/components/forms/input-adornment.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 {
   .adornment,
@@ -18,4 +23,4 @@
   :global(.input-adornment-end) {
     justify-content: flex-end;
   }
-}
+}

package/src/components/forms/input-adornment.tsx

@@ -1,6 +1,7 @@
-import cx from 'classnames'
 import type React from 'react'
 
+import cx from 'classnames'
+
 import styles from './input-adornment.module.css'
 
 type InputAdornmentIntrinsicProps = React.JSX.IntrinsicElements['div']

package/src/components/forms/input.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 {
-
   .input-wrapper,
   :global(.input-wrapper) {
     display: flex;
@@ -137,7 +141,7 @@
   .underlined.sm,
   :global(.input-underlined.input-sm) {
     padding: 0.25rem 0.1rem;
-    min-height: 26px
+    min-height: 26px;
   }
 
   .underlined.md,
@@ -162,7 +166,6 @@
     background-color: var(--input-variant-filled);
   }
 
-
   /* Error classes last, so that they override all 
     of the above */
   .error,
@@ -278,4 +281,4 @@
   }
 
   /* Dark mode handled by semantic tokens in theme layer */
-}
+}

package/src/components/forms/input.stories.tsx

@@ -5,7 +5,6 @@ import { capitalize } from '../../utils/capitalize.js'
 import { intent } from '../@types/shared.js'
 import { IconButton } from '../button/icon-button.js'
 import { size, variant } from './@types/input.js'
-
 import { Input, InputAdornment } from './index.js'
 
 export default {
@@ -16,113 +15,109 @@ export default {
 
 export const Default = (): React.JSX.Element => {
   return (
-    <>
-      <div style={{ margin: '2rem 0' }}>
-        <div
-          style={{
-            maxWidth: '600px',
-            margin: '0 auto',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '1rem',
-          }}
-        >
-          <Input
-            variant="outlined"
-            intent="primary"
-            id="name"
-            name="name"
-            label="Name"
-            placeHolder="Name"
-            helpText="Please enter your name."
-            disabled={false}
-            error={false}
-          />
-          <Input
-            variant="outlined"
-            intent="secondary"
-            required
-            id="foo"
-            name="foo"
-            label="Foo Required"
-            placeHolder="Foo"
-            helpText="Please enter your foo."
-            disabled={false}
-            error={false}
-          />
-          <Input
-            variant="outlined"
-            intent="primary"
-            label="Start and End Adornments"
-            startAdornment={
-              <InputAdornment>
-                <IconButton role="button" intent="noeffect" variant="text" ripple={false} size="xs">
-                  <SearchIcon width="20px" height="20px" />
-                </IconButton>
-              </InputAdornment>
-            }
-            endAdornment={
-              <InputAdornment>
-                <IconButton role="button" intent="noeffect" variant="text" size="xs">
-                  <CloseIcon width="16px" height="16px" />
-                </IconButton>
-              </InputAdornment>
-            }
-            id="search"
-            name="search"
-            placeHolder="Search"
-            disabled={false}
-            error={false}
-          />
-        </div>
+    <div style={{ margin: '2rem 0' }}>
+      <div
+        style={{
+          maxWidth: '600px',
+          margin: '0 auto',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '1rem',
+        }}
+      >
+        <Input
+          variant="outlined"
+          intent="primary"
+          id="name"
+          name="name"
+          label="Name"
+          placeHolder="Name"
+          helpText="Please enter your name."
+          disabled={false}
+          error={false}
+        />
+        <Input
+          variant="outlined"
+          intent="secondary"
+          required
+          id="foo"
+          name="foo"
+          label="Foo Required"
+          placeHolder="Foo"
+          helpText="Please enter your foo."
+          disabled={false}
+          error={false}
+        />
+        <Input
+          variant="outlined"
+          intent="primary"
+          label="Start and End Adornments"
+          startAdornment={
+            <InputAdornment>
+              <IconButton role="button" intent="noeffect" variant="text" ripple={false} size="xs">
+                <SearchIcon width="20px" height="20px" />
+              </IconButton>
+            </InputAdornment>
+          }
+          endAdornment={
+            <InputAdornment>
+              <IconButton role="button" intent="noeffect" variant="text" size="xs">
+                <CloseIcon width="16px" height="16px" />
+              </IconButton>
+            </InputAdornment>
+          }
+          id="search"
+          name="search"
+          placeHolder="Search"
+          disabled={false}
+          error={false}
+        />
       </div>
-    </>
+    </div>
   )
 }
 
 export const Variants = (): React.JSX.Element => {
   return (
-    <>
-      <div style={{ maxWidth: '1100px', margin: '0 auto' }}>
-        {variant.map((variant) => {
-          return (
-            <div
-              key={variant}
-              style={{ marginBottom: '2rem' }}
-              className="grid grid-cols-4 items-center gap-12"
-            >
-              {size.map((size) => {
-                return (
-                  <Input
-                    key={`${variant}=${size}`}
-                    variant={variant}
-                    inputSize={size}
-                    id={`${variant}-${size}`}
-                    name={`${variant}-${size}`}
-                    label={`${capitalize(variant)} ${size.toUpperCase()}`}
-                    placeHolder={`${capitalize(variant)} ${size.toUpperCase()}`}
-                    helpText={`Please enter your ${variant} ${size.toUpperCase()}.`}
-                    disabled={false}
-                    error={false}
-                  />
-                )
-              })}
-              <Input
-                disabled={true}
-                key={`${variant}=${size}`}
-                variant={variant}
-                id={`${variant}-${size}`}
-                name={`${variant}-${size}`}
-                label={`${capitalize(variant)} Disabled`}
-                placeHolder={`${capitalize(variant)} disabled`}
-                helpText={`Please enter your ${variant} disabled.`}
-                error={false}
-              />
-            </div>
-          )
-        })}
-      </div>
-    </>
+    <div style={{ maxWidth: '1100px', margin: '0 auto' }}>
+      {variant.map((variant) => {
+        return (
+          <div
+            key={variant}
+            style={{ marginBottom: '2rem' }}
+            className="grid grid-cols-4 items-center gap-12"
+          >
+            {size.map((size) => {
+              return (
+                <Input
+                  key={`${variant}=${size}`}
+                  variant={variant}
+                  inputSize={size}
+                  id={`${variant}-${size}`}
+                  name={`${variant}-${size}`}
+                  label={`${capitalize(variant)} ${size.toUpperCase()}`}
+                  placeHolder={`${capitalize(variant)} ${size.toUpperCase()}`}
+                  helpText={`Please enter your ${variant} ${size.toUpperCase()}.`}
+                  disabled={false}
+                  error={false}
+                />
+              )
+            })}
+            <Input
+              disabled={true}
+              key={`${variant}=${size}`}
+              variant={variant}
+              id={`${variant}-${size}`}
+              name={`${variant}-${size}`}
+              label={`${capitalize(variant)} Disabled`}
+              placeHolder={`${capitalize(variant)} disabled`}
+              helpText={`Please enter your ${variant} disabled.`}
+              error={false}
+            />
+          </div>
+        )
+      })}
+    </div>
   )
 }
 
@@ -155,20 +150,18 @@ export const Intents = (): React.JSX.Element => {
 // biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
 export const Error = (): React.JSX.Element => {
   return (
-    <>
-      <div style={{ maxWidth: '600px', margin: '0 auto' }}>
-        <Input
-          required
-          id="name"
-          name="name"
-          label="Name"
-          placeHolder="Name"
-          helpText="Please enter your name."
-          disabled={false}
-          error={true}
-          errorText="Please enter a valid name."
-        />
-      </div>
-    </>
+    <div style={{ maxWidth: '600px', margin: '0 auto' }}>
+      <Input
+        required
+        id="name"
+        name="name"
+        label="Name"
+        placeHolder="Name"
+        helpText="Please enter your name."
+        disabled={false}
+        error={true}
+        errorText="Please enter a valid name."
+      />
+    </div>
   )
 }

package/src/components/forms/input.tsx

@@ -1,15 +1,15 @@
 'use client'
 
-import cx from 'classnames'
 import type React from 'react'
 
-import type { Intent, Size, Variant } from './@types/input.js'
+import cx from 'classnames'
+
 import { ErrorText } from './error-text.js'
 import { HelpText } from './help-text.js'
 import styles from './input.module.css'
-
-import type { InputAdornmentProps } from './input-adornment.js'
 import { Label } from './label.js'
+import type { Intent, Size, Variant } from './@types/input.js'
+import type { InputAdornmentProps } from './input-adornment.js'
 
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   id: string
@@ -32,7 +32,7 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
   ref?: React.RefCallback<HTMLInputElement | null> | React.RefObject<HTMLInputElement | null>
 }
 
-export const Input = <C extends React.ElementType = 'input'>({
+export const Input = <_C extends React.ElementType = 'input'>({
   ref,
   id,
   name,

package/src/components/forms/label.module.css

@@ -1,15 +1,20 @@
-@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 {
   .label,
   :global(.label) {
     display: block;
     font-weight: 500;
-    color: var(--text)
+    color: var(--text);
   }
 
   .required,
   :global(.label-required) {
     color: var(--error);
   }
-}
+}

package/src/components/forms/label.tsx

@@ -1,6 +1,7 @@
-import cx from 'classnames'
 import type React from 'react'
 
+import cx from 'classnames'
+
 import styles from './label.module.css'
 
 interface LabelProps {

package/src/components/forms/radio-group.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 {
-
   .column {
     display: flex;
     flex-direction: column;
@@ -83,10 +87,9 @@
 
   .row .label {
     padding-left: 0;
-    padding-right: var(--spacing-16)
+    padding-right: var(--spacing-16);
   }
 
-
   /* Intents */
   .primary {
     --radio-border: var(--fill-primary-strong);
@@ -160,4 +163,4 @@
       transform: scale(0.8);
     }
   }
-}
+}

package/src/components/forms/radio-group.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react-vite'
 
-import type { RadioGroupValue } from './radio-group.js'
 import { RadioGroup as RadioGroupComponent, RadioGroupItem } from './radio-group.js'
+import type { RadioGroupValue } from './radio-group.js'
 
 const meta: Meta = {
   /* 👇 The title prop is optional.

package/src/components/forms/radio-group.tsx

@@ -1,9 +1,12 @@
 'use client'
+
+import type React from 'react'
+
 import cx from 'classnames'
 import { RadioGroup as RadioGroupPrimitive } from 'radix-ui'
-import type React from 'react'
-import type { Intent } from '../@types/shared'
+
 import styles from './radio-group.module.css'
+import type { Intent } from '../@types/shared'
 
 export interface RadioGroupValue {
   id: string

package/src/components/forms/select.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 {
   .content {
@@ -65,4 +70,4 @@
     align-items: center;
     justify-content: center;
   }
-}
+}

package/src/components/forms/select.stories.tsx

@@ -19,16 +19,14 @@ const values: SelectValue[] = [
 
 export const Default = (): React.JSX.Element => {
   return (
-    <>
-      <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
-        <Select placeholder="Select one..." helpText="Select an item.">
-          {values.map((value) => (
-            <SelectItem key={value.value} value={value.value}>
-              {value.label}
-            </SelectItem>
-          ))}
-        </Select>
-      </div>
-    </>
+    <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
+      <Select placeholder="Select one..." helpText="Select an item.">
+        {values.map((value) => (
+          <SelectItem key={value.value} value={value.value}>
+            {value.label}
+          </SelectItem>
+        ))}
+      </Select>
+    </div>
   )
 }

package/src/components/forms/select.tsx

@@ -1,16 +1,17 @@
 'use client'
 
+import type React from 'react'
+import type { ComponentPropsWithoutRef } from 'react'
+
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons'
 import cx from 'classnames'
 import { Select as SelectPrimitive } from 'radix-ui'
-import type React from 'react'
-import type { ComponentPropsWithoutRef } from 'react'
-import type { Intent } from '../@types/shared.js'
-import type { Size, Variant } from '../button/@types/button.js'
+
 import { Button } from '../button/button.js'
 import { HelpText } from './help-text.js'
-
 import styles from './select.module.css'
+import type { Intent } from '../@types/shared.js'
+import type { Size, Variant } from '../button/@types/button.js'
 
 export interface SelectValue {
   label: string

package/src/components/forms/text-area.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 {
-
   .text-area,
   :global(.text-area) {
     font-size: 1.1rem;
@@ -14,7 +18,9 @@
     padding-right: 0;
   }
 
-  .outlined {}
+  .outlined {
+  }
 
-  .filled {}
-}
+  .filled {
+  }
+}