@womp/kookie-ui 0.20.0 → 0.22.0

package/src/components/index.tsx

@@ -1,29 +1,22 @@
 export { AccessibleIcon, type AccessibleIconProps } from './accessible-icon.js';
 export * as Accordion from './accordion.js';
 export * as AlertDialog from './alert-dialog.js';
-export { AspectRatio, type AspectRatioProps } from './aspect-ratio.js';
 export { Avatar, type AvatarProps } from './avatar.js';
-export { Badge, type BadgeProps } from './badge.js';
 export { Blockquote, type BlockquoteProps } from './blockquote.js';
 export { Box, type BoxProps } from './box.js';
 export { Button, type ButtonProps } from './button.js';
 export { Card, type CardProps } from './card.js';
-export * as CheckboxCards from './checkbox-cards.js';
 export * as CheckboxGroup from './checkbox-group.js';
 export { Checkbox, type CheckboxProps } from './checkbox.js';
+export { Chip, type ChipProps } from './chip.js';
 export { Code, type CodeProps } from './code.js';
-export { Container, type ContainerProps } from './container.js';
 export * as ContextMenu from './context-menu.js';
-export * as DataList from './data-list.js';
 export * as Dialog from './dialog.js';
 export * as DropdownMenu from './dropdown-menu.js';
 export * as Combobox from './combobox.js';
-export { Em, type EmProps } from './em.js';
 export { Flex, type FlexProps } from './flex.js';
 export { Grid, type GridProps } from './grid.js';
 export { Heading, type HeadingProps } from './heading.js';
-export * as HoverCard from './hover-card.js';
-export { IconButton, type IconButtonProps } from './icon-button.js';
 export {
   type IconProps,
   ChevronDownIcon,
@@ -31,44 +24,30 @@ export {
   ThickChevronRightIcon,
   ThickDividerHorizontalIcon,
 } from './icons.js';
-export { Image, type ImageProps } from './image.js';
 export { Kbd, type KbdProps } from './kbd.js';
 export { Link, type LinkProps } from './link.js';
 export * as Navbar from './navbar.js';
 export * as Popover from './popover.js';
 export { Portal, type PortalProps } from './portal.js';
 export { Progress, type ProgressProps } from './progress.js';
-export { Quote, type QuoteProps } from './quote.js';
-export * as RadioCards from './radio-cards.js';
 export * as RadioGroup from './radio-group.js';
 export { Radio, type RadioProps } from './radio.js';
 export { Reset, type ResetProps } from './reset.js';
 export { ScrollArea, type ScrollAreaProps } from './scroll-area.js';
 export * as SegmentedControl from './segmented-control.js';
-export { Section, type SectionProps } from './section.js';
 export * as Select from './select.js';
 export { Separator, type SeparatorProps } from './separator.js';
-export { Skeleton, type SkeletonProps } from './skeleton.js';
 export { Slider, type SliderProps } from './slider.js';
 export { Slot, Slottable } from './slot.js';
 export { Spinner, type SpinnerProps } from './spinner.js';
-export { Strong, type StrongProps } from './strong.js';
 export { Switch, type SwitchProps } from './switch.js';
-export * as TabNav from './tab-nav.js';
 export * as Table from './table.js';
 export * as Tabs from './tabs.js';
 export { TextArea, type TextAreaProps } from './text-area.js';
 export * as TextField from './text-field.js';
 export { Text, type TextProps } from './text.js';
-export {
-  ThemePanel,
-  ThemePanelContent,
-  type ThemePanelProps,
-  type ThemePanelContentProps,
-} from './theme-panel.js';
 export { Theme, ThemeContext, type ThemeContextValue, type ThemeProps, useThemeContext } from './theme.js';
-export { ToggleButton, type ToggleButtonProps } from './toggle-button.js';
-export { ToggleIconButton, type ToggleIconButtonProps } from './toggle-icon-button.js';
+export { Toggle, type ToggleProps } from './toggle.js';
 export {
   Toolbar,
   ToolbarGroup,

package/src/components/kbd.css

@@ -3,7 +3,7 @@
 
 
 
-.rt-Kbd {
+.kui-Kbd {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -31,7 +31,7 @@
   /* Make sure that the height is not stretched in a Flex/Grid layout */
   height: fit-content;
 
-  color: var(--gray-12);
+  color: var(--neutral-12);
 }
 
 /***************************************************************************************************
@@ -40,66 +40,66 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-Kbd:where(.rt-variant-raised) {
-  background-color: var(--gray-1);
+.kui-Kbd:where(.kui-variant-raised) {
+  background-color: var(--neutral-1);
   /* prettier-ignore */
   box-shadow:
     inset 0 var(--raised-border-width) var(--white-a12),
-    inset 0 calc(-1 * var(--raised-border-width)) var(--gray-a6),
-    0 0 0 var(--raised-border-width) var(--gray-a5),
-    0 var(--raised-shadow-offset-y) var(--raised-shadow-blur-small) var(--gray-a7);
+    inset 0 calc(-1 * var(--raised-border-width)) var(--neutral-a6),
+    0 0 0 var(--raised-border-width) var(--neutral-a5),
+    0 var(--raised-shadow-offset-y) var(--raised-shadow-blur-small) var(--neutral-a7);
 
   :where(.dark, .dark-theme) &,
-  :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
+  :where(.dark, .dark-theme) :where(.kui-theme:not(.light, .light-theme)) & {
     /* prettier-ignore */
     box-shadow:
-      inset 0 var(--raised-border-width) var(--gray-a11),
+      inset 0 var(--raised-border-width) var(--neutral-a11),
       inset 0 calc(-1 * var(--raised-border-width)) var(--black-a11),
-      0 0 0 var(--raised-border-width-thick) var(--gray-a7),
+      0 0 0 var(--raised-border-width-thick) var(--neutral-a7),
       0 var(--raised-shadow-offset-y) var(--raised-shadow-blur-small) var(--black-a12);
   }
 
   &:where(:any-link, button) {
           @media (hover: hover) {
         &:where(:hover) {
-          background-color: var(--color-background);
+          background-color: var(--color-page);
           /* prettier-ignore */
           box-shadow:
-            0 var(--raised-shadow-offset-y) var(--raised-shadow-blur-small) var(--gray-a7),
-            0 0 0 var(--raised-border-width) var(--gray-a5);
+            0 var(--raised-shadow-offset-y) var(--raised-shadow-blur-small) var(--neutral-a7),
+            0 0 0 var(--raised-border-width) var(--neutral-a5);
 
           :where(.dark, .dark-theme) &,
-          :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
+          :where(.dark, .dark-theme) :where(.kui-theme:not(.light, .light-theme)) & {
             /* prettier-ignore */
             box-shadow:
-              0 0 0 var(--raised-border-width-thick) var(--gray-a7),
+              0 0 0 var(--raised-border-width-thick) var(--neutral-a7),
               0 var(--raised-shadow-offset-y) var(--raised-shadow-blur-small) var(--black-a12),
-              0 0 0 var(--raised-border-width) var(--gray-a5);
+              0 0 0 var(--raised-border-width) var(--neutral-a5);
           }
         }
       }
     &:where([data-state='open']) {
-      background-color: var(--color-background);
+      background-color: var(--color-page);
       /* prettier-ignore */
       box-shadow:
         inset 0 var(--raised-border-width) var(--white-a12),
-        0 0 0 var(--raised-border-width) var(--gray-a5),
-        0 var(--raised-shadow-offset-y) var(--raised-shadow-blur-small) var(--gray-a7);
+        0 0 0 var(--raised-border-width) var(--neutral-a5),
+        0 var(--raised-shadow-offset-y) var(--raised-shadow-blur-small) var(--neutral-a7);
 
       :where(.dark, .dark-theme) &,
-      :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
+      :where(.dark, .dark-theme) :where(.kui-theme:not(.light, .light-theme)) & {
         /* prettier-ignore */
         box-shadow:
-          inset 0 var(--raised-border-width) var(--gray-a11),
-          0 0 0 var(--raised-border-width-thick) var(--gray-a7),
+          inset 0 var(--raised-border-width) var(--neutral-a11),
+          0 0 0 var(--raised-border-width-thick) var(--neutral-a7),
           0 var(--raised-shadow-offset-y) var(--raised-shadow-blur-small) var(--black-a12);
       }
     }
     &:where(:active:not([data-state='open'])) {
       padding-top: var(--raised-border-width);
       padding-bottom: 0;
-      background-color: var(--gray-2);
-      box-shadow: inset 0 var(--raised-border-width) var(--black-a3), 0 0 0 var(--raised-border-width) var(--gray-a7);
+      background-color: var(--neutral-2);
+      box-shadow: inset 0 var(--raised-border-width) var(--black-a3), 0 0 0 var(--raised-border-width) var(--neutral-a7);
     }
     &:where(:focus-visible) {
       outline: 2px solid var(--focus-8);
@@ -107,20 +107,20 @@
   }
 }
 
-.rt-Kbd:where(.rt-variant-soft) {
-  background-color: var(--gray-a3);
+.kui-Kbd:where(.kui-variant-soft) {
+  background-color: var(--neutral-a3);
 
   &:where(:any-link, button) {
     @media (hover: hover) {
       &:where(:hover) {
-        background-color: var(--gray-a4);
+        background-color: var(--neutral-a4);
       }
     }
     &:where([data-state='open']) {
-      background-color: var(--gray-a4);
+      background-color: var(--neutral-a4);
     }
     &:where(:active:not([data-state='open'])) {
-      background-color: var(--gray-a5);
+      background-color: var(--neutral-a5);
     }
     &:where(:focus-visible) {
       outline: 2px solid var(--focus-8);
@@ -135,64 +135,64 @@
  ***************************************************************************************************/
 
 @breakpoints {
-  .rt-Kbd {
-    &:where(.rt-r-size-1) {
+  .kui-Kbd {
+    &:where(.kui-r-size-1) {
       font-size: var(--font-size-1);
       line-height: var(--line-height-1);
       letter-spacing: var(--letter-spacing-1);
       padding: var(--space-2) var(--space-3);
       border-radius: var(--radius-control-2);
     }
-    &:where(.rt-r-size-2) {
+    &:where(.kui-r-size-2) {
       font-size: var(--font-size-2);
       line-height: var(--line-height-2);
       letter-spacing: var(--letter-spacing-2);
       padding: var(--space-2) calc(var(--space-3) * 1.25);
       border-radius: var(--radius-control-2);
     }
-    &:where(.rt-r-size-3) {
+    &:where(.kui-r-size-3) {
       font-size: var(--font-size-3);
       line-height: var(--line-height-3);
       letter-spacing: var(--letter-spacing-3);
       padding: calc(var(--space-2) * 1.25) calc(var(--space-3) * 1.5);
       border-radius: var(--radius-control-3);
     }
-    &:where(.rt-r-size-4) {
+    &:where(.kui-r-size-4) {
       font-size: var(--font-size-4);
       line-height: var(--line-height-4);
       letter-spacing: var(--letter-spacing-4);
       padding: calc(var(--space-2) * 1.5) var(--space-4);
       border-radius: var(--radius-control-3);
     }
-    &:where(.rt-r-size-5) {
+    &:where(.kui-r-size-5) {
       font-size: var(--font-size-5);
       line-height: var(--line-height-5);
       letter-spacing: var(--letter-spacing-5);
       padding: calc(var(--space-2) * 1.75) calc(var(--space-4) * 1.25);
       border-radius: var(--radius-control-4);
     }
-    &:where(.rt-r-size-6) {
+    &:where(.kui-r-size-6) {
       font-size: var(--font-size-6);
       line-height: var(--line-height-6);
       letter-spacing: var(--letter-spacing-6);
       padding: var(--space-3) calc(var(--space-4) * 1.5);
       border-radius: var(--radius-control-4);
     }
-    &:where(.rt-r-size-7) {
+    &:where(.kui-r-size-7) {
       font-size: var(--font-size-7);
       line-height: var(--line-height-7);
       letter-spacing: var(--letter-spacing-7);
       padding: calc(var(--space-3) * 1.25) var(--space-5);
       border-radius: var(--radius-control-4);
     }
-    &:where(.rt-r-size-8) {
+    &:where(.kui-r-size-8) {
       font-size: var(--font-size-8);
       line-height: var(--line-height-8);
       letter-spacing: var(--letter-spacing-8);
       padding: calc(var(--space-3) * 1.5) calc(var(--space-5) * 1.25);
       border-radius: var(--radius-control-4);
     }
-    &:where(.rt-r-size-9) {
+    &:where(.kui-r-size-9) {
       font-size: var(--font-size-9);
       line-height: var(--line-height-9);
       letter-spacing: var(--letter-spacing-9);

package/src/components/kbd.props.tsx

@@ -9,13 +9,13 @@ const kbdPropDefs = {
   ...asChildPropDef,
   size: {
     type: 'enum',
-    className: 'rt-r-size',
+    className: 'kui-r-size',
     values: sizes,
     responsive: true,
   },
   variant: {
     type: 'enum',
-    className: 'rt-variant',
+    className: 'kui-variant',
     values: variants,
     default: 'raised',
   },

package/src/components/kbd.tsx

@@ -4,23 +4,21 @@ import { Slot } from 'radix-ui';
 
 import { kbdPropDefs } from './kbd.props.js';
 import { extractProps } from '../helpers/extract-props.js';
-import { marginPropDefs } from '../props/margin.props.js';
 
-import type { MarginProps } from '../props/margin.props.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 
 type KbdElement = React.ElementRef<'kbd'>;
 type KbdOwnProps = GetPropDefTypes<typeof kbdPropDefs>;
-interface KbdProps extends ComponentPropsWithout<'kbd', RemovedProps>, MarginProps, KbdOwnProps {}
+interface KbdProps extends ComponentPropsWithout<'kbd', RemovedProps>, KbdOwnProps {}
 const Kbd = React.forwardRef<KbdElement, KbdProps>((props, forwardedRef) => {
-  const { asChild, className, ...kbdProps } = extractProps(props, kbdPropDefs, marginPropDefs);
+  const { asChild, className, ...kbdProps } = extractProps(props, kbdPropDefs);
   const Comp = asChild ? Slot.Root : 'kbd';
   return (
     <Comp
       {...kbdProps}
       ref={forwardedRef}
-      className={classNames('rt-reset', 'rt-Kbd', className)}
+      className={classNames('kui-reset', 'kui-Kbd', className)}
     />
   );
 });

package/src/components/layout.css

@@ -1,5 +1,3 @@
 @import './box.css';
 @import './flex.css';
 @import './grid.css';
-@import './section.css';
-@import './container.css';

package/src/components/link.css

@@ -1,4 +1,4 @@
-.rt-Link {
+.kui-Link {
   /* Override the cursor on the HTML element even if rendering a <button> */
   /* stylelint-disable selector-max-type */
   &:where(:any-link, button) {
@@ -17,7 +17,7 @@
     outline-offset: 2px;
   }
 
-  :where([data-accent-color]:not(.radix-themes)) &:where([data-accent-color='']) {
+  :where([data-accent-color]:not(.kui-theme)) &:where([data-accent-color='']) {
     color: var(--accent-ink);
   }
 }
@@ -28,7 +28,7 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-Link {
+.kui-Link {
   &:where(:any-link, button) {
     text-decoration-line: none;
     text-decoration-style: solid;
@@ -38,7 +38,7 @@
 
     /* Enhancement for bright colors */
     @supports (color: color-mix(in oklab, white, black)) {
-      text-decoration-color: color-mix(in oklab, var(--accent-a5), var(--gray-a6));
+      text-decoration-color: color-mix(in oklab, var(--accent-a5), var(--neutral-a6));
     }
 
     @media (pointer: coarse) {
@@ -49,25 +49,25 @@
       }
     }
 
-    &:where(.rt-underline-auto) {
+    &:where(.kui-underline-auto) {
       @media (hover: hover) {
         &:where(:hover) {
           text-decoration-line: underline;
         }
       }
 
-      :where([data-accent-color]:not(.radix-themes)) &:where([data-accent-color='']) {
+      :where([data-accent-color]:not(.kui-theme)) &:where([data-accent-color='']) {
         text-decoration-line: underline;
         text-decoration-color: var(--accent-a6);
 
         /* Enhancement for bright colors */
         @supports (color: color-mix(in oklab, white, black)) {
-          text-decoration-color: color-mix(in oklab, var(--accent-a6), var(--gray-a6));
+          text-decoration-color: color-mix(in oklab, var(--accent-a6), var(--neutral-a6));
         }
       }
     }
 
-    &:where(.rt-underline-hover) {
+    &:where(.kui-underline-hover) {
       @media (hover: hover) {
         &:where(:hover) {
           text-decoration-line: underline;
@@ -75,7 +75,7 @@
       }
     }
 
-    &:where(.rt-underline-always) {
+    &:where(.kui-underline-always) {
       text-decoration-line: underline;
     }
   }
@@ -83,11 +83,11 @@
 
 /* all focused states underline */
 
-.rt-Link:where(:focus-visible) {
+.kui-Link:where(:focus-visible) {
   text-decoration-line: none;
 }
 
 /* Enhancement – hide underline for when Link's only child is a Code where underline is hard to see */
-.rt-Link:where(:has(.rt-Code:not(.rt-variant-ghost):only-child)) {
+.kui-Link:where(:has(.kui-Code:not(.kui-variant-ghost):only-child)) {
   text-decoration-color: transparent;
 }

package/src/components/link.props.tsx

@@ -14,7 +14,7 @@ const linkPropDefs = {
   ...asChildPropDef,
   size: {
     type: 'enum',
-    className: 'rt-r-size',
+    className: 'kui-r-size',
     values: sizes,
     responsive: true,
   },
@@ -22,7 +22,7 @@ const linkPropDefs = {
   ...leadingTrimPropDef,
   ...truncatePropDef,
   ...textWrapPropDef,
-  underline: { type: 'enum', className: 'rt-underline', values: underline, default: 'auto' },
+  underline: { type: 'enum', className: 'kui-underline', values: underline, default: 'auto' },
   ...accentColorPropDef,
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;

package/src/components/link.tsx

@@ -6,12 +6,11 @@ import { extractProps } from '../helpers/extract-props.js';
 import { linkPropDefs } from './link.props.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
-import type { MarginProps } from '../props/margin.props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 
 type LinkElement = React.ElementRef<'a'>;
 type LinkOwnProps = GetPropDefTypes<typeof linkPropDefs>;
-interface LinkProps extends ComponentPropsWithout<'a', RemovedProps>, MarginProps, LinkOwnProps {}
+interface LinkProps extends ComponentPropsWithout<'a', RemovedProps>, LinkOwnProps {}
 const Link = React.forwardRef<LinkElement, LinkProps>((props, forwardedRef) => {
   const { children, className, color, asChild, ...linkProps } = extractProps(props, linkPropDefs);
   return (
@@ -20,7 +19,7 @@ const Link = React.forwardRef<LinkElement, LinkProps>((props, forwardedRef) => {
       data-accent-color={color}
       ref={forwardedRef}
       asChild
-      className={classNames('rt-reset', 'rt-Link', className)}
+      className={classNames('kui-reset', 'kui-Link', className)}
     >
       {asChild ? (
         children

package/src/components/message-scroller.css

@@ -2,21 +2,21 @@
  * MessageScroller — the transcript's layout. The behaviour is shadcn/ui's primitive.
  */
 
-.rt-MessageScrollerRoot {
+.kui-MessageScrollerRoot {
   position: relative;
   display: flex;
   flex-direction: column;
   min-height: 0;
 }
 
-.rt-MessageScrollerViewport {
+.kui-MessageScrollerViewport {
   flex: 1 1 auto;
   min-height: 0;
   overflow-y: auto;
   overflow-x: hidden;
   overscroll-behavior: contain;
   scrollbar-width: thin;
-  scrollbar-color: var(--gray-a6) transparent;
+  scrollbar-color: var(--neutral-a6) transparent;
   outline: none;
 
   &:where(:focus-visible) {
@@ -25,20 +25,20 @@
   }
 }
 
-.rt-MessageScrollerContent {
+.kui-MessageScrollerContent {
   display: flex;
   flex-direction: column;
   min-height: 100%;
 }
 
-.rt-MessageScrollerItem {
+.kui-MessageScrollerItem {
   min-width: 0;
 }
 
 /* The jump button floats over the bottom edge of the viewport, centred by its margins, never by a
    transform: a button's own press and hover motion may use `translate`, and a centring transform
    would be replaced by it. */
-.rt-MessageScrollerButton {
+.kui-MessageScrollerButton {
   position: absolute;
   bottom: var(--space-4);
   left: 0;
@@ -48,7 +48,7 @@
 }
 
 /* Asleep while the reader is at the end: the primitive makes it inert; this makes it unseen. */
-.rt-MessageScrollerButton:where([data-active='false']) {
+.kui-MessageScrollerButton:where([data-active='false']) {
   opacity: 0;
   pointer-events: none;
 }

package/src/components/message-scroller.tsx

@@ -42,9 +42,9 @@ import {
 
 import { useComposedRefs } from 'radix-ui/internal';
 
-import { IconButton, type IconButtonProps } from './icon-button.js';
+import { Button as KuiButton } from './button.js';
 import { useScrollEdges } from '../hooks/use-scroll-edges.js';
-import type { ButtonRankProps } from './button.js';
+import type { ButtonProps as KuiButtonProps, ButtonRankProps } from './button.js';
 
 interface RootProps extends React.ComponentPropsWithoutRef<'div'> {
   /**
@@ -69,7 +69,7 @@ const Root = React.forwardRef<HTMLDivElement, RootProps>(
       {...(scrollEdgeThreshold != null ? { scrollEdgeThreshold } : {})}
       {...(scrollMargin != null ? { scrollMargin } : {})}
     >
-      <Primitive.Root {...props} ref={forwardedRef} className={classNames('rt-MessageScrollerRoot', className)}>
+      <Primitive.Root {...props} ref={forwardedRef} className={classNames('kui-MessageScrollerRoot', className)}>
         {children}
       </Primitive.Root>
     </Primitive.Provider>
@@ -102,7 +102,7 @@ const Viewport = React.forwardRef<HTMLDivElement, ViewportProps>(({ className, '
       {...props}
       ref={ref}
       data-fade={fade ? '' : undefined}
-      className={classNames('rt-MessageScrollerViewport', className)}
+      className={classNames('kui-MessageScrollerViewport', className)}
     />
   );
 });
@@ -112,7 +112,7 @@ type ContentProps = React.ComponentPropsWithoutRef<'div'>;
 
 /** The list of messages, inside the viewport. */
 const Content = React.forwardRef<HTMLDivElement, ContentProps>(({ className, ...props }, forwardedRef) => (
-  <Primitive.Content {...props} ref={forwardedRef} className={classNames('rt-MessageScrollerContent', className)} />
+  <Primitive.Content {...props} ref={forwardedRef} className={classNames('kui-MessageScrollerContent', className)} />
 ));
 Content.displayName = 'MessageScroller.Content';
 
@@ -125,11 +125,11 @@ interface ItemProps extends React.ComponentPropsWithoutRef<'div'> {
 
 /** One row of the transcript. */
 const Item = React.forwardRef<HTMLDivElement, ItemProps>(({ className, ...props }, forwardedRef) => (
-  <Primitive.Item {...props} ref={forwardedRef} className={classNames('rt-MessageScrollerItem', className)} />
+  <Primitive.Item {...props} ref={forwardedRef} className={classNames('kui-MessageScrollerItem', className)} />
 ));
 Item.displayName = 'MessageScroller.Item';
 
-type ButtonProps = Omit<IconButtonProps, 'aria-label' | 'aria-labelledby' | 'variant' | 'emphasis'> &
+type ButtonProps = Omit<KuiButtonProps, 'aria-label' | 'aria-labelledby' | 'variant' | 'emphasis' | 'iconOnly' | 'fullWidth'> &
   ButtonRankProps & {
   /** Accessible name, in your words. Default "Jump to the latest". */
   'aria-label'?: string;
@@ -149,7 +149,8 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       direction={direction}
       {...(behavior ? { behavior } : {})}
       render={
-        <IconButton
+        <KuiButton
+          iconOnly
           {...props}
           ref={forwardedRef}
           size={size}
@@ -157,7 +158,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
           color={color}
           radius={radius}
           aria-label={label ?? (direction === 'end' ? 'Jump to the latest' : 'Jump to the first')}
-          className={classNames('rt-MessageScrollerButton', className)}
+          className={classNames('kui-MessageScrollerButton', className)}
           data-direction={direction}
         >
           {children ?? (
@@ -165,7 +166,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
               <path d="M7.5 2.5v10M3.5 8.5l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
             </svg>
           )}
-        </IconButton>
+        </KuiButton>
       }
     />
   ),