@womp/kookie-ui 0.21.0 → 0.22.0

package/src/components/switch.css

@@ -1,4 +1,4 @@
-.rt-SwitchRoot {
+.kui-SwitchRoot {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -29,7 +29,7 @@
   }
 }
 
-.rt-SwitchThumb {
+.kui-SwitchThumb {
   background-color: white;
   position: absolute;
   left: var(--switch-thumb-inset);
@@ -55,20 +55,20 @@
  * one step taller than the checkbox beside it. Its width is v2's own ladder (34/40/44/48).
  */
 @breakpoints {
-  .rt-SwitchRoot {
-    &:where(.rt-r-size-1) {
+  .kui-SwitchRoot {
+    &:where(.kui-r-size-1) {
       --switch-height: var(--mark-2, calc(20px * var(--scale)));
       --switch-width: var(--switch-w-1, calc(34px * var(--scale)));
     }
-    &:where(.rt-r-size-2) {
+    &:where(.kui-r-size-2) {
       --switch-height: var(--mark-3, calc(24px * var(--scale)));
       --switch-width: var(--switch-w-2, calc(40px * var(--scale)));
     }
-    &:where(.rt-r-size-3) {
+    &:where(.kui-r-size-3) {
       --switch-height: var(--mark-4, calc(26px * var(--scale)));
       --switch-width: var(--switch-w-3, calc(44px * var(--scale)));
     }
-    &:where(.rt-r-size-4) {
+    &:where(.kui-r-size-4) {
       --switch-height: var(--mark-5, calc(28px * var(--scale)));
       --switch-width: var(--switch-w-4, calc(48px * var(--scale)));
     }
@@ -83,10 +83,10 @@
 
 /* surface */
 
-.rt-SwitchRoot:where(.rt-variant-surface) {
+.kui-SwitchRoot:where(.kui-variant-surface) {
   &::before {
-    background-color: var(--gray-2);
-    box-shadow: inset 0 0 0 1px var(--gray-6);
+    background-color: var(--neutral-2);
+    box-shadow: inset 0 0 0 1px var(--neutral-6);
   }
 
   &:where([data-state='checked'])::before {
@@ -97,9 +97,9 @@
 
 /* soft */
 
-.rt-SwitchRoot:where(.rt-variant-soft) {
+.kui-SwitchRoot:where(.kui-variant-soft) {
   &::before {
-    background-color: var(--gray-3);
+    background-color: var(--neutral-3);
   }
 
   &:where([data-state='checked'])::before {
@@ -109,10 +109,10 @@
 
 /* outline */
 
-.rt-SwitchRoot:where(.rt-variant-outline) {
+.kui-SwitchRoot:where(.kui-variant-outline) {
   &::before {
     /* Base state: no background, just border */
-    box-shadow: inset 0 0 0 1px var(--gray-6);
+    box-shadow: inset 0 0 0 1px var(--neutral-6);
   }
 
   &:where([data-state='checked'])::before {
@@ -123,17 +123,17 @@
 
 /* Hover is one step up the variant's own ramp, press two. Disabled switches take neither. */
 
-.rt-SwitchRoot {
-  --switch-off-hover: var(--gray-a2);
-  --switch-off-active: var(--gray-a3);
+.kui-SwitchRoot {
+  --switch-off-hover: var(--neutral-a2);
+  --switch-off-active: var(--neutral-a3);
 
-  &:where(.rt-variant-surface) {
-    --switch-off-hover: var(--gray-3);
-    --switch-off-active: var(--gray-4);
+  &:where(.kui-variant-surface) {
+    --switch-off-hover: var(--neutral-3);
+    --switch-off-active: var(--neutral-4);
   }
-  &:where(.rt-variant-soft) {
-    --switch-off-hover: var(--gray-4);
-    --switch-off-active: var(--gray-5);
+  &:where(.kui-variant-soft) {
+    --switch-off-hover: var(--neutral-4);
+    --switch-off-active: var(--neutral-5);
   }
 
   @media (hover: hover) {
@@ -155,16 +155,16 @@
 /* all disabled Switches: a colour remap, never opacity, and a default cursor */
 
 [data-disabled] {
-  .rt-SwitchRoot:where(&) {
+  .kui-SwitchRoot:where(&) {
     cursor: default;
   }
-  .rt-SwitchRoot:where(&)::before {
+  .kui-SwitchRoot:where(&)::before {
     cursor: default;
-    background-color: var(--gray-a3) !important;
+    background-color: var(--neutral-a3) !important;
     box-shadow: none !important;
     outline: none !important;
   }
-  .rt-SwitchThumb:where(&) {
+  .kui-SwitchThumb:where(&) {
     cursor: default;
     box-shadow: none !important;
     outline: none !important;
@@ -172,6 +172,6 @@
 }
 
 /* Disabled checked state - lighter accent color */
-.rt-SwitchRoot:where([data-disabled][data-state='checked'])::before {
+.kui-SwitchRoot:where([data-disabled][data-state='checked'])::before {
   background-color: var(--accent-a3) !important;
 }

package/src/components/switch.props.tsx

@@ -6,8 +6,8 @@ const sizes = ['1', '2', '3', '4'] as const;
 const variants = ['surface', 'soft', 'outline'] as const;
 
 const switchPropDefs = {
-  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },
+  size: { type: 'enum', className: 'kui-r-size', values: sizes, default: '2', responsive: true },
+  variant: { type: 'enum', className: 'kui-variant', values: variants, default: 'surface' },
   ...colorPropDef,
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;

package/src/components/switch.tsx

@@ -29,9 +29,9 @@ const Switch = React.forwardRef<SwitchElement, SwitchProps>((ownProps, forwarded
       {...switchProps}
       asChild={false}
       ref={forwardedRef}
-      className={classNames('rt-reset', 'rt-SwitchRoot', className)}
+      className={classNames('kui-reset', 'kui-SwitchRoot', className)}
     >
-      <SwitchPrimitive.Thumb className="rt-SwitchThumb" />
+      <SwitchPrimitive.Thumb className="kui-SwitchThumb" />
     </SwitchPrimitive.Root>
   );
 });

package/src/components/table.css

@@ -1,6 +1,6 @@
-.rt-TableRootTable {
+.kui-TableRootTable {
   --table-row-background-color: transparent;
-  --table-row-box-shadow: inset 0 -1px var(--gray-a5);
+  --table-row-box-shadow: inset 0 -1px var(--neutral-a5);
 
   width: 100%;
   text-align: left;
@@ -14,20 +14,20 @@
   height: 0;
 }
 
-.rt-TableHeader {
+.kui-TableHeader {
   vertical-align: inherit;
 }
 
-.rt-TableBody {
+.kui-TableBody {
   vertical-align: inherit;
 }
 
-.rt-TableRow {
+.kui-TableRow {
   vertical-align: inherit;
-  color: var(--gray-12);
+  color: var(--neutral-12);
 }
 
-.rt-TableCell {
+.kui-TableCell {
   background-color: var(--table-row-background-color);
   box-shadow: var(--table-row-box-shadow);
   box-sizing: border-box;
@@ -35,10 +35,10 @@
   /* A cell hugs its line: the inset above and below, the wider inset at the sides. */
   padding: var(--table-cell-py) var(--table-cell-px);
 }
-.rt-TableColumnHeaderCell {
+.kui-TableColumnHeaderCell {
   font-weight: 600;
 }
-.rt-TableRowHeaderCell {
+.kui-TableRowHeaderCell {
   font-weight: normal;
 }
 
@@ -49,46 +49,46 @@
  ***************************************************************************************************/
 
 @breakpoints {
-  .rt-TableRoot {
-    &:where(.rt-r-size-1) {
+  .kui-TableRoot {
+    &:where(.kui-r-size-1) {
       --table-border-radius: var(--radius-surface-1);
       --table-cell-py: var(--layout-space-2);
       --table-cell-px: var(--layout-space-3);
 
-      & :where(.rt-TableRootTable) {
+      & :where(.kui-TableRootTable) {
         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) {
       --table-border-radius: var(--radius-surface-2);
       --table-cell-py: var(--layout-space-3);
       --table-cell-px: var(--layout-space-4);
 
-      & :where(.rt-TableRootTable) {
+      & :where(.kui-TableRootTable) {
         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) {
       --table-border-radius: var(--radius-surface-3);
       --table-cell-py: var(--layout-space-4);
       --table-cell-px: var(--layout-space-5);
 
-      & :where(.rt-TableRootTable) {
+      & :where(.kui-TableRootTable) {
         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) {
       --table-border-radius: var(--radius-surface-4);
       --table-cell-py: var(--layout-space-5);
       --table-cell-px: var(--layout-space-6);
 
-      & :where(.rt-TableRootTable) {
+      & :where(.kui-TableRootTable) {
         font-size: var(--font-size-4);
         line-height: var(--line-height-4);
         letter-spacing: var(--letter-spacing-4);
@@ -105,26 +105,26 @@
 
 /* surface */
 
-.rt-TableRoot:where(.rt-variant-surface) {
+.kui-TableRoot:where(.kui-variant-surface) {
   box-sizing: border-box;
-  border: 1px solid var(--gray-a5);
+  border: 1px solid var(--neutral-a5);
   border-radius: var(--table-border-radius);
-  background-color: var(--color-panel-solid);
+  background-color: var(--color-surface);
   background-clip: padding-box;
   position: relative;
 
   /* When possible, use half-transparent gray for nicer border blending with the background */
   @supports (box-shadow: 0 0 0 1px color-mix(in oklab, white, black)) {
-    border-color: color-mix(in oklab, var(--gray-a5), var(--gray-6));
+    border-color: color-mix(in oklab, var(--neutral-a5), var(--neutral-6));
   }
 
-  & :where(.rt-TableRootTable) {
+  & :where(.kui-TableRootTable) {
     overflow: hidden;
 
-    & :where(.rt-TableHeader) {
-      --table-row-background-color: var(--gray-a2);
+    & :where(.kui-TableHeader) {
+      --table-row-background-color: var(--neutral-a2);
     }
-    & :where(.rt-TableBody) :where(.rt-TableRow:last-child) {
+    & :where(.kui-TableBody) :where(.kui-TableRow:last-child) {
       --table-row-box-shadow: none;
     }
   }
@@ -132,11 +132,11 @@
 
 /* ghost */
 
-.rt-TableRoot:where(.rt-variant-ghost) {
+.kui-TableRoot:where(.kui-variant-ghost) {
   --scrollarea-scrollbar-horizontal-margin-left: 0;
   --scrollarea-scrollbar-horizontal-margin-right: 0;
 
-  & :where(.rt-TableBody) :where(.rt-TableRow:last-child) {
+  & :where(.kui-TableBody) :where(.kui-TableRow:last-child) {
     --table-row-box-shadow: none;
   }
 }

package/src/components/table.props.tsx

@@ -10,20 +10,20 @@ const layoutValues = ['auto', 'fixed'] as const;
 const tableRootPropDefs = {
   size: {
     type: 'enum',
-    className: 'rt-r-size',
+    className: 'kui-r-size',
     values: sizes,
     default: '2',
     responsive: true,
   },
   variant: {
     type: 'enum',
-    className: 'rt-variant',
+    className: 'kui-variant',
     values: variants,
     default: 'ghost',
   },
   layout: {
     type: 'enum',
-    className: 'rt-r-tl',
+    className: 'kui-r-tl',
     values: layoutValues,
     responsive: true,
   },
@@ -38,7 +38,7 @@ const rowAlign = ['start', 'center', 'end', 'baseline'] as const;
 const tableRowPropDefs = {
   align: {
     type: 'enum',
-    className: 'rt-r-va',
+    className: 'kui-r-va',
     values: rowAlign,
     parseValue: parseAlignValue,
     responsive: true,
@@ -61,7 +61,7 @@ const justifyValues = ['start', 'center', 'end'] as const;
 const tableCellPropDefs = {
   justify: {
     type: 'enum',
-    className: 'rt-r-ta',
+    className: 'kui-r-ta',
     values: justifyValues,
     parseValue: parseJustifyValue,
     responsive: true,

package/src/components/table.tsx

@@ -28,9 +28,9 @@ const TableRoot = React.forwardRef<TableRootElement, TableRootProps>((ownProps,
     propValues: tableRootPropDefs.layout.values,
   });
   return (
-    <div ref={forwardedRef} className={classNames('rt-TableRoot', className)} {...rootProps}>
+    <div ref={forwardedRef} className={classNames('kui-TableRoot', className)} {...rootProps}>
       <ScrollArea>
-        <table className={classNames('rt-TableRootTable', tableLayoutClassNames)}>{children}</table>
+        <table className={classNames('kui-TableRootTable', tableLayoutClassNames)}>{children}</table>
       </ScrollArea>
     </div>
   );
@@ -41,7 +41,7 @@ type TableHeaderElement = React.ElementRef<'thead'>;
 interface TableHeaderProps extends ComponentPropsWithout<'thead', RemovedProps> {}
 const TableHeader = React.forwardRef<TableHeaderElement, TableHeaderProps>(
   ({ className, ...props }, forwardedRef) => (
-    <thead {...props} ref={forwardedRef} className={classNames('rt-TableHeader', className)} />
+    <thead {...props} ref={forwardedRef} className={classNames('kui-TableHeader', className)} />
   )
 );
 TableHeader.displayName = 'Table.Header';
@@ -50,7 +50,7 @@ type TableBodyElement = React.ElementRef<'tbody'>;
 interface TableBodyProps extends ComponentPropsWithout<'tbody', RemovedProps> {}
 const TableBody = React.forwardRef<TableBodyElement, TableBodyProps>(
   ({ className, ...props }, forwardedRef) => (
-    <tbody {...props} ref={forwardedRef} className={classNames('rt-TableBody', className)} />
+    <tbody {...props} ref={forwardedRef} className={classNames('kui-TableBody', className)} />
   )
 );
 TableBody.displayName = 'Table.Body';
@@ -60,7 +60,7 @@ type TableRowOwnProps = GetPropDefTypes<typeof tableRowPropDefs>;
 interface TableRowProps extends ComponentPropsWithout<'tr', RemovedProps>, TableRowOwnProps {}
 const TableRow = React.forwardRef<TableRowElement, TableRowProps>((props, forwardedRef) => {
   const { className, ...rowProps } = extractProps(props, tableRowPropDefs);
-  return <tr {...rowProps} ref={forwardedRef} className={classNames('rt-TableRow', className)} />;
+  return <tr {...rowProps} ref={forwardedRef} className={classNames('kui-TableRow', className)} />;
 });
 TableRow.displayName = 'Table.Row';
 
@@ -71,7 +71,7 @@ interface TableCellProps
     TableCellOwnProps {}
 const TableCell = React.forwardRef<TableCellElement, TableCellProps>((props, forwardedRef) => {
   const { className, ...cellProps } = extractProps(props, tableCellPropDefs);
-  return <td className={classNames('rt-TableCell', className)} ref={forwardedRef} {...cellProps} />;
+  return <td className={classNames('kui-TableCell', className)} ref={forwardedRef} {...cellProps} />;
 });
 TableCell.displayName = 'Table.Cell';
 
@@ -86,7 +86,7 @@ const TableColumnHeaderCell = React.forwardRef<
   const { className, ...cellProps } = extractProps(props, tableCellPropDefs);
   return (
     <th
-      className={classNames('rt-TableCell', 'rt-TableColumnHeaderCell', className)}
+      className={classNames('kui-TableCell', 'kui-TableColumnHeaderCell', className)}
       scope="col"
       ref={forwardedRef}
       {...cellProps}
@@ -104,7 +104,7 @@ const TableRowHeaderCell = React.forwardRef<TableRowHeaderCellElement, TableRowH
     const { className, ...cellProps } = extractProps(props, tableCellPropDefs);
     return (
       <th
-        className={classNames('rt-TableCell', 'rt-TableRowHeaderCell', className)}
+        className={classNames('kui-TableCell', 'kui-TableRowHeaderCell', className)}
         scope="row"
         ref={forwardedRef}
         {...cellProps}

package/src/components/tabs.css

@@ -1,11 +1,11 @@
 @import './_internal/base-tab-list.css';
 
-.rt-TabsContent {
+.kui-TabsContent {
   position: relative;
   outline: 0;
 }
 
-.rt-TabsContent:where(:focus-visible) {
+.kui-TabsContent:where(:focus-visible) {
   outline: var(--focus-ring-width, 2px) solid var(--focus-8);
   outline-offset: var(--focus-ring-offset, 2px);
 }

package/src/components/tabs.tsx

@@ -21,7 +21,7 @@ const TabsRoot = React.forwardRef<TabsRootElement, TabsRootProps>((props, forwar
     <TabsPrimitive.Root
       {...rootProps}
       ref={forwardedRef}
-      className={classNames('rt-TabsRoot', className)}
+      className={classNames('kui-TabsRoot', className)}
     />
   );
 });
@@ -44,7 +44,7 @@ const TabsList = React.forwardRef<TabsListElement, TabsListProps>((ownProps, for
       {...listProps}
       asChild={false}
       ref={forwardedRef}
-      className={classNames('rt-BaseTabList', 'rt-TabsList', className)}
+      className={classNames('kui-BaseTabList', 'kui-TabsList', className)}
     />
   );
 });
@@ -61,10 +61,10 @@ const TabsTrigger = React.forwardRef<TabsTriggerElement, TabsTriggerProps>(
         {...triggerProps}
         asChild={false}
         ref={forwardedRef}
-        className={classNames('rt-reset', 'rt-BaseTabListTrigger', 'rt-TabsTrigger', className)}
+        className={classNames('kui-reset', 'kui-BaseTabListTrigger', 'kui-TabsTrigger', className)}
       >
-        <span className="rt-BaseTabListTriggerInner rt-TabsTriggerInner">{children}</span>
-        <span className="rt-BaseTabListTriggerInnerHidden rt-TabsTriggerInnerHidden">
+        <span className="kui-BaseTabListTriggerInner kui-TabsTriggerInner">{children}</span>
+        <span className="kui-BaseTabListTriggerInnerHidden kui-TabsTriggerInnerHidden">
           {children}
         </span>
       </TabsPrimitive.Trigger>
@@ -85,7 +85,7 @@ const TabsContent = React.forwardRef<TabsContentElement, TabsContentProps>(
       <TabsPrimitive.Content
         {...contentProps}
         ref={forwardedRef}
-        className={classNames('rt-TabsContent', className)}
+        className={classNames('kui-TabsContent', className)}
         aria-live="polite"
         aria-atomic="true"
       />