@infonomic/uikit 5.44.0 → 6.0.1

package/src/components/card/card.tsx

@@ -1,45 +1,33 @@
 import type React from 'react'
 
-import { Slot } from '@radix-ui/react-slot'
+import { useRender } from '@base-ui/react/use-render'
 import cx from 'classnames'
 
 import styles from './card.module.css'
 
-type AsDiv = {
-  asChild?: false
-} & React.ComponentPropsWithoutRef<'div'>
-
-interface AsSlot {
-  asChild?: true
-}
-
-export type CardRefType<C extends React.ElementType> = React.ComponentPropsWithRef<C>['ref']
-
-export type CardProps<C extends React.ElementType = 'div'> = {
+export type CardProps = useRender.ComponentProps<'div'> & {
   children: React.ReactNode
   className?: string
   hover?: boolean
-  asChild?: boolean
-  ref?: CardRefType<C>
-} & (AsSlot | AsDiv)
-
-const Card = <C extends React.ElementType = 'div'>({
-  className,
-  hover,
-  children,
-  asChild,
-  ref,
-  ...rest
-}: CardProps<C>) => {
-  const Comp: React.ElementType = asChild === true ? Slot : 'div'
-  const hoverClasses = hover != null && hover === true ? styles['card-hover'] : undefined
-  const classes = cx(styles.card, hoverClasses, className)
+  ref?: React.Ref<HTMLDivElement>
+}
 
-  return (
-    <Comp ref={ref} className={cx('infonomic-card', classes)} {...rest}>
-      {children}
-    </Comp>
-  )
+const Card = ({ className, hover, children, render, ref, ...rest }: CardProps) => {
+  const hoverClasses = hover != null && hover === true ? styles['card-hover'] : undefined
+  const classes = cx('infonomic-card', styles.card, hoverClasses, className)
+
+  const element = useRender({
+    defaultTagName: 'div',
+    render,
+    ref,
+    props: {
+      ...rest,
+      className: classes,
+      children,
+    },
+  })
+
+  return element
 }
 
 Card.displayName = 'Card'

package/src/components/chips/chip.module.css

@@ -1,11 +1,12 @@
 @layer infonomic-base,
-  infonomic-functional,
-  infonomic-utilities,
-  infonomic-theme,
-  infonomic-typography,
-  infonomic-components;
+infonomic-functional,
+infonomic-utilities,
+infonomic-theme,
+infonomic-typography,
+infonomic-components;
 
 @layer infonomic-components {
+
   .chip,
   :global(.infonomic-chip) {
     --chip-font-size: 0.9rem;
@@ -15,7 +16,7 @@
     --chip-icon-size: 1rem;
     --chip-gap: var(--gap-1);
     appearance: none;
-    outline: 2px solid transparent;
+    outline: 1px solid transparent;
     outline-offset: 2px;
     display: inline-flex;
     align-items: center;
@@ -30,7 +31,7 @@
     font-size: var(--chip-font-size);
     transition:
       background-color var(--transition-normal),
-      box-shadow var(--transition-normal);
+      outline-color var(--transition-normal);
   }
 
   .chip:disabled,
@@ -44,10 +45,7 @@
   .chip:active,
   :global(.infonomic-chip):focus,
   :global(.infonomic-chip):active {
-    --ring-offset-color: var(--background);
-    --ring-offset-shadow: var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--ring-offset-color);
-    --ring-shadow: var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--ring-color);
-    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--shadow, 0 0 #0000);
+    outline-color: var(--ring-color);
   }
 
   .label,
@@ -150,14 +148,10 @@
   .filled[disabled],
   :global(.infonomic-chip-filled):disabled,
   :global(.infonomic-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));
   }
 
   /* -------------------------------------------------------- */
@@ -185,14 +179,10 @@
   .filled-weak[disabled],
   :global(.infonomic-chip-filled-weak):disabled,
   :global(.infonomic-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));
   }
 
   /* -------------------------------------------------------- */
@@ -209,14 +199,10 @@
   .outlined[disabled],
   :global(.infonomic-chip-outlined):disabled,
   :global(.infonomic-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,
@@ -445,4 +431,4 @@
     --chip-variant-outlined-foreground: var(--text-on-danger-outlined);
     --chip-variant-outlined-foreground-disabled: var(--text-on-danger-outlined-disabled);
   }
-}
+}

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

@@ -63,7 +63,7 @@ export const Variants: Story = {
               selected={true}
             >{`${capitalize(variant)} with icon`}</Chip>
             {(variant === 'removable' || variant === 'selectable-removable') && (
-              <Chip variant={variant} onRemove={() => {}}>
+              <Chip variant={variant} onRemove={() => { }}>
                 {`${capitalize(variant)} with remove`}
               </Chip>
             )}
@@ -102,7 +102,7 @@ export const Removable: Story = {
         <Chip
           variant="removable"
           intent="primary"
-          onRemove={() => {}}
+          onRemove={() => { }}
           startIcon={<CalendarIcon height="16px" width="16px" />}
         >
           Removable chip

package/src/components/chips/chip.tsx

@@ -2,7 +2,8 @@
 
 import type React from 'react'
 
-import { Slot } from '@radix-ui/react-slot'
+import { mergeProps } from '@base-ui/react/merge-props'
+import { useRender } from '@base-ui/react/use-render'
 import cx from 'classnames'
 
 import { CheckIcon } from '../../icons/check-icon.js'
@@ -10,18 +11,10 @@ import { CloseIcon } from '../../icons/close-icon.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
-}
-
-export type ChipRefType<C extends React.ElementType> = React.ComponentPropsWithRef<C>['ref']
-
 type ToggleEvent = React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
 type RemoveEvent = React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
 
-export type ChipProps<C extends React.ElementType = 'button'> = {
+export type ChipProps = Omit<useRender.ComponentProps<'button'>, 'onToggle'> & {
   variant?: ChipVariant
   intent?: ChipIntent
   size?: ChipSize
@@ -34,11 +27,10 @@ export type ChipProps<C extends React.ElementType = 'button'> = {
   onToggle?: (selected: boolean, event: ToggleEvent) => void
   onRemove?: (event: RemoveEvent) => void
   className?: string
-  ref?: ChipRefType<C>
-} & (AsButton | AsSlot) &
-  Omit<React.HTMLAttributes<HTMLElement>, 'onToggle'>
+  ref?: React.Ref<HTMLButtonElement>
+} & Omit<React.HTMLAttributes<HTMLElement>, 'onToggle'>
 
-export const Chip = <C extends React.ElementType = 'button'>({
+export const Chip = ({
   variant = 'assist',
   intent = 'primary',
   size = 'md',
@@ -52,12 +44,12 @@ export const Chip = <C extends React.ElementType = 'button'>({
   onRemove,
   className,
   children,
-  asChild,
+  render,
   ref,
   ...rest
-}: ChipProps<C>) => {
+}: ChipProps) => {
   const { onClick, onKeyDown, role, tabIndex, ...restProps } = rest
-  const Comp: React.ElementType = asChild === true ? Slot : 'button'
+  const isCustomElement = render != null
   const isSelectable = variant === 'selectable' || variant === 'selectable-removable'
   const isRemovable = variant === 'removable' || variant === 'selectable-removable'
   const isSelected = Boolean(selected)
@@ -69,7 +61,7 @@ export const Chip = <C extends React.ElementType = 'button'>({
     }
 
     if (onClick) {
-      ;(onClick as React.MouseEventHandler<HTMLElement>)(event)
+      ; (onClick as React.MouseEventHandler<HTMLElement>)(event)
     }
 
     if (isSelectable && onToggle) {
@@ -82,10 +74,10 @@ export const Chip = <C extends React.ElementType = 'button'>({
       return
     }
 
-    if ((event.key === 'Enter' || event.key === ' ') && asChild === true) {
+    if ((event.key === 'Enter' || event.key === ' ') && isCustomElement) {
       event.preventDefault()
       if (onClick) {
-        ;(onClick as React.MouseEventHandler<HTMLElement>)(
+        ; (onClick as React.MouseEventHandler<HTMLElement>)(
           event as unknown as React.MouseEvent<HTMLElement>
         )
       }
@@ -154,43 +146,53 @@ export const Chip = <C extends React.ElementType = 'button'>({
 
   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(
-        'infonomic-chip',
-        `infonomic-chip-${variant}`,
-        `infonomic-chip-${intent}`,
-        `infonomic-chip-${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('infonomic-chip-icon-wrapper', styles.iconWrapper)}>{leadingIcon}</span>
-      )}
-      <span className={cx('infonomic-chip-label', styles.label)}>{children}</span>
-      {trailingIcon != null && (
-        <span className={cx('infonomic-chip-icon-wrapper', styles.iconWrapper)}>
-          {trailingIcon}
-        </span>
-      )}
-    </Comp>
-  )
+  const defaultProps: Record<string, unknown> = {
+    type: isCustomElement ? undefined : 'button',
+    role: role ?? (isCustomElement ? 'button' : undefined),
+    tabIndex: disabled ? -1 : (tabIndex ?? 0),
+    'aria-disabled': disabled || undefined,
+    'aria-pressed': isSelectable ? isSelected : undefined,
+    'aria-selected': isSelectable ? isSelected : undefined,
+    className: cx(
+      'infonomic-chip',
+      `infonomic-chip-${variant}`,
+      `infonomic-chip-${intent}`,
+      `infonomic-chip-${size}`,
+      { selected: isSelected, disabled, removable: isRemovable },
+      styles.chip,
+      styles[appliedVariant],
+      styles[intent],
+      styles[size],
+      className
+    ),
+    disabled: isCustomElement ? undefined : disabled,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    children: (
+      <>
+        {leadingIcon != null && (
+          <span className={cx('infonomic-chip-icon-wrapper', styles.iconWrapper)}>
+            {leadingIcon}
+          </span>
+        )}
+        <span className={cx('infonomic-chip-label', styles.label)}>{children}</span>
+        {trailingIcon != null && (
+          <span className={cx('infonomic-chip-icon-wrapper', styles.iconWrapper)}>
+            {trailingIcon}
+          </span>
+        )}
+      </>
+    ),
+  }
+
+  const element = useRender({
+    defaultTagName: 'button',
+    render,
+    ref,
+    props: mergeProps<'button'>(defaultProps, restProps),
+  })
+
+  return element
 }
 
 Chip.displayName = 'Chip'

package/src/components/dropdown/dropdown.stories.tsx

@@ -55,10 +55,8 @@ export const Dropdown: Story = {
           }}
         >
           <DropdownComponent.Root {...args}>
-            <DropdownComponent.Trigger asChild>
-              <Button size="sm" variant="filled">
-                +
-              </Button>
+            <DropdownComponent.Trigger render={<Button size="sm" variant="filled" />}>
+              +
             </DropdownComponent.Trigger>
 
             <DropdownComponent.Portal>

package/src/components/dropdown/dropdown.tsx

@@ -2,13 +2,16 @@
 
 import type React from 'react'
 
+import { Menu } from '@base-ui/react/menu'
 import cx from 'classnames'
-import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui'
 
 import styles from './dropdown.module.css'
 
-function Root({ children, ...rest }: DropdownMenuPrimitive.DropdownMenuProps): React.JSX.Element {
-  return <DropdownMenuPrimitive.Root {...rest}>{children}</DropdownMenuPrimitive.Root>
+function Root({
+  children,
+  ...rest
+}: React.ComponentProps<typeof Menu.Root>): React.JSX.Element {
+  return <Menu.Root {...rest}>{children}</Menu.Root>
 }
 
 const Trigger = ({
@@ -16,17 +19,17 @@ const Trigger = ({
   className,
   children,
   ...rest
-}: DropdownMenuPrimitive.DropdownMenuTriggerProps & {
+}: React.ComponentProps<typeof Menu.Trigger> & {
   ref?: React.RefObject<React.ComponentRef<'button'>>
 }): React.JSX.Element => {
   return (
-    <DropdownMenuPrimitive.Trigger
+    <Menu.Trigger
       className={cx('infonomic-dropdown-trigger', className)}
       ref={ref}
       {...rest}
     >
       {children}
-    </DropdownMenuPrimitive.Trigger>
+    </Menu.Trigger>
   )
 }
 Trigger.displayName = 'Trigger'
@@ -34,26 +37,46 @@ Trigger.displayName = 'Trigger'
 function Portal({
   children,
   ...rest
-}: DropdownMenuPrimitive.DropdownMenuPortalProps): React.JSX.Element {
-  return <DropdownMenuPrimitive.Portal {...rest}>{children}</DropdownMenuPrimitive.Portal>
+}: React.ComponentProps<typeof Menu.Portal>): React.JSX.Element {
+  return <Menu.Portal {...rest}>{children}</Menu.Portal>
 }
 
 const Content = ({
   ref,
   className,
   children,
+  side,
+  sideOffset,
+  align,
+  alignOffset,
+  collisionPadding,
   ...rest
-}: DropdownMenuPrimitive.DropdownMenuContentProps & {
+}: {
   ref?: React.RefObject<React.ComponentRef<'div'>>
-}): React.JSX.Element => {
+  className?: string
+  children?: React.ReactNode
+  side?: React.ComponentProps<typeof Menu.Positioner>['side']
+  sideOffset?: React.ComponentProps<typeof Menu.Positioner>['sideOffset']
+  align?: React.ComponentProps<typeof Menu.Positioner>['align']
+  alignOffset?: React.ComponentProps<typeof Menu.Positioner>['alignOffset']
+  collisionPadding?: React.ComponentProps<typeof Menu.Positioner>['collisionPadding']
+} & Omit<React.ComponentProps<typeof Menu.Popup>, 'className'>): React.JSX.Element => {
   return (
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      className={cx('infonomic-dropdown-content', styles['dropdown-content'], className)}
-      {...rest}
+    <Menu.Positioner
+      side={side}
+      sideOffset={sideOffset}
+      align={align}
+      alignOffset={alignOffset}
+      collisionPadding={collisionPadding}
     >
-      {children}
-    </DropdownMenuPrimitive.Content>
+      <Menu.Popup
+        ref={ref}
+        className={cx('infonomic-dropdown-content', styles['dropdown-content'], className)}
+        {...rest}
+      >
+        {children}
+      </Menu.Popup>
+    </Menu.Positioner>
   )
 }
 Content.displayName = 'Content'
@@ -63,17 +86,17 @@ const Group = ({
   className,
   children,
   ...rest
-}: DropdownMenuPrimitive.DropdownMenuGroupProps & {
+}: React.ComponentProps<typeof Menu.Group> & {
   ref?: React.RefObject<React.ComponentRef<'div'>>
 }): React.JSX.Element => {
   return (
-    <DropdownMenuPrimitive.Group
+    <Menu.Group
       ref={ref}
       className={cx('infonomic-dropdown-group', className)}
       {...rest}
     >
       {children}
-    </DropdownMenuPrimitive.Group>
+    </Menu.Group>
   )
 }
 Group.displayName = 'Group'
@@ -83,17 +106,17 @@ const Item = ({
   className,
   children,
   ...rest
-}: DropdownMenuPrimitive.DropdownMenuItemProps & {
+}: React.ComponentProps<typeof Menu.Item> & {
   ref?: React.RefObject<React.ComponentRef<'div'>>
 }): React.JSX.Element => {
   return (
-    <DropdownMenuPrimitive.Item
+    <Menu.Item
       ref={ref}
       className={cx('infonomic-dropdown-item', styles['dropdown-item'], className)}
       {...rest}
     >
       {children}
-    </DropdownMenuPrimitive.Item>
+    </Menu.Item>
   )
 }
 Item.displayName = 'Item'
@@ -103,17 +126,17 @@ const Label = ({
   className,
   children,
   ...rest
-}: DropdownMenuPrimitive.DropdownMenuLabelProps & {
+}: React.ComponentProps<typeof Menu.GroupLabel> & {
   ref?: React.RefObject<React.ComponentRef<'div'>>
 }): React.JSX.Element => {
   return (
-    <DropdownMenuPrimitive.Label
+    <Menu.GroupLabel
       ref={ref}
       className={cx('infonomic-dropdown-label', className)}
       {...rest}
     >
       {children}
-    </DropdownMenuPrimitive.Label>
+    </Menu.GroupLabel>
   )
 }
 Label.displayName = 'Label'
@@ -122,11 +145,11 @@ const Separator = ({
   ref,
   className,
   ...props
-}: DropdownMenuPrimitive.DropdownMenuSeparatorProps & {
+}: React.ComponentProps<typeof Menu.Separator> & {
   ref?: React.RefObject<React.ComponentRef<'div'>>
 }): React.JSX.Element => {
   return (
-    <DropdownMenuPrimitive.Separator
+    <Menu.Separator
       ref={ref}
       className={cx('infonomic-dropdown-separator', styles['dropdown-separator'], className)}
       {...props}
@@ -135,26 +158,49 @@ const Separator = ({
 }
 Separator.displayName = 'Separator'
 
-function Sub({ children, ...rest }: DropdownMenuPrimitive.DropdownMenuSubProps): React.JSX.Element {
-  return <DropdownMenuPrimitive.Sub {...rest}>{children}</DropdownMenuPrimitive.Sub>
+function Sub({
+  children,
+  ...rest
+}: React.ComponentProps<typeof Menu.SubmenuRoot>): React.JSX.Element {
+  return <Menu.SubmenuRoot {...rest}>{children}</Menu.SubmenuRoot>
 }
 
 const SubContent = ({
   ref,
   className,
   children,
+  side,
+  sideOffset,
+  align,
+  alignOffset,
+  collisionPadding,
   ...rest
-}: DropdownMenuPrimitive.DropdownMenuSubContentProps & {
+}: {
   ref?: React.RefObject<React.ComponentRef<'div'>>
-}): React.JSX.Element => {
+  className?: string
+  children?: React.ReactNode
+  side?: React.ComponentProps<typeof Menu.Positioner>['side']
+  sideOffset?: React.ComponentProps<typeof Menu.Positioner>['sideOffset']
+  align?: React.ComponentProps<typeof Menu.Positioner>['align']
+  alignOffset?: React.ComponentProps<typeof Menu.Positioner>['alignOffset']
+  collisionPadding?: React.ComponentProps<typeof Menu.Positioner>['collisionPadding']
+} & Omit<React.ComponentProps<typeof Menu.Popup>, 'className'>): React.JSX.Element => {
   return (
-    <DropdownMenuPrimitive.SubContent
-      ref={ref}
-      className={cx('infonomic-dropdown-subcontent', styles['dropdown-subcontent'], className)}
-      {...rest}
+    <Menu.Positioner
+      side={side}
+      sideOffset={sideOffset}
+      align={align}
+      alignOffset={alignOffset}
+      collisionPadding={collisionPadding}
     >
-      {children}
-    </DropdownMenuPrimitive.SubContent>
+      <Menu.Popup
+        ref={ref}
+        className={cx('infonomic-dropdown-subcontent', styles['dropdown-subcontent'], className)}
+        {...rest}
+      >
+        {children}
+      </Menu.Popup>
+    </Menu.Positioner>
   )
 }
 SubContent.displayName = 'SubContent'
@@ -164,17 +210,17 @@ const SubTrigger = ({
   className,
   children,
   ...rest
-}: DropdownMenuPrimitive.DropdownMenuSubTriggerProps & {
+}: React.ComponentProps<typeof Menu.SubmenuTrigger> & {
   ref?: React.RefObject<React.ComponentRef<'div'>>
 }): React.JSX.Element => {
   return (
-    <DropdownMenuPrimitive.SubTrigger
+    <Menu.SubmenuTrigger
       ref={ref}
       className={cx('infonomic-dropdown-subtrigger', className)}
       {...rest}
     >
       {children}
-    </DropdownMenuPrimitive.SubTrigger>
+    </Menu.SubmenuTrigger>
   )
 }
 SubTrigger.displayName = 'SubTrigger'