@womp/kookie-ui 0.21.0 → 0.22.1

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

@@ -18,7 +18,7 @@ const Kbd = React.forwardRef<KbdElement, KbdProps>((props, forwardedRef) => {
     <Comp
       {...kbdProps}
       ref={forwardedRef}
-      className={classNames('rt-reset', 'rt-Kbd', className)}
+      className={classNames('kui-reset', 'kui-Kbd', className)}
     />
   );
 });

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

@@ -19,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

@@ -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,7 +125,7 @@ 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';
 
@@ -158,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 ?? (

package/src/components/navbar.css

@@ -7,30 +7,30 @@
  */
 
 /* Root container */
-.rt-NavbarRoot {
+.kui-NavbarRoot {
   width: 100%;
   z-index: 50;
-  background-color: var(--color-background);
+  background-color: var(--color-page);
 }
 
-.rt-NavbarRoot[data-position='fixed'] {
+.kui-NavbarRoot[data-position='fixed'] {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
 }
 
-.rt-NavbarRoot[data-position='sticky'] {
+.kui-NavbarRoot[data-position='sticky'] {
   position: sticky;
   top: 0;
 }
 
-.rt-NavbarRoot[data-position='static'] {
+.kui-NavbarRoot[data-position='static'] {
   position: static;
 }
 
 /* Container - grid layout for true centering */
-.rt-NavbarContainer {
+.kui-NavbarContainer {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
@@ -39,36 +39,36 @@
 }
 
 /* Size variants - padding based */
-.rt-NavbarRoot[data-size='1'] .rt-NavbarContainer {
+.kui-NavbarRoot[data-size='1'] .kui-NavbarContainer {
   padding: var(--space-3) var(--space-4);
 }
 
-.rt-NavbarRoot[data-size='2'] .rt-NavbarContainer {
+.kui-NavbarRoot[data-size='2'] .kui-NavbarContainer {
   padding: var(--space-4) var(--space-5);
 }
 
-.rt-NavbarRoot[data-size='3'] .rt-NavbarContainer {
+.kui-NavbarRoot[data-size='3'] .kui-NavbarContainer {
   padding: var(--space-5) var(--space-6);
 }
 
-.rt-NavbarRoot[data-size='4'] .rt-NavbarContainer {
+.kui-NavbarRoot[data-size='4'] .kui-NavbarContainer {
   padding: var(--space-6) var(--space-7);
 }
 
 /* Slot overflow handling */
-.rt-NavbarLogo,
-.rt-NavbarActions {
+.kui-NavbarLogo,
+.kui-NavbarActions {
   min-width: 0;
 }
 
 /* Ensure Actions always stays in the right column */
-.rt-NavbarActions {
+.kui-NavbarActions {
   grid-column: 3;
 }
 
 /* Responsive adjustments */
 @media (max-width: 768px) {
-  .rt-NavbarContainer {
+  .kui-NavbarContainer {
     gap: var(--space-4);
   }
 }

package/src/components/navbar.tsx

@@ -54,11 +54,11 @@ const NavbarRoot = React.forwardRef<NavbarRootElement, NavbarRootProps>(
       <header
         {...rootProps}
         ref={forwardedRef}
-        className={classNames('rt-NavbarRoot', className)}
+        className={classNames('kui-NavbarRoot', className)}
         data-position={position}
         data-size={size}
       >
-        <div className="rt-NavbarContainer">{children}</div>
+        <div className="kui-NavbarContainer">{children}</div>
       </header>
     );
   },
@@ -76,7 +76,7 @@ const NavbarLogo = React.forwardRef<HTMLDivElement, NavbarLogoProps>(
       return (
         <Slot
           ref={ref}
-          className={classNames('rt-NavbarLogo', className)}
+          className={classNames('kui-NavbarLogo', className)}
           {...props}
         />
       );
@@ -88,7 +88,7 @@ const NavbarLogo = React.forwardRef<HTMLDivElement, NavbarLogoProps>(
         gap={gap}
         align={align}
         justify={justify}
-        className={classNames('rt-NavbarLogo', className)}
+        className={classNames('kui-NavbarLogo', className)}
         {...props}
       />
     );
@@ -107,7 +107,7 @@ const NavbarNavigation = React.forwardRef<HTMLDivElement, NavbarNavigationProps>
       return (
         <Slot
           ref={ref}
-          className={classNames('rt-NavbarNavigation', className)}
+          className={classNames('kui-NavbarNavigation', className)}
           role="navigation"
           {...props}
         />
@@ -120,7 +120,7 @@ const NavbarNavigation = React.forwardRef<HTMLDivElement, NavbarNavigationProps>
         gap={gap}
         align={align}
         justify={justify}
-        className={classNames('rt-NavbarNavigation', className)}
+        className={classNames('kui-NavbarNavigation', className)}
         role="navigation"
         {...props}
       />
@@ -140,7 +140,7 @@ const NavbarActions = React.forwardRef<HTMLDivElement, NavbarActionsProps>(
       return (
         <Slot
           ref={ref}
-          className={classNames('rt-NavbarActions', className)}
+          className={classNames('kui-NavbarActions', className)}
           {...props}
         />
       );
@@ -152,7 +152,7 @@ const NavbarActions = React.forwardRef<HTMLDivElement, NavbarActionsProps>(
         gap={gap}
         align={align}
         justify={justify}
-        className={classNames('rt-NavbarActions', className)}
+        className={classNames('kui-NavbarActions', className)}
         {...props}
       />
     );