@infonomic/uikit 5.43.1 → 6.0.0

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

@@ -2,8 +2,9 @@
 
 import type React from 'react'
 
+import { Radio } from '@base-ui/react/radio'
+import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group'
 import cx from 'classnames'
-import { RadioGroup as RadioGroupPrimitive } from 'radix-ui'
 
 import styles from './radio-group.module.css'
 import type { Intent } from '../@types/shared'
@@ -22,24 +23,26 @@ export const RadioGroupItem = ({
   label,
   ref: forwardedRef,
   ...props
-}: RadioGroupPrimitive.RadioGroupItemProps & {
+}: Omit<React.ComponentProps<typeof Radio.Root>, 'value'> & {
   intent?: Intent
   className?: string
   id: string
   value: string
   label: string
-  ref?: React.RefObject<React.ComponentRef<'div'>>
+  ref?: React.RefObject<HTMLDivElement>
 }) => {
   return (
     <div ref={forwardedRef} className={styles['item-container']}>
-      <RadioGroupPrimitive.Item
+      <Radio.Root
         {...props}
         className={cx(styles.item, styles[intent])}
         value={value}
         id={id}
+        nativeButton
+        render={<button type="button" />}
       >
-        <RadioGroupPrimitive.Indicator className={styles.indicator} />
-      </RadioGroupPrimitive.Item>
+        <Radio.Indicator className={styles.indicator} />
+      </Radio.Root>
       <label className={styles.label} htmlFor={id}>
         {label}
       </label>
@@ -53,18 +56,17 @@ export const RadioGroup = ({
   direction = 'column',
   children,
   ...props
-}: RadioGroupPrimitive.RadioGroupProps & {
+}: React.ComponentProps<typeof RadioGroupPrimitive> & {
   direction?: 'row' | 'column'
   className?: string
   children: React.ReactNode
-  ref?: React.RefObject<React.ComponentRef<'div'>>
+  ref?: React.RefObject<HTMLDivElement>
 }) => (
-  <RadioGroupPrimitive.Root
+  <RadioGroupPrimitive
     ref={forwardedRef}
     className={cx('infonomic-radio-group', styles[direction], className)}
-    // aria-label="View density"
     {...props}
   >
     {children}
-  </RadioGroupPrimitive.Root>
+  </RadioGroupPrimitive>
 )

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

@@ -7,13 +7,13 @@ infonomic-components;
 
 @layer infonomic-components {
 
-  .content,
-  :global(.infonomic-select-content) {
+  .positioner,
+  :global(.infonomic-select-positioner) {
     z-index: 50;
   }
 
-  .viewport,
-  :global(.infonomic-select-viewport) {
+  .popup,
+  :global(.infonomic-select-popup) {
     z-index: 50;
     margin-top: 2px;
     border: 1px solid var(--surface-panel-border);
@@ -23,33 +23,33 @@ infonomic-components;
     padding: 6px;
   }
 
-  .viewport-xs {
+  .popup-xs {
     padding: 4px;
   }
 
-  .viewport-sm {
+  .popup-sm {
     padding: 4px;
   }
 
-  .viewport-md {
+  .popup-md {
     padding: 6px;
   }
 
-  .viewport-lg {
+  .popup-lg {
     padding: 6px;
   }
 
-  .viewport-xl {
+  .popup-xl {
     padding: 8px;
   }
 
-  .group,
-  :global(.infonomic-select-group) {
+  .list,
+  :global(.infonomic-select-list) {
     z-index: 50;
   }
 
-  .scroll-button,
-  :global(.infonomic-select-scroll-button) {
+  .scroll-arrow,
+  :global(.infonomic-select-scroll-arrow) {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -101,7 +101,7 @@ infonomic-components;
   }
 
   /* size variants — treat current values as 'md' */
-  .viewport-xs .select-item {
+  .popup-xs .select-item {
     font-size: 0.75rem;
     height: 24px;
     padding-right: 28px;
@@ -109,11 +109,11 @@ infonomic-components;
     border-radius: 4px;
   }
 
-  .viewport-xs .select-item-indicator {
+  .popup-xs .select-item-indicator {
     width: 20px;
   }
 
-  .viewport-sm .select-item {
+  .popup-sm .select-item {
     font-size: 0.875rem;
     height: 28px;
     padding-right: 30px;
@@ -121,13 +121,13 @@ infonomic-components;
     border-radius: 5px;
   }
 
-  .viewport-sm .select-item-indicator {
+  .popup-sm .select-item-indicator {
     width: 22px;
   }
 
-  /* .viewport-md — inherits base .select-item values */
+  /* .popup-md — inherits base .select-item values */
 
-  .viewport-lg .select-item {
+  .popup-lg .select-item {
     font-size: 1.125rem;
     height: 34px;
     padding-right: 32px;
@@ -135,11 +135,11 @@ infonomic-components;
     border-radius: 6px;
   }
 
-  .viewport-lg .select-item-indicator {
+  .popup-lg .select-item-indicator {
     width: 24px;
   }
 
-  .viewport-xl .select-item {
+  .popup-xl .select-item {
     font-size: 1.25rem;
     height: 40px;
     padding-right: 36px;
@@ -147,7 +147,7 @@ infonomic-components;
     border-radius: 8px;
   }
 
-  .viewport-xl .select-item-indicator {
+  .popup-xl .select-item-indicator {
     width: 28px;
   }
 }

package/src/components/forms/select.tsx

@@ -1,12 +1,13 @@
 'use client'
 
 import type React from 'react'
-import type { ComponentPropsWithoutRef } from 'react'
 
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons'
+import { Select as SelectPrimitive } from '@base-ui/react/select'
 import cx from 'classnames'
-import { Select as SelectPrimitive } from 'radix-ui'
 
+import { CheckIcon } from '../../icons/check-icon.js'
+import { ChevronDownIcon } from '../../icons/chevron-down-icon.js'
+import { ChevronUpIcon } from '../../icons/chevron-up-icon.js'
 import { Button } from '../button/button.js'
 import { HelpText } from './help-text.js'
 import styles from './select.module.css'
@@ -20,7 +21,7 @@ export interface SelectValue {
   suffix?: string
 }
 
-type SelectProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Root> & {
+type SelectProps = React.ComponentProps<typeof SelectPrimitive.Root> & {
   id?: string
   intent?: Intent
   variant?: Variant
@@ -52,38 +53,40 @@ export function Select({
   return (
     <div className={cx('infonomic-select-container', containerClassName)}>
       <SelectPrimitive.Root {...rest}>
-        <SelectPrimitive.Trigger asChild aria-label={ariaLabel ?? 'Select'}>
-          <Button
-            id={id}
-            intent={intent}
-            variant={variant}
-            size={size}
-            className={cx('whitespace-nowrap', className)}
-          >
-            <SelectPrimitive.Value placeholder={placeholder} />
-            <SelectPrimitive.Icon>
-              <ChevronDownIcon />
-            </SelectPrimitive.Icon>
-          </Button>
+        <SelectPrimitive.Trigger
+          aria-label={ariaLabel ?? 'Select'}
+          render={
+            <Button
+              id={id}
+              intent={intent}
+              variant={variant}
+              size={size}
+              className={cx('whitespace-nowrap', className)}
+            />
+          }
+        >
+          <SelectPrimitive.Value placeholder={placeholder} />
+          <SelectPrimitive.Icon>
+            <ChevronDownIcon />
+          </SelectPrimitive.Icon>
         </SelectPrimitive.Trigger>
         <SelectPrimitive.Portal>
-          <SelectPrimitive.Content
-            position={position}
-            className={styles.content}
-            ref={(ref) => {
-              if (ref == null) return
-            }}
+          <SelectPrimitive.Positioner
+            className={styles.positioner}
+            alignItemWithTrigger={position !== 'popper'}
           >
-            <SelectPrimitive.ScrollUpButton className={styles['scroll-button']}>
+            <SelectPrimitive.ScrollUpArrow className={styles['scroll-arrow']}>
               <ChevronUpIcon />
-            </SelectPrimitive.ScrollUpButton>
-            <SelectPrimitive.Viewport className={cx(styles.viewport, size != null && styles[`viewport-${size}`])}>
-              <SelectPrimitive.Group className={styles.group}>{children}</SelectPrimitive.Group>
-            </SelectPrimitive.Viewport>
-            <SelectPrimitive.ScrollDownButton className={styles['scroll-button']}>
+            </SelectPrimitive.ScrollUpArrow>
+            <SelectPrimitive.Popup className={cx(styles.popup, size != null && styles[`popup-${size}`])}>
+              <SelectPrimitive.List className={styles.list}>
+                {children}
+              </SelectPrimitive.List>
+            </SelectPrimitive.Popup>
+            <SelectPrimitive.ScrollDownArrow className={styles['scroll-arrow']}>
               <ChevronDownIcon />
-            </SelectPrimitive.ScrollDownButton>
-          </SelectPrimitive.Content>
+            </SelectPrimitive.ScrollDownArrow>
+          </SelectPrimitive.Positioner>
         </SelectPrimitive.Portal>
       </SelectPrimitive.Root>
       {helpText != null && helpText?.length > 0 && <HelpText text={helpText} />}
@@ -96,8 +99,8 @@ export const SelectItem = ({
   children,
   className,
   ...props
-}: SelectPrimitive.SelectItemProps & {
-  ref?: React.RefObject<React.ComponentRef<'div'>>
+}: React.ComponentProps<typeof SelectPrimitive.Item> & {
+  ref?: React.RefObject<HTMLDivElement>
 }) => {
   return (
     <SelectPrimitive.Item

package/src/components/hamburger/hamburger.astro

@@ -1,30 +1,38 @@
 ---
-// SEE: uikit/src/styles/components/hamburger.css
+// NOTE: In Astro, open/closed state is managed externally
+// (e.g. via nanostores). Toggle the 'infonomic-hamburger-open'
+// class on the button and update aria-expanded from client JS.
 
-// NOTE: we don't use open or color props in Astro.
-// Instead we set open / closed state via nanostores.
-// and then apply global classes according.
-// Class overrides for inner span colors are set in
-// Astro app.css
-
-interface HamburgerProps {
+interface Props {
   class?: string
+  colorScheme?: 'auto' | 'onDark' | 'onLight'
   ariaLabel?: string
   ariaControls?: string
 }
 
-const { class: className, ariaLabel, ariaControls } = Astro.props as HamburgerProps
+import styles from './hamburger.module.css'
+
+const {
+  class: className,
+  colorScheme = 'auto',
+  ariaLabel = 'Toggle menu',
+  ariaControls,
+  ...rest
+} = Astro.props as Props
+
+const colorSchemeClass =
+  colorScheme === 'onDark' ? styles.onDark : colorScheme === 'onLight' ? styles.onLight : undefined
 ---
 
 <button
-  id="component--hamburger"
-  class:list={['component--hamburger', className]}
-  tabindex="0"
+  type="button"
+  class:list={['infonomic-hamburger', styles.hamburger, colorSchemeClass, className]}
   aria-label={ariaLabel}
   aria-controls={ariaControls}
-  aria-haspopup="true"
+  aria-expanded="false"
+  {...rest}
 >
-  <span class="box" aria-hidden="true">
-    <span class="inner"></span>
+  <span class:list={['infonomic-hamburger-box', styles.box]} aria-hidden="true">
+    <span class:list={['infonomic-hamburger-inner', styles.inner]}></span>
   </span>
 </button>

package/src/components/hamburger/hamburger.module.css

@@ -0,0 +1,142 @@
+@layer infonomic-base,
+infonomic-functional,
+infonomic-utilities,
+infonomic-theme,
+infonomic-typography,
+infonomic-components;
+
+@layer infonomic-components {
+
+  .hamburger,
+  :global(.infonomic-hamburger) {
+    --hamburger-color: currentColor;
+    --hamburger-focus-ring-color: currentColor;
+
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    z-index: 200;
+    width: 42px;
+    height: 34px;
+    overflow: hidden;
+    cursor: pointer;
+    transition-property: opacity, filter;
+    transition-duration: 0.15s;
+    transition-timing-function: ease;
+    font: inherit;
+    color: inherit;
+    text-transform: none;
+    background-color: transparent;
+    border: 0;
+    margin: 0;
+    padding: 0;
+    border-radius: var(--border-radius-sm);
+  }
+
+  .hamburger:focus-visible,
+  :global(.infonomic-hamburger):focus-visible {
+    outline: 2px solid var(--hamburger-focus-ring-color);
+    outline-offset: 2px;
+  }
+
+  /* Box container for the bars */
+  .box,
+  :global(.infonomic-hamburger-box) {
+    width: 24px;
+    height: 24px;
+    display: block;
+    position: relative;
+    pointer-events: none;
+  }
+
+  /* Inner bar + ::before/::after pseudo-elements form the 3 lines */
+  .inner,
+  :global(.infonomic-hamburger-inner) {
+    display: block;
+    top: 50%;
+    margin-top: -1px;
+    transition-duration: 0.075s;
+    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  .inner,
+  .inner::before,
+  .inner::after,
+  :global(.infonomic-hamburger-inner),
+  :global(.infonomic-hamburger-inner)::before,
+  :global(.infonomic-hamburger-inner)::after {
+    position: absolute;
+    width: 24px;
+    height: 2px;
+    border-radius: 0;
+    background-color: var(--hamburger-color);
+    transition-property: transform;
+    transition-duration: 0.15s;
+    transition-timing-function: ease;
+  }
+
+  .inner::before,
+  .inner::after,
+  :global(.infonomic-hamburger-inner)::before,
+  :global(.infonomic-hamburger-inner)::after {
+    content: "";
+    display: block;
+  }
+
+  .inner::before,
+  :global(.infonomic-hamburger-inner)::before {
+    top: -8px;
+    transition:
+      top 0.075s 0.12s ease,
+      opacity 0.075s ease;
+  }
+
+  .inner::after,
+  :global(.infonomic-hamburger-inner)::after {
+    bottom: -8px;
+    transition:
+      bottom 0.075s 0.12s ease,
+      transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  /* Open state */
+  .open .inner,
+  :global(.infonomic-hamburger-open) :global(.infonomic-hamburger-inner) {
+    transform: rotate(45deg);
+    transition-delay: 0.12s;
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  .open .inner::before,
+  :global(.infonomic-hamburger-open) :global(.infonomic-hamburger-inner)::before {
+    top: 0;
+    opacity: 0;
+    transition:
+      top 0.075s ease,
+      opacity 0.075s 0.12s ease;
+  }
+
+  .open .inner::after,
+  :global(.infonomic-hamburger-open) :global(.infonomic-hamburger-inner)::after {
+    bottom: 0;
+    transform: rotate(-90deg);
+    transition:
+      bottom 0.075s ease,
+      transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  /* Color scheme: onDark (white bars for dark backgrounds) */
+  .onDark,
+  :global(.infonomic-hamburger-on-dark) {
+    --hamburger-color: white;
+    --hamburger-focus-ring-color: rgba(255, 255, 255, 0.7);
+  }
+
+  /* Color scheme: onLight (dark bars for light backgrounds) */
+  .onLight,
+  :global(.infonomic-hamburger-on-light) {
+    --hamburger-color: var(--foreground, #1a1a1a);
+    --hamburger-focus-ring-color: var(--foreground, #1a1a1a);
+  }
+}

package/src/components/hamburger/hamburger.stories.tsx

@@ -0,0 +1,35 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import type React from 'react'
+import { useState } from 'react'
+
+import type { Meta } from '@storybook/react-vite'
+
+import { Section } from '../section/section.js'
+import { Hamburger as HamburgerComponent } from './hamburger.js'
+
+const meta: Meta<typeof HamburgerComponent> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Components/Hamburger',
+  component: HamburgerComponent,
+}
+
+export default meta
+
+export const Hamburger = (): React.JSX.Element => {
+
+  const [open, setOpen] = useState(false)
+
+  return (
+    <Section style={{ height: '100vh', margin: '2rem auto' }}>
+      <HamburgerComponent
+        open={open}
+        onChange={(open) => {
+          setOpen(open)
+        }}
+      />
+    </Section>
+  )
+}

package/src/components/hamburger/hamburger.tsx

@@ -1,65 +1,73 @@
 'use client'
 
 import type React from 'react'
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect } from 'react'
 
 import cx from 'classnames'
 
-interface HamburgerProps {
+import styles from './hamburger.module.css'
+
+type ColorScheme = 'auto' | 'onDark' | 'onLight'
+
+export interface HamburgerProps {
   className?: string
-  color?: string
-  activeBorderColor?: string
-  open: boolean
-  onChange: (event: React.MouseEvent<HTMLButtonElement> | null) => void
+  colorScheme?: ColorScheme
+  open?: boolean
+  onChange?: (open: boolean) => void
+  ariaLabel?: string
+  ariaControls?: string
 }
 
 export function Hamburger({
   className,
-  color = 'bg-white before:bg-white after:bg-white',
-  activeBorderColor,
-  open,
+  colorScheme = 'auto',
+  open = false,
   onChange,
+  ariaLabel = 'Toggle menu',
+  ariaControls,
   ...other
 }: HamburgerProps): React.JSX.Element {
-  const [isOpen, setIsOpen] = useState(false)
-
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {
-    setIsOpen(!isOpen)
-    onChange(event)
+  const handleClick = (): void => {
+    onChange?.(!open)
   }
 
   const handleEscapeKey = useCallback(
     (event: KeyboardEvent): void => {
-      if (event.key === 'Escape') {
-        if (isOpen) {
-          setIsOpen(false)
-          onChange(null)
-        }
+      if (event.key === 'Escape' && open) {
+        onChange?.(false)
       }
     },
-    [isOpen, onChange]
+    [open, onChange]
   )
 
   useEffect(() => {
-    setIsOpen(open)
     document.addEventListener('keydown', handleEscapeKey, false)
     return () => {
       document.removeEventListener('keydown', handleEscapeKey, false)
     }
-  }, [open, handleEscapeKey])
+  }, [handleEscapeKey])
 
   return (
     <button
+      type="button"
       onClick={handleClick}
-      className={cx(`component--hamburger ${isOpen ? 'is_active' : ''}`, className)}
-      tabIndex={0}
-      aria-label="Open main menu"
-      aria-controls="main-menu"
-      aria-haspopup="true"
+      className={cx(
+        'infonomic-hamburger',
+        styles.hamburger,
+        {
+          [styles.open]: open,
+          [styles.onDark]: colorScheme === 'onDark',
+          [styles.onLight]: colorScheme === 'onLight',
+        },
+        className
+      )}
+      aria-label={ariaLabel}
+      aria-controls={ariaControls}
+      aria-expanded={open}
       {...other}
     >
-      <span className="box" aria-hidden="true">
-        <span className={cx('inner', color)} />
+      <span className={cx('infonomic-hamburger-box', styles.box)} aria-hidden="true">
+        <span className={cx('infonomic-hamburger-inner', styles.inner)} />
       </span>
     </button>
   )

package/src/components/notifications/@types/toast.ts

@@ -25,14 +25,14 @@ import type { Icons as i, Position as p, Intent as t } from '../../@types/shared
 export type Intent = 'primary' | t
 
 /**
- * Screen corner position for the toast container.
+ * Screen corner position for the toast viewport.
  *
  * - `top-left`     — top-left corner of the viewport
  * - `top-right`    — top-right corner of the viewport (default)
  * - `bottom-left`  — bottom-left corner of the viewport
  * - `bottom-right` — bottom-right corner of the viewport
  *
- * @default 'top-right'
+ * @default 'bottom-right'
  */
 export type Position = 'top-right' | p
 
@@ -43,9 +43,11 @@ export type Position = 'top-right' | p
 export type IconType = 'success' | i
 
 /**
- * Callback fired when the toast's open/visible state changes.
- * Use this to sync dismissal with external state.
- *
- * @param open - `true` when the toast becomes visible, `false` when dismissed
+ * Custom data passed to each toast via the toast manager's `add()` method.
  */
-export type OnOpenChange = (open: boolean) => void
+export interface ToastData {
+  intent?: Intent
+  iconType?: IconType
+  icon?: boolean
+  close?: boolean
+}