@astryxdesign/core 0.1.7-canary.fb9c68c → 0.1.7

package/src/DropdownMenu/DropdownMenuContext.tsx

@@ -14,14 +14,11 @@
 
 import {createContext, use} from 'react';
 
-/** Menu size, derived from the trigger button size. */
-export type DropdownMenuSize = 'sm' | 'md' | 'lg';
-
 export interface DropdownMenuContextValue {
   /** Close the menu and return focus to trigger */
   closeMenu: () => void;
   /** Menu size derived from button size */
-  menuSize: DropdownMenuSize;
+  menuSize: 'sm' | 'md' | 'lg';
 }
 
 export const DropdownMenuContext =
@@ -35,28 +32,3 @@ DropdownMenuContext.displayName = 'DropdownMenuContext';
 export function useDropdownMenuContext(): DropdownMenuContextValue | null {
   return use(DropdownMenuContext);
 }
-
-// =============================================================================
-// Radio group coordination
-// =============================================================================
-
-export interface DropdownMenuRadioGroupContextValue {
-  /** The currently selected value in the group. */
-  value: string | undefined;
-  /** Select a value. Called by a DropdownMenuRadioItem on activation. */
-  onChange: (value: string) => void;
-  /** Whether selecting an item should close the menu. @default true */
-  hasCloseOnSelect: boolean;
-}
-
-export const DropdownMenuRadioGroupContext =
-  createContext<DropdownMenuRadioGroupContextValue | null>(null);
-DropdownMenuRadioGroupContext.displayName = 'DropdownMenuRadioGroupContext';
-
-/**
- * Read the enclosing radio group's selection state.
- * Returns null when used outside a DropdownMenuRadioGroup.
- */
-export function useDropdownMenuRadioGroupContext(): DropdownMenuRadioGroupContextValue | null {
-  return use(DropdownMenuRadioGroupContext);
-}

package/src/DropdownMenu/DropdownMenuItem.doc.mjs

@@ -8,17 +8,11 @@ export const docs = {
   displayName: 'Dropdown Menu Item',
   isHiddenFromOverview: true,
   description: 'Helper component for custom item rendering with consistent styling.',
-  playground: {
-    // Standalone DropdownMenuItem has no required props, so the properties-tab
-    // preview renders an empty row without seeded content. Seed a label and
-    // description so the preview is meaningful.
-    defaults: {label: 'Edit', description: 'Modify this item'},
-  },
   props: [
     {
       name: 'icon',
       type: 'IconType',
-      description: 'Icon to display before the label. See `astryx docs icons` for valid semantic names.',
+      description: 'Icon to display before the label. See `npx astryx docs icons` for valid semantic names.',
     },
     {
       name: 'label',

package/src/DropdownMenu/index.ts

@@ -18,27 +18,7 @@ export {
   type DropdownMenuOption,
 } from './DropdownMenu';
 
-export {DropdownMenuItem, type DropdownMenuItemProps} from './DropdownMenuItem';
-
-// Selectable items — checkbox (independent) and radio (single-select group).
-export {
-  DropdownMenuCheckboxItem,
-  type DropdownMenuCheckboxItemProps,
-} from './DropdownMenuCheckboxItem';
-export {
-  DropdownMenuRadioGroup,
-  type DropdownMenuRadioGroupProps,
-} from './DropdownMenuRadioGroup';
-export {
-  DropdownMenuRadioItem,
-  type DropdownMenuRadioItemProps,
-} from './DropdownMenuRadioItem';
-
-// Menu-coordination context — public so consumers can build custom menu items
-// that read the menu size / close the menu.
 export {
-  DropdownMenuContext,
-  useDropdownMenuContext,
-  type DropdownMenuContextValue,
-  type DropdownMenuSize,
-} from './DropdownMenuContext';
+  DropdownMenuItem,
+  type DropdownMenuItemProps,
+} from './DropdownMenuItem';

package/src/Field/Field.doc.mjs

@@ -95,7 +95,7 @@ export const docs = {
     {
       name: 'labelIcon',
       type: 'IconType',
-      description: 'Icon to display before the label text. See `astryx docs icons` for valid semantic names.',
+      description: 'Icon to display before the label text. See `npx astryx docs icons` for valid semantic names.',
     },
     {
       name: 'labelTooltip',

package/src/Field/FieldLabel.doc.mjs

@@ -48,7 +48,7 @@ export const docs = {
     {
       name: 'labelIcon',
       type: 'IconType',
-      description: 'Icon before the label text. See `astryx docs icons` for valid semantic names.',
+      description: 'Icon before the label text. See `npx astryx docs icons` for valid semantic names.',
     },
     {
       name: 'labelTooltip',

package/src/Icon/Icon.test.tsx

@@ -96,52 +96,6 @@ describe('Icon', () => {
     expect(screen.getByTestId('icon')).toBeInTheDocument();
   });
 
-  it('sizes component-mode icons in rem so they scale with root font-size', () => {
-    const sizes = {
-      xsm: '0.75rem',
-      sm: '1rem',
-      md: '1.25rem',
-      lg: '1.5rem',
-    } as const;
-    for (const [size, expected] of Object.entries(sizes)) {
-      const {unmount} = render(
-        <Icon
-          icon={TestIcon}
-          size={size as keyof typeof sizes}
-          data-testid="icon"
-        />,
-      );
-      const style = getComputedStyle(screen.getByTestId('icon'));
-      expect(style.width).toBe(expected);
-      expect(style.height).toBe(expected);
-      unmount();
-    }
-  });
-
-  it('sizes registry (string-mode) icons in rem, including fontSize', () => {
-    const sizes = {
-      xsm: '0.75rem',
-      sm: '1rem',
-      md: '1.25rem',
-      lg: '1.5rem',
-    } as const;
-    for (const [size, expected] of Object.entries(sizes)) {
-      const {unmount} = render(
-        <Icon
-          icon="check"
-          size={size as keyof typeof sizes}
-          data-testid="icon"
-        />,
-      );
-      const style = getComputedStyle(screen.getByTestId('icon'));
-      expect(style.width).toBe(expected);
-      expect(style.height).toBe(expected);
-      // fontSize is expressed in rem so 1em-based registry icons scale too.
-      expect(style.fontSize).toBe(expected);
-      unmount();
-    }
-  });
-
   it('forwards ref correctly', () => {
     const ref = vi.fn();
     render(<Icon icon={TestIcon} ref={ref} />);

package/src/Icon/Icon.tsx

@@ -111,64 +111,51 @@ const colorStyles = stylex.create({
 /**
  * Size styles for direct SVG icon components.
  * Uses width/height only — SVG components handle their own viewBox scaling.
- *
- * Sizes are expressed in `rem` (relative to the root font-size) so icons scale
- * in step with text when the document font-size changes, matching the rest of
- * the design system's rem-based type scale. Values are the px-equivalents at a
- * 16px root: 12px → 0.75rem, 16px → 1rem, 20px → 1.25rem, 24px → 1.5rem.
  */
 const sizeStyles = stylex.create({
   xsm: {
-    width: '0.75rem',
-    height: '0.75rem',
+    width: 12,
+    height: 12,
   },
   sm: {
-    width: '1rem',
-    height: '1rem',
+    width: 16,
+    height: 16,
   },
   md: {
-    width: '1.25rem',
-    height: '1.25rem',
+    width: 20,
+    height: 20,
   },
   lg: {
-    width: '1.5rem',
-    height: '1.5rem',
+    width: 24,
+    height: 24,
   },
 });
 
 /**
  * Size styles for string-based (registry) icons.
  * Includes fontSize so that 1em-based icons from the registry scale correctly.
- *
- * Expressed in `rem` for the same reason as {@link sizeStyles} — icons track the
- * root font-size instead of being locked to absolute pixels.
  */
 const spanSizeStyles = stylex.create({
-  /* eslint-disable @astryx/no-hardcoded-styles -- fontSize here sizes 1em-based
-     registry SVGs to the icon box; icons use their own 12/16/20/24 scale, not
-     the 14px-anchored textSizeVars type scale. Values are rem so icons track
-     the root font-size. */
   xsm: {
-    width: '0.75rem',
-    height: '0.75rem',
-    fontSize: '0.75rem',
+    width: 12,
+    height: 12,
+    fontSize: 12,
   },
   sm: {
-    width: '1rem',
-    height: '1rem',
-    fontSize: '1rem',
+    width: 16,
+    height: 16,
+    fontSize: 16,
   },
   md: {
-    width: '1.25rem',
-    height: '1.25rem',
-    fontSize: '1.25rem',
+    width: 20,
+    height: 20,
+    fontSize: 20,
   },
   lg: {
-    width: '1.5rem',
-    height: '1.5rem',
-    fontSize: '1.5rem',
+    width: 24,
+    height: 24,
+    fontSize: 24,
   },
-  /* eslint-enable @astryx/no-hardcoded-styles */
 });
 
 // =============================================================================
@@ -207,10 +194,10 @@ export interface IconProps extends Omit<
   color?: IconColor;
   /**
    * The size of the icon.
-   * - 'xsm': 0.75rem (12px at a 16px root)
-   * - 'sm': 1rem (16px at a 16px root)
-   * - 'md': 1.25rem (20px at a 16px root)
-   * - 'lg': 1.5rem (24px at a 16px root)
+   * - 'xsm': 12px
+   * - 'sm': 16px
+   * - 'md': 20px
+   * - 'lg': 24px
    * @default 'md'
    */
   size?: IconSize;

package/src/NumberInput/NumberInput.doc.mjs

@@ -82,12 +82,12 @@ export const docs = {
     {
       name: 'startIcon',
       type: 'IconType',
-      description: 'Icon to display at the start of the input. See `astryx docs icons` for valid semantic names.',
+      description: 'Icon to display at the start of the input. See `npx astryx docs icons` for valid semantic names.',
     },
     {
       name: 'labelIcon',
       type: 'IconType',
-      description: 'Icon to display before the label text. See `astryx docs icons` for valid semantic names.',
+      description: 'Icon to display before the label text. See `npx astryx docs icons` for valid semantic names.',
     },
     {
       name: 'status',

package/src/Outline/Outline.doc.mjs

@@ -72,38 +72,6 @@ export const docs = {
           description: "Density variant controlling item padding. 'compact' for dense UIs, 'default' for standard spacing.",
           default: "'default'",
         },
-        {
-          name: 'onNavigateStart',
-          type: '(id: string) => void',
-          description:
-            'Called with the item id when navigation begins, before the scroll starts. Pair with onNavigateEnd to drive an arrival effect (flash, ring, pulse) on the target heading.',
-        },
-        {
-          name: 'onNavigateEnd',
-          type: '(id: string) => void',
-          description:
-            'Called with the item id once the navigation resolves - when the smooth scroll settles, or when reduced motion turns it into an instant jump. Fires exactly once per onNavigateStart, including when the user interrupts the scroll, so a "navigating" state can never leak.',
-        },
-        {
-          name: 'offset',
-          type: 'number',
-          description:
-            "Height in px of a fixed header overlaying the top of the scroll root. Shifts both the activation line and the scroll landing by the same amount, so a heading activates exactly where navigating to it puts it - below the header, not underneath it. Composes with each heading's own scroll-margin-top (the header, then the breathing room below it); it does not replace it. Leave at 0 when nothing overlays the content and let scroll-margin-top do the work.",
-          default: '0',
-        },
-        {
-          name: 'scrollContainerRef',
-          type: 'React.RefObject<HTMLElement | null>',
-          description:
-            'Scroll container to track, instead of auto-detecting the nearest scrollable ancestor. Use it when content scrolls inside a split pane, modal, or dashboard panel rather than the viewport.',
-        },
-        {
-          name: 'hasScrollOnClick',
-          type: 'boolean',
-          description:
-            'Whether activating an item smooth-scrolls to it. Set to false to own the scrolling yourself (virtualized content, a router): the Outline still updates the active item, the hash, and the navigate callbacks, but performs no scroll.',
-          default: 'true',
-        },
         {
           name: 'xstyle',
           type: 'StyleXStyles',
@@ -169,51 +137,6 @@ function MarkdownOutline({markdown}) {
   const items = useOutlineFromMarkdown(markdown);
   return <Outline items={items} />;
 }
-`,
-        },
-        {
-          label: 'Scoped scroll container (split pane, modal, panel)',
-          code: `
-import {useRef} from 'react';
-import {Outline} from '@astryxdesign/core/Outline';
-
-function PanelDocs() {
-  const scrollContainerRef = useRef(null);
-
-  // Without scrollContainerRef the outline auto-detects the nearest scrollable
-  // ancestor, which is the viewport here - so the highlight would never move.
-  return (
-    <div style={{display: 'flex'}}>
-      <div ref={scrollContainerRef} style={{overflowY: 'auto', height: 480}}>
-        <h2 id="overview">Overview</h2>
-        {/* ...content... */}
-      </div>
-      <Outline items={items} scrollContainerRef={scrollContainerRef} offset={64} />
-    </div>
-  );
-}
-`,
-        },
-        {
-          label: 'Navigate callbacks (flash the heading on arrival)',
-          code: `
-import {useState} from 'react';
-import {Outline} from '@astryxdesign/core/Outline';
-
-function FlashOnArrival() {
-  const [flashId, setFlashId] = useState(null);
-
-  // onNavigateEnd fires once the smooth scroll settles - and once per
-  // onNavigateStart even if the user scrolls away mid-jump, so this never
-  // gets stuck.
-  return (
-    <Outline
-      items={items}
-      onNavigateStart={() => setFlashId(null)}
-      onNavigateEnd={id => setFlashId(id)}
-    />
-  );
-}
 `,
         },
       ],
@@ -221,17 +144,14 @@ function FlashOnArrival() {
   ],
   usage: {
     description:
-      'A table-of-contents sidebar for documentation pages, help centers, wikis, and long settings pages. Use it for navigation within a single page, not for app routes. Features a sliding indicator track that animates to the active heading. The list is a single tab stop: arrow keys move between headings, Home/End jump to the ends, and Enter/Space activate.',
+      'A table-of-contents sidebar for documentation pages, help centers, wikis, and long settings pages. Use it for navigation within a single page, not for app routes. Features a sliding indicator track that animates to the active heading.',
     bestPractices: [
       {guidance: true, description: 'Pass a flat ordered list of headings and let level control indentation.'},
       {guidance: true, description: 'Use activeId when custom scroll logic owns the active section.'},
       {guidance: true, description: 'Use density="compact" in dense sidebars where vertical space is tight.'},
       {guidance: true, description: 'Use useOutlineFromMarkdown or useOutlineFromDOM when headings are generated from content.'},
-      {guidance: true, description: 'Pass scrollContainerRef when the content scrolls in a split pane, modal, or panel instead of the viewport.'},
-      {guidance: true, description: 'Set offset to the height of a fixed header that overlays the content, so headings land below it instead of underneath it.'},
       {guidance: false, description: 'Use Outline for application navigation - use SideNav or TopNav for routes.'},
       {guidance: false, description: 'Use Outline for expandable hierarchy - use TreeList when nodes need expand and collapse.'},
-      {guidance: false, description: 'Rely on onNavigateEnd to mean "arrived" - it also fires when the user interrupts the scroll.'},
     ],
   },
 };
@@ -285,33 +205,6 @@ export const docsZh = {
           description: "控制项目内边距的密度变体。'compact' 用于紧凑界面，'default' 为标准间距。",
           default: "'default'",
         },
-        {
-          name: 'onNavigateStart',
-          type: '(id: string) => void',
-          description: '导航开始时（滚动前）调用，传入项目 id。与 onNavigateEnd 搭配可在目标标题上实现到达效果（闪烁、描边、脉冲）。',
-        },
-        {
-          name: 'onNavigateEnd',
-          type: '(id: string) => void',
-          description: '导航结束时调用（平滑滚动停止，或减弱动效将其变为瞬时跳转）。每次 onNavigateStart 必定对应一次调用，包括用户中途手动滚动打断的情况，因此“导航中”状态不会泄漏。',
-        },
-        {
-          name: 'offset',
-          type: 'number',
-          description: '覆盖滚动根顶部的固定顶栏高度（px）。同时位移激活线与滚动落点，因此标题被激活的位置正是点击后停留的位置——落在顶栏下方，而非被顶栏遮住。它与每个标题自身的 scroll-margin-top 叠加（先顶栏，再留白），而非取代它。若没有元素覆盖内容，保持 0，交给 scroll-margin-top 处理。',
-          default: '0',
-        },
-        {
-          name: 'scrollContainerRef',
-          type: 'React.RefObject<HTMLElement | null>',
-          description: '要跟踪的滚动容器，替代自动探测最近的可滚动祖先。当内容在分栏、弹窗或面板中滚动而非视口时使用。',
-        },
-        {
-          name: 'hasScrollOnClick',
-          type: 'boolean',
-          description: '激活项目时是否平滑滚动。设为 false 可自行接管滚动（虚拟列表、路由）：Outline 仍会更新激活项、hash 和导航回调，但不执行滚动。',
-          default: 'true',
-        },
         {
           name: 'xstyle',
           type: 'StyleXStyles',
@@ -337,7 +230,7 @@ export const docsZh = {
 /** @type {import('../docs-types').TranslationDoc} */
 export const docsDense = {
   description:
-    'Document outline/table-of-contents nav with sliding indicator track. Flat items array {id,label,level}; anchor links; density variant (default/compact); uncontrolled scroll-spy by scroll position (last heading past its resting line = offset + its own scroll-margin-top; first item at top, last at bottom); controlled with activeId; smooth-scroll on click that pins the active item until the next manual scroll. Single tab stop (roving tabindex): Arrow keys move, Home/End jump, Enter/Space activate. onNavigateStart/onNavigateEnd fire around the scroll. Scroll scoping via offset / scrollContainerRef / hasScrollOnClick.',
+    'Document outline/table-of-contents nav with sliding indicator track. Flat items array {id,label,level}; anchor links; density variant (default/compact); uncontrolled scroll-spy by scroll position (last heading past its scroll-margin-top line; first item at top, last at bottom); controlled with activeId; smooth-scroll on click that pins the active item until the next manual scroll.',
   usage: {
     description:
       'A table-of-contents sidebar for documentation pages, help centers, wikis, and long settings pages. Use it for navigation within a single page, not for app routes.',
@@ -346,11 +239,8 @@ export const docsDense = {
       {guidance: true, description: 'Use activeId when custom scroll logic owns the active section.'},
       {guidance: true, description: 'Use density="compact" in dense sidebars where vertical space is tight.'},
       {guidance: true, description: 'Use useOutlineFromMarkdown or useOutlineFromDOM when headings are generated from content.'},
-      {guidance: true, description: 'Pass scrollContainerRef when the content scrolls in a split pane, modal, or panel instead of the viewport.'},
-      {guidance: true, description: 'Set offset to the height of a fixed header that overlays the content, so headings land below it instead of underneath it.'},
       {guidance: false, description: 'Use Outline for application navigation - use SideNav or TopNav for routes.'},
       {guidance: false, description: 'Use Outline for expandable hierarchy - use TreeList when nodes need expand and collapse.'},
-      {guidance: false, description: 'Rely on onNavigateEnd to mean "arrived" - it also fires when the user interrupts the scroll.'},
     ],
   },
   propDescriptions: {
@@ -359,11 +249,6 @@ export const docsDense = {
     onActiveIdChange: 'Called when active id changes from scroll-spy or click.',
     label: "Accessible nav label. Default: 'Table of contents'.",
     density: "Density variant: 'default' (standard) or 'compact'. Default: 'default'.",
-    onNavigateStart: 'Called with the id when navigation begins, before the scroll.',
-    onNavigateEnd: 'Called with the id once the scroll settles. Fires exactly once per onNavigateStart, including on user interruption.',
-    offset: 'Height in px of a fixed header overlaying the scroll root. Shifts BOTH the activation line and the scroll landing, so a heading activates where navigating to it lands it. Composes with (does not replace) each heading scroll-margin-top. Default: 0.',
-    scrollContainerRef: 'RefObject of the scroll container to track, instead of the nearest scrollable ancestor. For split panes, modals, panels.',
-    hasScrollOnClick: 'Whether activating an item smooth-scrolls to it. false = you own scrolling; active id, hash and callbacks still update. Default: true.',
     xstyle: 'StyleX styles for layout. Must be stylex.create() value.',
   },
   components: [
@@ -371,18 +256,13 @@ export const docsDense = {
       name: 'Outline',
       displayName: 'Outline',
       description:
-        'Document outline nav with sliding indicator. Renders heading anchors with a density variant, roving-tabindex keyboard nav, navigate callbacks, and scroll-spy active state when uncontrolled.',
+        'Document outline nav with sliding indicator. Renders heading anchors with a density variant and manages scroll-spy active state when uncontrolled.',
       propDescriptions: {
         items: 'Ordered OutlineItem[]: {id,label,level}. id should match target heading DOM id.',
         activeId: 'Controlled active heading id. Disables built-in scroll-spy.',
         onActiveIdChange: 'Called when active id changes from scroll-spy or click.',
         label: "Accessible nav label. Default: 'Table of contents'.",
         density: "Density variant: 'default' | 'compact'. Default: 'default'.",
-        onNavigateStart: 'Called with the id when navigation begins, before the scroll.',
-        onNavigateEnd: 'Called with the id once the scroll settles. Fires exactly once per onNavigateStart, including on user interruption.',
-        offset: 'Height in px of a fixed header overlaying the scroll root. Shifts both the activation line and the scroll landing. Composes with scroll-margin-top. Default: 0.',
-        scrollContainerRef: 'RefObject of the scroll container to track, instead of the nearest scrollable ancestor.',
-        hasScrollOnClick: 'Whether activating an item smooth-scrolls to it. Default: true.',
         xstyle: 'StyleX styles for layout. Must be stylex.create() value.',
       },
     },