@womp/kookie-ui 0.17.0 → 0.18.0

package/src/components/notice.tsx

@@ -24,16 +24,20 @@ import classNames from 'classnames';
 import { Button } from './button.js';
 import { IconButton } from './icon-button.js';
 import { Text } from './text.js';
+import { useThemeSize } from '../helpers/theme-size.js';
 import { accentColorPropDef } from '../props/color.prop.js';
 
 type NoticeSize = '1' | '2' | '3';
 
 /** The size a notice takes when it doesn't set one. `Chatbar.Root` provides its own size here. */
 const NoticeSizeContext = React.createContext<NoticeSize | undefined>(undefined);
+
+/** Notice's own range; a Theme size of 4 maps to 3. */
+const noticeSizePropDef = { values: ['1', '2', '3'] as const };
 type NoticeColor = (typeof accentColorPropDef)['color']['values'][number];
 
 interface StripProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children'> {
-  /** Padding, text and button size. Default `2`. */
+  /** Padding, text and button size. Defaults to the nearest Theme's size (3 when the Theme is 4). */
   size?: NoticeSize;
   /**
    * The category of the message, not its volume. Default `gray`. Use a colour only when it adds a
@@ -98,7 +102,7 @@ Strip.displayName = 'Strip';
 /** A condition that is true now, with at most one action that fixes it. */
 const Notice = React.forwardRef<HTMLDivElement, NoticeProps>(({ icon, action, onDismiss, dismissLabel = 'Dismiss', size: sizeProp, ...props }, forwardedRef) => {
   const contextSize = React.useContext(NoticeSizeContext);
-  const size = sizeProp ?? contextSize ?? '2';
+  const size = useThemeSize(sizeProp ?? contextSize, noticeSizePropDef);
   const trailing =
     action || onDismiss ? (
       <span className="rt-NoticeActions">
@@ -120,7 +124,7 @@ Notice.displayName = 'Notice';
 const Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(
   ({ confirmLabel, cancelLabel = 'Not now', onConfirm, onCancel, busy = false, size: sizeProp, color = 'gray', ...props }, forwardedRef) => {
     const contextSize = React.useContext(NoticeSizeContext);
-    const size = sizeProp ?? contextSize ?? '2';
+    const size = useThemeSize(sizeProp ?? contextSize, noticeSizePropDef);
     return (
     <Strip
       {...props}

package/src/components/popover.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { Popover as PopoverPrimitive } from 'radix-ui';
 
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
 import { popoverContentPropDefs } from './popover.props.js';
 import { Theme } from './theme.js';
@@ -58,7 +59,8 @@ interface PopoverContentProps
   container?: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Portal>['container'];
 }
 const PopoverContent = React.forwardRef<PopoverContentElement, PopoverContentProps>(
-  (props, forwardedRef) => {
+  (ownProps, forwardedRef) => {
+    const props = useThemeSizeProps(ownProps, popoverContentPropDefs.size);
     const {
       className,
       forceMount,

package/src/components/progress.css

@@ -2,6 +2,9 @@
   --progress-value: 0;
   --progress-max: 100;
   --progress-duration: var(--progress-default-duration);
+  --progress-height: var(--progress-slider-height-2);
+  --progress-radius: var(--progress-slider-radius-2);
+  --progress-indicator-radius: var(--progress-slider-radius-2);
   pointer-events: none;
   position: relative;
   overflow: hidden;
@@ -25,11 +28,7 @@
    * `.rt-ProgressRoot` clips the overhang. `max()` keeps a sliver of the bar
    * visible at very low values, as the width form did.
    */
-  transform: translateX(
-    calc(
-      -100% + max(calc(var(--progress-value) / var(--progress-max) * 100%), var(--progress-height))
-    )
-  );
+  transform: translateX(calc(-100% + max(calc(var(--progress-value) / var(--progress-max) * 100%), var(--progress-height))));
 
   &:where([data-state='indeterminate']) {
     animation-name: rt-progress-indicator-indeterminate-grow;
@@ -59,37 +58,6 @@
   }
 }
 
-/***************************************************************************************************
- *                                                                                                 *
- * SIZES                                                                                           *
- *                                                                                                 *
- ***************************************************************************************************/
-
-@breakpoints {
-  .rt-ProgressRoot {
-    &:where(.rt-r-size-1) {
-      --progress-height: var(--progress-slider-height-1);
-      --progress-radius: var(--progress-slider-radius-1);
-      --progress-indicator-radius: var(--progress-slider-radius-1);
-    }
-    &:where(.rt-r-size-2) {
-      --progress-height: var(--progress-slider-height-2);
-      --progress-radius: var(--progress-slider-radius-2);
-      --progress-indicator-radius: var(--progress-slider-radius-2);
-    }
-    &:where(.rt-r-size-3) {
-      --progress-height: var(--progress-slider-height-3);
-      --progress-radius: var(--progress-slider-radius-3);
-      --progress-indicator-radius: var(--progress-slider-radius-3);
-    }
-    &:where(.rt-r-size-4) {
-      --progress-height: var(--progress-slider-height-4);
-      --progress-radius: var(--progress-slider-radius-4);
-      --progress-indicator-radius: var(--progress-slider-radius-4);
-    }
-  }
-}
-
 /***************************************************************************************************
  *                                                                                                 *
  * VARIANTS                                                                                        *
@@ -127,4 +95,3 @@
     background-color: var(--accent-solid);
   }
 }
-

package/src/components/progress.props.tsx

@@ -3,17 +3,14 @@ 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 = ['surface', 'soft', 'outline'] as const;
 
 const progressPropDefs = {
-  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },
   ...colorPropDef,
   ...radiusPropDef,
   duration: { type: 'string' },
 } satisfies {
-  size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
   duration: PropDef<string>;
 };

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

@@ -4,7 +4,7 @@ import { colorPropDef } from '../props/color.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
-const sizes = ['1', '2', '3'] as const;
+const sizes = ['1', '2', '3', '4'] as const;
 // The same list as Radio: a group offers exactly what its items can draw.
 const variants = baseRadioPropDefs.variant.values;
 

package/src/components/radio-group.tsx

@@ -8,6 +8,7 @@ import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
 import { radioGroupRootPropDefs } from './radio-group.props.js';
 import { Text } from './text.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSize } from '../helpers/theme-size.js';
 import { marginPropDefs } from '../props/margin.props.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
@@ -40,12 +41,13 @@ const RadioGroupRoot = React.forwardRef<RadioGroupRootElement, RadioGroupRootPro
   (
     {
       color = radioGroupRootPropDefs.color.default,
-      size = radioGroupRootPropDefs.size.default,
+      size: sizeProp,
       variant = radioGroupRootPropDefs.variant.default,
       ...props
     }: ScopedProps<RadioGroupRootProps>,
     forwardedRef
   ) => {
+    const size = useThemeSize(sizeProp, radioGroupRootPropDefs.size);
     const { __scopeRadioGroup, className, ...rootProps } = extractProps(props, marginPropDefs);
     const radioGroupScope = useRadioGroupScope(__scopeRadioGroup);
     return (

package/src/components/radio.tsx

@@ -7,6 +7,7 @@ import { composeEventHandlers } from 'radix-ui/internal';
 import { radioPropDefs } from './radio.props.js';
 import { marginPropDefs } from '../props/margin.props.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 
 import type { MarginProps } from '../props/margin.props.js';
 import type { ComponentPropsWithout } from '../helpers/component-props.js';
@@ -24,7 +25,8 @@ type RadioInputProps = ComponentPropsWithout<
 >;
 interface RadioProps extends RadioInputProps, MarginProps, RadioOwnProps {}
 
-const Radio = React.forwardRef<RadioElement, RadioProps>((props, forwardedRef) => {
+const Radio = React.forwardRef<RadioElement, RadioProps>((ownProps, forwardedRef) => {
+  const props = useThemeSizeProps(ownProps, radioPropDefs.size);
   const { className, color, onChange, onValueChange, ...radioProps } = extractProps(
     props,
     radioPropDefs,

package/src/components/scroll-area.css

@@ -7,6 +7,8 @@
   --scrollarea-scrollbar-vertical-margin-bottom: var(--space-2);
   --scrollarea-scrollbar-vertical-margin-left: var(--space-2);
   --scrollarea-scrollbar-vertical-margin-right: var(--space-2);
+  --scrollarea-scrollbar-size: var(--space-2);
+  --scrollarea-scrollbar-border-radius: var(--radius-pill-1);
 }
 
 .rt-ScrollAreaRoot {
@@ -78,29 +80,6 @@
   }
 }
 
-/***************************************************************************************************
- *                                                                                                 *
- * SIZES                                                                                           *
- *                                                                                                 *
- ***************************************************************************************************/
-
-@breakpoints {
-  .rt-ScrollAreaScrollbar {
-    &:where(.rt-r-size-1) {
-      --scrollarea-scrollbar-size: var(--space-2);
-      --scrollarea-scrollbar-border-radius: var(--radius-pill-1);
-    }
-    &:where(.rt-r-size-2) {
-      --scrollarea-scrollbar-size: var(--space-3);
-      --scrollarea-scrollbar-border-radius: var(--radius-pill-1);
-    }
-    &:where(.rt-r-size-3) {
-      --scrollarea-scrollbar-size: var(--space-4);
-      --scrollarea-scrollbar-border-radius: var(--radius-pill-1);
-    }
-  }
-}
-
 /***************************************************************************************************
  *                                                                                                 *
  * VARIANTS                                                                                        *

package/src/components/scroll-area.props.tsx

@@ -3,12 +3,10 @@ import { radiusPropDef } from '../props/radius.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
-const sizes = ['1', '2', '3'] as const;
 const scrollbarsValues = ['vertical', 'horizontal', 'both'] as const;
 
 const scrollAreaPropDefs = {
   ...asChildPropDef,
-  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '1', responsive: true },
   ...radiusPropDef,
   scrollbars: { type: 'enum', values: scrollbarsValues, default: 'both' },
   /**
@@ -19,7 +17,6 @@ const scrollAreaPropDefs = {
    */
   fade: { type: 'boolean', default: false },
 } satisfies {
-  size: PropDef<(typeof sizes)[number]>;
   scrollbars: PropDef<(typeof scrollbarsValues)[number]>;
   fade: PropDef<boolean>;
 };

package/src/components/scroll-area.tsx

@@ -8,7 +8,6 @@ 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';
 import { getSubtree } from '../helpers/get-subtree.js';
 import { mergeStyles } from '../helpers/merge-styles.js';
 
@@ -35,7 +34,6 @@ const ScrollArea = React.forwardRef<ScrollAreaElement, ScrollAreaProps>((props,
     type,
     scrollHideDelay = type !== 'scroll' ? 0 : undefined,
     dir,
-    size = scrollAreaPropDefs.size.default,
     radius = scrollAreaPropDefs.radius.default,
     scrollbars = scrollAreaPropDefs.scrollbars.default,
     fade = scrollAreaPropDefs.fade.default,
@@ -70,14 +68,7 @@ const ScrollArea = React.forwardRef<ScrollAreaElement, ScrollAreaProps>((props,
             <ScrollAreaPrimitive.Scrollbar
               data-radius={radius}
               orientation="horizontal"
-              className={classNames(
-                'rt-ScrollAreaScrollbar',
-                getResponsiveClassNames({
-                  className: 'rt-r-size',
-                  value: size,
-                  propValues: scrollAreaPropDefs.size.values,
-                }),
-              )}
+              className="rt-ScrollAreaScrollbar"
             >
               <ScrollAreaPrimitive.Thumb className="rt-ScrollAreaThumb" />
             </ScrollAreaPrimitive.Scrollbar>
@@ -87,14 +78,7 @@ const ScrollArea = React.forwardRef<ScrollAreaElement, ScrollAreaProps>((props,
             <ScrollAreaPrimitive.Scrollbar
               data-radius={radius}
               orientation="vertical"
-              className={classNames(
-                'rt-ScrollAreaScrollbar',
-                getResponsiveClassNames({
-                  className: 'rt-r-size',
-                  value: size,
-                  propValues: scrollAreaPropDefs.size.values,
-                }),
-              )}
+              className="rt-ScrollAreaScrollbar"
             >
               <ScrollAreaPrimitive.Thumb className="rt-ScrollAreaThumb" />
             </ScrollAreaPrimitive.Scrollbar>

package/src/components/segmented-control.css

@@ -23,9 +23,16 @@
   isolation: isolate;
 }
 
+/* Disabled is a colour remap, never opacity, with a default cursor. */
 .rt-SegmentedControlRoot:where([data-disabled]) {
   color: var(--gray-a8);
   background-color: var(--gray-3);
+  cursor: default;
+}
+
+.rt-SegmentedControlItem:where([disabled]) {
+  color: var(--gray-a8);
+  cursor: default;
 }
 
 /* * * * * * * * * * * * * * * * * * * */
@@ -50,9 +57,10 @@
     border-bottom-right-radius: inherit;
   }
 
+  /* Drawn inside the track, which clips anything outside its own box. */
   &:where(:focus-visible) {
     border-radius: inherit;
-    outline: var(--focus-outline-width) solid var(--focus-8);
+    outline: var(--focus-ring-width, 2px) solid var(--focus-8);
     outline-offset: var(--focus-outline-offset-inset);
   }
 }
@@ -88,11 +96,15 @@
     flex-shrink: 0;
   }
 
+  /* Hover is one step up, press two. A disabled segment takes neither. */
   @media (hover: hover) {
     :where(.rt-SegmentedControlItem[data-state='off']:not([disabled]):hover) & {
       background-color: var(--gray-a2);
     }
   }
+  :where(.rt-SegmentedControlItem[data-state='off']:not([disabled]):active) & {
+    background-color: var(--gray-a3);
+  }
 }
 
 .rt-SegmentedControlItemLabelInactive {
@@ -382,15 +394,14 @@
       & :where(.rt-SegmentedControlItemLabel) {
         font-size: var(--font-size-1);
         letter-spacing: var(--letter-spacing-1);
-        padding-left: var(--space-4);
-        padding-right: var(--space-4);
-        gap: var(--component-gap-1);
+        padding-inline: var(--control-px-1);
+        gap: var(--control-gap-1);
 
         /* Icon sizing for size 1 */
         /* stylelint-disable-next-line selector-max-type */
         & :where(svg) {
-          width: var(--content-icon-size-1);
-          height: var(--content-icon-size-1);
+          width: var(--icon-size-1);
+          height: var(--icon-size-1);
         }
       }
     }
@@ -413,15 +424,14 @@
       & :where(.rt-SegmentedControlItemLabel) {
         font-size: var(--font-size-2);
         letter-spacing: var(--letter-spacing-2);
-        padding-left: var(--space-5);
-        padding-right: var(--space-5);
-        gap: var(--component-gap-2);
+        padding-inline: var(--control-px-2);
+        gap: var(--control-gap-2);
 
         /* Icon sizing for size 2 */
         /* stylelint-disable-next-line selector-max-type */
         & :where(svg) {
-          width: var(--content-icon-size-2);
-          height: var(--content-icon-size-2);
+          width: var(--icon-size-2);
+          height: var(--icon-size-2);
         }
       }
     }
@@ -444,15 +454,14 @@
       & :where(.rt-SegmentedControlItemLabel) {
         font-size: var(--font-size-3);
         letter-spacing: var(--letter-spacing-3);
-        padding-left: var(--space-5);
-        padding-right: var(--space-5);
-        gap: var(--component-gap-3);
+        padding-inline: var(--control-px-3);
+        gap: var(--control-gap-3);
 
         /* Icon sizing for size 3 */
         /* stylelint-disable-next-line selector-max-type */
         & :where(svg) {
-          width: var(--content-icon-size-3);
-          height: var(--content-icon-size-3);
+          width: var(--icon-size-3);
+          height: var(--icon-size-3);
         }
       }
     }
@@ -475,15 +484,14 @@
       & :where(.rt-SegmentedControlItemLabel) {
         font-size: var(--font-size-4);
         letter-spacing: var(--letter-spacing-4);
-        padding-left: var(--space-6);
-        padding-right: var(--space-6);
-        gap: var(--component-gap-4);
+        padding-inline: var(--control-px-4);
+        gap: var(--control-gap-4);
 
         /* Icon sizing for size 4 */
         /* stylelint-disable-next-line selector-max-type */
         & :where(svg) {
-          width: var(--content-icon-size-4);
-          height: var(--content-icon-size-4);
+          width: var(--icon-size-4);
+          height: var(--icon-size-4);
         }
       }
     }
@@ -517,8 +525,7 @@
 
   /* Remove padding and center icon */
   & :where(.rt-SegmentedControlItemLabel) {
-    padding-left: 0;
-    padding-right: 0;
+    padding-inline: 0;
   }
 }
 
@@ -536,16 +543,16 @@
 
 /* Vertical icon-only root width (explicit since nested :has() in @breakpoints may not work) */
 .rt-SegmentedControlRoot:where(.rt-r-orientation-vertical):where(.rt-r-size-1):has([data-icon-only]) {
-  width: var(--space-6);
+  width: var(--control-height-1);
 }
 .rt-SegmentedControlRoot:where(.rt-r-orientation-vertical):where(.rt-r-size-2):has([data-icon-only]) {
-  width: var(--space-7);
+  width: var(--control-height-2);
 }
 .rt-SegmentedControlRoot:where(.rt-r-orientation-vertical):where(.rt-r-size-3):has([data-icon-only]) {
-  width: var(--space-8);
+  width: var(--control-height-3);
 }
 .rt-SegmentedControlRoot:where(.rt-r-orientation-vertical):where(.rt-r-size-4):has([data-icon-only]) {
-  width: var(--space-9);
+  width: var(--control-height-4);
 }
 
 /* Vertical text items need vertical padding */

package/src/components/segmented-control.tsx

@@ -8,6 +8,7 @@ import { useControllableState } from 'radix-ui/internal';
 
 import { segmentedControlRootPropDefs } from './segmented-control.props.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { marginPropDefs } from '../props/margin.props.js';
 
 import type { MarginProps } from '../props/margin.props.js';
@@ -26,7 +27,8 @@ interface SegmentedControlRootProps
 }
 
 const SegmentedControlRoot = React.forwardRef<HTMLDivElement, SegmentedControlRootProps>(
-  (props, forwardedRef) => {
+  (ownProps, forwardedRef) => {
+    const props = useThemeSizeProps(ownProps, segmentedControlRootPropDefs.size);
     const {
       className,
       children,