@womp/kookie-ui 0.14.5 → 0.15.1

package/src/components/radio-cards.tsx

@@ -1,4 +1,3 @@
-import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
 import * as React from 'react';
 import classNames from 'classnames';
 import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
@@ -37,13 +36,11 @@ interface RadioCardsRootProps
 const RadioCardsRoot = React.forwardRef<RadioCardsRootElement, RadioCardsRootProps>(
   (props, forwardedRef) => {
     const themeContext = useThemeContext();
-    useDeprecatedPanelBackgroundWarning(props.panelBackground);
-    const panelBackground = props.material ?? props.panelBackground ?? themeContext.material ?? themeContext.panelBackground;
+    const resolvedMaterial = props.material ?? themeContext.material;
     const {
       className,
       color,
       material: _material,
-      panelBackground: _,
       ...rootProps
     } = extractProps(props, radioCardsRootPropDefs, marginPropDefs);
     return (
@@ -51,8 +48,7 @@ const RadioCardsRoot = React.forwardRef<RadioCardsRootElement, RadioCardsRootPro
         <Grid asChild>
           <RadioGroupPrimitive.Root
             data-accent-color={color}
-            data-panel-background={panelBackground}
-            data-material={panelBackground}
+            data-material={resolvedMaterial}
             {...rootProps}
             ref={forwardedRef}
             className={classNames('rt-RadioCardsRoot', className)}

package/src/components/radio-group.props.tsx

@@ -1,4 +1,3 @@
-import { parseVariant } from '../helpers/parse-variant.js';
 import { baseRadioPropDefs } from './_internal/base-radio.props.js';
 import { asChildPropDef } from '../props/as-child.prop.js';
 import { colorPropDef } from '../props/color.prop.js';
@@ -12,7 +11,7 @@ const variants = baseRadioPropDefs.variant.values;
 const radioGroupRootPropDefs = {
   ...asChildPropDef,
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised', parseValue: parseVariant },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised' },
   ...colorPropDef,
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;

package/src/components/radio.tsx

@@ -25,7 +25,7 @@ type RadioInputProps = ComponentPropsWithout<
 interface RadioProps extends RadioInputProps, MarginProps, RadioOwnProps {}
 
 const Radio = React.forwardRef<RadioElement, RadioProps>((props, forwardedRef) => {
-  const { className, color, material, onChange, onValueChange, ...radioProps } = extractProps(
+  const { className, color, onChange, onValueChange, ...radioProps } = extractProps(
     props,
     radioPropDefs,
     marginPropDefs,
@@ -34,7 +34,6 @@ const Radio = React.forwardRef<RadioElement, RadioProps>((props, forwardedRef) =
     <input
       type="radio"
       data-accent-color={color}
-      data-material={material}
       {...radioProps}
       onChange={composeEventHandlers(onChange, (event) =>
         onValueChange?.(event.currentTarget.value),

package/src/components/reset.css

@@ -37,22 +37,9 @@
     all: unset;
     -webkit-tap-highlight-color: transparent;
   }
-  &:where(
-      button,
-      select,
-
-      /* Buttons */
-      [type='button'],
-      [type='image'],
-      [type='reset'],
-      [type='submit'],
-
-      /* Non-textual inputs */
-      [type='checkbox'],
-      [type='color'],
-      [type='radio'],
-      [type='range']
-    ) {
+  &:where(button, select, /* Buttons */
+      [type='button'], [type='image'], [type='reset'], [type='submit'], /* Non-textual inputs */
+      [type='checkbox'], [type='color'], [type='radio'], [type='range']) {
     all: unset;
     display: inline-block;
     font-weight: normal;

package/src/components/schemas/base-button.schema.ts

@@ -60,7 +60,7 @@ export const BaseButtonSchema = z
      * @default 'solid'
      */
     variant: z
-      .enum(['raised', 'solid', 'soft', 'surface', 'outline', 'ghost', 'override', 'classic'])
+      .enum(['raised', 'solid', 'soft', 'surface', 'outline', 'ghost'])
       .default('solid')
       .describe("Visual variant that determines the button's appearance and context"),
 
@@ -118,17 +118,6 @@ export const BaseButtonSchema = z
       .default(false)
       .describe('Loading state that shows a spinner and disables interaction'),
 
-    /**
-     * Full width mode that expands the button to fill its container
-     * Useful for mobile layouts and form submissions
-     * @default false
-     */
-    fullWidth: z
-      .boolean()
-      .optional()
-      .default(false)
-      .describe('Full width mode that expands the button to fill its container'),
-
     /**
      * Material type for visual rendering and depth effects
      * Controls how the button renders its visual elements
@@ -138,15 +127,6 @@ export const BaseButtonSchema = z
       .optional()
       .describe('Material type for visual rendering and depth effects'),
 
-    /**
-     * Panel background type (deprecated)
-     * @deprecated Use `material` prop instead. This prop will be removed in a future version.
-     */
-    panelBackground: z
-      .enum(['solid', 'translucent'])
-      .optional()
-      .describe('Panel background type (deprecated - use material instead)'),
-
     /**
      * Flush mode that removes visual padding for seamless text integration
      * Only effective with ghost variant

package/src/components/schemas/button.schema.ts

@@ -44,6 +44,21 @@ export const ButtonSchema = BaseButtonSchema.extend({
     .default('top')
     .describe('Side of the button where the tooltip should appear'),
 
+  /**
+   * The button's rank: loud is solid, medium is raised, quiet is ghost. Pass this or `variant`, not both.
+   */
+  emphasis: z.enum(['loud', 'medium', 'quiet']).optional().describe("The button's rank: loud (solid), medium (raised) or quiet (ghost). Not with variant."),
+
+  /**
+   * A square button holding only an icon. Needs an accessible name.
+   */
+  iconOnly: z.boolean().optional().default(false).describe('Square button holding only an icon; needs aria-label'),
+
+  /**
+   * Expands the button to fill its container. Ignored when iconOnly is set.
+   */
+  fullWidth: z.boolean().optional().default(false).describe('Expands the button to fill its container'),
+
   /**
    * Alignment of the tooltip relative to the button
    * @default 'center'
@@ -71,100 +86,6 @@ export const ButtonSchema = BaseButtonSchema.extend({
     .optional()
     .default(false)
     .describe('Whether to disable hoverable content behavior'),
-
-  /**
-   * Override styles for different interaction states
-   */
-  overrideStyles: z
-    .object({
-      /** Default/idle state styles */
-      normal: z
-        .object({
-          color: z.string().optional(),
-          background: z.string().optional(),
-          backgroundColor: z.string().optional(),
-          boxShadow: z.string().optional(),
-          filter: z.string().optional(),
-          outline: z.string().optional(),
-          outlineOffset: z.string().optional(),
-          opacity: z.union([z.string(), z.number()]).optional(),
-        })
-        .optional(),
-      /** Hover state styles */
-      hover: z
-        .object({
-          color: z.string().optional(),
-          background: z.string().optional(),
-          backgroundColor: z.string().optional(),
-          boxShadow: z.string().optional(),
-          filter: z.string().optional(),
-          outline: z.string().optional(),
-          outlineOffset: z.string().optional(),
-          opacity: z.union([z.string(), z.number()]).optional(),
-        })
-        .optional(),
-      /** Active (mouse down) state styles */
-      active: z
-        .object({
-          color: z.string().optional(),
-          background: z.string().optional(),
-          backgroundColor: z.string().optional(),
-          boxShadow: z.string().optional(),
-          filter: z.string().optional(),
-          outline: z.string().optional(),
-          outlineOffset: z.string().optional(),
-          opacity: z.union([z.string(), z.number()]).optional(),
-        })
-        .optional(),
-      /** Toggle pressed state styles (data-state="on") */
-      pressed: z
-        .object({
-          color: z.string().optional(),
-          background: z.string().optional(),
-          backgroundColor: z.string().optional(),
-          boxShadow: z.string().optional(),
-          filter: z.string().optional(),
-          outline: z.string().optional(),
-          outlineOffset: z.string().optional(),
-          opacity: z.union([z.string(), z.number()]).optional(),
-        })
-        .optional(),
-      /** Open state styles (e.g., when used as a trigger) */
-      open: z
-        .object({
-          color: z.string().optional(),
-          background: z.string().optional(),
-          backgroundColor: z.string().optional(),
-          boxShadow: z.string().optional(),
-          filter: z.string().optional(),
-          outline: z.string().optional(),
-          outlineOffset: z.string().optional(),
-          opacity: z.union([z.string(), z.number()]).optional(),
-        })
-        .optional(),
-      /** Disabled state styles */
-      disabled: z
-        .object({
-          color: z.string().optional(),
-          background: z.string().optional(),
-          backgroundColor: z.string().optional(),
-          boxShadow: z.string().optional(),
-          filter: z.string().optional(),
-          outline: z.string().optional(),
-          outlineOffset: z.string().optional(),
-          opacity: z.union([z.string(), z.number()]).optional(),
-        })
-        .optional(),
-      /** Focus-visible outline styles */
-      focus: z
-        .object({
-          outline: z.string().optional(),
-          outlineOffset: z.string().optional(),
-        })
-        .optional(),
-    })
-    .optional()
-    .describe('Override styles for different interaction states'),
 }).strict();
 
 /**

package/src/components/schemas/shell.schema.ts

@@ -21,7 +21,7 @@ import { z } from 'zod';
 
 // Common types
 const PaneModeSchema = z.enum(['expanded', 'collapsed']).describe('Pane state mode');
-const SidebarModeSchema = z.enum(['collapsed', 'thin', 'expanded']).describe('Sidebar state');
+const SidebarModeSchema = z.enum(['collapsed', 'expanded']).describe('Sidebar state');
 const PresentationValueSchema = z.enum(['fixed', 'overlay', 'stacked']).describe('Presentation mode');
 const _BreakpointSchema = z.enum(['initial', 'xs', 'sm', 'md', 'lg', 'xl']).describe('Responsive breakpoint');
 const PaneTargetSchema = z.enum(['left', 'rail', 'panel', 'sidebar', 'inspector', 'bottom']).describe('Pane target. `left` is deprecated: use `rail`.');
@@ -123,6 +123,7 @@ export const ShellRootSchema = z
       .union([z.literal('full'), z.literal('auto'), z.string(), z.number()])
       .default('full')
       .describe('Height of the frame. `full` is 100dvh, with 100vh where dvh is not supported.'),
+    size: z.enum(['1', '2', '3']).default('2').describe('Index of the pane chrome and the Sidebar rows in it'),
     className: z.string().optional().describe('Additional CSS class name'),
     style: StyleSchema,
     children: z.any().optional().describe('The Shell parts, and anything else, rendered in order'),
@@ -188,8 +189,6 @@ export const ShellSidebarSchema = z
     expandedSize: z.number().default(288).describe('Open width in pixels'),
     minSize: z.number().default(200).describe('Minimum width when resizing'),
     maxSize: z.number().default(400).describe('Maximum width when resizing'),
-    thinSize: z.number().default(64).describe('Width in the thin state'),
-    toggleModes: z.enum(['both', 'single']).default('both').describe('`both` goes collapsed, thin, expanded; `single` goes between collapsed and one open state'),
     resizable: z.boolean().default(false).describe('Whether the sidebar can be resized'),
     collapsible: z.boolean().default(true).describe('Whether a double-click on the handle closes the sidebar'),
   })

package/src/components/scroll-area.css

@@ -109,16 +109,6 @@
 
 .rt-ScrollAreaScrollbar {
   border-radius: var(--scrollarea-scrollbar-border-radius);
-
-  animation-duration: var(--motion-duration-micro);
-  animation-timing-function: var(--motion-ease-standard);
-
-  &:where([data-state='visible']) {
-    animation-name: rt-fade-in;
-  }
-  &:where([data-state='hidden']) {
-    animation-name: rt-fade-out;
-  }
   &:where([data-orientation='horizontal']) {
     margin-top: var(--scrollarea-scrollbar-horizontal-margin-top);
     margin-bottom: var(--scrollarea-scrollbar-horizontal-margin-bottom);
@@ -136,7 +126,6 @@
 .rt-ScrollAreaThumb {
   background-color: var(--gray-a6);
   border-radius: inherit;
-  transition: background-color var(--motion-duration-micro) var(--motion-ease-standard);
 
   @media (hover: hover) {
     &:where(:hover) {

package/src/components/scroll-area.tsx

@@ -5,6 +5,7 @@ import { useComposedRefs } from 'radix-ui/internal';
 
 import { scrollAreaPropDefs } from './scroll-area.props.js';
 import { useScrollEdges } from '../hooks/use-scroll-edges.js';
+import { useThumbSync } from '../hooks/use-thumb-sync.js';
 import { extractMarginProps } from '../helpers/extract-margin-props.js';
 import { getMarginStyles } from '../helpers/get-margin-styles.js';
 import { getResponsiveClassNames } from '../helpers/get-responsive-styles.js';
@@ -41,7 +42,8 @@ const ScrollArea = React.forwardRef<ScrollAreaElement, ScrollAreaProps>((props,
     ...viewportProps
   } = marginRest;
   const setEdgesElement = useScrollEdges<HTMLDivElement>(fade);
-  const viewportRef = useComposedRefs(forwardedRef, setEdgesElement);
+  const setThumbViewport = useThumbSync<HTMLDivElement>();
+  const viewportRef = useComposedRefs(forwardedRef, setEdgesElement, setThumbViewport);
 
   return (
     <ScrollAreaPrimitive.Root

package/src/components/segmented-control.css

@@ -1,8 +1,4 @@
 /* stylelint-disable selector-max-specificity */
-.radix-themes {
-  /* Use standard duration token instead of custom duration */
-  --segmented-control-transition-duration: var(--motion-duration-micro); /* Micro-interactions */
-}
 
 .rt-SegmentedControlRoot {
   display: inline-grid;
@@ -30,7 +26,7 @@
    * Theme-level translucent override
    * Applies backdrop filter for elevated visual effects
    */
-  :where([data-panel-background='translucent'], [data-material='translucent']) & {
+  :where([data-material='translucent']) & {
     backdrop-filter: var(--backdrop-filter-components);
     --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
@@ -39,12 +35,12 @@
    * Component-level material overrides
    * These ensure proper rendering based on material setting
    */
-  &:where([data-panel-background='solid'], [data-material='solid']) {
+  &:where([data-material='solid']) {
     backdrop-filter: none;
     --backdrop-filter-components: none;
   }
   
-  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+  &:where([data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-components);
     --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
@@ -130,30 +126,28 @@
 .rt-SegmentedControlItemLabelInactive {
   position: absolute;
 
-  transition: var(--transition-tabs);
   font-weight: var(--font-weight-regular);
   letter-spacing: var(--tab-inactive-letter-spacing);
   word-spacing: var(--tab-inactive-word-spacing);
 
   opacity: 1;
-  transition-delay: var(--duration-1); /* Staggered effect like tabs */
+ /* Staggered effect like tabs */
   :where(.rt-SegmentedControlItem[data-state='on']) & {
     opacity: 0;
-    transition-delay: 0ms; /* Immediate transition for state change */
+ /* Immediate transition for state change */
   }
 }
 
 .rt-SegmentedControlItemLabelActive {
-  transition: var(--transition-tabs);
   font-weight: var(--font-weight-medium);
   letter-spacing: var(--tab-active-letter-spacing);
   word-spacing: var(--tab-active-word-spacing);
 
   opacity: 0;
-  transition-delay: 0ms; /* Immediate transition for active state like tabs */
+ /* Immediate transition for active state like tabs */
   :where(.rt-SegmentedControlItem[data-state='on']) & {
     opacity: 1;
-    transition-delay: 0ms; /* Immediate transition for active state */
+ /* Immediate transition for active state */
   }
 }
 
@@ -172,7 +166,6 @@
   margin-right: calc(-1 * var(--border-width-standard) * 0.5); /* -0.5px */
   width: var(--border-width-standard); /* 1px */
   background-color: var(--gray-a4);
-  transition: opacity calc(0.8 * var(--segmented-control-transition-duration)) var(--motion-ease-standard);
 
   /* Make separators slow to disappear and fast to appear, syncing it well with the indicator motion */
 
@@ -180,12 +173,8 @@
   :where(.rt-SegmentedControlItem:where([data-state='on'], :focus-visible)) &,
   :where(.rt-SegmentedControlItem:where([data-state='on'], :focus-visible)) + * & {
     opacity: 0;
-    transition-timing-function: var(--ease-1);
   }
   /* Don't transition when the separator is hidden because of the focus outline */
-  :where(.rt-SegmentedControlRoot:has(:focus-visible)) & {
-    transition-duration: 0ms;
-  }
 }
 
 /* Vertical orientation - separator */
@@ -210,7 +199,6 @@
   left: 0;
   height: 100%;
   pointer-events: none;
-  transition: transform var(--segmented-control-transition-duration) var(--motion-spring-snappy);
 
   &::before {
     inset: var(--border-width-standard); /* 1px */
@@ -536,21 +524,21 @@
 /*                                     */
 /* * * * * * * * * * * * * * * * * * * */
 
-.rt-SegmentedControlRoot:where(.rt-variant-soft) {
+.rt-SegmentedControlRoot {
   /* Base state: solid color for solid panels */
   background-color: var(--gray-3);
 
   /* Theme-level translucent override */
-  :where([data-panel-background='translucent'], [data-material='translucent']) & {
+  :where([data-material='translucent']) & {
     background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
   }
 
   /* Component-level overrides (higher specificity) */
-  &:where([data-panel-background='solid'], [data-material='solid']) {
+  &:where([data-material='solid']) {
     background-color: var(--gray-3);
   }
 
-  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+  &:where([data-material='translucent']) {
     background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
   }
 }

package/src/components/segmented-control.props.tsx

@@ -3,13 +3,11 @@ import { radiusPropDef } from '../props/radius.prop.js';
 import type { PropDef } from '../props/prop-def.js';
 
 const sizes = ['1', '2', '3', '4'] as const;
-const variants = ['soft'] as const;
 const orientations = ['horizontal', 'vertical'] as const;
 
 const segmentedControlRootPropDefs = {
   disabled: { type: 'boolean', className: 'disabled', default: false },
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'soft' },
   orientation: {
     type: 'enum',
     className: 'rt-r-orientation',
@@ -18,16 +16,12 @@ const segmentedControlRootPropDefs = {
     responsive: true,
   },
   material: { type: 'enum', values: ['solid', 'translucent'] },
-  /** @deprecated Use `material`. Removed in 0.15.0. */
-  panelBackground: { type: 'enum', values: ['solid', 'translucent'] },
   ...radiusPropDef,
 } satisfies {
   disabled?: PropDef<boolean>;
   size: PropDef<(typeof sizes)[number]>;
-  variant: PropDef<(typeof variants)[number]>;
   orientation: PropDef<(typeof orientations)[number]>;
   material: PropDef<'solid' | 'translucent'>;
-  panelBackground: PropDef<'solid' | 'translucent'>;
 };
 
 export { segmentedControlRootPropDefs };

package/src/components/segmented-control.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
 import { warnDeprecated } from '../helpers/warn-deprecated.js';
 import * as React from 'react';
 import classNames from 'classnames';
@@ -36,15 +35,10 @@ const SegmentedControlRoot = React.forwardRef<HTMLDivElement, SegmentedControlRo
       defaultValue: defaultValueProp,
       onValueChange: onValueChangeProp,
       material: materialProp,
-      panelBackground,
       ...rootProps
     } = extractProps(props, segmentedControlRootPropDefs, marginPropDefs);
-    useDeprecatedPanelBackgroundWarning(props.panelBackground);
-    const material = materialProp ?? panelBackground;
+    const material = materialProp;
 
-    if (props.variant !== undefined) {
-      warnDeprecated('SegmentedControl `variant` is deprecated and will be removed in 0.15.0. It has one value, so it chooses nothing.');
-    }
 
     const [value, setValue] = useControllableState({
       prop: valueProp,
@@ -56,7 +50,6 @@ const SegmentedControlRoot = React.forwardRef<HTMLDivElement, SegmentedControlRo
       <ToggleGroupPrimitive.Root
         data-disabled={props.disabled || undefined}
         data-radius={radius}
-        data-panel-background={material}
         data-material={material}
         ref={forwardedRef}
         className={classNames('rt-SegmentedControlRoot', className)}