@womp/kookie-ui 0.21.0 → 0.22.0

package/src/components/text.css

@@ -1,16 +1,16 @@
-.rt-Text {
+.kui-Text {
   font-family: var(--default-font-family);
   line-height: var(--line-height, var(--default-line-height));
   letter-spacing: var(--letter-spacing, inherit);
 
   /* `font` prop — all three resolve through the same tier-1 stacks. */
-  &:where(.rt-r-ff-sans) {
+  &:where(.kui-r-ff-sans) {
     font-family: var(--font-sans);
   }
-  &:where(.rt-r-ff-mono) {
+  &:where(.kui-r-ff-mono) {
     font-family: var(--font-mono);
   }
-  &:where(.rt-r-ff-serif) {
+  &:where(.kui-r-ff-serif) {
     font-family: var(--font-serif);
   }
 
@@ -19,22 +19,22 @@
   }
 
   /* Emphasis ladder. No colour and no emphasis sets nothing, so the colour is inherited. */
-  &:where(.rt-emphasis-loud) {
-    color: var(--gray-ink);
+  &:where(.kui-emphasis-loud) {
+    color: var(--neutral-ink);
   }
-  &:where(.rt-emphasis-medium) {
-    color: var(--gray-ink-muted);
+  &:where(.kui-emphasis-medium) {
+    color: var(--neutral-ink-muted);
   }
-  &:where(.rt-emphasis-quiet) {
-    color: var(--gray-ink-faint);
+  &:where(.kui-emphasis-quiet) {
+    color: var(--neutral-ink-faint);
   }
   &:where([data-accent-color]) {
     color: var(--accent-ink);
   }
-  &:where([data-accent-color].rt-emphasis-medium) {
+  &:where([data-accent-color].kui-emphasis-medium) {
     color: var(--accent-ink-muted);
   }
-  &:where([data-accent-color].rt-emphasis-quiet) {
+  &:where([data-accent-color].kui-emphasis-quiet) {
     color: var(--accent-ink-faint);
   }
 
@@ -44,7 +44,7 @@
     @media (pointer: coarse) {
       -webkit-tap-highlight-color: transparent;
       &:where(:active) {
-        outline: 0.75em solid var(--gray-a4);
+        outline: 0.75em solid var(--neutral-a4);
         outline-offset: -0.6em;
       }
     }
@@ -58,48 +58,48 @@
  ***************************************************************************************************/
 
 @breakpoints {
-  .rt-Text {
-    &:where(.rt-r-size-1) {
+  .kui-Text {
+    &:where(.kui-r-size-1) {
       font-size: var(--font-size-1);
       --line-height: var(--line-height-1);
       --letter-spacing: var(--letter-spacing-1);
     }
-    &: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);
     }
-    &: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);
     }
-    &: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);
     }
-    &: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);
     }
-    &: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);
     }
-    &: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);
     }
-    &: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);
     }
-    &: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/text.props.tsx

@@ -18,7 +18,7 @@ const textPropDefs = {
   ...asChildPropDef,
   size: {
     type: 'enum',
-    className: 'rt-r-size',
+    className: 'kui-r-size',
     values: sizes,
     responsive: true,
   },

package/src/components/text.tsx

@@ -29,7 +29,7 @@ const Text = React.memo(
       ...textProps
     } = extractProps(props, textPropDefs);
 
-    const combinedClassName = className ? `rt-Text ${className}` : 'rt-Text';
+    const combinedClassName = className ? `kui-Text ${className}` : 'kui-Text';
 
     if (asChild) {
       return (

package/src/components/theme.tsx

@@ -264,7 +264,7 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
           ref={composedRef}
           {...themeProps}
           className={classNames(
-            'radix-themes',
+            'kui-theme',
             {
               light: appearance === 'light',
               dark: appearance === 'dark',

package/src/components/toggle.tsx

@@ -83,7 +83,7 @@ const Toggle = React.forwardRef<ToggleElement, ToggleProps>(
 
     return (
       <TogglePrimitive.Root pressed={pressed} onPressedChange={handlePressedChange} defaultPressed={defaultPressed} asChild>
-        <Button {...(buttonProps as ButtonProps)} ref={forwardedRef} className={classNames('rt-Toggle', className)}>
+        <Button {...(buttonProps as ButtonProps)} ref={forwardedRef} className={classNames('kui-Toggle', className)}>
           {children}
         </Button>
       </TogglePrimitive.Root>

package/src/components/toolbar.css

@@ -7,7 +7,7 @@
  * standing level with a button beside it. A ToolbarSeparator is a gray hairline.
  */
 
-.rt-Toolbar {
+.kui-Toolbar {
   --toolbar-group-inset: calc(var(--space-2) / 2);
 
   display: flex;
@@ -25,28 +25,28 @@
     min-width: var(--toolbar-control-height);
   }
 
-  &:where(.rt-r-size-1) {
+  &:where(.kui-r-size-1) {
     --toolbar-control-height: var(--control-height-1);
     --toolbar-radius: var(--radius-control-1);
     --toolbar-gap: var(--space-2);
     --toolbar-title-gap: var(--space-3);
   }
 
-  &:where(.rt-r-size-2) {
+  &:where(.kui-r-size-2) {
     --toolbar-control-height: var(--control-height-2);
     --toolbar-radius: var(--radius-control-2);
     --toolbar-gap: var(--space-3);
     --toolbar-title-gap: var(--space-4);
   }
 
-  &:where(.rt-r-size-3) {
+  &:where(.kui-r-size-3) {
     --toolbar-control-height: var(--control-height-3);
     --toolbar-radius: var(--radius-control-3);
     --toolbar-gap: var(--space-3);
     --toolbar-title-gap: var(--space-5);
   }
 
-  &:where(.rt-r-size-4) {
+  &:where(.kui-r-size-4) {
     --toolbar-control-height: var(--control-height-4);
     --toolbar-radius: var(--radius-control-4);
     --toolbar-gap: var(--space-4);
@@ -60,7 +60,7 @@
 /*                                     */
 /* * * * * * * * * * * * * * * * * * * */
 
-.rt-ToolbarGroup {
+.kui-ToolbarGroup {
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;
@@ -68,7 +68,7 @@
   height: var(--toolbar-control-height);
   padding: var(--toolbar-group-inset);
   border-radius: var(--toolbar-radius);
-  background-color: var(--gray-a3);
+  background-color: var(--neutral-a3);
 
   &:where([data-orientation='vertical']) {
     flex-direction: column;
@@ -78,14 +78,14 @@
 }
 
 /* Over content, the well is a raised surface of its own, like a raised button beside it. */
-:where(.rt-Toolbar[data-backdrop]) .rt-ToolbarGroup {
-  background-color: var(--color-surface-solid);
+:where(.kui-Toolbar[data-backdrop]) .kui-ToolbarGroup {
+  background-color: var(--color-surface);
   box-shadow: var(--shadow-2);
 }
 
 /* A button in the group is hosted: the group's height minus the inset on both sides, and a
    concentric corner. Overriding the height variable (not `height`) keeps an icon button square. */
-.rt-ToolbarGroup > :where(.rt-BaseButton) {
+.kui-ToolbarGroup > :where(.kui-BaseButton) {
   --base-button-height: calc(var(--toolbar-control-height) - 2 * var(--toolbar-group-inset));
   border-radius: max(0px, calc(var(--toolbar-radius) - var(--toolbar-group-inset)));
 }
@@ -97,9 +97,9 @@
 /* * * * * * * * * * * * * * * * * * * */
 
 /* The same gray a Separator draws, at the height of the glyphs beside it rather than the row. */
-.rt-ToolbarSeparator {
+.kui-ToolbarSeparator {
   flex-shrink: 0;
-  background-color: var(--gray-a5);
+  background-color: var(--neutral-a5);
 
   &:where([data-orientation='vertical']) {
     width: var(--border-width-standard);
@@ -119,7 +119,7 @@
 /* * * * * * * * * * * * * * * * * * * */
 
 /* One line; truncates rather than wrapping, so the row stays one control row tall. */
-.rt-ToolbarTitle {
+.kui-ToolbarTitle {
   min-width: 0;
   flex-shrink: 1;
 }
@@ -127,10 +127,10 @@
 /* A title is a different kind of thing from the controls beside it, so it takes more air than
    they take from each other. It reaches inside a cluster, since a band is often written
    <Flex>{back}{title}</Flex>. No air against the row's own ends. */
-:where(.rt-Toolbar) .rt-ToolbarTitle:where(:not(:first-child)) {
+:where(.kui-Toolbar) .kui-ToolbarTitle:where(:not(:first-child)) {
   margin-inline-start: calc(var(--toolbar-title-gap) - var(--toolbar-gap));
 }
 
-:where(.rt-Toolbar) .rt-ToolbarTitle:where(:not(:last-child)) {
+:where(.kui-Toolbar) .kui-ToolbarTitle:where(:not(:last-child)) {
   margin-inline-end: calc(var(--toolbar-title-gap) - var(--toolbar-gap));
 }

package/src/components/toolbar.props.tsx

@@ -15,7 +15,7 @@ const toolbarRootPropDefs = {
    * Matches Button's sizes: 1 (28px) to 4 (48px). Unset inside `Shell.PaneHeader` or
    * `Shell.PaneFooter`, it rests one step above the Shell's `size`.
    */
-  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2' },
+  size: { type: 'enum', className: 'kui-r-size', values: sizes, default: '2' },
   /**
    * Direction of the row and of the arrow keys. Use `vertical` for a strip of tools along an edge.
    */

package/src/components/toolbar.tsx

@@ -104,7 +104,7 @@ const ToolbarRoot = React.forwardRef<HTMLDivElement, ToolbarProps>((props, forwa
       ref={forwardedRef}
       orientation={orientation}
       data-backdrop={backdrop || undefined}
-      className={classNames('rt-Toolbar', className)}
+      className={classNames('kui-Toolbar', className)}
     >
       <ToolbarContext.Provider value={context}>{children}</ToolbarContext.Provider>
     </ToolbarPrimitive.Root>
@@ -137,7 +137,7 @@ const ToolbarGroup = React.forwardRef<HTMLDivElement, ToolbarGroupProps>(
         data-disabled={disabled || undefined}
         {...props}
         ref={forwardedRef}
-        className={classNames('rt-ToolbarGroup', className)}
+        className={classNames('kui-ToolbarGroup', className)}
       >
         <ToolbarGroupContext.Provider value={group}>{children}</ToolbarGroupContext.Provider>
       </div>
@@ -229,7 +229,7 @@ const ToolbarSeparator = React.forwardRef<HTMLDivElement, ToolbarSeparatorProps>
       <ToolbarPrimitive.Separator
         {...props}
         ref={forwardedRef}
-        className={classNames('rt-ToolbarSeparator', className)}
+        className={classNames('kui-ToolbarSeparator', className)}
       />
     );
   },
@@ -270,7 +270,7 @@ const ToolbarTitle = React.forwardRef<HTMLSpanElement, ToolbarTitleProps>(
         truncate
         id={id}
         style={style}
-        className={classNames('rt-ToolbarTitle', className)}
+        className={classNames('kui-ToolbarTitle', className)}
       >
         {children}
       </Text>

package/src/components/tooltip.css

@@ -1,19 +1,19 @@
-.rt-TooltipContent {
+.kui-TooltipContent {
   box-sizing: border-box;
   padding: var(--space-2) var(--space-3);
-  background-color: var(--gray-12);
+  background-color: var(--neutral-12);
   border-radius: var(--radius-surface-1);
   z-index: 300; /* Tooltips always on top - above dialogs (100) and menus (200) */
 
   transform-origin: var(--radix-tooltip-content-transform-origin)
 }
 
-.rt-TooltipText {
-  color: var(--gray-1);
+.kui-TooltipText {
+  color: var(--neutral-1);
   user-select: none;
   cursor: default;
 }
 
-.rt-TooltipArrow {
-  fill: var(--gray-12);
+.kui-TooltipArrow {
+  fill: var(--neutral-12);
 }

package/src/components/tooltip.tsx

@@ -45,12 +45,12 @@ const Tooltip = React.forwardRef<TooltipElement, TooltipProps>((props, forwarded
             {...tooltipContentProps}
             asChild={false}
             ref={forwardedRef}
-            className={classNames('rt-TooltipContent', className)}
+            className={classNames('kui-TooltipContent', className)}
           >
-            <Text as="p" className="rt-TooltipText" size="1">
+            <Text as="p" className="kui-TooltipText" size="1">
               {content}
             </Text>
-            <TooltipPrimitive.Arrow className="rt-TooltipArrow" />
+            <TooltipPrimitive.Arrow className="kui-TooltipArrow" />
           </TooltipPrimitive.Content>
         </Theme>
       </TooltipPrimitive.Portal>

package/src/components/virtual-menu.css

@@ -2,10 +2,10 @@
  * VirtualMenu - Virtualized menu component styles
  * 
  * Only positioning styles needed here.
- * Item appearance inherits from rt-BaseMenuItem in _internal/base-menu.css
+ * Item appearance inherits from kui-BaseMenuItem in _internal/base-menu.css
  */
 
-.rt-VirtualMenuRoot {
+.kui-VirtualMenuRoot {
   /* Scroll container */
   overflow: auto;
   position: relative;
@@ -24,13 +24,13 @@
   }
 }
 
-.rt-VirtualMenuViewport {
+.kui-VirtualMenuViewport {
   /* Container for absolutely positioned items */
   position: relative;
   width: 100%;
 }
 
-.rt-VirtualMenuItem {
+.kui-VirtualMenuItem {
   /* Absolute positioning for virtualization */
   position: absolute;
   top: 0;
@@ -40,8 +40,8 @@
   /* Ensure proper box model */
   box-sizing: border-box;
 
-  /* Inherit from rt-BaseMenuItem for consistent styling */
-  /* The rt-BaseMenuItem class provides: */
+  /* Inherit from kui-BaseMenuItem for consistent styling */
+  /* The kui-BaseMenuItem class provides: */
   /* - display: flex, align-items: center, gap */
   /* - min-height, padding */
   /* - cursor, user-select */

package/src/components/virtual-menu.tsx

@@ -148,7 +148,7 @@ const SimpleItem = React.memo(
       <div
         id={id}
         role="menuitem"
-        className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-VirtualMenuItem')}
+        className={classNames('kui-reset', 'kui-BaseMenuItem', 'kui-VirtualMenuItem')}
         style={style}
         tabIndex={tabIndex}
         data-highlighted={dataHighlighted}
@@ -377,10 +377,10 @@ function VirtualMenuRoot<T>({
       aria-activedescendant={safeHighlightedIndex >= 0 ? getItemId(safeHighlightedIndex) : undefined}
       tabIndex={0}
       onKeyDown={handleKeyDown}
-      className={classNames('rt-VirtualMenuRoot', className)}
+      className={classNames('kui-VirtualMenuRoot', className)}
       style={rootStyle}
     >
-      <div className="rt-VirtualMenuViewport" style={viewportStyle}>
+      <div className="kui-VirtualMenuViewport" style={viewportStyle}>
         {virtualItems.map((virtualRow) => {
           const item = items[virtualRow.index];
           const index = virtualRow.index;
@@ -449,7 +449,7 @@ const VirtualMenuItemInner = React.forwardRef<HTMLDivElement, VirtualMenuItemPro
       <div
         ref={forwardedRef}
         role="menuitem"
-        className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-VirtualMenuItem', className)}
+        className={classNames('kui-reset', 'kui-BaseMenuItem', 'kui-VirtualMenuItem', className)}
         {...props}
       >
         {children}

package/src/helpers/font-config.ts

@@ -119,7 +119,7 @@ function clear(target: HTMLElement, variables: Record<string, string>) {
  */
 export function applyFontConfig(
   config: FontConfig,
-  { root = document.documentElement, themeElement = document.querySelector<HTMLElement>('.radix-themes') }: { root?: HTMLElement; themeElement?: HTMLElement | null } = {},
+  { root = document.documentElement, themeElement = document.querySelector<HTMLElement>('.kui-theme') }: { root?: HTMLElement; themeElement?: HTMLElement | null } = {},
 ): void {
   if (config.stacks) write(root, FONT_STACK_VARIABLES, config.stacks);
   if (config.roles && themeElement) write(themeElement, FONT_ROLE_VARIABLES, config.roles);
@@ -139,20 +139,20 @@ export function generateFontCSS(config: FontConfig): string {
 
   const roles = Object.entries(config.roles ?? {}).filter(([, value]) => value);
   if (roles.length) {
-    blocks.push(['.radix-themes {', ...roles.map(([key, value]) => `  ${FONT_ROLE_VARIABLES[key as keyof FontRoles]}: ${value};`), '}'].join('\n'));
+    blocks.push(['.kui-theme {', ...roles.map(([key, value]) => `  ${FONT_ROLE_VARIABLES[key as keyof FontRoles]}: ${value};`), '}'].join('\n'));
   }
 
   return blocks.join('\n\n');
 }
 
 /** Drop every inline font override, falling back to the stylesheet's defaults. */
-export function resetFonts({ root = document.documentElement, themeElement = document.querySelector<HTMLElement>('.radix-themes') }: { root?: HTMLElement; themeElement?: HTMLElement | null } = {}): void {
+export function resetFonts({ root = document.documentElement, themeElement = document.querySelector<HTMLElement>('.kui-theme') }: { root?: HTMLElement; themeElement?: HTMLElement | null } = {}): void {
   clear(root, FONT_STACK_VARIABLES);
   if (themeElement) clear(themeElement, FONT_ROLE_VARIABLES);
 }
 
 /** Read the stacks and roles currently in effect. */
-export function getCurrentFontConfig({ themeElement = document.querySelector<HTMLElement>('.radix-themes') }: { themeElement?: HTMLElement | null } = {}): Required<FontConfig> {
+export function getCurrentFontConfig({ themeElement = document.querySelector<HTMLElement>('.kui-theme') }: { themeElement?: HTMLElement | null } = {}): Required<FontConfig> {
   // Roles resolve against the theme element, so read both tiers from it — it inherits
   // the stacks from `:root` and is the only place the roles are declared.
   const computed = getComputedStyle(themeElement ?? document.documentElement);

package/src/helpers/get-margin-styles.ts

@@ -14,13 +14,13 @@ const MARGIN_PROPS: ReadonlyArray<{
   className: string;
   customProperties: `--${string}`[];
 }> = [
-  { key: 'm', className: 'rt-r-m', customProperties: ['--margin'] },
-  { key: 'mx', className: 'rt-r-mx', customProperties: ['--margin-left', '--margin-right'] },
-  { key: 'my', className: 'rt-r-my', customProperties: ['--margin-top', '--margin-bottom'] },
-  { key: 'mt', className: 'rt-r-mt', customProperties: ['--margin-top'] },
-  { key: 'mr', className: 'rt-r-mr', customProperties: ['--margin-right'] },
-  { key: 'mb', className: 'rt-r-mb', customProperties: ['--margin-bottom'] },
-  { key: 'ml', className: 'rt-r-ml', customProperties: ['--margin-left'] },
+  { key: 'm', className: 'kui-r-m', customProperties: ['--margin'] },
+  { key: 'mx', className: 'kui-r-mx', customProperties: ['--margin-left', '--margin-right'] },
+  { key: 'my', className: 'kui-r-my', customProperties: ['--margin-top', '--margin-bottom'] },
+  { key: 'mt', className: 'kui-r-mt', customProperties: ['--margin-top'] },
+  { key: 'mr', className: 'kui-r-mr', customProperties: ['--margin-right'] },
+  { key: 'mb', className: 'kui-r-mb', customProperties: ['--margin-bottom'] },
+  { key: 'ml', className: 'kui-r-ml', customProperties: ['--margin-left'] },
 ];
 
 export function getMarginStyles(props: MarginProps) {

package/src/hooks/use-live-announcer.ts

@@ -16,11 +16,11 @@ export function useLiveAnnouncer() {
 
   // Create aria-live region if it doesn't exist
   React.useEffect(() => {
-    let liveRegion = document.getElementById('rt-live-announcer');
+    let liveRegion = document.getElementById('kui-live-announcer');
 
     if (!liveRegion) {
       liveRegion = document.createElement('div');
-      liveRegion.id = 'rt-live-announcer';
+      liveRegion.id = 'kui-live-announcer';
       liveRegion.setAttribute('aria-live', 'polite');
       liveRegion.setAttribute('aria-atomic', 'true');
       liveRegion.style.cssText = `
@@ -49,7 +49,7 @@ export function useLiveAnnouncer() {
 
       // Only remove the live region if no components are using it
       if (liveRegionRefCount === 0) {
-        const region = document.getElementById('rt-live-announcer');
+        const region = document.getElementById('kui-live-announcer');
         if (region) {
           region.remove();
         }
@@ -58,7 +58,7 @@ export function useLiveAnnouncer() {
   }, []);
 
   const announce = React.useCallback((message: string) => {
-    const liveRegion = document.getElementById('rt-live-announcer');
+    const liveRegion = document.getElementById('kui-live-announcer');
     if (liveRegion) {
       // Clear any pending timeout
       if (timeoutRef.current) {

package/src/hooks/use-thumb-sync.ts

@@ -19,7 +19,7 @@ export function useThumbSync<T extends HTMLElement>() {
     let frame = 0;
     const write = () => {
       frame = 0;
-      for (const thumb of root.querySelectorAll<HTMLElement>(':scope > .rt-ScrollAreaScrollbar > .rt-ScrollAreaThumb')) {
+      for (const thumb of root.querySelectorAll<HTMLElement>(':scope > .kui-ScrollAreaScrollbar > .kui-ScrollAreaThumb')) {
         const scrollbar = thumb.parentElement as HTMLElement;
         const style = getComputedStyle(scrollbar);
         if (scrollbar.dataset.orientation === 'horizontal') {

package/src/props/emphasis.prop.ts

@@ -8,7 +8,7 @@ const emphases = ['loud', 'medium', 'quiet'] as const;
 const emphasisPropDef = {
   emphasis: {
     type: 'enum',
-    className: 'rt-emphasis',
+    className: 'kui-emphasis',
     values: emphases,
     default: undefined,
   },

package/src/props/font-family.prop.ts

@@ -5,7 +5,7 @@ const fontFamilies = ['sans', 'mono', 'serif'] as const;
 const fontFamilyPropDef = {
   font: {
     type: 'enum',
-    className: 'rt-r-ff',
+    className: 'kui-r-ff',
     values: fontFamilies,
   },
 } satisfies {

package/src/props/gap.props.ts

@@ -17,7 +17,7 @@ const gapPropDefs = {
    */
   gap: {
     type: 'enum | string',
-    className: 'rt-r-gap',
+    className: 'kui-r-gap',
     customProperties: ['--gap'],
     values: gapValues,
     responsive: true,
@@ -36,7 +36,7 @@ const gapPropDefs = {
    */
   gapX: {
     type: 'enum | string',
-    className: 'rt-r-cg',
+    className: 'kui-r-cg',
     customProperties: ['--column-gap'],
     values: gapValues,
     responsive: true,
@@ -55,7 +55,7 @@ const gapPropDefs = {
    */
   gapY: {
     type: 'enum | string',
-    className: 'rt-r-rg',
+    className: 'kui-r-rg',
     customProperties: ['--row-gap'],
     values: gapValues,
     responsive: true,

package/src/props/height.props.ts

@@ -14,7 +14,7 @@ const heightPropDefs = {
    */
   height: {
     type: 'string',
-    className: 'rt-r-h',
+    className: 'kui-r-h',
     customProperties: ['--height'],
     responsive: true,
   },
@@ -31,7 +31,7 @@ const heightPropDefs = {
    */
   minHeight: {
     type: 'string',
-    className: 'rt-r-min-h',
+    className: 'kui-r-min-h',
     customProperties: ['--min-height'],
     responsive: true,
   },
@@ -48,7 +48,7 @@ const heightPropDefs = {
    */
   maxHeight: {
     type: 'string',
-    className: 'rt-r-max-h',
+    className: 'kui-r-max-h',
     customProperties: ['--max-height'],
     responsive: true,
   },