@womp/kookie-ui 0.20.0 → 0.21.0

package/schemas/schemas.d.ts

@@ -14,16 +14,12 @@ export interface BaseButtonJsonSchema {
 }
 
 export interface ButtonJsonSchema extends BaseButtonJsonSchema {}
-export interface IconButtonJsonSchema extends BaseButtonJsonSchema {}
-export interface ToggleButtonJsonSchema extends BaseButtonJsonSchema {}
-export interface ToggleIconButtonJsonSchema extends BaseButtonJsonSchema {}
+export interface ToggleJsonSchema extends BaseButtonJsonSchema {}
 
 export interface KookieUIButtonSchemas {
   'base-button': BaseButtonJsonSchema;
   'button': ButtonJsonSchema;
-  'icon-button': IconButtonJsonSchema;
-  'toggle-button': ToggleButtonJsonSchema;
-  'toggle-icon-button': ToggleIconButtonJsonSchema;
+  'toggle': ToggleJsonSchema;
 }
 
 export type ButtonComponentName = keyof KookieUIButtonSchemas;

package/schemas/{toggle-button.json → toggle.json}

@@ -1,7 +1,7 @@
 {
-  "$ref": "#/definitions/Toggle-buttonSchema",
+  "$ref": "#/definitions/ToggleSchema",
   "definitions": {
-    "Toggle-buttonSchema": {
+    "ToggleSchema": {
       "type": "object",
       "properties": {
         "as": {
@@ -139,11 +139,6 @@
           "description": "Loading state that shows a spinner and disables interaction",
           "type": "boolean"
         },
-        "flush": {
-          "default": false,
-          "description": "Flush mode that removes visual padding for seamless text integration",
-          "type": "boolean"
-        },
         "disabled": {
           "default": false,
           "description": "Disabled state",
@@ -316,8 +311,8 @@
     }
   },
   "$schema": "https://json-schema.org/draft/2020-12/schema",
-  "title": "Toggle-button Component Props",
-  "description": "Props schema for the toggle-button component in Kookie UI",
+  "title": "Toggle Component Props",
+  "description": "Props schema for the toggle component in Kookie UI",
   "version": "1.0.0",
   "source": "Zod schema"
 }

package/src/components/_internal/base-button.css

@@ -3,7 +3,7 @@
  *
  * This file contains the foundational styling for all button components in the
  * Kookie User Interface design system. It provides the base styles that are
- * extended by Button, IconButton, and other button variants.
+ * extended by Button (including its icon-only form) and Toggle.
  *
  * ARCHITECTURE:
  * - Base styles: Layout, accessibility
@@ -130,7 +130,7 @@
 
 /* An icon-only button is square: no inline padding, and aspect-ratio rather than a width ladder,
    so a hosted icon button whose height comes from its container (Toolbar, Chatbar) stays square. */
-.rt-BaseButton:where(.rt-IconButton) {
+.rt-BaseButton:where([data-icon-only]) {
   padding-inline: 0;
   aspect-ratio: 1;
 }
@@ -349,40 +349,6 @@
   }
 }
 
-/* Ghost flush mode: pull the button out by its own padding so its content sits on the text line */
-.rt-BaseButton:where(.rt-variant-ghost[data-flush='true']) {
-  --margin-top: 0px;
-  --margin-right: 0px;
-  --margin-bottom: 0px;
-  --margin-left: 0px;
-
-  --button-padding-x: var(--base-button-px);
-  --button-padding-y: calc((var(--base-button-height) - 1lh) / 2);
-
-  --margin-top-override: calc(var(--margin-top) - var(--button-padding-y));
-  --margin-right-override: calc(var(--margin-right) - var(--button-padding-x));
-  --margin-bottom-override: calc(var(--margin-bottom) - var(--button-padding-y));
-  --margin-left-override: calc(var(--margin-left) - var(--button-padding-x));
-
-  margin-top: var(--margin-top-override);
-  margin-right: var(--margin-right-override);
-  margin-bottom: var(--margin-bottom-override);
-  margin-left: var(--margin-left-override);
-
-  :where(&) > * {
-    --margin-top-override: initial;
-    --margin-right-override: initial;
-    --margin-bottom-override: initial;
-    --margin-left-override: initial;
-  }
-}
-
-/* A flush ghost icon button pulls out by the space around its glyph */
-.rt-BaseButton:where(.rt-IconButton.rt-variant-ghost[data-flush='true']) {
-  --button-padding-x: calc((var(--base-button-height) - var(--base-button-icon-size)) / 2);
-  --button-padding-y: var(--button-padding-x);
-}
-
 /***************************************************************************************************
  *                                                                                                 *
  * SPECIAL VARIANTS                                                                                *

package/src/components/_internal/base-button.props.ts

@@ -27,7 +27,7 @@ const variants = ['raised', 'solid', 'soft', 'surface', 'outline', 'ghost'] as c
 /**
  * Base button prop definitions that define the component's API
  * 
- * These props are used by all button variants (Button, IconButton, etc.)
+ * These props are used by all button variants (Button and Toggle)
  * to ensure consistent behavior and styling across the design system.
  * 
  * Key features:
@@ -72,17 +72,11 @@ const baseButtonPropDefs = {
    * Useful for mobile layouts and form submissions
    */
   fullWidth: { type: 'boolean', className: 'rt-full-width', default: false },
-  /**
-   * Flush mode that removes visual padding for seamless text integration
-   * Only effective with ghost variant
-   */
-  flush: { type: 'boolean', default: false },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
   loading: PropDef<boolean>;
   fullWidth: PropDef<boolean>;
-  flush: PropDef<boolean>;
 };
 
 export { baseButtonPropDefs };

package/src/components/_internal/base-button.tsx

@@ -8,9 +8,7 @@ import { Spinner } from '../spinner.js';
 import { VisuallyHidden } from '../visually-hidden.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';
 
@@ -26,8 +24,7 @@ type PolymorphicBaseButtonProps<C extends React.ElementType = 'button'> = {
   /** Element type to render as (e.g., 'a', 'span', etc.) */
   as?: C;
 } & BaseButtonOwnProps &
-  MarginProps &
-  ComponentPropsWithout<C, RemovedProps | keyof BaseButtonOwnProps | keyof MarginProps | 'as'>;
+  ComponentPropsWithout<C, RemovedProps | keyof BaseButtonOwnProps | 'as'>;
 
 /**
  * BaseButton props interface that combines all available props
@@ -39,8 +36,7 @@ interface BaseButtonProps extends PolymorphicBaseButtonProps {}
  *
  * This is the foundational button component that handles all the complex logic
  * including loading states, accessibility, performance optimizations, and
- * polymorphic rendering. It's used by Button, IconButton, and other button
- * variants to ensure consistent behavior across the design system.
+ * polymorphic rendering. It's used by Button and Toggle to ensure consistent behavior across the design system.
  *
  * Key features:
  * - Loading state with spinner and accessibility announcements
@@ -70,10 +66,9 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((ownProp
     as,
     color,
     radius,
-    flush,
     disabled: nativeDisabled,
     ...baseButtonProps
-  } = extractProps(props, baseButtonPropDefs, marginPropDefs);
+  } = extractProps(props, baseButtonPropDefs);
 
   // Loading blocks activation but keeps the native `disabled` off, so the button keeps focus
   // and its place in the tab order (aria-disabled carries the state). An explicit `disabled`
@@ -158,7 +153,6 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((ownProp
     <Comp
       data-accent-color={color}
       data-radius={radius}
-      data-flush={flush ? 'true' : undefined}
       data-icon-start={iconStart || undefined}
       data-icon-end={iconEnd || undefined}
       {...baseButtonProps}

package/src/components/_internal/base-checkbox.css

@@ -7,13 +7,8 @@
   flex-shrink: 0;
   cursor: var(--cursor-checkbox);
 
-  /* Unless in a skeleton, align with text line height when possible and fall back to own height */
-  height: var(--skeleton-height, var(--line-height, var(--checkbox-size)));
-  --skeleton-height-override: var(--checkbox-size);
-
-  /* Set root radius when in a skeleton */
-  border-radius: var(--skeleton-radius);
-  --skeleton-radius-override: var(--checkbox-border-radius);
+  /* Align with text line height when possible and fall back to own height */
+  height: var(--line-height, var(--checkbox-size));
 
   /*
    * Ceiling on the mark's corner, as a ratio of its own box.
@@ -322,7 +317,7 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-/* The focus ring lives on Checkbox and CheckboxGroup: CheckboxCards rings its card instead. */
+/* The focus ring lives on Checkbox and CheckboxGroup. */
 .rt-BaseCheckboxRoot {
   /* Disabled is a colour remap (per variant above), never opacity; the cursor stays default. */
   &:where(:disabled, [data-disabled]) {

package/src/components/_internal/base-menu.css

@@ -114,11 +114,13 @@
 
 /* A separator keeps the panel's own rhythm above and below, and spans the rows' text. */
 .rt-BaseMenuSeparator {
+  box-sizing: content-box;
   height: 1px;
-  margin-top: var(--base-menu-content-padding);
-  margin-bottom: var(--base-menu-content-padding);
-  margin-inline-start: var(--base-menu-item-padding-left);
-  margin-inline-end: var(--base-menu-item-padding-right);
+  padding-top: var(--base-menu-content-padding);
+  padding-bottom: var(--base-menu-content-padding);
+  padding-inline-start: var(--base-menu-item-padding-left);
+  padding-inline-end: var(--base-menu-item-padding-right);
+  background-clip: content-box;
 }
 
 .rt-BaseMenuLabel {
@@ -137,8 +139,10 @@
   user-select: none;
   cursor: default;
 
+  /* After items, the extra air is inside the label's own box, never a margin on it. */
   :where(.rt-BaseMenuItem) + & {
-    margin-top: var(--space-3);
+    min-height: calc(var(--base-menu-item-height) + var(--space-3));
+    padding-top: calc(var(--base-menu-item-padding-y) + var(--space-3));
   }
 }
 
@@ -327,7 +331,7 @@
       }
 
       /* Also target any element with data-accent-color="gray" */
-      & :where([data-accent-color='gray']:not(.rt-Badge)) {
+      & :where([data-accent-color='gray']:not(.rt-Chip)) {
         color: inherit !important;
       }
     }

package/src/components/_internal/base-radio.css

@@ -7,13 +7,8 @@
   flex-shrink: 0;
   cursor: var(--cursor-radio);
 
-  /* Unless in a skeleton, align with text line height when possible and fall back to own height */
-  height: var(--skeleton-height, var(--line-height, var(--radio-size)));
-  --skeleton-height-override: var(--radio-size);
-
-  /* Set root radius when in a skeleton */
-  border-radius: var(--skeleton-radius);
-  --skeleton-radius-override: 100%;
+  /* Align with text line height when possible and fall back to own height */
+  height: var(--line-height, var(--radio-size));
 
   isolation: isolate;
 

package/src/components/_internal/base-sidebar-menu.css

@@ -144,9 +144,10 @@
   user-select: none;
   cursor: default;
 
-  /* Add margin-top when following menu items - identical to BaseMenuLabel */
+  /* After items, the extra air is inside the label's own box - identical to BaseMenuLabel */
   :where(.rt-SidebarMenuItem) + & {
-    margin-top: var(--space-3);
+    min-height: calc(var(--base-menu-item-height) + var(--space-3));
+    padding-top: calc(var(--base-menu-item-padding-y) + var(--space-3));
   }
 }
 

package/src/components/_internal/base-tab-list.css

@@ -34,13 +34,13 @@
 .rt-BaseTabListTriggerInner {
   position: absolute;
 
-  :where(.rt-BaseTabListTrigger[data-state='inactive'], .rt-TabNavLink:not([data-active])) & {
+  :where(.rt-BaseTabListTrigger[data-state='inactive']) & {
     letter-spacing: var(--tab-inactive-letter-spacing);
     word-spacing: var(--tab-inactive-word-spacing);
  /* 100ms - allows staggered effect vs active state's 0ms */
   }
 
-  :where(.rt-BaseTabListTrigger[data-state='active'], .rt-TabNavLink[data-active]) & {
+  :where(.rt-BaseTabListTrigger[data-state='active']) & {
     font-weight: var(--font-weight-medium);
     letter-spacing: var(--tab-active-letter-spacing);
     word-spacing: var(--tab-active-word-spacing);
@@ -219,8 +219,7 @@
 
 /* Forced colors support */
 @media (forced-colors: active) {
-  .rt-BaseTabListTrigger:where([data-state='active'])::before,
-  .rt-TabNavLink:where([data-active])::before {
+  .rt-BaseTabListTrigger:where([data-state='active'])::before {
     background-color: Highlight;
   }
 

package/src/components/accordion.css

@@ -45,39 +45,6 @@
   background-color: transparent;
 }
 
-/* Ghost variant flush support */
-:where(.rt-AccordionRoot:where(.rt-variant-ghost)[data-flush='true']) {
-  /* We reset the defined margin variables to avoid inheriting them from a higher component */
-  /* If a margin IS defined on the component itself, the utility class will win and reset it */
-  --margin-top: 0px;
-  --margin-right: 0px;
-  --margin-bottom: 0px;
-  --margin-left: 0px;
-
-  /* Calculate padding values for different accordion sizes */
-  --accordion-padding-x: calc(var(--space-5) * var(--padding-ratio-horizontal) / 4);
-  --accordion-padding-y: calc(var(--space-4) / 8);
-
-  /* Define the overrides to incorporate the negative margins */
-  --margin-top-override: calc(var(--margin-top) - var(--accordion-padding-y));
-  --margin-right-override: calc(var(--margin-right) - var(--accordion-padding-x));
-  --margin-bottom-override: calc(var(--margin-bottom) - var(--accordion-padding-y));
-  --margin-left-override: calc(var(--margin-left) - var(--accordion-padding-x));
-
-  margin-top: var(--margin-top-override);
-  margin-right: var(--margin-right-override);
-  margin-bottom: var(--margin-bottom-override);
-  margin-left: var(--margin-left-override);
-
-  /* Reset the overrides on direct children */
-  :where(&) > * {
-    --margin-top-override: initial;
-    --margin-right-override: initial;
-    --margin-bottom-override: initial;
-    --margin-left-override: initial;
-  }
-}
-
 /* Accordion Item */
 .rt-AccordionItem {
   overflow: hidden;

package/src/components/accordion.props.tsx

@@ -13,11 +13,9 @@ const accordionRootPropDefs = {
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised' },
   ...colorPropDef,
   ...radiusPropDef,
-  flush: { type: 'boolean', default: false },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
-  flush: PropDef<boolean>;
 };
 
 const accordionItemPropDefs = {
@@ -57,7 +55,6 @@ export type AccordionRootOwnProps = {
   variant?: (typeof variants)[number];
   color?: string;
   radius?: string;
-  flush?: boolean;
 };
 
 export type AccordionItemOwnProps = {

package/src/components/accordion.tsx

@@ -30,7 +30,7 @@ interface AccordionRootProps
 const AccordionRoot = React.forwardRef<AccordionRootElement, AccordionRootProps>(
   (ownProps, forwardedRef) => {
     const props = useThemeSizeProps(ownProps, accordionRootPropDefs.size);
-    const { className, flush, radius, color, ...extractedRadixProps } =
+    const { className, radius, color, ...extractedRadixProps } =
       extractProps(props, accordionRootPropDefs);
 
     const radixProps = extractedRadixProps as React.ComponentPropsWithoutRef<
@@ -73,7 +73,6 @@ const AccordionRoot = React.forwardRef<AccordionRootElement, AccordionRootProps>
         ref={forwardedRef}
         className={classNames('rt-AccordionRoot', className)}
         data-accent-color={color}
-        data-flush={flush || undefined}
         data-radius={radius}
         onKeyDown={handleKeyDown}
       />

package/src/components/alert-dialog.tsx

@@ -165,7 +165,7 @@ type AlertDialogTitleProps = ComponentPropsWithout<typeof Heading, 'asChild'>;
 const AlertDialogTitle = React.forwardRef<AlertDialogTitleElement, AlertDialogTitleProps>(
   (props, forwardedRef) => (
     <AlertDialogPrimitive.Title asChild>
-      <Heading size="5" mb="4" trim="start" {...props} asChild={false} ref={forwardedRef} />
+      <Heading size="5" trim="start" {...props} asChild={false} ref={forwardedRef} />
     </AlertDialogPrimitive.Title>
   ),
 );

package/src/components/avatar.tsx

@@ -7,13 +7,11 @@ import { Avatar as AvatarPrimitive } from 'radix-ui';
 import { avatarPropDefs } from './avatar.props.js';
 import { extractProps } from '../helpers/extract-props.js';
 import { getSubtree } from '../helpers/get-subtree.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';
 
-interface AvatarProps extends MarginProps, AvatarImplProps {}
+interface AvatarProps extends AvatarImplProps {}
 const Avatar = React.forwardRef<AvatarImplElement, AvatarProps>((props, forwardedRef) => {
   const {
     asChild,
@@ -25,7 +23,7 @@ const Avatar = React.forwardRef<AvatarImplElement, AvatarProps>((props, forwarde
     status,
     badge,
     ...imageProps
-  } = extractProps(props, avatarPropDefs, marginPropDefs);
+  } = extractProps(props, avatarPropDefs);
 
   if (process.env.NODE_ENV !== 'production') {
     if (status !== undefined && badge !== undefined) {

package/src/components/blockquote.tsx

@@ -6,14 +6,12 @@ import { Text } from './text.js';
 
 import type { blockquotePropDefs } from './blockquote.props.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 BlockquoteElement = React.ElementRef<'blockquote'>;
 type BlockQuoteOwnProps = GetPropDefTypes<typeof blockquotePropDefs>;
 interface BlockquoteProps
   extends ComponentPropsWithout<'blockquote', RemovedProps>,
-    MarginProps,
     BlockQuoteOwnProps {}
 const Blockquote = React.forwardRef<BlockquoteElement, BlockquoteProps>((props, forwardedRef) => {
   const { asChild, children, className, ...blockquoteProps } = props;

package/src/components/button.css

@@ -3,17 +3,18 @@
  *
  * Button sits on the shared control ladder in _internal/base-button.css: height, side padding
  * (with the pill correction), gap and icon size all come from there, for every variant. This
- * file adds the label's type step per size.
+ * file adds the label's type step per size. An icon-only button (`data-icon-only`) has no label,
+ * so it takes neither.
  */
 
 @import './_internal/base-button.css';
 
-.rt-Button {
+.rt-Button:where(:not([data-icon-only])) {
   font-weight: var(--font-weight-medium);
 }
 
 @breakpoints {
-  .rt-Button {
+  .rt-Button:where(:not([data-icon-only])) {
     &:where(.rt-r-size-1) {
       font-size: var(--font-size-1);
       line-height: var(--line-height-1);

package/src/components/button.tsx

@@ -49,15 +49,28 @@ type ButtonRankProps =
       variant?: never;
     };
 
-type ButtonOwnProps = Omit<BaseButtonProps, 'as' | 'variant'> &
-  ButtonRankProps &
-  ButtonTooltipProps & {
-    /**
-     * A square button holding only an icon. It needs an accessible name: `aria-label`,
-     * `aria-labelledby`, or visible text. `IconButton` is this button with `iconOnly` set.
-     */
-    iconOnly?: boolean;
-  };
+/**
+ * An icon-only button is square and holds only its icon, so it has no visible text: the type
+ * requires `aria-label` or `aria-labelledby`. It never takes the full width.
+ */
+type ButtonIconOnlyProps =
+  | {
+      /** Makes the button square and shows only the icon in `children`. Requires `aria-label` or `aria-labelledby`. */
+      iconOnly: true;
+      /** The button's name for screen readers. Required with `iconOnly` unless `aria-labelledby` is set. */
+      'aria-label': string;
+      fullWidth?: never;
+    }
+  | {
+      /** Makes the button square and shows only the icon in `children`. Requires `aria-label` or `aria-labelledby`. */
+      iconOnly: true;
+      /** The id of an element that names this button. Use it instead of `aria-label`. */
+      'aria-labelledby': string;
+      fullWidth?: never;
+    }
+  | { iconOnly?: false };
+
+type ButtonOwnProps = Omit<BaseButtonProps, 'as' | 'variant'> & ButtonRankProps & ButtonTooltipProps & ButtonIconOnlyProps;
 
 /**
  * Polymorphic Button props that support rendering as different HTML elements
@@ -78,12 +91,10 @@ type ButtonComponent = <C extends React.ElementType = 'button'>(props: ButtonPro
  * An icon-only button must have an accessible name. Throws in development, logs otherwise.
  */
 function validateIconButtonName(props: Record<string, unknown>) {
-  if (props['aria-label'] || props['aria-labelledby'] || props.children) return;
+  if (props['aria-label'] || props['aria-labelledby']) return;
   const errorMessage =
-    'IconButton: Icon buttons must have an accessible name. Please provide either:' +
-    '\n- aria-label prop with descriptive text' +
-    '\n- aria-labelledby prop referencing a label element' +
-    '\n- or visible text children';
+    'Button: an `iconOnly` button must have an accessible name. Pass `aria-label`, or ' +
+    '`aria-labelledby` referencing a label element.';
   if (process.env.NODE_ENV === 'development') throw new Error(errorMessage);
   console.error(errorMessage);
 }
@@ -109,6 +120,9 @@ function validateIconButtonName(props: Record<string, unknown>) {
  *
  * // Polymorphic button as link
  * <Button as="a" href="/dashboard">Go to Dashboard</Button>
+ *
+ * // Square, icon-only button: needs an accessible name
+ * <Button iconOnly aria-label="Settings"><Settings /></Button>
  * ```
  */
 const Button = React.forwardRef(
@@ -131,10 +145,10 @@ const Button = React.forwardRef(
     // Use shared tooltip wrapper hook for accessibility props
     const { tooltipId, hasTooltip, accessibilityProps: tooltipAccessibilityProps } = useTooltipWrapper(tooltip);
 
-    // An icon button is square, so it never takes the full width.
+    // An icon-only button is square, so it never takes the full width.
     if (iconOnly) {
-      validateIconButtonName(props);
-      props.fullWidth = false;
+      validateIconButtonName(props as Record<string, unknown>);
+      (props as { fullWidth?: boolean }).fullWidth = false;
     }
 
     if (emphasis !== undefined && variant !== undefined) {
@@ -148,7 +162,8 @@ const Button = React.forwardRef(
         variant={resolvedVariant}
         {...tooltipAccessibilityProps}
         ref={forwardedRef}
-        className={classNames(iconOnly ? 'rt-IconButton' : 'rt-Button', className)}
+        data-icon-only={iconOnly || undefined}
+        className={classNames('rt-Button', className)}
         style={style}
       />
     );
@@ -171,4 +186,4 @@ const Button = React.forwardRef(
 Button.displayName = 'Button';
 
 export { Button };
-export type { ButtonProps, ButtonEmphasis, ButtonRankProps };
+export type { ButtonProps, ButtonEmphasis, ButtonRankProps, ButtonIconOnlyProps };

package/src/components/card.tsx

@@ -7,18 +7,16 @@ import { Slot } from 'radix-ui';
 import { cardPropDefs } from './card.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';
 
 type CardElement = React.ElementRef<'div'>;
 type CardOwnProps = GetPropDefTypes<typeof cardPropDefs>;
-interface CardProps extends ComponentPropsWithout<'div', RemovedProps>, MarginProps, CardOwnProps {}
+interface CardProps extends ComponentPropsWithout<'div', RemovedProps>, CardOwnProps {}
 const Card = React.forwardRef<CardElement, CardProps>((ownProps, forwardedRef) => {
   const props = useThemeSizeProps(ownProps, cardPropDefs.size);
-  const { asChild, className, ...cardProps } = extractProps(props, cardPropDefs, marginPropDefs);
+  const { asChild, className, ...cardProps } = extractProps(props, cardPropDefs);
   const Comp = asChild ? Slot.Root : 'div';
   return (
     <Comp

package/src/components/chatbar.css

@@ -14,6 +14,7 @@
   /* A column: notices, then the box (which fills any height the consumer gives the root), then context. */
   display: flex;
   flex-direction: column;
+  gap: var(--space-3);
 }
 
 /* Unstyled textarea (reset) */
@@ -547,12 +548,11 @@
   display: flex;
   flex-direction: column;
   gap: var(--space-3);
-  margin-bottom: var(--space-3);
 }
 
 /* Context is quiet text below the box, inset to line up with the text inside it. */
 .rt-ChatbarContext {
-  padding: var(--space-3) var(--space-4) 0;
+  padding: 0 var(--space-4);
   min-width: 0;
   overflow-wrap: anywhere;
 }

package/src/components/chatbar.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { useComposedRefs } from 'radix-ui/internal';
 import { useDropzone } from 'react-dropzone';
 
-import { IconButton, type IconButtonProps } from './icon-button.js';
+import { Button } from './button.js';
 import { CloseIcon, FileTextIcon } from './icons.js';
 import { Flex } from './flex.js';
 import { ScrollArea } from './scroll-area.js';
@@ -16,7 +16,7 @@ import { VisuallyHidden } from './visually-hidden.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { accentColors } from '../props/color.prop.js';
 import type { radii } from '../props/radius.prop.js';
-import type { ButtonRankProps } from './button.js';
+import type { ButtonProps, ButtonRankProps } from './button.js';
 
 // Avoid SSR warnings by using an isomorphic layout effect
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
@@ -1090,9 +1090,9 @@ const Pill: React.FC<{
         {detail ? <VisuallyHidden>, {detail}</VisuallyHidden> : null}
       </Text>
       {onRemove && (
-        <IconButton className="rt-ChatbarItemRemove" aria-label={removeLabel} size="1" variant="ghost" color="gray" onClick={onRemove}>
+        <Button iconOnly className="rt-ChatbarItemRemove" aria-label={removeLabel} size="1" variant="ghost" color="gray" onClick={onRemove}>
           <CloseIcon />
-        </IconButton>
+        </Button>
       )}
     </>
   );
@@ -1280,7 +1280,7 @@ RowEnd.displayName = 'Chatbar.RowEnd';
 
 type SendStatus = 'ready' | 'submitted' | 'streaming' | 'error';
 
-type SendProps = Omit<IconButtonProps, 'aria-label' | 'aria-labelledby' | 'variant' | 'emphasis'> &
+type SendProps = Omit<ButtonProps, 'aria-label' | 'aria-labelledby' | 'variant' | 'emphasis' | 'iconOnly' | 'fullWidth'> &
   ButtonRankProps & {
   /** Optional override for accessible name. Defaults to "Send". */
   'aria-label'?: string;
@@ -1388,7 +1388,8 @@ const Send = React.forwardRef<HTMLButtonElement, SendProps>((props, forwardedRef
     );
 
   return (
-    <IconButton
+    <Button
+      iconOnly
       {...buttonProps}
       ref={forwardedRef}
       size={sizeProp ?? ctx.size}
@@ -1406,7 +1407,7 @@ const Send = React.forwardRef<HTMLButtonElement, SendProps>((props, forwardedRef
       {...labelProps}
     >
       {glyph}
-    </IconButton>
+    </Button>
   );
 });
 Send.displayName = 'Chatbar.Send';