@infonomic/uikit 5.16.0 → 5.17.0

package/src/components/chips/chip.tsx

@@ -1,19 +1,20 @@
 'use client'
 
+import type React from 'react'
+
 import { Slot } from '@radix-ui/react-slot'
 import cx from 'classnames'
-import type React from 'react'
 
 import { CheckIcon } from '../../icons/check-icon.js'
-import { IconButton } from '../button/icon-button.js'
 import { CloseIcon } from '../../icons/close-icon.js'
-import type { ChipIntent, ChipSize, ChipVariant } from './@types/chip.js'
+import { IconButton } from '../button/icon-button.js'
 import styles from './chip.module.css'
+import type { ChipIntent, ChipSize, ChipVariant } from './@types/chip.js'
 
 type AsButton = { asChild?: false } & React.ComponentPropsWithoutRef<'button'>
 
 interface AsSlot {
-	asChild?: true
+  asChild?: true
 }
 
 export type ChipRefType<C extends React.ElementType> = React.ComponentPropsWithRef<C>['ref']
@@ -22,164 +23,171 @@ type ToggleEvent = React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLEleme
 type RemoveEvent = React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
 
 export type ChipProps<C extends React.ElementType = 'button'> = {
-	variant?: ChipVariant
-	intent?: ChipIntent
-	size?: ChipSize
-	selected?: boolean
-	disabled?: boolean
-	startIcon?: React.ReactNode
-	endIcon?: React.ReactNode
-	selectedIcon?: React.ReactNode
-	removeLabel?: string
-	onToggle?: (selected: boolean, event: ToggleEvent) => void
-	onRemove?: (event: RemoveEvent) => void
-	className?: string
-	ref?: ChipRefType<C>
+  variant?: ChipVariant
+  intent?: ChipIntent
+  size?: ChipSize
+  selected?: boolean
+  disabled?: boolean
+  startIcon?: React.ReactNode
+  endIcon?: React.ReactNode
+  selectedIcon?: React.ReactNode
+  removeLabel?: string
+  onToggle?: (selected: boolean, event: ToggleEvent) => void
+  onRemove?: (event: RemoveEvent) => void
+  className?: string
+  ref?: ChipRefType<C>
 } & (AsButton | AsSlot) &
-	Omit<React.HTMLAttributes<HTMLElement>, 'onToggle'>
+  Omit<React.HTMLAttributes<HTMLElement>, 'onToggle'>
 
 export const Chip = <C extends React.ElementType = 'button'>({
-	variant = 'assist',
-	intent = 'primary',
-	size = 'md',
-	selected = false,
-	disabled = false,
-	startIcon,
-	endIcon,
-	selectedIcon,
-	removeLabel = 'Remove chip',
-	onToggle,
-	onRemove,
-	className,
-	children,
-	asChild,
-	ref,
-	...rest
+  variant = 'assist',
+  intent = 'primary',
+  size = 'md',
+  selected = false,
+  disabled = false,
+  startIcon,
+  endIcon,
+  selectedIcon,
+  removeLabel = 'Remove chip',
+  onToggle,
+  onRemove,
+  className,
+  children,
+  asChild,
+  ref,
+  ...rest
 }: ChipProps<C>) => {
-	const { onClick, onKeyDown, role, tabIndex, ...restProps } = rest
-	const Comp: React.ElementType = asChild === true ? Slot : 'button'
-	const isSelectable = variant === 'selectable' || variant === 'selectable-removable'
-	const isRemovable = variant === 'removable' || variant === 'selectable-removable'
-	const isSelected = Boolean(selected)
-
-	const handleClick = (event: React.MouseEvent<HTMLElement>) => {
-		if (disabled) {
-			event.preventDefault()
-			return
-		}
-
-		if (onClick) {
-			;(onClick as React.MouseEventHandler<HTMLElement>)(event)
-		}
-
-		if (isSelectable && onToggle) {
-			onToggle(!isSelected, event)
-		}
-	}
-
-	const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
-		if (disabled) {
-			return
-		}
-
-		if ((event.key === 'Enter' || event.key === ' ') && asChild === true) {
-			event.preventDefault()
-			if (onClick) {
-				;(onClick as React.MouseEventHandler<HTMLElement>)(event as unknown as React.MouseEvent<HTMLElement>)
-			}
-			if (isSelectable && onToggle) {
-				onToggle(!isSelected, event)
-			}
-		}
-
-		if ((event.key === 'Backspace' || event.key === 'Delete') && isRemovable && onRemove) {
-			event.preventDefault()
-			onRemove(event)
-		}
-
-		if (onKeyDown) {
-			onKeyDown(event)
-		}
-	}
-
-	const handleRemoveClick = (event: React.MouseEvent<HTMLElement>) => {
-		if (disabled) {
-			return
-		}
-		event.stopPropagation()
-		if (onRemove) {
-			onRemove(event)
-		}
-	}
-
-	const handleRemoveKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
-		if (disabled) {
-			return
-		}
-
-		if (event.key === 'Enter' || event.key === ' ' || event.key === 'Backspace' || event.key === 'Delete') {
-			event.preventDefault()
-			event.stopPropagation()
-			if (onRemove) {
-				onRemove(event)
-			}
-		}
-	}
-
-	const leadingIcon =
-		startIcon ?? (isSelectable && isSelected ? selectedIcon ?? <CheckIcon className={styles.icon} /> : null)
-
-	const trailingIcon = isRemovable ? (
-		<IconButton
-			role="button"
+  const { onClick, onKeyDown, role, tabIndex, ...restProps } = rest
+  const Comp: React.ElementType = asChild === true ? Slot : 'button'
+  const isSelectable = variant === 'selectable' || variant === 'selectable-removable'
+  const isRemovable = variant === 'removable' || variant === 'selectable-removable'
+  const isSelected = Boolean(selected)
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    if (disabled) {
+      event.preventDefault()
+      return
+    }
+
+    if (onClick) {
+      ;(onClick as React.MouseEventHandler<HTMLElement>)(event)
+    }
+
+    if (isSelectable && onToggle) {
+      onToggle(!isSelected, event)
+    }
+  }
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
+    if (disabled) {
+      return
+    }
+
+    if ((event.key === 'Enter' || event.key === ' ') && asChild === true) {
+      event.preventDefault()
+      if (onClick) {
+        ;(onClick as React.MouseEventHandler<HTMLElement>)(
+          event as unknown as React.MouseEvent<HTMLElement>
+        )
+      }
+      if (isSelectable && onToggle) {
+        onToggle(!isSelected, event)
+      }
+    }
+
+    if ((event.key === 'Backspace' || event.key === 'Delete') && isRemovable && onRemove) {
+      event.preventDefault()
+      onRemove(event)
+    }
+
+    if (onKeyDown) {
+      onKeyDown(event)
+    }
+  }
+
+  const handleRemoveClick = (event: React.MouseEvent<HTMLElement>) => {
+    if (disabled) {
+      return
+    }
+    event.stopPropagation()
+    if (onRemove) {
+      onRemove(event)
+    }
+  }
+
+  const handleRemoveKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
+    if (disabled) {
+      return
+    }
+
+    if (
+      event.key === 'Enter' ||
+      event.key === ' ' ||
+      event.key === 'Backspace' ||
+      event.key === 'Delete'
+    ) {
+      event.preventDefault()
+      event.stopPropagation()
+      if (onRemove) {
+        onRemove(event)
+      }
+    }
+  }
+
+  const leadingIcon =
+    startIcon ??
+    (isSelectable && isSelected ? (selectedIcon ?? <CheckIcon className={styles.icon} />) : null)
+
+  const trailingIcon = isRemovable ? (
+    <IconButton
+      role="button"
       variant={isSelected ? 'filled-weak' : 'outlined'}
       className={cx('remove', styles.remove, styles['end-icon'])}
-			tabIndex={disabled ? -1 : 0}
-			disabled={disabled}
-			aria-label={removeLabel}
-			onClick={handleRemoveClick}
-			onKeyDown={handleRemoveKeyDown}
-		>
-			<CloseIcon className={styles.icon} />
-		</IconButton>
-	) : (
-		endIcon
-	)
+      tabIndex={disabled ? -1 : 0}
+      disabled={disabled}
+      aria-label={removeLabel}
+      onClick={handleRemoveClick}
+      onKeyDown={handleRemoveKeyDown}
+    >
+      <CloseIcon className={styles.icon} />
+    </IconButton>
+  ) : (
+    endIcon
+  )
 
   const appliedVariant = isSelected ? 'filled' : 'outlined'
- 
-
-	return (
-		<Comp
-			ref={ref}
-			type={asChild === true ? undefined : 'button'}
-			role={role ?? (asChild === true ? 'button' : undefined)}
-			tabIndex={disabled ? -1 : tabIndex ?? 0}
-			aria-disabled={disabled || undefined}
-			aria-pressed={isSelectable ? isSelected : undefined}
-			aria-selected={isSelectable ? isSelected : undefined}
-			className={cx(
-				'chip',
-				variant,
-				intent,
-				size,
-				{ selected: isSelected, disabled, removable: isRemovable },
-				styles.chip,
-				styles[appliedVariant],
-				styles[intent],
-				styles[size],
-				className
-			)}
-			disabled={asChild === true ? undefined : disabled}
-			onClick={handleClick}
-			onKeyDown={handleKeyDown}
-			{...restProps}
-		>
-			{leadingIcon != null && <span className={cx(styles.iconWrapper)}>{leadingIcon}</span>}
-			<span className={styles.label}>{children}</span>
-			{trailingIcon != null && <span className={cx(styles.iconWrapper)}>{trailingIcon}</span>}
-		</Comp>
-	)
+
+  return (
+    <Comp
+      ref={ref}
+      type={asChild === true ? undefined : 'button'}
+      role={role ?? (asChild === true ? 'button' : undefined)}
+      tabIndex={disabled ? -1 : (tabIndex ?? 0)}
+      aria-disabled={disabled || undefined}
+      aria-pressed={isSelectable ? isSelected : undefined}
+      aria-selected={isSelectable ? isSelected : undefined}
+      className={cx(
+        'chip',
+        variant,
+        intent,
+        size,
+        { selected: isSelected, disabled, removable: isRemovable },
+        styles.chip,
+        styles[appliedVariant],
+        styles[intent],
+        styles[size],
+        className
+      )}
+      disabled={asChild === true ? undefined : disabled}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      {...restProps}
+    >
+      {leadingIcon != null && <span className={cx(styles.iconWrapper)}>{leadingIcon}</span>}
+      <span className={styles.label}>{children}</span>
+      {trailingIcon != null && <span className={cx(styles.iconWrapper)}>{trailingIcon}</span>}
+    </Comp>
+  )
 }
 
 Chip.displayName = 'Chip'

package/src/components/chips/index.ts

@@ -1,2 +1,2 @@
-export * from './chip.js'
 export * from './@types/chip.js'
+export * from './chip.js'

package/src/components/container/container.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 {
   .container,
@@ -33,4 +38,4 @@
       max-width: 87.5rem;
     }
   }
-}
+}

package/src/components/dropdown/dropdown.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 {
-
   .dropdown-content,
   .dropdown-subcontent {
     z-index: 20;
@@ -33,7 +37,6 @@
     }
   }
 
-
   .dropdown-item {
     display: flex;
     align-items: center;
@@ -116,5 +119,4 @@
       transform: translateX(0);
     }
   }
-
-}
+}

package/src/components/dropdown/dropdown.tsx

@@ -1,8 +1,9 @@
 'use client'
 
+import type React from 'react'
+
 import cx from 'classnames'
 import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui'
-import type React from 'react'
 
 import styles from './dropdown.module.css'
 

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

@@ -1,8 +1,13 @@
-@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 {
   .day-picker {
-    padding: var(--spacing-12)
+    padding: var(--spacing-12);
   }
 
   /* relative flex flex-col gap-4 sm:flex-row */
@@ -65,7 +70,7 @@
 
   .select-chevrons {
     stroke: var(--primary-400);
-    opacity: 0.7
+    opacity: 0.7;
   }
 
   .scroll-area {
@@ -89,14 +94,13 @@
     flex: 1;
   }
 
-
   /* 'text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30', */
   .outside {
     color: var(--muted);
     opacity: 0.5;
   }
 
-  .outside[aria-selected='true'] {
+  .outside[aria-selected="true"] {
     color: var(--muted);
     opacity: 0.3;
   }
@@ -163,19 +167,19 @@
   }
 
   /* '[&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary [&>button]:hover:text-primary-foreground', */
-  .day>button {
+  .day > button {
     color: var(--foreground);
   }
 
   /* '[&>button]:bg-accent [&>button]:text-accent-foreground', */
-  .today>button {
+  .today > button {
     /* background-color: var(--gray-50); */
     border: solid 1px var(--stroke-primary);
     color: var(--foreground);
   }
 
-  .day>button:hover,
-  .day-selected>button {
+  .day > button:hover,
+  .day-selected > button {
     background-color: var(--fill-primary-strong);
     color: white;
   }
@@ -192,7 +196,7 @@
     transition: none;
   }
 
-  .day-button[aria-selected='true'] {
+  .day-button[aria-selected="true"] {
     opacity: 1;
   }
 
@@ -202,12 +206,12 @@
     color: var(--foreground);
   }
 
-  .button-range>button {
+  .button-range > button {
     background-color: var(--fill-primary-strong);
     color: white;
   }
 
-  .button-range>button:hover {
+  .button-range > button:hover {
     background-color: var(--fill-primary-strong);
     color: var(--foreground);
   }
@@ -228,8 +232,8 @@
     color: var(--foreground);
   }
 
-  .range-middle>button,
-  .range-middle>button:hover {
+  .range-middle > button,
+  .range-middle > button:hover {
     background-color: transparent;
     color: var(--foreground);
   }
@@ -266,4 +270,4 @@
       opacity: 0.7;
     }
   }
-}
+}

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

@@ -1,7 +1,9 @@
+import { useRef, useState } from 'react'
+
 import type { Meta } from '@storybook/react-vite'
 import { format } from 'date-fns'
-import { useRef, useState } from 'react'
 import type { DateRange } from 'react-day-picker'
+
 import { Button } from '../button/button.js'
 import { Calendar as CalendarComponent } from './calendar.js'
 
@@ -17,8 +19,8 @@ const meta: Meta<typeof CalendarComponent> = {
 export default meta
 
 export const Calendar = (): React.JSX.Element => {
-  const [isOpen, setIsOpen] = useState(false)
-  const [time, setTime] = useState<string>('05:00')
+  const [_isOpen, setIsOpen] = useState(false)
+  const [time, _setTime] = useState<string>('05:00')
   const [date, setDate] = useState<Date>(new Date())
   const [month, setMonth] = useState<Date>(date)
 
@@ -37,7 +39,7 @@ export const Calendar = (): React.JSX.Element => {
           onSelect={(selectedDate: Date) => {
             if (selectedDate) {
               const [hours, minutes] = time.split(':')
-              selectedDate.setHours(Number.parseInt(hours), Number.parseInt(minutes))
+              selectedDate.setHours(Number.parseInt(hours, 10), Number.parseInt(minutes, 10))
               setDate(selectedDate)
               setMonth(selectedDate)
             }
@@ -73,7 +75,7 @@ export const Calendar = (): React.JSX.Element => {
 }
 
 export const Multiple = (): React.JSX.Element => {
-  const [isOpen, setIsOpen] = useState(false)
+  const [_isOpen, setIsOpen] = useState(false)
   const [dates, setDates] = useState<Date[] | undefined>([new Date()])
 
   const calendarRef = useRef<HTMLDivElement | null>(null)
@@ -106,7 +108,7 @@ export const Multiple = (): React.JSX.Element => {
 }
 
 export const Range = (): React.JSX.Element => {
-  const [isOpen, setIsOpen] = useState(false)
+  const [_isOpen, setIsOpen] = useState(false)
   const [dateRange, setDateRange] = useState<DateRange | undefined>(undefined)
 
   const calendarRef = useRef<HTMLDivElement | null>(null)

package/src/components/forms/calendar.tsx

@@ -1,4 +1,5 @@
 'use client'
+
 /**
  * @file Calendar component using react-day-picker and radix-ui
  * @see https://github.com/Maliksidk19/shadcn-datetime-picker/
@@ -7,18 +8,19 @@
  * of https://github.com/Maliksidk19/shadcn-datetime-picker/
  */
 
+import * as React from 'react'
+
 import cx from 'classnames'
 import { Select as SelectPrimitive } from 'radix-ui'
-import * as React from 'react'
 import {
   DayPicker,
   type DayPickerProps,
   type Dropdown as DropDownDayPicker,
 } from 'react-day-picker'
+
 import { ChevronsUpDown } from '../../icons/chevrons-up-down.js'
 import { Button } from '../button/button.js'
 import { ScrollArea } from '../scroll-area/scroll-area.js'
-
 import styles from './calendar.module.css'
 
 export type CalendarProps = DayPickerProps & {

package/src/components/forms/checkbox.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 {
   .container {
@@ -71,8 +76,8 @@
     color: var(--label-color);
   }
 
-  .checkbox:disabled~.label,
-  .checkbox[disabled]~.label {
+  .checkbox:disabled ~ .label,
+  .checkbox[disabled] ~ .label {
     pointer-events: none;
   }
 
@@ -215,4 +220,4 @@
       transform: scale(0.8);
     }
   }
-}
+}

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

@@ -202,18 +202,16 @@ export const Checked = (): React.JSX.Element => {
     setChecked(!checked)
   }
   return (
-    <>
-      <div style={{ maxWidth: '800px', margin: '4rem auto' }}>
-        <Checkbox
-          aria-label="Foo Checkbox"
-          onClick={handleOnClick}
-          checked={checked}
-          id="foo"
-          name="foo"
-          label="Foo Checkbox"
-        />
-      </div>
-    </>
+    <div style={{ maxWidth: '800px', margin: '4rem auto' }}>
+      <Checkbox
+        aria-label="Foo Checkbox"
+        onClick={handleOnClick}
+        checked={checked}
+        id="foo"
+        name="foo"
+        label="Foo Checkbox"
+      />
+    </div>
   )
 }
 
@@ -223,18 +221,16 @@ export const Disabled = (): React.JSX.Element => {
     setChecked(!checked)
   }
   return (
-    <>
-      <div style={{ maxWidth: '800px', margin: '4rem auto' }}>
-        <Checkbox
-          aria-label="Foo Checkbox"
-          onClick={handleOnClick}
-          checked={checked}
-          disabled
-          id="foo"
-          name="foo"
-          label="Foo Checkbox"
-        />
-      </div>
-    </>
+    <div style={{ maxWidth: '800px', margin: '4rem auto' }}>
+      <Checkbox
+        aria-label="Foo Checkbox"
+        onClick={handleOnClick}
+        checked={checked}
+        disabled
+        id="foo"
+        name="foo"
+        label="Foo Checkbox"
+      />
+    </div>
   )
 }