@womp/kookie-ui 0.24.0 → 0.25.0

package/src/components/segmented-control.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { ToggleGroup as ToggleGroupPrimitive } from 'radix-ui';
-import { useComposedRefs, useControllableState } from 'radix-ui/internal';
+import { useComposedRefs, useControllableState, useLayoutEffect } from 'radix-ui/internal';
 
 import { segmentedControlRootPropDefs } from './segmented-control.props.js';
 import { extractProps } from '../helpers/extract-props.js';
@@ -14,60 +14,77 @@ import type { GetPropDefTypes } from '../props/prop-def.js';
 
 type SegmentedControlRootOwnProps = GetPropDefTypes<typeof segmentedControlRootPropDefs>;
 
-interface SegmentedControlRootProps
-  extends ComponentPropsWithout<'div', RemovedProps | 'dir'>,
-    SegmentedControlRootOwnProps {
+interface SegmentedControlRootProps extends ComponentPropsWithout<'div', RemovedProps | 'dir'>, SegmentedControlRootOwnProps {
   value?: string;
   defaultValue?: string;
   onValueChange?(value: string): void;
 }
 
-const useIsomorphicLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
-
-const SegmentedControlRoot = React.forwardRef<HTMLDivElement, SegmentedControlRootProps>(
-  (ownProps, forwardedRef) => {
-    const props = useThemeSizeProps(ownProps, segmentedControlRootPropDefs.size);
-    const {
-      className,
-      children,
-      radius,
-      value: valueProp,
-      defaultValue: defaultValueProp,
-      onValueChange: onValueChangeProp,
-      style,
-      ...rootProps
-    } = extractProps(props, segmentedControlRootPropDefs);
-
-    const [value, setValue] = useControllableState({
-      prop: valueProp,
-      onChange: onValueChangeProp,
-      defaultProp: defaultValueProp ?? '',
-    });
-
-    // The indicator is sized and placed from the item count and the selected index, written
-    // as custom properties. They are read from the children on render, so the server markup
-    // is right, then corrected from the DOM, which also sees items inside fragments or
-    // wrapper components.
-    const rootRef = React.useRef<HTMLDivElement>(null);
-    const composedRef = useComposedRefs(forwardedRef, rootRef);
-    const items = React.Children.toArray(children).filter(React.isValidElement);
-    const renderedCount = items.length;
-    const renderedIndex = Math.max(
-      0,
-      items.findIndex((child) => (child.props as { value?: unknown }).value === value),
-    );
-    useIsomorphicLayoutEffect(() => {
-      const root = rootRef.current;
-      if (!root) return;
-      const domItems = Array.from(root.querySelectorAll(':scope > .kui-SegmentedControlItem'));
-      const index = domItems.findIndex((item) => item.getAttribute('data-state') === 'on');
-      root.style.setProperty('--segmented-control-count', String(domItems.length || 1));
-      root.style.setProperty('--segmented-control-index', String(Math.max(0, index)));
-    });
-
-    return (
+// Arrow keys select as they move focus, as in a radio group. The root marks a key press, and the
+// item that takes focus from it selects itself. A click or Tab focuses without selecting.
+const SegmentedControlContext = React.createContext<{ selectFromKeyboard(value: string): void } | null>(null);
+
+const NAVIGATION_KEYS = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End']);
+
+const SegmentedControlRoot = React.forwardRef<HTMLDivElement, SegmentedControlRootProps>((ownProps, forwardedRef) => {
+  const props = useThemeSizeProps(ownProps, segmentedControlRootPropDefs.size);
+  const {
+    className,
+    children,
+    radius,
+    value: valueProp,
+    defaultValue: defaultValueProp,
+    onValueChange: onValueChangeProp,
+    style,
+    disabled,
+    onKeyDown,
+    onPointerDown,
+    ...rootProps
+  } = extractProps(props, segmentedControlRootPropDefs);
+
+  const [value, setValue] = useControllableState({
+    prop: valueProp,
+    onChange: onValueChangeProp,
+    defaultProp: defaultValueProp ?? '',
+  });
+
+  // The indicator is sized and placed from the item count and the selected index, written
+  // as custom properties. They are read from the children on render, so the server markup
+  // is right, then corrected from the DOM, which also sees items inside fragments or
+  // wrapper components.
+  const keyboardNavigationRef = React.useRef(false);
+  const context = React.useMemo(
+    () => ({
+      selectFromKeyboard(itemValue: string) {
+        if (!keyboardNavigationRef.current) return;
+        keyboardNavigationRef.current = false;
+        setValue(itemValue);
+      },
+    }),
+    [setValue],
+  );
+
+  const rootRef = React.useRef<HTMLDivElement>(null);
+  const composedRef = useComposedRefs(forwardedRef, rootRef);
+  const items = React.Children.toArray(children).filter(React.isValidElement);
+  const renderedCount = items.length;
+  const renderedIndex = Math.max(
+    0,
+    items.findIndex((child) => (child.props as { value?: unknown }).value === value),
+  );
+  useLayoutEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const domItems = Array.from(root.querySelectorAll(':scope > .kui-SegmentedControlItem'));
+    const index = domItems.findIndex((item) => item.getAttribute('data-state') === 'on');
+    root.style.setProperty('--segmented-control-count', String(domItems.length || 1));
+    root.style.setProperty('--segmented-control-index', String(Math.max(0, index)));
+  });
+
+  return (
+    <SegmentedControlContext.Provider value={context}>
       <ToggleGroupPrimitive.Root
-        data-disabled={props.disabled || undefined}
+        data-disabled={disabled || undefined}
         data-radius={radius}
         ref={composedRef}
         style={
@@ -83,18 +100,26 @@ const SegmentedControlRoot = React.forwardRef<HTMLDivElement, SegmentedControlRo
             setValue(value);
           }
         }}
+        onKeyDown={(event) => {
+          onKeyDown?.(event);
+          keyboardNavigationRef.current = NAVIGATION_KEYS.has(event.key);
+        }}
+        onPointerDown={(event) => {
+          onPointerDown?.(event);
+          keyboardNavigationRef.current = false;
+        }}
         {...rootProps}
         type="single"
         value={value}
         asChild={false}
-        disabled={!!props.disabled}
+        disabled={!!disabled}
       >
         {children}
         <div className="kui-SegmentedControlIndicator" />
       </ToggleGroupPrimitive.Root>
-    );
-  },
-);
+    </SegmentedControlContext.Provider>
+  );
+});
 
 SegmentedControlRoot.displayName = 'SegmentedControl.Root';
 
@@ -106,19 +131,19 @@ interface SegmentedControlItemOwnProps {
   iconOnly?: boolean;
 }
 
-interface SegmentedControlItemProps
-  extends ComponentPropsWithout<
-      typeof ToggleGroupPrimitive.Item,
-      RemovedProps | 'type' | 'value'
-    >,
-    SegmentedControlItemOwnProps {}
+interface SegmentedControlItemProps extends ComponentPropsWithout<typeof ToggleGroupPrimitive.Item, RemovedProps | 'type' | 'value'>, SegmentedControlItemOwnProps {}
 
-const SegmentedControlItem = React.forwardRef<HTMLButtonElement, SegmentedControlItemProps>(
-  ({ children, className, iconOnly, ...props }, forwardedRef) => (
+const SegmentedControlItem = React.forwardRef<HTMLButtonElement, SegmentedControlItemProps>(({ children, className, iconOnly, onFocus, ...props }, forwardedRef) => {
+  const context = React.useContext(SegmentedControlContext);
+  return (
     <ToggleGroupPrimitive.Item
       ref={forwardedRef}
       className={classNames('kui-reset', 'kui-SegmentedControlItem', className)}
       data-icon-only={iconOnly || undefined}
+      onFocus={(event) => {
+        onFocus?.(event);
+        context?.selectFromKeyboard(props.value);
+      }}
       {...props}
       asChild={false}
     >
@@ -130,8 +155,8 @@ const SegmentedControlItem = React.forwardRef<HTMLButtonElement, SegmentedContro
         </span>
       </span>
     </ToggleGroupPrimitive.Item>
-  ),
-);
+  );
+});
 
 SegmentedControlItem.displayName = 'SegmentedControl.Item';
 

package/src/components/select.css

@@ -34,7 +34,7 @@
 
 .kui-SelectIcon {
   flex-shrink: 0;
-  margin-left: auto;
+  margin-inline-start: auto;
   width: var(--trigger-icon-size-default);
   height: var(--trigger-icon-size-default);
 }
@@ -66,7 +66,7 @@
   box-sizing: border-box;
 
   :where(.kui-SelectContent:has(.kui-ScrollAreaScrollbar[data-orientation='vertical'])) & {
-    padding-right: var(--space-4);
+    padding-inline-end: var(--space-4);
   }
 }
 
@@ -117,10 +117,10 @@
    * text). `--radius-full` is 0px below `full` and 9999px at `full`. The chevron's edge keeps
    * the plain padding.
    */
-  padding-left: calc(
+  padding-inline-start: calc(
     var(--select-trigger-px) + min(var(--radius-full, 0px), var(--select-trigger-px-pill) - var(--select-trigger-px))
   );
-  padding-right: var(--select-trigger-px);
+  padding-inline-end: var(--select-trigger-px);
 }
 
 @breakpoints {
@@ -451,40 +451,27 @@
   }
 }
 
-/* Loading state styling */
+/* Loading: the library Spinner fills the icon box, so it follows the trigger size and reduced motion. */
 .kui-SelectLoadingIcon {
-  animation: kui-spin 1s linear infinite;
+  display: block;
 }
 
-.kui-SelectLoadingIconCircle {
-  animation: kui-dash 1.5s ease-in-out infinite;
-}
-
-@keyframes kui-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-@keyframes kui-dash {
-  0% {
-    stroke-dasharray: 1, 150;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -35;
-  }
-  100% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -124;
-  }
+/* Two classes: spinner.css loads after this file and sets its own fixed size. */
+/* stylelint-disable-next-line selector-max-specificity */
+.kui-SelectLoadingIcon > .kui-Spinner {
+  width: 100%;
+  height: 100%;
 }
 
 /* Forced colors support */
+/* Box-shadows, which draw every variant's boundary, are dropped there, so the trigger gets a real border. */
 @media (forced-colors: active) {
-  .kui-SelectTrigger:where([aria-invalid='true']) {
+  .kui-SelectTrigger {
     border: 1px solid CanvasText;
   }
+  .kui-SelectTrigger:where(:disabled, [data-disabled]) {
+    border-color: GrayText;
+  }
 }
 
 /***************************************************************************************************

package/src/components/select.tsx

@@ -7,6 +7,7 @@ import { Select as SelectPrimitive, ScrollArea as ScrollAreaPrimitive } from 'ra
 import { extractProps } from '../helpers/extract-props.js';
 import { useThemeSize } from '../helpers/theme-size.js';
 import { ChevronDownIcon, ThickCheckIcon } from './icons.js';
+import { Spinner } from './spinner.js';
 import {
   selectRootPropDefs,
   selectTriggerPropDefs,
@@ -152,21 +153,9 @@ const SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>
           </span>
           <SelectPrimitive.Icon asChild>
             {loading ? (
-              <div className="kui-SelectIcon kui-SelectLoadingIcon" aria-hidden="true">
-                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-                  <circle
-                    cx="8"
-                    cy="8"
-                    r="7"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeDasharray="32"
-                    strokeDashoffset="32"
-                    className="kui-SelectLoadingIconCircle"
-                  />
-                </svg>
-              </div>
+              <span className="kui-SelectIcon kui-SelectLoadingIcon" aria-hidden="true">
+                <Spinner />
+              </span>
             ) : (
               <ChevronDownIcon className="kui-SelectIcon" />
             )}

package/src/components/separator.css

@@ -17,13 +17,20 @@
 
 @breakpoints {
   .kui-Separator {
+    /* The min sizes keep a squeezed flex parent from thinning the line toward zero. */
     &:where(.kui-r-orientation-horizontal) {
       width: var(--separator-size);
       height: 1px;
+      min-height: 1px;
     }
+    /* Stretches to the row it sits in. A percentage height would resolve to 0 in an
+     * auto-height row and stop the stretch, so the parent's height is a minimum instead. */
     &:where(.kui-r-orientation-vertical) {
       width: 1px;
-      height: var(--separator-size);
+      min-width: 1px;
+      height: auto;
+      min-height: var(--separator-size);
+      align-self: stretch;
     }
   }
 }

package/src/components/separator.props.tsx

@@ -13,7 +13,7 @@ const separatorPropDefs = {
     responsive: true,
   },
   color: { ...colorPropDef.color, default: 'gray' },
-  decorative: { type: 'boolean', default: true },
+  decorative: { type: 'boolean', default: false },
   light: { type: 'boolean', className: 'kui-light', default: false },
 } satisfies {
   orientation: PropDef<(typeof orientationValues)[number]>;

package/src/components/separator.tsx

@@ -1,8 +1,12 @@
+'use client';
+
 import * as React from 'react';
 import classNames from 'classnames';
 
 import { separatorPropDefs } from './separator.props.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useBreakpoint } from '../hooks/use-breakpoint.js';
+import { SHELL_BREAKPOINTS } from './shell.types.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
@@ -10,16 +14,30 @@ import type { GetPropDefTypes } from '../props/prop-def.js';
 type SeparatorElement = React.ElementRef<'span'>;
 type SeparatorOwnProps = GetPropDefTypes<typeof separatorPropDefs>;
 interface SeparatorProps extends ComponentPropsWithout<'span', RemovedProps>, SeparatorOwnProps {}
+type Orientation = 'horizontal' | 'vertical';
+
 const Separator = React.forwardRef<SeparatorElement, SeparatorProps>((props, forwardedRef) => {
   const { className, color, decorative, ...separatorProps } = extractProps(props, separatorPropDefs);
-  // A responsive orientation announces the one it starts with.
-  const orientation =
-    typeof props.orientation === 'object' ? props.orientation.initial : props.orientation;
+  const responsive = typeof props.orientation === 'object' && props.orientation !== null;
+  const { breakpoint } = useBreakpoint(responsive);
+
+  // A responsive orientation announces the one drawn at the current breakpoint.
+  let orientation: Orientation = 'horizontal';
+  if (responsive) {
+    const values = props.orientation as Partial<Record<string, Orientation>>;
+    for (const bp of SHELL_BREAKPOINTS) {
+      if (values[bp] !== undefined) orientation = values[bp]!;
+      if (bp === breakpoint) break;
+    }
+  } else if (props.orientation === 'vertical') {
+    orientation = 'vertical';
+  }
+
   return (
     <span
       data-accent-color={color}
       role={decorative ? undefined : 'separator'}
-      aria-orientation={!decorative && orientation === 'vertical' ? 'vertical' : undefined}
+      aria-orientation={decorative ? undefined : orientation}
       {...separatorProps}
       ref={forwardedRef}
       className={classNames('kui-Separator', className)}

package/src/components/sheet.css

@@ -7,7 +7,6 @@
   height: 100vh;
   max-height: 100vh;
   margin: 0 !important;
-  will-change: transform;
 }
 
 /* iOS dynamic viewport height - accounts for browser chrome */
@@ -27,8 +26,8 @@
   margin: 0 !important;
   border-start-start-radius: 0;
   border-end-start-radius: 0;
-  /* iOS safe area for home indicator */
-  padding-bottom: env(safe-area-inset-bottom, 0px);
+  /* Keep the content padding, growing it to clear an iOS home indicator */
+  padding-bottom: max(var(--dialog-content-padding), env(safe-area-inset-bottom, 0px));
 }
 .kui-SheetContent:where([data-side='end']) {
   inset-block: 0 !important;
@@ -36,8 +35,8 @@
   margin: 0 !important;
   border-start-end-radius: 0;
   border-end-end-radius: 0;
-  /* iOS safe area for home indicator */
-  padding-bottom: env(safe-area-inset-bottom, 0px);
+  /* Keep the content padding, growing it to clear an iOS home indicator */
+  padding-bottom: max(var(--dialog-content-padding), env(safe-area-inset-bottom, 0px));
 }
 .kui-SheetContent:where([data-side='top']) {
   inset-block-start: 0 !important;

package/src/components/sheet.tsx

@@ -93,7 +93,9 @@ const sheetPropDefs = dialogPropDefsForSheet;
 const SheetTitleCountContext = React.createContext<React.MutableRefObject<number> | null>(null);
 
 type SheetContentElement = React.ElementRef<typeof DialogPrimitive.Content>;
-interface SheetContentProps extends ComponentPropsWithout<typeof DialogPrimitive.Content, RemovedProps>, DialogContentOwnProps {
+interface SheetContentProps
+  extends ComponentPropsWithout<typeof DialogPrimitive.Content, RemovedProps>,
+    Omit<DialogContentOwnProps, 'align'> {
   /** Side where the Sheet should appear. `left`/`right` alias to `start`/`end`. */
   side?: SheetSide;
   /** Optional DOM container to portal into. Defaults to `document.body`. */