@astryxdesign/core 0.3.0 → 0.4.0-canary.058f476

package/src/EmptyState/EmptyState.tsx

@@ -157,6 +157,7 @@ export function EmptyState({
   return (
     <div
       ref={ref}
+      {...props}
       role="status"
       {...mergeProps(
         themeProps('empty-state', {variant: isCompact ? 'compact' : null}),
@@ -167,13 +168,17 @@ export function EmptyState({
         ),
         className,
         style,
-      )}
-      {...props}>
+      )}>
       {icon != null && <div aria-hidden="true">{icon}</div>}
       <div {...stylex.props(styles.textGroup)}>
         {createElement(
           HeadingTag,
-          stylex.props(styles.title, isCompact && styles.titleCompact),
+          mergeProps(
+            themeProps('empty-state-title', {
+              variant: isCompact ? 'compact' : null,
+            }),
+            stylex.props(styles.title, isCompact && styles.titleCompact),
+          ),
           title,
         )}
         {description != null && (
@@ -182,9 +187,14 @@ export function EmptyState({
           // mismatches. The StyleX style sets margin: 0, so appearance is
           // unchanged.
           <div
-            {...stylex.props(
-              styles.description,
-              isCompact && styles.descriptionCompact,
+            {...mergeProps(
+              themeProps('empty-state-description', {
+                variant: isCompact ? 'compact' : null,
+              }),
+              stylex.props(
+                styles.description,
+                isCompact && styles.descriptionCompact,
+              ),
             )}>
             {description}
           </div>

package/src/Field/Field.doc.mjs

@@ -34,6 +34,7 @@ export const docs = {
         className: 'astryx-input-status-icon',
         visualProps: ['size', 'status'],
       },
+      {className: 'astryx-input-clear-icon'},
     ],
     vars: [
       {name: '--_field-radius', description: 'Border radius of input fields', default: 'var(--radius-element)', private: true},

package/src/Field/InputClearButton.test.tsx

@@ -0,0 +1,117 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file InputClearButton.test.tsx
+ * @input Uses vitest, @testing-library/react, InputClearButton, Icon, theme
+ * @output Unit tests for the shared clear-button primitive
+ * @position Testing; validates InputClearButton.tsx — the single home for the
+ *   clearable input family's clear (✕) affordance and its theme target.
+ *
+ * SYNC: When InputClearButton.tsx changes, update tests to match new behavior.
+ */
+
+import {describe, it, expect, vi} from 'vitest';
+import {render, screen, fireEvent} from '@testing-library/react';
+import {InputClearButton} from './InputClearButton';
+import {Icon} from '../Icon';
+import {defineTheme} from '../theme/defineTheme';
+import {generateThemeCSS} from '../theme/generateThemeRules';
+
+function generateThemeTestCSS(theme: Parameters<typeof generateThemeCSS>[0]) {
+  const {prose, component} = generateThemeCSS(theme);
+  return [prose, component].filter(Boolean).join('\n\n');
+}
+
+const getGlyph = (): HTMLElement => {
+  const button = screen.getByRole('button', {name: 'Clear'});
+  const icon = button.querySelector('.astryx-icon');
+  if (icon == null) {
+    throw new Error('clear glyph not found');
+  }
+  return icon as HTMLElement;
+};
+
+describe('InputClearButton', () => {
+  it('renders a real button with the given accessible label', () => {
+    render(<InputClearButton label="Clear" onClick={() => {}} />);
+    const button = screen.getByRole('button', {name: 'Clear'});
+    expect(button.tagName).toBe('BUTTON');
+  });
+
+  it('fires onClick with the native event when pressed', () => {
+    const onClick = vi.fn();
+    render(<InputClearButton label="Clear" onClick={onClick} />);
+    fireEvent.click(screen.getByRole('button', {name: 'Clear'}));
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(onClick.mock.calls[0][0]).toBeInstanceOf(Object);
+  });
+
+  it('renders the astryx-input-clear-icon target on the glyph', () => {
+    // One canonical target on the icon element itself — so a theme restyles
+    // the clear glyph across the whole input family from a single place.
+    render(<InputClearButton label="Clear" onClick={() => {}} />);
+    const glyph = getGlyph();
+    expect(glyph).toHaveClass('astryx-input-clear-icon');
+    expect(glyph).toHaveClass('astryx-icon');
+  });
+
+  it('matches a standalone inherit/sm close icon aside from the target class', () => {
+    // The glyph is a secondary/sm close icon (matching the other field
+    // affordances — chevrons, calendar toggles, status icons); aside from the
+    // target class it is exactly that standalone Icon, so the default look is
+    // defined once here rather than per input.
+    render(<InputClearButton label="Clear" onClick={() => {}} />);
+    const glyph = getGlyph();
+
+    const {container} = render(
+      <Icon icon="close" size="sm" color="secondary" />,
+    );
+    const refIcon = container.querySelector('.astryx-icon') as HTMLElement;
+
+    const styleClasses = (el: HTMLElement) =>
+      el.className
+        .split(' ')
+        .filter(c => c !== 'astryx-input-clear-icon')
+        .sort();
+
+    expect(styleClasses(glyph)).toEqual(styleClasses(refIcon));
+  });
+
+  it('merges an extra iconClassName beside the canonical target', () => {
+    // Consumers that shipped a component-specific target before the family
+    // converged pass it through here to keep emitting it for a deprecation
+    // window.
+    render(
+      <InputClearButton
+        label="Clear"
+        onClick={() => {}}
+        iconClassName="astryx-date-input-clear-icon"
+      />,
+    );
+    const glyph = getGlyph();
+    expect(glyph).toHaveClass('astryx-input-clear-icon');
+    expect(glyph).toHaveClass('astryx-date-input-clear-icon');
+  });
+
+  it('exposes input-clear-icon so a theme reaches the glyph color, size, and hover', () => {
+    const theme = defineTheme({
+      name: 'input-clear-icon-test',
+      components: {
+        'input-clear-icon': {
+          base: {
+            width: '12px',
+            height: '12px',
+            fontSize: '12px',
+            color: 'var(--color-icon-secondary)',
+            ':hover': {color: 'var(--color-icon-primary)'},
+          },
+        },
+      },
+    });
+    const css = generateThemeTestCSS(theme);
+    expect(css).toContain('.astryx-input-clear-icon {');
+    expect(css).toContain('width: 12px');
+    expect(css).toContain('.astryx-input-clear-icon:hover {');
+    expect(css).toContain('color: var(--color-icon-primary)');
+  });
+});

package/src/Field/InputClearButton.tsx

@@ -5,14 +5,20 @@
 /**
  * @file InputClearButton.tsx
  * @input Uses React, Button, Icon
- * @output Exports InputClearButton shared clear button for input components
- * @position Shared primitive; used by Typeahead, Tokenizer, TextInput
+ * @output Exports InputClearButton, the shared clear (✕) button rendered by
+ *   every clearable input in the family.
+ * @position Shared primitive. Every input that renders a clear affordance —
+ *   TextInput, NumberInput, TimeInput, DateInput, DateTimeInput,
+ *   DateRangeInput, Selector, MultiSelector, Typeahead, Tokenizer, FileInput —
+ *   routes it through here, so the glyph is themed in one place via the
+ *   `astryx-input-clear-icon` target.
  */
 
 import type {ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {Button} from '../Button';
 import {Icon} from '../Icon';
+import {themeProps} from '../utils/themeProps';
 
 const styles = stylex.create({
   button: {
@@ -25,19 +31,40 @@ export interface InputClearButtonProps {
   label: string;
   onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
   xstyle?: stylex.StyleXStyles;
+  /**
+   * Extra class(es) for the clear glyph itself, merged onto the shared
+   * `astryx-input-clear-icon` target. Used by inputs that shipped a
+   * component-specific clear-icon target before the family converged here
+   * (e.g. `astryx-date-input-clear-icon`) to keep emitting it for a
+   * deprecation window; new callers don't need it.
+   */
+  iconClassName?: string;
 }
 
 export function InputClearButton({
   label,
   onClick,
   xstyle,
+  iconClassName,
 }: InputClearButtonProps): ReactNode {
+  const {className: iconTargetClassName} = themeProps('input-clear-icon');
   return (
     <Button
       variant="ghost"
       size="sm"
       label={label}
-      icon={<Icon icon="close" size="sm" color="inherit" />}
+      icon={
+        <Icon
+          icon="close"
+          size="sm"
+          color="secondary"
+          className={
+            iconClassName != null
+              ? `${iconTargetClassName} ${iconClassName}`
+              : iconTargetClassName
+          }
+        />
+      }
       onClick={onClick}
       isIconOnly
       xstyle={[styles.button, xstyle]}

package/src/Field/PanelSearchInput.tsx

@@ -0,0 +1,271 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file PanelSearchInput.tsx
+ * @input Uses React, StyleX, Icon, InputClearButton, theme tokens
+ * @output Exports PanelSearchInput — the search row that sits at the top of a
+ *   dropdown panel
+ * @position Shared internal primitive; used by Selector and MultiSelector
+ *
+ * A dropdown panel is already a bordered, elevated surface. Nesting a bordered
+ * TextInput inside it draws a second box within that box, so the field reads as
+ * a control dropped into the menu rather than part of it. This row is the
+ * seamless alternative — magnifier, borderless input, clear button — separated
+ * from the options by a divider the panel owns.
+ *
+ * The field is shaped like the option rows under it rather than like a form
+ * input: same inset from the panel edge, same `--radius-element` corners, same
+ * height. The focus ring is drawn on that rounded box, so focus reads as "this
+ * row of the panel" — the same visual language as an item's highlight — instead
+ * of ringing the whole panel header. It appears for keyboard focus only; see
+ * `fieldKeyboardFocus` for why `:focus-visible` alone does not mean that.
+ *
+ *   ┌─ panel ──────────────────┐
+ *   │ ┌──────────────────────┐ │  ← field: rounded, inset, item-sized
+ *   │ │ ⌕  Search…         ✕ │ │
+ *   │ └──────────────────────┘ │
+ *   ├──────────────────────────┤  ← divider (full-bleed)
+ *   │ ┌──────────────────────┐ │
+ *   │ │ Apple                │ │  ← option row: same box
+ *
+ * The clear button is the shared `InputClearButton`, so the affordance and its
+ * ghost-button behavior match every other input's clear. It renders AFTER the
+ * input in DOM order: the selector components' Tab handling depends on that
+ * order to keep the popup open while focus moves onto it.
+ *
+ * Not exported from the package: it is an implementation detail of the panels
+ * that use it, not public API.
+ */
+
+import {useCallback, useEffect, useState, type Ref} from 'react';
+import * as stylex from '@stylexjs/stylex';
+import {Icon} from '../Icon';
+import {InputClearButton} from './InputClearButton';
+import {mergeProps} from '../utils';
+import {
+  getInteractionModality,
+  trackInteractionModality,
+} from '../utils/interactionModality';
+import {
+  colorVars,
+  durationVars,
+  easeVars,
+  radiusVars,
+  spacingVars,
+  typeScaleVars,
+  typographyVars,
+} from '../theme/tokens.stylex';
+import type {BaseProps} from '../BaseProps';
+
+const styles = stylex.create({
+  // Gutter only. Matches the option list's own padding so the field below
+  // lines up with the option rows rather than with the panel edge.
+  wrapper: {
+    paddingBlock: spacingVars['--spacing-1'],
+    paddingInline: spacingVars['--spacing-1'],
+  },
+  // The field proper — the same box an option row draws: `--radius-element`
+  // corners and, at md, a 6/8 padding pair that lands it on the option row's
+  // 32px height. Focus rings THIS, not the full-width row.
+  field: {
+    boxSizing: 'border-box',
+    display: 'flex',
+    alignItems: 'center',
+    gap: spacingVars['--spacing-2'],
+    width: '100%',
+    paddingBlock: spacingVars['--spacing-1-5'],
+    paddingInline: spacingVars['--spacing-2'],
+    borderRadius: radiusVars['--radius-element'],
+    transitionProperty: 'box-shadow',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+  },
+  // The focus ring, applied only while focus was taken by keyboard (see
+  // `isKeyboardFocus`). `:has(input:focus-visible)` stays the CSS condition —
+  // the browser's heuristic still decides, this only narrows it — and rings
+  // the field rather than the bare <input> so the magnifier and the clear
+  // button sit inside it, and so tabbing ONTO the clear button does not
+  // re-ring the field.
+  //
+  // Inset, not the shared 3px-offset outline: the field is inset 4-5px from
+  // the panel edge, so an outline at that offset would land on the panel's own
+  // border and the divider. Measured, not guessed.
+  fieldKeyboardFocus: {
+    boxShadow: {
+      default: 'none',
+      ':has(input:focus-visible)': `inset 0 0 0 2px ${colorVars['--color-accent']}`,
+    },
+  },
+  // The icon span needs explicit flex centering to avoid a line-height offset.
+  icon: {
+    display: 'flex',
+    alignItems: 'center',
+    flexShrink: 0,
+  },
+  input: {
+    flexGrow: 1,
+    flexShrink: 1,
+    minWidth: 0,
+    padding: 0,
+    margin: 0,
+    borderWidth: 0,
+    borderStyle: 'none',
+    backgroundColor: 'transparent',
+    color: colorVars['--color-text-primary'],
+    fontFamily: typographyVars['--font-family-body'],
+    // Matches the option rows below it, so the query reads as the first line of
+    // the list. The coarse-pointer floor keeps iOS from zooming on focus.
+    fontSize: {
+      default: typeScaleVars['--text-label-size'],
+      '@media (pointer: coarse)': `max(1rem, ${typeScaleVars['--text-label-size']})`,
+    },
+    lineHeight: typeScaleVars['--text-label-leading'],
+    // The field draws the focus ring (see `field`), so the bare input must not
+    // draw a second one inside it.
+    outline: 'none',
+    '::placeholder': {
+      color: colorVars['--color-text-secondary'],
+    },
+  },
+});
+
+export interface PanelSearchInputProps extends Omit<
+  BaseProps<HTMLInputElement>,
+  'onChange'
+> {
+  /** Ref forwarded to the input element (for focus management). */
+  ref?: Ref<HTMLInputElement>;
+
+  /**
+   * Accessible name for the input. Rendered as `aria-label`: the panel has no
+   * visible label for the field, and a placeholder is not a reliable name.
+   */
+  label: string;
+
+  /** Accessible name for the clear (✕) button, e.g. `Clear Search options`. */
+  clearLabel: string;
+
+  /** Placeholder text shown while the query is empty. */
+  placeholder?: string;
+
+  /** The current query. */
+  value: string;
+
+  /** Called with the next query on every keystroke and on clear. */
+  onValueChange: (value: string) => void;
+
+  /** Key handler for the input itself. */
+  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+
+  /** Focus handler for the input; runs after the ring's own bookkeeping. */
+  onFocus?: React.FocusEventHandler<HTMLInputElement>;
+
+  /** Blur handler for the input; runs after the ring's own bookkeeping. */
+  onBlur?: React.FocusEventHandler<HTMLInputElement>;
+
+  /**
+   * Key handler for the row. Events from the input are handled by `onKeyDown`;
+   * this one exists for keys pressed on the clear button, which has no other
+   * handler of its own.
+   */
+  onContainerKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+}
+
+/**
+ * Search row for the top of a dropdown panel: magnifier, borderless input, and
+ * a clear button once a query is typed, in a rounded box shaped like the
+ * option rows beneath it.
+ *
+ * `className`/`style`/`xstyle` apply to the outer row (use them to match the
+ * option list's inline padding); every other prop (`role`, `aria-*`, `id`, …)
+ * passes through to the `<input>`, so the caller owns the combobox wiring.
+ */
+export function PanelSearchInput({
+  ref,
+  label,
+  clearLabel,
+  placeholder,
+  value,
+  onValueChange,
+  onKeyDown,
+  onFocus,
+  onBlur,
+  onContainerKeyDown,
+  xstyle,
+  className,
+  style,
+  ...props
+}: PanelSearchInputProps) {
+  // `:focus-visible` matches a text input focused by POINTER as well (CSS
+  // Selectors 4, verified in Chromium), so it cannot express "keyboard focus"
+  // by itself. Gate it on how the user last interacted; the CSS condition
+  // stays `:focus-visible`, this only narrows it.
+  const [isKeyboardFocus, setIsKeyboardFocus] = useState(false);
+
+  useEffect(() => {
+    trackInteractionModality();
+  }, []);
+
+  const handleFocus = useCallback(
+    (e: React.FocusEvent<HTMLInputElement>) => {
+      setIsKeyboardFocus(getInteractionModality() === 'keyboard');
+      onFocus?.(e);
+    },
+    [onFocus],
+  );
+
+  const handleBlur = useCallback(
+    (e: React.FocusEvent<HTMLInputElement>) => {
+      setIsKeyboardFocus(false);
+      onBlur?.(e);
+    },
+    [onBlur],
+  );
+
+  const handleClear = useCallback(() => {
+    onValueChange('');
+    // Clearing puts the caret back where the user was typing, matching
+    // TextInput's built-in clear.
+    if (typeof ref === 'object' && ref?.current) {
+      ref.current.focus();
+    }
+  }, [onValueChange, ref]);
+
+  return (
+    <div
+      onKeyDown={onContainerKeyDown}
+      {...mergeProps(stylex.props(styles.wrapper, xstyle), className, style)}>
+      <div
+        data-keyboard-focus={isKeyboardFocus ? 'true' : undefined}
+        {...stylex.props(
+          styles.field,
+          isKeyboardFocus && styles.fieldKeyboardFocus,
+        )}>
+        <Icon icon="search" size="sm" color="secondary" xstyle={styles.icon} />
+        <input
+          ref={ref}
+          type="text"
+          aria-label={label}
+          placeholder={placeholder}
+          value={value}
+          onChange={e => onValueChange(e.target.value)}
+          onKeyDown={onKeyDown}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          {...stylex.props(styles.input)}
+          {...props}
+        />
+        {value !== '' && (
+          <InputClearButton label={clearLabel} onClick={handleClear} />
+        )}
+      </div>
+    </div>
+  );
+}
+
+PanelSearchInput.displayName = 'PanelSearchInput';

package/src/FileInput/FileInput.tsx

@@ -59,6 +59,7 @@ import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
 import {useTranslator} from '../i18n';
+import type {TranslatorFn} from '../i18n';
 
 function formatFileSize(bytes: number): string {
   if (bytes < 1024) {
@@ -76,12 +77,13 @@ function validateFiles(
   maxSize: number | undefined,
   maxFiles: number | undefined,
   isMultiple: boolean,
+  t: TranslatorFn,
 ): {valid: File[]; errors: string[]} {
   const errors: string[] = [];
   let valid = files;
 
   if (accept) {
-    const acceptedTypes = accept.split(',').map(t => t.trim().toLowerCase());
+    const acceptedTypes = accept.split(',').map(s => s.trim().toLowerCase());
     valid = valid.filter(file => {
       const matches = acceptedTypes.some(type => {
         if (type.startsWith('.')) {
@@ -93,7 +95,9 @@ function validateFiles(
         return file.type.toLowerCase() === type;
       });
       if (!matches) {
-        errors.push(`"${file.name}" is not an accepted file type`);
+        errors.push(
+          t('@astryx.fileInput.errorInvalidType', {fileName: file.name}),
+        );
       }
       return matches;
     });
@@ -102,7 +106,12 @@ function validateFiles(
   if (maxSize != null) {
     valid = valid.filter(file => {
       if (file.size > maxSize) {
-        errors.push(`"${file.name}" exceeds ${formatFileSize(maxSize)} limit`);
+        errors.push(
+          t('@astryx.fileInput.errorMaxSize', {
+            fileName: file.name,
+            maxSize: formatFileSize(maxSize),
+          }),
+        );
         return false;
       }
       return true;
@@ -110,7 +119,7 @@ function validateFiles(
   }
 
   if (isMultiple && maxFiles != null && valid.length > maxFiles) {
-    errors.push(`Maximum ${maxFiles} files allowed`);
+    errors.push(t('@astryx.fileInput.errorMaxFiles', {maxFiles}));
     valid = valid.slice(0, maxFiles);
   }
 
@@ -488,7 +497,9 @@ export function FileInput({
       .filter(Boolean)
       .join(' ') || undefined;
 
-  const defaultPlaceholder = isMultiple ? 'Choose files' : 'Choose file';
+  const defaultPlaceholder = isMultiple
+    ? t('@astryx.fileInput.placeholderMultiple')
+    : t('@astryx.fileInput.placeholder');
   const displayPlaceholder = placeholder ?? defaultPlaceholder;
 
   const handleFiles = useCallback(
@@ -503,6 +514,7 @@ export function FileInput({
         maxSize,
         maxFiles,
         isMultiple,
+        t,
       );
 
       if (errors.length > 0) {
@@ -526,8 +538,8 @@ export function FileInput({
       if (errors.length === 0) {
         announce(
           valid.length === 1
-            ? `1 file selected: ${valid[0].name}`
-            : `${valid.length} files selected`,
+            ? t('@astryx.fileInput.fileSelected', {fileName: valid[0].name})
+            : t('@astryx.fileInput.filesSelected', {count: valid.length}),
         );
       }
 
@@ -547,6 +559,7 @@ export function FileInput({
       changeAction,
       startTransition,
       announce,
+      t,
     ],
   );
 
@@ -679,7 +692,7 @@ export function FileInput({
       <>
         <Icon icon="arrowUp" size="md" color="secondary" />
         <span {...stylex.props(styles.placeholderText)}>
-          {isDragOver ? 'Drop files here' : displayPlaceholder}
+          {isDragOver ? t('@astryx.fileInput.dropHint') : displayPlaceholder}
         </span>
       </>
     );

package/src/Grid/Grid.tsx

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file Grid.tsx
  * @input Uses React, stylex, spacing tokens

package/src/Grid/index.ts

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file index.ts
  * @input Imports from Grid.tsx and GridSpan.tsx

package/src/HoverCard/useHoverCard.tsx

@@ -15,7 +15,6 @@
 import {
   useCallback,
   useEffect,
-  useMemo,
   useRef,
   type ReactNode,
   type RefCallback,
@@ -45,18 +44,6 @@ const styles = stylex.create({
     boxShadow: shadowVars['--shadow-med'],
   },
   // Position-based margin styles
-  marginBlock: {
-    marginBlockStart: spacingVars['--spacing-1'],
-    marginBlockEnd: spacingVars['--spacing-1'],
-    marginInlineStart: 0,
-    marginInlineEnd: 0,
-  },
-  marginInline: {
-    marginBlockStart: 0,
-    marginBlockEnd: 0,
-    marginInlineStart: spacingVars['--spacing-1'],
-    marginInlineEnd: spacingVars['--spacing-1'],
-  },
   // Content wrapper for padding and mouse events.
   // `display: block` keeps the wrapper a block box even though it renders as a
   // `span` (the layer uses inline-safe phrasing markup so it is valid inside a
@@ -265,22 +252,13 @@ export function useHoverCard(options: HoverCardOptions = {}): HoverCardReturn {
     onHide,
   } = options;
 
-  // Select margin style based on placement axis
-  const marginStyle =
-    placement === 'above' || placement === 'below'
-      ? styles.marginBlock
-      : styles.marginInline;
-
   const layer = useLayer({
     mode: 'context',
     onShow,
     onHide,
   });
 
-  const popoverXstyle = useMemo(
-    () => [styles.container, marginStyle],
-    [marginStyle],
-  );
+  const popoverXstyle = styles.container;
 
   const showTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -472,6 +450,7 @@ export function useHoverCard(options: HoverCardOptions = {}): HoverCardReturn {
       const renderProps = {
         placement: renderPlacement,
         alignment: props?.alignment ?? alignment,
+        offset: spacingVars['--spacing-1'],
         // A named dialog when a label is provided; otherwise a group. A group
         // may validly be unnamed, an unnamed dialog may not — and hover cards
         // are non-modal, so group is honest semantics without a name.