@womp/kookie-ui 0.20.0 → 0.22.0

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-prop-synced-state.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 /**
  * State that tracks a prop but can also be set imperatively — the shape `Theme`
- * needs, where a prop sets the value and `ThemePanel` can change it at runtime.
+ * needs, where a prop sets the value and the context setters can change it at runtime.
  *
  * Adjusts state during render rather than syncing in a `useEffect`. An effect
  * would commit one render carrying the *old* value and schedule a second one,

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/hooks/use-toggle-state.ts

@@ -30,7 +30,7 @@ interface UseToggleStateOptions {
  *   pressed,
  *   onPressedChange,
  *   getAccessibleName,
- *   componentName: 'ToggleButton',
+ *   componentName: 'Toggle',
  * });
  * ```
  */

package/src/props/color.prop.ts

@@ -27,7 +27,7 @@ const accentColorPropDef = {
   color: PropDef<(typeof accentColors)[number]>;
 };
 
-// For components whose colour comes from their content (Badge, Avatar, Code): they rest gray, and `color` picks a category when it means something.
+// For components whose colour comes from their content (Chip, Avatar, Code): they rest gray, and `color` picks a category when it means something.
 const grayAccentColorPropDef = {
   color: {
     type: 'enum',

package/src/props/emphasis.prop.ts

@@ -2,13 +2,13 @@ import type { PropDef } from './prop-def.js';
 
 const emphases = ['loud', 'medium', 'quiet'] as const;
 
-// Text-first components only (Text, Heading, Blockquote, Code, DataList.Label).
+// Text-first components only (Text, Heading, Blockquote, Code).
 // No colour + emphasis reads the gray ink ladder; colour + emphasis reads the accent ink ladder.
-// Components that need a different default (DataList.Label: 'medium') spread this def and override `default`.
+// Components that need a different default spread this def and override `default`.
 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,
   },

package/src/props/index.ts

@@ -22,46 +22,33 @@ export * from './width.props.js';
 // Component props
 export * from '../components/alert-dialog.props.js';
 export * from '../components/avatar.props.js';
-export * from '../components/badge.props.js';
 export * from '../components/blockquote.props.js';
 export * from '../components/box.props.js';
 export * from '../components/button.props.js';
 export * from '../components/card.props.js';
-export * from '../components/checkbox-cards.props.js';
 export * from '../components/checkbox-group.props.js';
 export * from '../components/checkbox.props.js';
+export * from '../components/chip.props.js';
 export * from '../components/code.props.js';
-export * from '../components/container.props.js';
 export * from '../components/context-menu.props.js';
-export * from '../components/data-list.props.js';
 export * from '../components/dialog.props.js';
 export * from '../components/dropdown-menu.props.js';
-export * from '../components/em.props.js';
 export * from '../components/flex.props.js';
 export * from '../components/grid.props.js';
 export * from '../components/heading.props.js';
-export * from '../components/hover-card.props.js';
-export * from '../components/icon-button.props.js';
-export * from '../components/image.props.js';
 export * from '../components/kbd.props.js';
 export * from '../components/link.props.js';
 export * from '../components/popover.props.js';
 export * from '../components/progress.props.js';
-export * from '../components/quote.props.js';
 export * from '../components/radio.props.js';
-export * from '../components/radio-cards.props.js';
 export * from '../components/radio-group.props.js';
 export * from '../components/scroll-area.props.js';
-export * from '../components/section.props.js';
 export * from '../components/segmented-control.props.js';
 export * from '../components/select.props.js';
 export * from '../components/separator.props.js';
-export * from '../components/skeleton.props.js';
 export * from '../components/slider.props.js';
 export * from '../components/spinner.props.js';
-export * from '../components/strong.props.js';
 export * from '../components/switch.props.js';
-export * from '../components/tab-nav.props.js';
 export * from '../components/table.props.js';
 export * from '../components/tabs.props.js';
 export * from '../components/text-area.props.js';

package/src/props/layout.props.ts

@@ -7,7 +7,7 @@ import type { PropDef, GetPropDefTypes } from './prop-def.js';
 const overflowValues = ['visible', 'hidden', 'clip', 'scroll', 'auto'] as const;
 const positionValues = ['static', 'relative', 'absolute', 'fixed', 'sticky'] as const;
 // prettier-ignore
-const positionEdgeValues = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '-1', '-2', '-3', '-4', '-5', '-6', '-7', '-8', '-9'] as const;
+const positionEdgeValues = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '-1', '-2', '-3', '-4', '-5', '-6', '-7', '-8', '-9'] as const;
 const flexShrinkValues = ['0', '1'] as const;
 const flexGrowValues = ['0', '1'] as const;
 const alignSelfValues = ['start', 'center', 'end', 'baseline', 'stretch'] as const;
@@ -30,7 +30,7 @@ const layoutPropDefs = {
    */
   position: {
     type: 'enum',
-    className: 'rt-r-position',
+    className: 'kui-r-position',
     values: positionValues,
     responsive: true,
   },
@@ -48,7 +48,7 @@ const layoutPropDefs = {
    */
   inset: {
     type: 'enum | string',
-    className: 'rt-r-inset',
+    className: 'kui-r-inset',
     customProperties: ['--inset'],
     values: positionEdgeValues,
     responsive: true,
@@ -67,7 +67,7 @@ const layoutPropDefs = {
    */
   top: {
     type: 'enum | string',
-    className: 'rt-r-top',
+    className: 'kui-r-top',
     customProperties: ['--top'],
     values: positionEdgeValues,
     responsive: true,
@@ -86,7 +86,7 @@ const layoutPropDefs = {
    */
   right: {
     type: 'enum | string',
-    className: 'rt-r-right',
+    className: 'kui-r-right',
     customProperties: ['--right'],
     values: positionEdgeValues,
     responsive: true,
@@ -105,7 +105,7 @@ const layoutPropDefs = {
    */
   bottom: {
     type: 'enum | string',
-    className: 'rt-r-bottom',
+    className: 'kui-r-bottom',
     customProperties: ['--bottom'],
     values: positionEdgeValues,
     responsive: true,
@@ -124,7 +124,7 @@ const layoutPropDefs = {
    */
   left: {
     type: 'enum | string',
-    className: 'rt-r-left',
+    className: 'kui-r-left',
     customProperties: ['--left'],
     values: positionEdgeValues,
     responsive: true,
@@ -142,7 +142,7 @@ const layoutPropDefs = {
    */
   overflow: {
     type: 'enum',
-    className: 'rt-r-overflow',
+    className: 'kui-r-overflow',
     values: overflowValues,
     responsive: true,
   },
@@ -159,7 +159,7 @@ const layoutPropDefs = {
    */
   overflowX: {
     type: 'enum',
-    className: 'rt-r-ox',
+    className: 'kui-r-ox',
     values: overflowValues,
     responsive: true,
   },
@@ -176,7 +176,7 @@ const layoutPropDefs = {
    */
   overflowY: {
     type: 'enum',
-    className: 'rt-r-oy',
+    className: 'kui-r-oy',
     values: overflowValues,
     responsive: true,
   },
@@ -194,7 +194,7 @@ const layoutPropDefs = {
    */
   flexBasis: {
     type: 'string',
-    className: 'rt-r-fb',
+    className: 'kui-r-fb',
     customProperties: ['--flex-basis'],
     responsive: true,
   },
@@ -212,7 +212,7 @@ const layoutPropDefs = {
    */
   flexShrink: {
     type: 'enum | string',
-    className: 'rt-r-fs',
+    className: 'kui-r-fs',
     customProperties: ['--flex-shrink'],
     values: flexShrinkValues,
     responsive: true,
@@ -231,7 +231,7 @@ const layoutPropDefs = {
    */
   flexGrow: {
     type: 'enum | string',
-    className: 'rt-r-fg',
+    className: 'kui-r-fg',
     customProperties: ['--flex-grow'],
     values: flexGrowValues,
     responsive: true,
@@ -248,7 +248,7 @@ const layoutPropDefs = {
    */
   gridArea: {
     type: 'string',
-    className: 'rt-r-ga',
+    className: 'kui-r-ga',
     customProperties: ['--grid-area'],
     responsive: true,
   },
@@ -266,7 +266,7 @@ const layoutPropDefs = {
    */
   gridColumn: {
     type: 'string',
-    className: 'rt-r-gc',
+    className: 'kui-r-gc',
     customProperties: ['--grid-column'],
     responsive: true,
   },
@@ -284,7 +284,7 @@ const layoutPropDefs = {
    */
   gridColumnStart: {
     type: 'string',
-    className: 'rt-r-gcs',
+    className: 'kui-r-gcs',
     customProperties: ['--grid-column-start'],
     responsive: true,
   },
@@ -302,7 +302,7 @@ const layoutPropDefs = {
    */
   gridColumnEnd: {
     type: 'string',
-    className: 'rt-r-gce',
+    className: 'kui-r-gce',
     customProperties: ['--grid-column-end'],
     responsive: true,
   },
@@ -320,7 +320,7 @@ const layoutPropDefs = {
    */
   gridRow: {
     type: 'string',
-    className: 'rt-r-gr',
+    className: 'kui-r-gr',
     customProperties: ['--grid-row'],
     responsive: true,
   },
@@ -338,7 +338,7 @@ const layoutPropDefs = {
    */
   gridRowStart: {
     type: 'string',
-    className: 'rt-r-grs',
+    className: 'kui-r-grs',
     customProperties: ['--grid-row-start'],
     responsive: true,
   },
@@ -356,7 +356,7 @@ const layoutPropDefs = {
    */
   gridRowEnd: {
     type: 'string',
-    className: 'rt-r-gre',
+    className: 'kui-r-gre',
     customProperties: ['--grid-row-end'],
     responsive: true,
   },
@@ -373,7 +373,7 @@ const layoutPropDefs = {
    */
   alignSelf: {
     type: 'enum',
-    className: 'rt-r-as',
+    className: 'kui-r-as',
     values: alignSelfValues,
     responsive: true,
   },
@@ -390,7 +390,7 @@ const layoutPropDefs = {
    */
   justifySelf: {
     type: 'enum',
-    className: 'rt-r-js',
+    className: 'kui-r-js',
     values: justifySelfValues,
     responsive: true,
   },

package/src/props/leading-trim.prop.ts

@@ -5,7 +5,7 @@ const leadingTrimValues = ['normal', 'start', 'end', 'both'] as const;
 const leadingTrimPropDef = {
   trim: {
     type: 'enum',
-    className: 'rt-r-lt',
+    className: 'kui-r-lt',
     values: leadingTrimValues,
     responsive: true,
   },

package/src/props/margin.props.ts

@@ -20,7 +20,7 @@ const marginPropDefs = {
     type: 'enum | string',
     values: marginValues,
     responsive: true,
-    className: 'rt-r-m',
+    className: 'kui-r-m',
     customProperties: ['--m'],
   },
   /**
@@ -40,7 +40,7 @@ const marginPropDefs = {
     type: 'enum | string',
     values: marginValues,
     responsive: true,
-    className: 'rt-r-mx',
+    className: 'kui-r-mx',
     customProperties: ['--ml', '--mr'],
   },
   /**
@@ -60,7 +60,7 @@ const marginPropDefs = {
     type: 'enum | string',
     values: marginValues,
     responsive: true,
-    className: 'rt-r-my',
+    className: 'kui-r-my',
     customProperties: ['--mt', '--mb'],
   },
   /**
@@ -79,7 +79,7 @@ const marginPropDefs = {
     type: 'enum | string',
     values: marginValues,
     responsive: true,
-    className: 'rt-r-mt',
+    className: 'kui-r-mt',
     customProperties: ['--mt'],
   },
   /**
@@ -98,7 +98,7 @@ const marginPropDefs = {
     type: 'enum | string',
     values: marginValues,
     responsive: true,
-    className: 'rt-r-mr',
+    className: 'kui-r-mr',
     customProperties: ['--mr'],
   },
   /**
@@ -117,7 +117,7 @@ const marginPropDefs = {
     type: 'enum | string',
     values: marginValues,
     responsive: true,
-    className: 'rt-r-mb',
+    className: 'kui-r-mb',
     customProperties: ['--mb'],
   },
   /**
@@ -136,7 +136,7 @@ const marginPropDefs = {
     type: 'enum | string',
     values: marginValues,
     responsive: true,
-    className: 'rt-r-ml',
+    className: 'kui-r-ml',
     customProperties: ['--ml'],
   },
 } satisfies {

package/src/props/padding.props.ts

@@ -17,7 +17,7 @@ const paddingPropDefs = {
    */
   p: {
     type: 'enum | string',
-    className: 'rt-r-p',
+    className: 'kui-r-p',
     customProperties: ['--p'],
     values: paddingValues,
     responsive: true,
@@ -37,7 +37,7 @@ const paddingPropDefs = {
    */
   px: {
     type: 'enum | string',
-    className: 'rt-r-px',
+    className: 'kui-r-px',
     customProperties: ['--pl', '--pr'],
     values: paddingValues,
     responsive: true,
@@ -57,7 +57,7 @@ const paddingPropDefs = {
    */
   py: {
     type: 'enum | string',
-    className: 'rt-r-py',
+    className: 'kui-r-py',
     customProperties: ['--pt', '--pb'],
     values: paddingValues,
     responsive: true,
@@ -76,7 +76,7 @@ const paddingPropDefs = {
    */
   pt: {
     type: 'enum | string',
-    className: 'rt-r-pt',
+    className: 'kui-r-pt',
     customProperties: ['--pt'],
     values: paddingValues,
     responsive: true,
@@ -95,7 +95,7 @@ const paddingPropDefs = {
    */
   pr: {
     type: 'enum | string',
-    className: 'rt-r-pr',
+    className: 'kui-r-pr',
     customProperties: ['--pr'],
     values: paddingValues,
     responsive: true,
@@ -114,7 +114,7 @@ const paddingPropDefs = {
    */
   pb: {
     type: 'enum | string',
-    className: 'rt-r-pb',
+    className: 'kui-r-pb',
     customProperties: ['--pb'],
     values: paddingValues,
     responsive: true,
@@ -133,7 +133,7 @@ const paddingPropDefs = {
    */
   pl: {
     type: 'enum | string',
-    className: 'rt-r-pl',
+    className: 'kui-r-pl',
     customProperties: ['--pl'],
     values: paddingValues,
     responsive: true,

package/src/props/shadow.props.ts

@@ -16,7 +16,7 @@ const shadowPropDefs = {
    */
   shadow: {
     type: 'enum',
-    className: 'rt-r-shadow',
+    className: 'kui-r-shadow',
     values: shadowValues,
     responsive: true,
   },

package/src/props/text-align.prop.ts

@@ -5,7 +5,7 @@ const textAlignValues = ['left', 'center', 'right'] as const;
 const textAlignPropDef = {
   align: {
     type: 'enum',
-    className: 'rt-r-ta',
+    className: 'kui-r-ta',
     values: textAlignValues,
     responsive: true,
   },

package/src/props/text-wrap.prop.ts

@@ -5,7 +5,7 @@ const textWrapValues = ['wrap', 'nowrap', 'pretty', 'balance'] as const;
 const textWrapPropDef = {
   wrap: {
     type: 'enum',
-    className: 'rt-r-tw',
+    className: 'kui-r-tw',
     values: textWrapValues,
     responsive: true,
   },

package/src/props/truncate.prop.ts

@@ -3,7 +3,7 @@ import type { PropDef } from './prop-def.js';
 const truncatePropDef = {
   truncate: {
     type: 'boolean',
-    className: 'rt-truncate',
+    className: 'kui-truncate',
   },
 } satisfies {
   truncate: PropDef<boolean>;

package/src/props/weight.prop.ts

@@ -6,7 +6,7 @@ const weights = ['regular', 'medium', 'semibold'] as const;
 const weightPropDef = {
   weight: {
     type: 'enum',
-    className: 'rt-r-weight',
+    className: 'kui-r-weight',
     values: weights,
     responsive: true,
   },