@womp/kookie-ui 0.21.0 → 0.22.0

package/src/components/combobox.css

@@ -9,7 +9,7 @@
 /* The surface renders Radix Popover content directly with the BaseMenu classes
  * only, so these are the popover behaviours it still needs. Padding lives on
  * the search row and the viewport. */
-.rt-ComboboxContent {
+.kui-ComboboxContent {
   --combobox-list-max-height: calc(300px * var(--scale));
 
   min-width: var(--radix-popover-trigger-width);
@@ -20,13 +20,13 @@
 
 /* forceMount keeps closed content in the DOM (and its positioning and dismiss
  * listeners running); hide it while closed. */
-.rt-ComboboxContent:where([data-state='closed']) {
+.kui-ComboboxContent:where([data-state='closed']) {
   visibility: hidden;
   position: absolute;
   pointer-events: none;
 }
 
-.rt-ComboboxCommand {
+.kui-ComboboxCommand {
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -34,44 +34,44 @@
   outline: 0;
 }
 
-.rt-ComboboxViewport {
+.kui-ComboboxViewport {
   padding-top: 0;
-  /* The outer .rt-ComboboxScrollArea is the only scroller. */
+  /* The outer .kui-ComboboxScrollArea is the only scroller. */
   overflow: visible;
 }
 
 /* The search row owns the top padding, so without it the viewport needs it back. */
-:where(.rt-ComboboxCommand:not(:has(.rt-ComboboxSearch))) .rt-ComboboxViewport {
+:where(.kui-ComboboxCommand:not(:has(.kui-ComboboxSearch))) .kui-ComboboxViewport {
   padding-top: var(--base-menu-content-padding);
 }
 
-.rt-ComboboxScrollArea {
+.kui-ComboboxScrollArea {
   flex: 1;
   min-height: 0;
   overflow: auto;
   overscroll-behavior: contain;
   max-height: var(--combobox-list-max-height);
   scrollbar-width: thin;
-  scrollbar-color: var(--gray-a8) transparent;
+  scrollbar-color: var(--neutral-a8) transparent;
 }
 
-.rt-ComboboxList {
+.kui-ComboboxList {
   outline: 0;
 }
 
 /* cmdk sets data-disabled="false" on enabled items, and base-menu.css styles any
  * [data-disabled] as disabled. Restore the enabled look. */
-.rt-ComboboxItem:where([data-disabled='false']) {
+.kui-ComboboxItem:where([data-disabled='false']) {
   color: inherit;
   cursor: var(--cursor-menu-item);
 }
 
 /* Search row: shares the surface background, no second panel */
-.rt-ComboboxSearch {
+.kui-ComboboxSearch {
   padding: var(--base-menu-content-padding);
 }
 
-.rt-ComboboxSearch :where(.rt-ComboboxInputRoot) {
+.kui-ComboboxSearch :where(.kui-ComboboxInputRoot) {
   width: 100%;
 }
 
@@ -81,12 +81,12 @@
  */
 
 /* Soft variant */
-.rt-BaseMenuContent:where(.rt-variant-soft) :where(.rt-ComboboxItem[data-selected='true']) {
+.kui-BaseMenuContent:where(.kui-variant-soft) :where(.kui-ComboboxItem[data-selected='true']) {
   background-color: var(--accent-4);
 }
 
-:where(.rt-BaseMenuContent.rt-variant-soft) .rt-ComboboxItem:where([data-selected='true']) :where(.rt-Text.rt-emphasis-medium:where(:not([data-accent-color]), [data-accent-color='gray'])) {
-  color: var(--gray-11);
+:where(.kui-BaseMenuContent.kui-variant-soft) .kui-ComboboxItem:where([data-selected='true']) :where(.kui-Text.kui-emphasis-medium:where(:not([data-accent-color]), [data-accent-color='gray'])) {
+  color: var(--neutral-11);
 }
 
 /* =============================================================================
@@ -94,23 +94,23 @@
  * =============================================================================
  */
 
-.rt-ComboboxItem:where([data-disabled='true']) {
-  color: var(--gray-a8);
+.kui-ComboboxItem:where([data-disabled='true']) {
+  color: var(--neutral-a8);
   cursor: default;
   pointer-events: none;
 }
 
 /* Empty state */
-.rt-ComboboxEmpty {
+.kui-ComboboxEmpty {
   padding: var(--space-5);
   text-align: center;
-  color: var(--gray-a11);
+  color: var(--neutral-a11);
   font-size: var(--font-size-2);
 }
 
 /* Items never take DOM focus, so the base menu :focus-visible rule never matches. */
 @media (forced-colors: active) {
-  .rt-ComboboxItem:where([data-selected='true']) {
+  .kui-ComboboxItem:where([data-selected='true']) {
     outline: 2px solid Highlight;
     outline-offset: -2px;
   }
@@ -118,13 +118,13 @@
 
 /* The highlight is solid when the system asks for more contrast. Gray fills with step 12. */
 @media (prefers-contrast: more) {
-  .rt-BaseMenuContent:where(.rt-variant-soft) :where(.rt-ComboboxItem[data-selected='true']) {
+  .kui-BaseMenuContent:where(.kui-variant-soft) :where(.kui-ComboboxItem[data-selected='true']) {
     background-color: var(--accent-solid);
     color: var(--accent-solid-contrast);
   }
 
   /* Muted text follows the highlight colour. Chips keep their own colours. */
-  :where(.rt-BaseMenuContent.rt-variant-soft) .rt-ComboboxItem:where([data-selected='true']) :where(.rt-Text, [data-accent-color='gray']:not(.rt-Chip)) {
+  :where(.kui-BaseMenuContent.kui-variant-soft) .kui-ComboboxItem:where([data-selected='true']) :where(.kui-Text, [data-accent-color='gray']:not(.kui-Chip)) {
     color: inherit;
   }
 }

package/src/components/combobox.props.tsx

@@ -11,7 +11,7 @@ const sizes = ['1', '2', '3', '4'] as const;
  * Shared responsive sizing inherited by Combobox.Root.
  */
 const comboboxRootPropDefs = {
-  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
+  size: { type: 'enum', className: 'kui-r-size', values: sizes, default: '2', responsive: true },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
 };
@@ -22,7 +22,7 @@ const triggerVariants = ['raised', 'surface', 'soft', 'outline', 'ghost'] as con
  * Token-aware props specific to Combobox.Trigger.
  */
 const comboboxTriggerPropDefs = {
-  variant: { type: 'enum', className: 'rt-variant', values: triggerVariants, default: 'raised' },
+  variant: { type: 'enum', className: 'kui-variant', values: triggerVariants, default: 'raised' },
   error: { type: 'boolean' },
   loading: { type: 'boolean' },
   disabled: { type: 'boolean' },
@@ -41,14 +41,14 @@ const comboboxTriggerPropDefs = {
   placeholder: PropDef<string>;
 };
 
-// The list is a menu, and menus stop at size 3.
+// The list takes sizes 1 to 4, like every menu.
 const contentSizes = ['1', '2', '3', '4'] as const;
 
 /**
  * Styling props for the dropdown surface rendered by Combobox.Content.
  */
 const comboboxContentPropDefs = {
-  size: { type: 'enum', className: 'rt-r-size', values: contentSizes, default: '2', responsive: true },
+  size: { type: 'enum', className: 'kui-r-size', values: contentSizes, default: '2', responsive: true },
   ...colorPropDef,
   width: widthPropDefs.width,
   minWidth: widthPropDefs.minWidth,

package/src/components/combobox.tsx

@@ -373,11 +373,11 @@ const ComboboxTrigger = React.forwardRef<ComboboxTriggerElement, ComboboxTrigger
 
   const defaultContent = (
     <>
-      <span className="rt-SelectTriggerInner">
-        <span className="rt-ComboboxValue">{ctx.displayValue ?? ctx.value ?? placeholder ?? ctx.placeholder}</span>
+      <span className="kui-SelectTriggerInner">
+        <span className="kui-ComboboxValue">{ctx.displayValue ?? ctx.value ?? placeholder ?? ctx.placeholder}</span>
       </span>
       {loading ? (
-        <div className="rt-SelectIcon rt-SelectLoadingIcon" aria-hidden="true">
+        <div className="kui-SelectIcon kui-SelectLoadingIcon" aria-hidden="true">
           <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
             <circle
               cx="8"
@@ -388,12 +388,12 @@ const ComboboxTrigger = React.forwardRef<ComboboxTriggerElement, ComboboxTrigger
               strokeLinecap="round"
               strokeDasharray="32"
               strokeDashoffset="32"
-              className="rt-SelectLoadingIconCircle"
+              className="kui-SelectLoadingIconCircle"
             />
           </svg>
         </div>
       ) : (
-        <ChevronDownIcon className="rt-SelectIcon" />
+        <ChevronDownIcon className="kui-SelectIcon" />
       )}
     </>
   );
@@ -422,7 +422,7 @@ const ComboboxTrigger = React.forwardRef<ComboboxTriggerElement, ComboboxTrigger
         onClick={handleClick}
         onKeyDown={handleKeyDown}
         ref={composedRef}
-        className={classNames('rt-reset', 'rt-SelectTrigger', 'rt-ComboboxTrigger', className)}
+        className={classNames('kui-reset', 'kui-SelectTrigger', 'kui-ComboboxTrigger', className)}
       >
         {children ? requireReactElement(children) : defaultContent}
       </button>
@@ -444,7 +444,7 @@ const ComboboxValue = React.forwardRef<ComboboxValueElement, ComboboxValueProps>
   const ctx = useComboboxContext('Value');
   const display = ctx.displayValue ?? ctx.value ?? undefined;
   return (
-    <span {...valueProps} ref={forwardedRef} className={classNames('rt-ComboboxValue', className)}>
+    <span {...valueProps} ref={forwardedRef} className={classNames('kui-ComboboxValue', className)}>
       {display ?? children ?? placeholder ?? ctx.placeholder}
     </span>
   );
@@ -484,9 +484,8 @@ const ComboboxContent = React.forwardRef<ComboboxContentElement, ComboboxContent
   const ctx = useComboboxContext('Content');
   const themeContext = useThemeContext();
 
-  // Menus stop at size 3; a size 4 field opens a size 3 list.
-  const rootSize = ctx.size === '4' ? '3' : ctx.size;
-  const size = props.size ?? rootSize ?? comboboxContentPropDefs.size.default;
+  // The list takes the field's size.
+  const size = props.size ?? ctx.size ?? comboboxContentPropDefs.size.default;
 
   const {
     className,
@@ -557,8 +556,8 @@ const ComboboxContent = React.forwardRef<ComboboxContentElement, ComboboxContent
           forceMount={forceMount ? true : undefined}
           onOpenAutoFocus={handleOpenAutoFocus}
           ref={forwardedRef}
-          className={classNames('rt-PopperContent', 'rt-BaseMenuContent',
-          'rt-variant-soft', 'rt-ComboboxContent', className)}
+          className={classNames('kui-PopperContent', 'kui-BaseMenuContent',
+          'kui-variant-soft', 'kui-ComboboxContent', className)}
         >
           <ComboboxContentContext.Provider value={contentContextValue}>
             <CommandPrimitive
@@ -568,7 +567,7 @@ const ComboboxContent = React.forwardRef<ComboboxContentElement, ComboboxContent
               filter={ctx.filter}
               label={label}
               defaultValue={initialHighlight}
-              className="rt-ComboboxCommand"
+              className="kui-ComboboxCommand"
             >
               {children}
               <ComboboxAnnouncer />
@@ -608,27 +607,27 @@ const ComboboxInput = React.forwardRef<ComboboxInputElement, ComboboxInputProps>
 
     const inputField = (
       <div
-        className={classNames('rt-TextFieldRoot', 'rt-ComboboxInputRoot', contentContext?.sizeClassName, `rt-variant-${textFieldVariant}`)}
+        className={classNames('kui-TextFieldRoot', 'kui-ComboboxInputRoot', contentContext?.sizeClassName, `kui-variant-${textFieldVariant}`)}
         data-accent-color={contentContext?.color}
       >
-        {startAdornment ? <div className="rt-TextFieldSlot">{startAdornment}</div> : null}
+        {startAdornment ? <div className="kui-TextFieldSlot">{startAdornment}</div> : null}
         <CommandPrimitive.Input
           {...inputProps}
           ref={forwardedRef}
           value={searchValue}
           onValueChange={handleSearchChange}
           placeholder={placeholder ?? ctx.searchPlaceholder}
-          className={classNames('rt-reset', 'rt-TextFieldInput', className)}
+          className={classNames('kui-reset', 'kui-TextFieldInput', className)}
         />
         {endAdornment ? (
-          <div className="rt-TextFieldSlot" data-side="right">
+          <div className="kui-TextFieldSlot" data-side="right">
             {endAdornment}
           </div>
         ) : null}
       </div>
     );
 
-    return contentContext ? <div className="rt-ComboboxSearch">{inputField}</div> : inputField;
+    return contentContext ? <div className="kui-ComboboxSearch">{inputField}</div> : inputField;
   },
 );
 ComboboxInput.displayName = 'Combobox.Input';
@@ -645,9 +644,9 @@ interface ComboboxListProps extends React.ComponentPropsWithoutRef<typeof Comman
 const ComboboxList = React.forwardRef<ComboboxListElement, ComboboxListProps>(({ className, children, label, ...listProps }, forwardedRef) => {
   const contentContext = useComboboxContentContext();
   return (
-    <div className="rt-ComboboxScrollArea">
-      <div className={classNames('rt-BaseMenuViewport', 'rt-ComboboxViewport')}>
-        <CommandPrimitive.List {...listProps} label={label ?? contentContext?.label} ref={forwardedRef} className={classNames('rt-ComboboxList', className)}>
+    <div className="kui-ComboboxScrollArea">
+      <div className={classNames('kui-BaseMenuViewport', 'kui-ComboboxViewport')}>
+        <CommandPrimitive.List {...listProps} label={label ?? contentContext?.label} ref={forwardedRef} className={classNames('kui-ComboboxList', className)}>
           {children}
         </CommandPrimitive.List>
       </div>
@@ -664,7 +663,7 @@ type ComboboxEmptyElement = React.ElementRef<typeof CommandPrimitive.Empty>;
 interface ComboboxEmptyProps extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty> {}
 
 const ComboboxEmpty = React.forwardRef<ComboboxEmptyElement, ComboboxEmptyProps>(({ className, ...emptyProps }, forwardedRef) => (
-  <CommandPrimitive.Empty {...emptyProps} ref={forwardedRef} className={classNames('rt-ComboboxEmpty', className)} />
+  <CommandPrimitive.Empty {...emptyProps} ref={forwardedRef} className={classNames('kui-ComboboxEmpty', className)} />
 ));
 ComboboxEmpty.displayName = 'Combobox.Empty';
 
@@ -676,7 +675,7 @@ type ComboboxGroupElement = React.ElementRef<typeof CommandPrimitive.Group>;
 interface ComboboxGroupProps extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group> {}
 
 const ComboboxGroup = React.forwardRef<ComboboxGroupElement, ComboboxGroupProps>(({ className, ...groupProps }, forwardedRef) => (
-  <CommandPrimitive.Group {...groupProps} ref={forwardedRef} className={classNames('rt-BaseMenuGroup', 'rt-ComboboxGroup', className)} />
+  <CommandPrimitive.Group {...groupProps} ref={forwardedRef} className={classNames('kui-BaseMenuGroup', 'kui-ComboboxGroup', className)} />
 ));
 ComboboxGroup.displayName = 'Combobox.Group';
 
@@ -704,7 +703,7 @@ const ComboboxLabel = React.forwardRef<ComboboxLabelElement, ComboboxLabelProps>
     };
   }, [id]);
 
-  return <div {...labelProps} id={id} ref={composedRef} className={classNames('rt-BaseMenuLabel', 'rt-ComboboxLabel', className)} />;
+  return <div {...labelProps} id={id} ref={composedRef} className={classNames('kui-BaseMenuLabel', 'kui-ComboboxLabel', className)} />;
 });
 ComboboxLabel.displayName = 'Combobox.Label';
 
@@ -716,7 +715,7 @@ type ComboboxSeparatorElement = React.ElementRef<typeof CommandPrimitive.Separat
 interface ComboboxSeparatorProps extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator> {}
 
 const ComboboxSeparator = React.forwardRef<ComboboxSeparatorElement, ComboboxSeparatorProps>(({ className, ...separatorProps }, forwardedRef) => (
-  <CommandPrimitive.Separator {...separatorProps} ref={forwardedRef} className={classNames('rt-BaseMenuSeparator', 'rt-ComboboxSeparator', className)} />
+  <CommandPrimitive.Separator {...separatorProps} ref={forwardedRef} className={classNames('kui-BaseMenuSeparator', 'kui-ComboboxSeparator', className)} />
 ));
 ComboboxSeparator.displayName = 'Combobox.Separator';
 
@@ -790,11 +789,11 @@ const ComboboxItem = React.forwardRef<ComboboxItemElement, ComboboxItemProps>(
         disabled={isDisabled || undefined}
         ref={forwardedRef}
         onSelect={handleSelect}
-        className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-ComboboxItem', className)}
+        className={classNames('kui-reset', 'kui-BaseMenuItem', 'kui-ComboboxItem', className)}
       >
         {isSelected ? (
-          <span className={classNames('rt-BaseMenuItemIndicator', 'rt-ComboboxItemIndicator')}>
-            <ThickCheckIcon className={classNames('rt-BaseMenuItemIndicatorIcon', 'rt-ComboboxItemIndicatorIcon')} />
+          <span className={classNames('kui-BaseMenuItemIndicator', 'kui-ComboboxItemIndicator')}>
+            <ThickCheckIcon className={classNames('kui-BaseMenuItemIndicatorIcon', 'kui-ComboboxItemIndicatorIcon')} />
           </span>
         ) : null}
         <Slottable>{children}</Slottable>

package/src/components/context-menu.css

@@ -1,6 +1,6 @@
 @import './_internal/base-menu.css';
 
-.rt-ContextMenuContent {
+.kui-ContextMenuContent {
   max-height: var(--radix-context-menu-content-available-height);
   transform-origin: var(--radix-context-menu-content-transform-origin);
 }

package/src/components/context-menu.tsx

@@ -119,20 +119,20 @@ const ContextMenuContent = React.forwardRef<ContextMenuContentElement, ContextMe
             asChild={false}
             ref={forwardedRef}
             className={classNames(
-              'rt-PopperContent',
-              'rt-BaseMenuContent',
-          'rt-variant-soft',
-              'rt-ContextMenuContent',
+              'kui-PopperContent',
+              'kui-BaseMenuContent',
+          'kui-variant-soft',
+              'kui-ContextMenuContent',
               className,
             )}
           >
             {virtualized ? (
-              <div className={classNames('rt-BaseMenuViewport', 'rt-ContextMenuViewport', 'rt-virtualized')}>
+              <div className={classNames('kui-BaseMenuViewport', 'kui-ContextMenuViewport', 'kui-virtualized')}>
                 {body}
               </div>
             ) : (
               <ScrollArea type="auto" scrollbars="vertical">
-                <div className={classNames('rt-BaseMenuViewport', 'rt-ContextMenuViewport')}>{body}</div>
+                <div className={classNames('kui-BaseMenuViewport', 'kui-ContextMenuViewport')}>{body}</div>
               </ScrollArea>
             )}
           </ContextMenuPrimitive.Content>
@@ -152,7 +152,7 @@ const ContextMenuLabel = React.forwardRef<ContextMenuLabelElement, ContextMenuLa
       {...props}
       asChild={false}
       ref={forwardedRef}
-      className={classNames('rt-BaseMenuLabel', 'rt-ContextMenuLabel', className)}
+      className={classNames('kui-BaseMenuLabel', 'kui-ContextMenuLabel', className)}
     />
   ),
 );
@@ -178,10 +178,10 @@ const ContextMenuItem = React.forwardRef<ContextMenuItemElement, ContextMenuItem
         aria-keyshortcuts={shortcut ? toAriaKeyShortcuts(shortcut) : undefined}
         {...itemProps}
         ref={forwardedRef}
-        className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-ContextMenuItem', className)}
+        className={classNames('kui-reset', 'kui-BaseMenuItem', 'kui-ContextMenuItem', className)}
       >
         <Slot.Slottable>{children}</Slot.Slottable>
-        {shortcut && <MenuShortcut shortcut={shortcut} className="rt-ContextMenuShortcut" />}
+        {shortcut && <MenuShortcut shortcut={shortcut} className="kui-ContextMenuShortcut" />}
       </ContextMenuPrimitive.Item>
     );
   },
@@ -197,7 +197,7 @@ const ContextMenuGroup = React.forwardRef<ContextMenuGroupElement, ContextMenuGr
       {...props}
       asChild={false}
       ref={forwardedRef}
-      className={classNames('rt-BaseMenuGroup', 'rt-ContextMenuGroup', className)}
+      className={classNames('kui-BaseMenuGroup', 'kui-ContextMenuGroup', className)}
     />
   ),
 );
@@ -214,7 +214,7 @@ const ContextMenuRadioGroup = React.forwardRef<
     {...props}
     asChild={false}
     ref={forwardedRef}
-    className={classNames('rt-BaseMenuRadioGroup', 'rt-ContextMenuRadioGroup', className)}
+    className={classNames('kui-BaseMenuRadioGroup', 'kui-ContextMenuRadioGroup', className)}
   />
 ));
 ContextMenuRadioGroup.displayName = 'ContextMenu.RadioGroup';
@@ -241,16 +241,16 @@ const ContextMenuRadioItem = React.forwardRef<
       ref={forwardedRef}
       data-accent-color={color}
       className={classNames(
-        'rt-BaseMenuItem',
-        'rt-BaseMenuRadioItem',
-        'rt-ContextMenuItem',
-        'rt-ContextMenuRadioItem',
+        'kui-BaseMenuItem',
+        'kui-BaseMenuRadioItem',
+        'kui-ContextMenuItem',
+        'kui-ContextMenuRadioItem',
         className,
       )}
     >
       <Slot.Slottable>{children}</Slot.Slottable>
-      <ContextMenuPrimitive.ItemIndicator className="rt-BaseMenuItemIndicator rt-ContextMenuItemIndicator">
-        <ThickDotIcon className="rt-BaseMenuItemIndicatorIcon rt-ContextMenuItemIndicatorIcon" />
+      <ContextMenuPrimitive.ItemIndicator className="kui-BaseMenuItemIndicator kui-ContextMenuItemIndicator">
+        <ThickDotIcon className="kui-BaseMenuItemIndicatorIcon kui-ContextMenuItemIndicatorIcon" />
       </ContextMenuPrimitive.ItemIndicator>
     </ContextMenuPrimitive.RadioItem>
   );
@@ -281,18 +281,18 @@ const ContextMenuCheckboxItem = React.forwardRef<
       ref={forwardedRef}
       data-accent-color={color}
       className={classNames(
-        'rt-BaseMenuItem',
-        'rt-BaseMenuCheckboxItem',
-        'rt-ContextMenuItem',
-        'rt-ContextMenuCheckboxItem',
+        'kui-BaseMenuItem',
+        'kui-BaseMenuCheckboxItem',
+        'kui-ContextMenuItem',
+        'kui-ContextMenuCheckboxItem',
         className,
       )}
     >
       <Slot.Slottable>{children}</Slot.Slottable>
-      <ContextMenuPrimitive.ItemIndicator className="rt-BaseMenuItemIndicator rt-ContextMenuItemIndicator">
-        <ThickCheckIcon className="rt-BaseMenuItemIndicatorIcon rt-ContextMenuItemIndicatorIcon" />
+      <ContextMenuPrimitive.ItemIndicator className="kui-BaseMenuItemIndicator kui-ContextMenuItemIndicator">
+        <ThickCheckIcon className="kui-BaseMenuItemIndicatorIcon kui-ContextMenuItemIndicatorIcon" />
       </ContextMenuPrimitive.ItemIndicator>
-      {shortcut && <MenuShortcut shortcut={shortcut} className="rt-ContextMenuShortcut" />}
+      {shortcut && <MenuShortcut shortcut={shortcut} className="kui-ContextMenuShortcut" />}
     </ContextMenuPrimitive.CheckboxItem>
   );
 });
@@ -319,16 +319,16 @@ const ContextMenuSubTrigger = React.forwardRef<
       asChild={false}
       ref={forwardedRef}
       className={classNames(
-        'rt-BaseMenuItem',
-        'rt-BaseMenuSubTrigger',
-        'rt-ContextMenuItem',
-        'rt-ContextMenuSubTrigger',
+        'kui-BaseMenuItem',
+        'kui-BaseMenuSubTrigger',
+        'kui-ContextMenuItem',
+        'kui-ContextMenuSubTrigger',
         className,
       )}
     >
       {children}
-      <div className="rt-BaseMenuShortcut rt-ContextMenuShortcut">
-        <ThickChevronRightIcon className="rt-BaseMenuSubTriggerIcon rt-ContextMenuSubTriggerIcon" />
+      <div className="kui-BaseMenuShortcut kui-ContextMenuShortcut">
+        <ThickChevronRightIcon className="kui-BaseMenuSubTriggerIcon kui-ContextMenuSubTriggerIcon" />
       </div>
     </ContextMenuPrimitive.SubTrigger>
   );
@@ -391,22 +391,22 @@ const ContextMenuSubContent = React.forwardRef<
           asChild={false}
           ref={forwardedRef}
           className={classNames(
-            'rt-PopperContent',
-            'rt-BaseMenuContent',
-          'rt-variant-soft',
-            'rt-BaseMenuSubContent',
-            'rt-ContextMenuContent',
-            'rt-ContextMenuSubContent',
+            'kui-PopperContent',
+            'kui-BaseMenuContent',
+          'kui-variant-soft',
+            'kui-BaseMenuSubContent',
+            'kui-ContextMenuContent',
+            'kui-ContextMenuSubContent',
             className,
           )}
         >
           {virtualized ? (
-            <div className={classNames('rt-BaseMenuViewport', 'rt-ContextMenuViewport', 'rt-virtualized')}>
+            <div className={classNames('kui-BaseMenuViewport', 'kui-ContextMenuViewport', 'kui-virtualized')}>
               {body}
             </div>
           ) : (
             <ScrollArea type="auto" scrollbars="vertical">
-              <div className={classNames('rt-BaseMenuViewport', 'rt-ContextMenuViewport')}>{body}</div>
+              <div className={classNames('kui-BaseMenuViewport', 'kui-ContextMenuViewport')}>{body}</div>
             </ScrollArea>
           )}
         </ContextMenuPrimitive.SubContent>
@@ -427,7 +427,7 @@ const ContextMenuSeparator = React.forwardRef<
     {...props}
     asChild={false}
     ref={forwardedRef}
-    className={classNames('rt-BaseMenuSeparator', 'rt-ContextMenuSeparator', className)}
+    className={classNames('kui-BaseMenuSeparator', 'kui-ContextMenuSeparator', className)}
   />
 ));
 ContextMenuSeparator.displayName = 'ContextMenu.Separator';

package/src/components/dialog.css

@@ -1,5 +1,5 @@
 @import './_internal/base-dialog.css';
 
-.rt-DialogContent {
+.kui-DialogContent {
   max-width: var(--overlay-w);
 }

package/src/components/dialog.props.tsx

@@ -12,13 +12,13 @@ const dialogContentPropDefs = {
   ...asChildPropDef,
   align: {
     type: 'enum',
-    className: 'rt-r-align',
+    className: 'kui-r-align',
     values: ['start', 'center'],
     default: 'center',
   },
   size: {
     type: 'enum',
-    className: 'rt-r-size',
+    className: 'kui-r-size',
     values: contentSizes,
     default: '2',
     responsive: true,

package/src/components/dialog.tsx

@@ -124,15 +124,15 @@ const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>
     return (
       <DialogPrimitive.Portal container={container} forceMount={forceMount}>
         <Theme asChild>
-          <DialogPrimitive.Overlay className="rt-BaseDialogOverlay rt-DialogOverlay">
-            <div className="rt-BaseDialogScroll rt-DialogScroll">
+          <DialogPrimitive.Overlay className="kui-BaseDialogOverlay kui-DialogOverlay">
+            <div className="kui-BaseDialogScroll kui-DialogScroll">
               <div
-                className={`rt-BaseDialogScrollPadding rt-DialogScrollPadding ${alignClassName}`}
+                className={`kui-BaseDialogScrollPadding kui-DialogScrollPadding ${alignClassName}`}
               >
                 <DialogPrimitive.Content
                   {...contentProps}
                   ref={combinedRef}
-                  className={classNames('rt-BaseDialogContent', 'rt-DialogContent', className)}
+                  className={classNames('kui-BaseDialogContent', 'kui-DialogContent', className)}
                   tabIndex={-1}
                   role="dialog"
                   aria-modal="true"
@@ -147,7 +147,7 @@ const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>
                 <div
                   aria-live="polite"
                   aria-atomic="true"
-                  className="rt-sr-only"
+                  className="kui-sr-only"
                   id="dialog-announcement"
                 />
               </div>