@womp/kookie-ui 0.34.0 → 0.34.2

package/src/components/select.tsx

@@ -143,8 +143,8 @@ const SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>
         <button
           data-accent-color={color}
           data-radius={radius}
-          data-error={error}
-          data-loading={loading}
+          data-error={error || undefined}
+          data-loading={loading || undefined}
           {...triggerProps}
           {...ariaProps}
           ref={forwardedRef}

package/src/components/sheet.tsx

@@ -5,7 +5,7 @@
  *
  * A side-placed overlay built on top of Radix Dialog. It inherits accessibility,
  * focus management, overlay behavior, and sizing scales from the base dialog, and
- * adds side placement and slide motion suited for navigation panels and drawers.
+ * adds side placement, suited for navigation panels and drawers.
  *
  * Structure mirrors Dialog:
  * - Root, Trigger, Content, Title, Description, Close
@@ -58,7 +58,7 @@ type SheetSide = 'start' | 'end' | 'top' | 'bottom' | 'left' | 'right';
 
 /**
  * Sheet is a side-placed overlay built on the Dialog primitive.
- * It reuses Dialog's accessibility, focus, overlay, and size scales, while adding side placement and slide motion.
+ * It reuses Dialog's accessibility, focus, overlay, and size scales, while adding side placement.
  */
 
 // Root

package/src/components/shell.context.tsx

@@ -2,7 +2,7 @@
 
 /**
  * Since 0.8.0 the Shell has two contexts: the pane registry (the store) and
- * the inset set. They live in `_internal/shell-store.tsx`. This module keeps
+ * the set of panes off the frame. They live in `_internal/shell-store.tsx`. This module keeps
  * the two hooks consumers can reach: `useSidebarMode`, and the deprecated
  * `useShell`.
  */

package/src/components/sidebar.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { Slot } from './slot.js';
-import * as Accordion from '@radix-ui/react-accordion';
+import { Accordion } from 'radix-ui';
 import * as DropdownMenu from './dropdown-menu.js';
 import * as Popover from './popover.js';
 

package/src/components/table.tsx

@@ -10,6 +10,10 @@ import { ScrollArea } from './scroll-area.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 
+// Built once: `extractProps` caches its compiled prop defs on the identity of this object, so
+// making it inside the component would recompile them on every render.
+const { layout: _layoutPropDef, ...rootPropDefs } = tableRootPropDefs;
+
 type TableRootElement = React.ElementRef<'div'>;
 type TableRootOwnProps = GetPropDefTypes<typeof tableRootPropDefs>;
 interface TableRootProps
@@ -17,7 +21,6 @@ interface TableRootProps
     TableRootOwnProps {}
 const TableRoot = React.forwardRef<TableRootElement, TableRootProps>((ownProps, forwardedRef) => {
   const props = useThemeSizeProps(ownProps, tableRootPropDefs.size);
-  const { layout: layoutPropDef, ...rootPropDefs } = tableRootPropDefs;
   const {
     className,
     children,

package/src/components/text-field.css

@@ -347,7 +347,7 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-/* surface */
+/* outline */
 
 .kui-TextFieldRoot:where(.kui-variant-outline) {
   --text-field-selection-color: var(--focus-a5);
@@ -531,7 +531,7 @@
   }
 }
 
-/* outline */
+/* surface */
 
 .kui-TextFieldRoot:where(.kui-variant-surface) {
   --text-field-selection-color: var(--accent-a5);

package/src/components/text-field.tsx

@@ -37,6 +37,14 @@ const TextFieldContext = React.createContext<TextFieldContextValue | null>(null)
 // list, not a tag list. `[tabindex]` catches role-based widgets; `label` already redirects a click.
 const FOCUSABLE_IN_SLOT = 'button, a, input, select, textarea, label, [tabindex], [contenteditable]';
 
+/** Is the target a control inside `container`? Ancestors outside it, such as a panel or dialog
+ * with a tabindex, don't count: matching them turned scrubbing and click-to-focus off. */
+function isControlWithin(target: EventTarget | null, container: HTMLElement | null) {
+  if (!(target instanceof Element) || !container) return false;
+  const hit = target.closest(FOCUSABLE_IN_SLOT);
+  return Boolean(hit && hit !== container && container.contains(hit));
+}
+
 // A Group decides the look of its fields: their size, variant and radius come from it. A field
 // can still take its own color, and is disabled when either it or the group is.
 type TextFieldGroupContextValue = Pick<TextFieldGroupOwnProps, 'size' | 'variant' | 'radius' | 'color' | 'disabled'>;
@@ -120,8 +128,8 @@ const TextFieldRoot = React.forwardRef<TextFieldRootElement, TextFieldRootProps>
   // Clicking the padding or a passive slot focuses the input. preventDefault stops the browser
   // from moving focus to the root first, so the input is focused once, synchronously.
   const handleMouseDown = React.useCallback((event: React.MouseEvent) => {
+    if (isControlWithin(event.target, event.currentTarget as HTMLElement)) return;
     const target = event.target as HTMLElement;
-    if (target.closest(FOCUSABLE_IN_SLOT)) return;
 
     const input = inputRef.current;
     if (!input) return;
@@ -289,9 +297,8 @@ const TextFieldSlot = React.forwardRef<TextFieldSlotElement, TextFieldSlotProps>
     (event: React.PointerEvent) => {
       if (!scrub) return;
 
-      // Don't start scrubbing if clicking on interactive elements
-      const target = event.target as HTMLElement;
-      if (target.closest(FOCUSABLE_IN_SLOT)) return;
+      // Don't start scrubbing if clicking on a control inside the slot
+      if (isControlWithin(event.target, slotRef.current)) return;
 
       event.preventDefault();
       accumulatedMovement.current = 0;

package/src/components/virtual-menu.tsx

@@ -569,7 +569,14 @@ interface VirtualMenuItemProps extends React.ComponentPropsWithoutRef<'div'> {
 }
 
 const VirtualMenuItemInner = React.forwardRef<HTMLDivElement, VirtualMenuItemProps>(
-  ({ className, children, ...props }, forwardedRef) => {
+  ({ className, children, ...allProps }, forwardedRef) => {
+    // A `renderItem` component usually spreads everything it is given onto this row. These three
+    // are for the component, not the element, so they stop here.
+    const { isHighlighted: _isHighlighted, index: _index, item: _item, ...props } = allProps as typeof allProps & {
+      isHighlighted?: boolean;
+      index?: number;
+      item?: unknown;
+    };
     return (
       <div
         ref={forwardedRef}

package/src/helpers/map-prop-values.ts

@@ -1,4 +1,3 @@
-import type { textPropDefs } from '../components/text.props.js';
 import type { Responsive } from '../props/prop-def.js';
 
 function mapResponsiveProp<Input extends string, Output>(

package/src/props/index.ts

@@ -5,6 +5,7 @@ export * from './prop-def.js';
 export * from './as-child.prop.js';
 export * from './color.prop.js';
 export * from './emphasis.prop.js';
+export * from './font-family.prop.js';
 export * from './gap.props.js';
 export * from './height.props.js';
 export * from './layout.props.js';
@@ -20,6 +21,7 @@ export * from './weight.prop.js';
 export * from './width.props.js';
 
 // Component props
+export * from '../components/accordion.props.js';
 export * from '../components/alert-dialog.props.js';
 export * from '../components/avatar.props.js';
 export * from '../components/blockquote.props.js';
@@ -30,14 +32,17 @@ export * from '../components/checkbox-group.props.js';
 export * from '../components/checkbox.props.js';
 export * from '../components/chip.props.js';
 export * from '../components/code.props.js';
+export * from '../components/combobox.props.js';
 export * from '../components/context-menu.props.js';
 export * from '../components/dialog.props.js';
 export * from '../components/dropdown-menu.props.js';
 export * from '../components/flex.props.js';
 export * from '../components/grid.props.js';
 export * from '../components/heading.props.js';
+export * from '../components/image.props.js';
 export * from '../components/kbd.props.js';
 export * from '../components/link.props.js';
+export * from '../components/navbar.props.js';
 export * from '../components/popover.props.js';
 export * from '../components/progress.props.js';
 export * from '../components/radio.props.js';
@@ -55,4 +60,5 @@ export * from '../components/text-area.props.js';
 export * from '../components/text-field.props.js';
 export * from '../components/text.props.js';
 export * from '../components/theme.props.js';
+export * from '../components/toolbar.props.js';
 export * from '../components/tooltip.props.js';

package/src/styles/utilities/inset.css

@@ -47,6 +47,33 @@
   .kui-r-inset-12 {
     inset: var(--space-12);
   }
+  .-kui-r-inset-1 {
+    inset: calc(-1 * var(--space-1));
+  }
+  .-kui-r-inset-2 {
+    inset: calc(-1 * var(--space-2));
+  }
+  .-kui-r-inset-3 {
+    inset: calc(-1 * var(--space-3));
+  }
+  .-kui-r-inset-4 {
+    inset: calc(-1 * var(--space-4));
+  }
+  .-kui-r-inset-5 {
+    inset: calc(-1 * var(--space-5));
+  }
+  .-kui-r-inset-6 {
+    inset: calc(-1 * var(--space-6));
+  }
+  .-kui-r-inset-7 {
+    inset: calc(-1 * var(--space-7));
+  }
+  .-kui-r-inset-8 {
+    inset: calc(-1 * var(--space-8));
+  }
+  .-kui-r-inset-9 {
+    inset: calc(-1 * var(--space-9));
+  }
 }
 
 .kui-r-inset {
@@ -127,6 +154,33 @@
   .kui-r-top-12 {
     top: var(--space-12);
   }
+  .-kui-r-top-1 {
+    top: calc(-1 * var(--space-1));
+  }
+  .-kui-r-top-2 {
+    top: calc(-1 * var(--space-2));
+  }
+  .-kui-r-top-3 {
+    top: calc(-1 * var(--space-3));
+  }
+  .-kui-r-top-4 {
+    top: calc(-1 * var(--space-4));
+  }
+  .-kui-r-top-5 {
+    top: calc(-1 * var(--space-5));
+  }
+  .-kui-r-top-6 {
+    top: calc(-1 * var(--space-6));
+  }
+  .-kui-r-top-7 {
+    top: calc(-1 * var(--space-7));
+  }
+  .-kui-r-top-8 {
+    top: calc(-1 * var(--space-8));
+  }
+  .-kui-r-top-9 {
+    top: calc(-1 * var(--space-9));
+  }
 }
 
 .kui-r-top {
@@ -207,6 +261,33 @@
   .kui-r-right-12 {
     right: var(--space-12);
   }
+  .-kui-r-right-1 {
+    right: calc(-1 * var(--space-1));
+  }
+  .-kui-r-right-2 {
+    right: calc(-1 * var(--space-2));
+  }
+  .-kui-r-right-3 {
+    right: calc(-1 * var(--space-3));
+  }
+  .-kui-r-right-4 {
+    right: calc(-1 * var(--space-4));
+  }
+  .-kui-r-right-5 {
+    right: calc(-1 * var(--space-5));
+  }
+  .-kui-r-right-6 {
+    right: calc(-1 * var(--space-6));
+  }
+  .-kui-r-right-7 {
+    right: calc(-1 * var(--space-7));
+  }
+  .-kui-r-right-8 {
+    right: calc(-1 * var(--space-8));
+  }
+  .-kui-r-right-9 {
+    right: calc(-1 * var(--space-9));
+  }
 }
 
 .kui-r-right {
@@ -287,6 +368,33 @@
   .kui-r-bottom-12 {
     bottom: var(--space-12);
   }
+  .-kui-r-bottom-1 {
+    bottom: calc(-1 * var(--space-1));
+  }
+  .-kui-r-bottom-2 {
+    bottom: calc(-1 * var(--space-2));
+  }
+  .-kui-r-bottom-3 {
+    bottom: calc(-1 * var(--space-3));
+  }
+  .-kui-r-bottom-4 {
+    bottom: calc(-1 * var(--space-4));
+  }
+  .-kui-r-bottom-5 {
+    bottom: calc(-1 * var(--space-5));
+  }
+  .-kui-r-bottom-6 {
+    bottom: calc(-1 * var(--space-6));
+  }
+  .-kui-r-bottom-7 {
+    bottom: calc(-1 * var(--space-7));
+  }
+  .-kui-r-bottom-8 {
+    bottom: calc(-1 * var(--space-8));
+  }
+  .-kui-r-bottom-9 {
+    bottom: calc(-1 * var(--space-9));
+  }
 }
 
 .kui-r-bottom {
@@ -367,6 +475,33 @@
   .kui-r-left-12 {
     left: var(--space-12);
   }
+  .-kui-r-left-1 {
+    left: calc(-1 * var(--space-1));
+  }
+  .-kui-r-left-2 {
+    left: calc(-1 * var(--space-2));
+  }
+  .-kui-r-left-3 {
+    left: calc(-1 * var(--space-3));
+  }
+  .-kui-r-left-4 {
+    left: calc(-1 * var(--space-4));
+  }
+  .-kui-r-left-5 {
+    left: calc(-1 * var(--space-5));
+  }
+  .-kui-r-left-6 {
+    left: calc(-1 * var(--space-6));
+  }
+  .-kui-r-left-7 {
+    left: calc(-1 * var(--space-7));
+  }
+  .-kui-r-left-8 {
+    left: calc(-1 * var(--space-8));
+  }
+  .-kui-r-left-9 {
+    left: calc(-1 * var(--space-9));
+  }
 }
 
 .kui-r-left {