@womp/kookie-ui 0.20.0 → 0.21.0

package/src/components/table.tsx

@@ -5,26 +5,22 @@ import { tableRootPropDefs, tableRowPropDefs, tableCellPropDefs } from './table.
 import { extractProps } from '../helpers/extract-props.js';
 import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { getResponsiveClassNames } from '../helpers/get-responsive-styles.js';
-import { marginPropDefs } from '../props/margin.props.js';
 import { ScrollArea } from './scroll-area.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
-import type { MarginProps } from '../props/margin.props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 
 type TableRootElement = React.ElementRef<'div'>;
 type TableRootOwnProps = GetPropDefTypes<typeof tableRootPropDefs>;
 interface TableRootProps
   extends ComponentPropsWithout<'div', RemovedProps>,
-    MarginProps,
     TableRootOwnProps {}
 const TableRoot = React.forwardRef<TableRootElement, TableRootProps>((ownProps, forwardedRef) => {
   const props = useThemeSizeProps(ownProps, tableRootPropDefs.size);
   const { layout: layoutPropDef, ...rootPropDefs } = tableRootPropDefs;
   const { className, children, layout, ...rootProps } = extractProps(
     props,
-    rootPropDefs,
-    marginPropDefs
+    rootPropDefs
   );
   const tableLayoutClassNames = getResponsiveClassNames({
     value: layout,

package/src/components/tabs.tsx

@@ -5,10 +5,8 @@ import { Tabs as TabsPrimitive } from 'radix-ui';
 import { tabsListPropDefs } from './tabs.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 { tabsContentPropDefs, tabsRootPropDefs } from './tabs.props.js';
-import type { MarginProps } from '../props/margin.props.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 
@@ -16,10 +14,9 @@ type TabsRootElement = React.ElementRef<typeof TabsPrimitive.Root>;
 type TabsRootOwnProps = GetPropDefTypes<typeof tabsRootPropDefs>;
 interface TabsRootProps
   extends ComponentPropsWithout<typeof TabsPrimitive.Root, 'asChild' | 'color' | 'defaultChecked'>,
-    MarginProps,
     TabsRootOwnProps {}
 const TabsRoot = React.forwardRef<TabsRootElement, TabsRootProps>((props, forwardedRef) => {
-  const { className, ...rootProps } = extractProps(props, marginPropDefs);
+  const { className, ...rootProps } = props;
   return (
     <TabsPrimitive.Root
       {...rootProps}
@@ -34,14 +31,12 @@ type TabsListElement = React.ElementRef<typeof TabsPrimitive.List>;
 type TabsListOwnProps = GetPropDefTypes<typeof tabsListPropDefs>;
 interface TabsListProps
   extends ComponentPropsWithout<typeof TabsPrimitive.List, RemovedProps>,
-    MarginProps,
     TabsListOwnProps {}
 const TabsList = React.forwardRef<TabsListElement, TabsListProps>((ownProps, forwardedRef) => {
   const props = useThemeSizeProps(ownProps, tabsListPropDefs.size);
   const { className, color, ...listProps } = extractProps(
     props,
     tabsListPropDefs,
-    marginPropDefs,
   );
   return (
     <TabsPrimitive.List
@@ -82,11 +77,10 @@ type TabsContentElement = React.ElementRef<typeof TabsPrimitive.Content>;
 type TabsContentOwnProps = GetPropDefTypes<typeof tabsContentPropDefs>;
 interface TabsContentProps
   extends ComponentPropsWithout<typeof TabsPrimitive.Content, RemovedProps>,
-    MarginProps,
     TabsContentOwnProps {}
 const TabsContent = React.forwardRef<TabsContentElement, TabsContentProps>(
   (props, forwardedRef) => {
-    const { className, ...contentProps } = extractProps(props, marginPropDefs);
+    const { className, ...contentProps } = props;
     return (
       <TabsPrimitive.Content
         {...contentProps}

package/src/components/text-area.css

@@ -19,6 +19,8 @@
 .rt-TextAreaRoot {
   display: flex;
   flex-direction: column;
+  /* The root spaces its parts: the gap sits between the text and an error message under it. */
+  gap: var(--space-2);
   box-sizing: border-box;
 
   font-family: var(--default-font-family);
@@ -482,7 +484,6 @@
   color: var(--red-11);
   font-size: var(--font-size-1);
   line-height: var(--line-height-1);
-  margin-top: var(--space-2);
   display: flex;
   align-items: center;
   gap: var(--space-2);

package/src/components/text-area.tsx

@@ -4,9 +4,7 @@ import classNames from 'classnames';
 import { textAreaPropDefs } from './text-area.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';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 
@@ -17,13 +15,12 @@ type TextAreaOwnProps = GetPropDefTypes<typeof textAreaPropDefs> & {
 };
 interface TextAreaProps
   extends ComponentPropsWithout<'textarea', RemovedProps | 'size' | 'value'>,
-    MarginProps,
     TextAreaOwnProps {}
 
 const TextArea = React.forwardRef<TextAreaElement, TextAreaProps>((ownProps, forwardedRef) => {
   const props = useThemeSizeProps(ownProps, textAreaPropDefs.size);
   const { className, color, radius, style, ...textAreaProps } =
-    extractProps(props, textAreaPropDefs, marginPropDefs);
+    extractProps(props, textAreaPropDefs);
 
   // Generate unique IDs for accessibility
   const errorId = React.useId();

package/src/components/text-field.css

@@ -169,7 +169,7 @@
 }
 
 /*
- * A control hosted in a slot (IconButton, Button) is as tall as the field minus the slot inset on
+ * A control hosted in a slot (an icon-only Button, a Button) is as tall as the field minus the slot inset on
  * each side, and its corner is concentric with the field's. Overriding the height variable rather
  * than `height` keeps an icon button square. Wins over the button's own size rule on source order:
  * base-button.css is imported (through button.css) before this file.
@@ -660,7 +660,9 @@
   color: var(--red-11);
   font-size: var(--font-size-1);
   line-height: var(--line-height-1);
-  margin-top: var(--space-2);
+  /* The field is a row, so a gap on the root would sit beside the message, not above it. The
+     drop is inside the message's own box, never a margin on it. */
+  padding-top: var(--space-2);
   display: flex;
   align-items: center;
   gap: var(--space-2);

package/src/components/text-field.tsx

@@ -8,11 +8,9 @@ import { composeRefs } from 'radix-ui/internal';
 import { textFieldRootPropDefs, textFieldSlotPropDefs, type TextFieldSlotScrubProps } from './text-field.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 { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { NotInputTextualAttributes } from '../helpers/input-attributes.js';
-import type { MarginProps } from '../props/margin.props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 
 type TextFieldRootElement = React.ElementRef<'input'>;
@@ -22,11 +20,11 @@ type TextFieldRootOwnProps = GetPropDefTypes<typeof textFieldRootPropDefs> & {
   type?: 'date' | 'datetime-local' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
 };
 type TextFieldInputProps = ComponentPropsWithout<'input', NotInputTextualAttributes | 'color' | 'defaultValue' | 'size' | 'type' | 'value'>;
-interface TextFieldRootProps extends TextFieldInputProps, MarginProps, TextFieldRootOwnProps {}
+interface TextFieldRootProps extends TextFieldInputProps, TextFieldRootOwnProps {}
 const TextFieldRoot = React.forwardRef<TextFieldRootElement, TextFieldRootProps>((ownProps, forwardedRef) => {
   const props = useThemeSizeProps(ownProps, textFieldRootPropDefs.size);
   const inputRef = React.useRef<HTMLInputElement>(null);
-  const { children, className, color, radius, style, ...inputProps } = extractProps(props, textFieldRootPropDefs, marginPropDefs);
+  const { children, className, color, radius, style, ...inputProps } = extractProps(props, textFieldRootPropDefs);
 
   // Generate unique IDs for accessibility
   const errorId = React.useId();

package/src/components/text.tsx

@@ -2,16 +2,14 @@ import * as React from 'react';
 import { Slot } from 'radix-ui';
 
 import { extractProps } from '../helpers/extract-props.js';
-import { marginPropDefs } from '../props/margin.props.js';
 import { textPropDefs } from './text.props.js';
 
-import type { MarginProps } from '../props/margin.props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 
 type TextElement = React.ElementRef<'span'>;
 type TextOwnProps = GetPropDefTypes<typeof textPropDefs>;
-interface CommonTextProps extends MarginProps, TextOwnProps {}
+interface CommonTextProps extends TextOwnProps {}
 type TextSpanProps = { as?: 'span' } & ComponentPropsWithout<'span', RemovedProps>;
 type TextDivProps = { as: 'div' } & ComponentPropsWithout<'div', RemovedProps>;
 type TextLabelProps = { as: 'label' } & ComponentPropsWithout<'label', RemovedProps>;
@@ -19,7 +17,6 @@ type TextPProps = { as: 'p' } & ComponentPropsWithout<'p', RemovedProps>;
 type TextProps = CommonTextProps & (TextSpanProps | TextDivProps | TextLabelProps | TextPProps);
 
 // Pre-merge prop definitions at module level to avoid per-render allocation
-const mergedPropDefs = { ...textPropDefs, ...marginPropDefs };
 
 const Text = React.memo(
   React.forwardRef<TextElement, TextProps>((props, forwardedRef) => {
@@ -30,7 +27,7 @@ const Text = React.memo(
       as: Tag = 'span',
       color,
       ...textProps
-    } = extractProps(props, mergedPropDefs);
+    } = extractProps(props, textPropDefs);
 
     const combinedClassName = className ? `rt-Text ${className}` : 'rt-Text';
 

package/src/components/theme.tsx

@@ -106,7 +106,7 @@ const ThemeRoot = React.forwardRef<ThemeImplElement, ThemeImplPublicProps>((prop
   } = props;
 
   // Each of these follows its prop but stays independently settable, so
-  // `ThemePanel` can change the theme at runtime. Syncing during render
+  // the context setters can change the theme at runtime. Syncing during render
   // rather than in an effect matters here: an effect would commit the old
   // theme first and re-render every consumer of the context a second time.
   const [appearance, setAppearance] = usePropSyncedState(appearanceProp);

package/src/components/toggle.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Toggle as TogglePrimitive } from 'radix-ui';
+import { Button } from './button.js';
+import type { ButtonIconOnlyProps, ButtonProps, ButtonRankProps } from './button.js';
+import { useToggleState } from '../hooks/use-toggle-state.js';
+
+type ToggleOwnProps = {
+  /** Whether the toggle is on. The controlled counterpart of `defaultPressed`. */
+  pressed?: boolean;
+  /** Fires when the pressed state changes, with the new state. */
+  onPressedChange?: (pressed: boolean) => void;
+  /** Whether the toggle starts on. The uncontrolled counterpart of `pressed`. */
+  defaultPressed?: boolean;
+};
+
+/**
+ * Toggle takes every `Button` prop except `as`. Set `iconOnly` for a square toggle holding only
+ * an icon; the type then requires `aria-label` or `aria-labelledby`.
+ */
+type ToggleProps = Omit<ButtonProps<'button'>, 'as' | 'variant' | 'emphasis' | 'iconOnly'> &
+  ButtonRankProps &
+  ButtonIconOnlyProps &
+  ToggleOwnProps;
+
+type ToggleElement = React.ElementRef<typeof Button>;
+
+/**
+ * A button that stays pressed: bold in a formatting bar, a filter that is on or off. One
+ * control, two states, `aria-pressed` from the primitive. It is a `Button` in every other
+ * respect, and wears Button's pressed look while on.
+ *
+ * Picking one of several is a `SegmentedControl`.
+ *
+ * @example
+ * ```tsx
+ * <Toggle defaultPressed={false}>Show hidden</Toggle>
+ *
+ * <Toggle iconOnly aria-label="Bold" pressed={bold} onPressedChange={setBold}>
+ *   <BoldIcon />
+ * </Toggle>
+ * ```
+ */
+const Toggle = React.forwardRef<ToggleElement, ToggleProps>(
+  ({ pressed, onPressedChange, defaultPressed, children, className, ...buttonProps }, forwardedRef) => {
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = buttonProps as {
+      'aria-label'?: string;
+      'aria-labelledby'?: string;
+    };
+
+    // The label behind aria-labelledby is read once per id, not on every press.
+    const cachedLabelRef = React.useRef<string | null>(null);
+    React.useEffect(() => {
+      cachedLabelRef.current = null;
+    }, [ariaLabelledBy]);
+
+    /**
+     * The name announced when the pressed state changes: aria-label, then the label
+     * aria-labelledby points at, then visible text.
+     */
+    const getAccessibleName = React.useCallback(() => {
+      if (ariaLabel) return ariaLabel;
+      if (ariaLabelledBy) {
+        if (cachedLabelRef.current === null) {
+          cachedLabelRef.current = document.getElementById(ariaLabelledBy)?.textContent || 'Toggle';
+        }
+        return cachedLabelRef.current;
+      }
+      if (typeof children === 'string') return children;
+      if (React.isValidElement(children) && typeof (children.props as { children?: unknown })?.children === 'string') {
+        return (children.props as { children: string }).children;
+      }
+      return 'Toggle';
+    }, [ariaLabel, ariaLabelledBy, children]);
+
+    // Shared toggle state hook: accessibility announcements and controlled-state warnings.
+    const { handlePressedChange } = useToggleState({
+      pressed,
+      onPressedChange,
+      getAccessibleName,
+      componentName: 'Toggle',
+    });
+
+    return (
+      <TogglePrimitive.Root pressed={pressed} onPressedChange={handlePressedChange} defaultPressed={defaultPressed} asChild>
+        <Button {...(buttonProps as ButtonProps)} ref={forwardedRef} className={classNames('rt-Toggle', className)}>
+          {children}
+        </Button>
+      </TogglePrimitive.Root>
+    );
+  },
+);
+Toggle.displayName = 'Toggle';
+
+export { Toggle };
+export type { ToggleProps };

package/src/components/toolbar.tsx

@@ -6,16 +6,13 @@ import { Toolbar as ToolbarPrimitive } from 'radix-ui';
 
 import { toolbarRootPropDefs } from './toolbar.props.js';
 import { Button } from './button.js';
-import { IconButton } from './icon-button.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 { usePaneBandSize } from './_internal/pane-chrome.js';
 
 import type { ButtonProps } from './button.js';
 import type { TextProps } from './text.js';
-import type { MarginProps } from '../props/margin.props.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 import type { ButtonRankProps } from './button.js';
@@ -61,8 +58,7 @@ type ToolbarOwnProps = GetPropDefTypes<typeof toolbarRootPropDefs>;
 
 interface ToolbarProps
   extends ComponentPropsWithout<typeof ToolbarPrimitive.Root, RemovedProps | 'orientation'>,
-    ToolbarOwnProps,
-    MarginProps {
+    ToolbarOwnProps {
   /**
    * Gives every control a surface of its own, for a row that content passes behind, such as
    * `Shell.PaneHeader float`. Buttons rest `raised` instead of `soft`, and a group's well is
@@ -98,7 +94,6 @@ const ToolbarRoot = React.forwardRef<HTMLDivElement, ToolbarProps>((props, forwa
   const { className, orientation: _orientation, backdrop = false, children, ...rootProps } = extractProps(
     { ...props, size },
     toolbarRootPropDefs,
-    marginPropDefs,
   );
 
   const context = React.useMemo(() => ({ size, orientation, backdrop }), [size, orientation, backdrop]);
@@ -163,7 +158,7 @@ type ToolbarTextButtonProps = ToolbarButtonBaseProps &
   iconOnly?: false;
 };
 
-/** An icon-only button: renders an `IconButton`, and the type requires an `aria-label`. */
+/** An icon-only button: renders `Button iconOnly`, and the type requires an `aria-label`. */
 type ToolbarIconButtonProps = Omit<ToolbarButtonBaseProps, 'aria-label' | 'aria-labelledby' | 'fullWidth'> &
   ButtonRankProps & {
   iconOnly: true;
@@ -206,13 +201,12 @@ const ToolbarButton = React.forwardRef<HTMLButtonElement, ToolbarButtonProps>((p
     ...stateProps,
   } as const;
 
+  // The text and icon-only branches share every prop but the name; one Button renders both.
+  const buttonProps = { ...rest, ...(iconOnly ? { iconOnly: true } : {}), ...shared } as ButtonProps;
+
   return (
     <ToolbarPrimitive.Button asChild ref={forwardedRef} disabled={disabled || group?.disabled || undefined}>
-      {iconOnly ? (
-        <IconButton {...(rest as Omit<ToolbarIconButtonProps, 'iconOnly' | 'variant' | 'emphasis'>)} {...shared} />
-      ) : (
-        <Button {...(rest as Omit<ToolbarTextButtonProps, 'iconOnly' | 'variant' | 'emphasis'>)} {...shared} />
-      )}
+      <Button {...buttonProps} />
     </ToolbarPrimitive.Button>
   );
 });

package/src/hooks/use-prop-synced-state.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 /**
  * State that tracks a prop but can also be set imperatively — the shape `Theme`
- * needs, where a prop sets the value and `ThemePanel` can change it at runtime.
+ * needs, where a prop sets the value and the context setters can change it at runtime.
  *
  * Adjusts state during render rather than syncing in a `useEffect`. An effect
  * would commit one render carrying the *old* value and schedule a second one,

package/src/hooks/use-toggle-state.ts

@@ -30,7 +30,7 @@ interface UseToggleStateOptions {
  *   pressed,
  *   onPressedChange,
  *   getAccessibleName,
- *   componentName: 'ToggleButton',
+ *   componentName: 'Toggle',
  * });
  * ```
  */

package/src/props/color.prop.ts

@@ -27,7 +27,7 @@ const accentColorPropDef = {
   color: PropDef<(typeof accentColors)[number]>;
 };
 
-// For components whose colour comes from their content (Badge, Avatar, Code): they rest gray, and `color` picks a category when it means something.
+// For components whose colour comes from their content (Chip, Avatar, Code): they rest gray, and `color` picks a category when it means something.
 const grayAccentColorPropDef = {
   color: {
     type: 'enum',

package/src/props/emphasis.prop.ts

@@ -2,9 +2,9 @@ import type { PropDef } from './prop-def.js';
 
 const emphases = ['loud', 'medium', 'quiet'] as const;
 
-// Text-first components only (Text, Heading, Blockquote, Code, DataList.Label).
+// Text-first components only (Text, Heading, Blockquote, Code).
 // No colour + emphasis reads the gray ink ladder; colour + emphasis reads the accent ink ladder.
-// Components that need a different default (DataList.Label: 'medium') spread this def and override `default`.
+// Components that need a different default spread this def and override `default`.
 const emphasisPropDef = {
   emphasis: {
     type: 'enum',

package/src/props/index.ts

@@ -22,46 +22,33 @@ export * from './width.props.js';
 // Component props
 export * from '../components/alert-dialog.props.js';
 export * from '../components/avatar.props.js';
-export * from '../components/badge.props.js';
 export * from '../components/blockquote.props.js';
 export * from '../components/box.props.js';
 export * from '../components/button.props.js';
 export * from '../components/card.props.js';
-export * from '../components/checkbox-cards.props.js';
 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/container.props.js';
 export * from '../components/context-menu.props.js';
-export * from '../components/data-list.props.js';
 export * from '../components/dialog.props.js';
 export * from '../components/dropdown-menu.props.js';
-export * from '../components/em.props.js';
 export * from '../components/flex.props.js';
 export * from '../components/grid.props.js';
 export * from '../components/heading.props.js';
-export * from '../components/hover-card.props.js';
-export * from '../components/icon-button.props.js';
-export * from '../components/image.props.js';
 export * from '../components/kbd.props.js';
 export * from '../components/link.props.js';
 export * from '../components/popover.props.js';
 export * from '../components/progress.props.js';
-export * from '../components/quote.props.js';
 export * from '../components/radio.props.js';
-export * from '../components/radio-cards.props.js';
 export * from '../components/radio-group.props.js';
 export * from '../components/scroll-area.props.js';
-export * from '../components/section.props.js';
 export * from '../components/segmented-control.props.js';
 export * from '../components/select.props.js';
 export * from '../components/separator.props.js';
-export * from '../components/skeleton.props.js';
 export * from '../components/slider.props.js';
 export * from '../components/spinner.props.js';
-export * from '../components/strong.props.js';
 export * from '../components/switch.props.js';
-export * from '../components/tab-nav.props.js';
 export * from '../components/table.props.js';
 export * from '../components/tabs.props.js';
 export * from '../components/text-area.props.js';

package/src/styles/tokens/color.css

@@ -1056,7 +1056,7 @@
   --accent-solid-contrast: var(--accent-contrast);
   --accent-solid-selection: var(--accent-7);
   --accent-solid-selection-contrast: var(--accent-12);
-  /* Thin marks (Tabs indicator, RadioCards outline): light yellow uses step 10 here */
+  /* Thin marks (Tabs indicator): light yellow uses step 10 here */
   --accent-solid-indicator: var(--accent-indicator);
   /* Thumb that sits on a solid fill (Switch, Slider) */
   --accent-solid-thumb: white;