@astryxdesign/core 0.1.4-canary.37c19d3 → 0.1.4-canary.39ffd21

package/src/Collapsible/CollapsibleGroup.tsx

@@ -4,18 +4,13 @@
 
 /**
  * @file CollapsibleGroup.tsx
- * @input Uses React useState, useCallback, CollapsibleGroupContext, StyleX, theme tokens
+ * @input Uses React useState, useCallback, CollapsibleGroupContext
  * @output Exports CollapsibleGroup component and CollapsibleGroupProps
- * @position Core collapsible group coordination provider — renders no wrapper
- *   DOM unless `dividers` is enabled
+ * @position Core collapsible group coordination provider — renders no wrapper DOM
  *
  * CollapsibleGroup groups collapsible components (Card, etc.) with
- * coordinated open/close behavior. By default it renders only `{children}` —
- * no wrapper DOM element. When `dividers` is 'between' or 'all' it renders a
- * wrapper div that anchors the divider chrome (outer borders, reliable
- * :first-child suppression) and provides dividers/density to items via
- * CollapsibleGroupPresentationContext — each Collapsible draws its own
- * borders since StyleX has no child selectors.
+ * coordinated open/close behavior. It renders only `{children}` — no wrapper
+ * DOM element.
  *
  * In "single" mode (default), only one item can be open at a time.
  * In "multiple" mode, any number of items can be open simultaneously.
@@ -29,35 +24,10 @@
  */
 
 import React, {useCallback, useMemo, useState, type ReactNode} from 'react';
-import * as stylex from '@stylexjs/stylex';
-import {borderVars, colorVars} from '../theme/tokens.stylex';
-import {
-  CollapsibleGroupContext,
-  CollapsibleGroupPresentationContext,
-} from './CollapsibleGroupContext';
-import type {
-  CollapsibleGroupContextValue,
-  CollapsibleGroupDensity,
-  CollapsibleGroupDividers,
-  CollapsibleGroupPresentationValue,
-} from './CollapsibleGroupContext';
-import {mergeProps} from '../utils';
-import {themeProps} from '../utils/themeProps';
+import {CollapsibleGroupContext} from './CollapsibleGroupContext';
+import type {CollapsibleGroupContextValue} from './CollapsibleGroupContext';
 import type {BaseProps} from '../BaseProps';
 
-const styles = stylex.create({
-  // 'all' draws the group's outer top/bottom edges; between-item lines are
-  // drawn by each Collapsible (borderBlockStart, suppressed on :first-child)
-  wrapperAll: {
-    borderBlockStartWidth: borderVars['--border-width'],
-    borderBlockStartStyle: 'solid',
-    borderBlockStartColor: colorVars['--color-border'],
-    borderBlockEndWidth: borderVars['--border-width'],
-    borderBlockEndStyle: 'solid',
-    borderBlockEndColor: colorVars['--color-border'],
-  },
-});
-
 export interface CollapsibleGroupProps extends Omit<
   BaseProps<HTMLElement>,
   'onChange'
@@ -86,24 +56,6 @@ export interface CollapsibleGroupProps extends Omit<
    */
   onChange?: (value: string | string[]) => void;
 
-  /**
-   * Divider style rendered around the group's items — the accordion row
-   * chrome. 'between' draws hairlines between adjacent items; 'all' adds the
-   * group's top and bottom edges. When enabled, the group renders a wrapper
-   * div (it otherwise renders no DOM) and items get 'balanced' density unless
-   * `density` says otherwise. Pair with bare Collapsible children; Card-wrapped
-   * items provide their own separation.
-   * @default "none"
-   */
-  dividers?: CollapsibleGroupDividers;
-
-  /**
-   * Row density controlling trigger and content block padding on the group's
-   * items. Defaults to 'balanced' when dividers are shown; otherwise items
-   * keep their default unpadded look.
-   */
-  density?: CollapsibleGroupDensity;
-
   /**
    * Children — any components that support isCollapsible + value.
    *
@@ -140,26 +92,16 @@ function normalizeToArray(value: string | string[] | undefined): string[] {
 
 /**
  * Groups collapsible components with coordinated open/close behavior.
- * Renders no wrapper DOM unless `dividers` is enabled.
+ * Renders no wrapper DOM.
  *
  * In "single" mode (default), opening one item closes the others.
  * In "multiple" mode, items toggle independently.
  *
  * @compositionHint Wrap Collapsible instances to coordinate their open/close state.
- * Each Collapsible needs a `value` prop to participate. For FAQ-style lists,
- * use `dividers` with bare Collapsible children instead of wrapping each item
- * in Card.
+ * Each Collapsible needs a `value` prop to participate.
  *
  * @example
  * ```
- * <CollapsibleGroup type="single" dividers="between" defaultValue="faq1">
- *   <Collapsible trigger="What is Astryx?" value="faq1">
- *     Astryx is a design system for building internal tools.
- *   </Collapsible>
- *   <Collapsible trigger="How do I start?" value="faq2">
- *     Install the package and import components.
- *   </Collapsible>
- * </CollapsibleGroup>
  * <CollapsibleGroup type="single" defaultValue="faq1">
  *   <VStack gap={2}>
  *     <Card>
@@ -181,14 +123,7 @@ export function CollapsibleGroup({
   defaultValue,
   value: controlledValue,
   onChange,
-  dividers = 'none',
-  density,
   children,
-  ref,
-  xstyle,
-  className,
-  style,
-  ...props
 }: CollapsibleGroupProps) {
   const isControlled = controlledValue !== undefined;
   const [internalValue, setInternalValue] = useState<string[]>(() =>
@@ -239,42 +174,9 @@ export function CollapsibleGroup({
     [isOpen, toggle],
   );
 
-  const hasDividers = dividers !== 'none';
-  const resolvedDensity = density ?? (hasDividers ? 'balanced' : null);
-
-  const presentationValue = useMemo<CollapsibleGroupPresentationValue>(
-    () => ({dividers, density: resolvedDensity}),
-    [dividers, resolvedDensity],
-  );
-
-  // The wrapper anchors divider chrome: 'all' outer borders live here, and it
-  // makes the items' :first-child suppression independent of surrounding
-  // siblings. Without dividers the group stays DOM-less (documented contract),
-  // so ref/xstyle/className/style only take effect in wrapper mode.
-  const content = hasDividers ? (
-    <div
-      ref={ref as React.Ref<HTMLDivElement>}
-      {...mergeProps(
-        themeProps('collapsible-group', {
-          dividers,
-          density: resolvedDensity ?? undefined,
-        }),
-        stylex.props(dividers === 'all' && styles.wrapperAll, xstyle),
-        className,
-        style,
-      )}
-      {...props}>
-      {children}
-    </div>
-  ) : (
-    children
-  );
-
   return (
     <CollapsibleGroupContext value={contextValue}>
-      <CollapsibleGroupPresentationContext value={presentationValue}>
-        {content}
-      </CollapsibleGroupPresentationContext>
+      {children}
     </CollapsibleGroupContext>
   );
 }

package/src/Collapsible/CollapsibleGroupContext.tsx

@@ -5,10 +5,8 @@
 /**
  * @file CollapsibleGroupContext.tsx
  * @input Uses React createContext
- * @output Exports CollapsibleGroupContext, CollapsibleGroupContextValue,
- *   CollapsibleGroupPresentationContext, CollapsibleGroupPresentationValue,
- *   CollapsibleGroupDividers, and CollapsibleGroupDensity types
- * @position Context definitions for collapsible group coordination and presentation
+ * @output Exports CollapsibleGroupContext and CollapsibleGroupContextValue type
+ * @position Context definition for collapsible group coordination
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Collapsible/CollapsibleGroup.tsx (provider)
@@ -35,41 +33,3 @@ export interface CollapsibleGroupContextValue {
 export const CollapsibleGroupContext =
   createContext<CollapsibleGroupContextValue | null>(null);
 CollapsibleGroupContext.displayName = 'CollapsibleGroupContext';
-
-/**
- * Divider style rendered around the items of a CollapsibleGroup.
- * - 'between': hairlines between adjacent items only.
- * - 'all': hairlines between items plus the group's top and bottom edges.
- * - 'none': no dividers (default).
- */
-export type CollapsibleGroupDividers = 'between' | 'all' | 'none';
-
-/**
- * Row density for the items of a CollapsibleGroup, controlling trigger and
- * content block padding. Shares the repo-wide density vocabulary
- * (Table, List, Item).
- */
-export type CollapsibleGroupDensity = 'compact' | 'balanced' | 'spacious';
-
-/**
- * Presentation value provided by CollapsibleGroup so each Collapsible can
- * draw its own group chrome (StyleX has no child selectors, so the group
- * cannot style items from the outside).
- */
-export interface CollapsibleGroupPresentationValue {
-  /** Resolved divider style for the group's items. */
-  dividers: CollapsibleGroupDividers;
-  /** Resolved row density, or null to keep the default (unpadded) look. */
-  density: CollapsibleGroupDensity | null;
-}
-
-/**
- * Context for collapsible group presentation (dividers, density).
- * Kept separate from CollapsibleGroupContext so the public useCollapsible
- * state API is unaffected. Collapsible resets this context around its
- * children so nested collapsibles never inherit row chrome.
- */
-export const CollapsibleGroupPresentationContext =
-  createContext<CollapsibleGroupPresentationValue | null>(null);
-CollapsibleGroupPresentationContext.displayName =
-  'CollapsibleGroupPresentationContext';

package/src/Collapsible/index.ts

@@ -16,10 +16,6 @@ export type {CollapsibleProps} from './Collapsible';
 
 export {CollapsibleGroup} from './CollapsibleGroup';
 export type {CollapsibleGroupProps} from './CollapsibleGroup';
-export type {
-  CollapsibleGroupDividers,
-  CollapsibleGroupDensity,
-} from './CollapsibleGroupContext';
 
 export {useCollapsible} from './useCollapsible';
 export type {

package/src/CommandPalette/CommandPaletteEmpty.doc.mjs

@@ -16,11 +16,6 @@ export const docs = {
       required: true,
     },
   ],
-  playground: {
-    defaults: {
-      children: 'No results found. Try a different search.',
-    },
-  },
 };
 
 export const docsZh = {

package/src/CommandPalette/CommandPaletteGroup.doc.mjs

@@ -27,16 +27,6 @@ export const docs = {
       description: 'StyleX styles for layout customization. Must be a stylex.create() value.',
     },
   ],
-  playground: {
-    defaults: {
-      heading: 'Navigation',
-      children: [
-        {__element: 'CommandPaletteItem', props: {value: 'home', onSelect: undefined}, children: 'Go Home'},
-        {__element: 'CommandPaletteItem', props: {value: 'settings', onSelect: undefined}, children: 'Open Settings'},
-        {__element: 'CommandPaletteItem', props: {value: 'profile', onSelect: undefined}, children: 'View Profile'},
-      ],
-    },
-  },
 };
 
 export const docsZh = {

package/src/CommandPalette/CommandPaletteInput.doc.mjs

@@ -57,12 +57,6 @@ export const docs = {
       description: 'StyleX styles for layout customization. Must be a stylex.create() value.',
     },
   ],
-  playground: {
-    defaults: {
-      placeholder: 'Search commands, files, or actions...',
-      hasAutoFocus: false,
-    },
-  },
 };
 
 export const docsZh = {

package/src/CommandPalette/CommandPaletteItem.doc.mjs

@@ -50,12 +50,6 @@ export const docs = {
       description: 'StyleX styles for layout customization. Must be a stylex.create() value.',
     },
   ],
-  playground: {
-    defaults: {
-      value: 'go-home',
-      children: 'Go to Dashboard',
-    },
-  },
 };
 
 export const docsZh = {

package/src/CommandPalette/CommandPaletteList.doc.mjs

@@ -27,15 +27,6 @@ export const docs = {
       description: 'StyleX styles for layout customization. Must be a stylex.create() value.',
     },
   ],
-  playground: {
-    defaults: {
-      children: [
-        {__element: 'CommandPaletteItem', props: {value: 'home', onSelect: undefined}, children: 'Go Home'},
-        {__element: 'CommandPaletteItem', props: {value: 'settings', onSelect: undefined}, children: 'Open Settings'},
-        {__element: 'CommandPaletteItem', props: {value: 'profile', onSelect: undefined}, children: 'View Profile'},
-      ],
-    },
-  },
 };
 
 export const docsZh = {

package/src/ContextMenu/ContextMenu.doc.mjs

@@ -78,21 +78,6 @@ export const docs = {
       { guidance: false, description: 'Place more than 10–12 items in a single menu without grouping them into sections.' },
     ],
   },
-  playground: {
-    defaults: {
-      children: {
-        __element: 'Card',
-        props: {padding: 6},
-        children: {__element: 'Text', props: {color: 'secondary'}, children: 'Right-click this area'},
-      },
-      items: [
-        {label: 'Edit'},
-        {label: 'Duplicate'},
-        {type: 'divider'},
-        {label: 'Delete'},
-      ],
-    },
-  },
 };
 
 /** @type {import('../docs-types').TranslationDoc} */

package/src/ContextMenu/ContextMenu.test.tsx

@@ -172,21 +172,6 @@ describe('ContextMenu', () => {
     expect(preventDefault).toHaveBeenCalled();
   });
 
-  it('prevents default context menu on the opened menu container', () => {
-    render(
-      <ContextMenu items={[{label: 'Item 1'}]}>
-        <div>Right-click me</div>
-      </ContextMenu>,
-    );
-
-    fireEvent.contextMenu(screen.getByText('Right-click me'));
-    const menu = screen.getByRole('menu', {hidden: true});
-    const event = new MouseEvent('contextmenu', {bubbles: true});
-    const preventDefault = vi.spyOn(event, 'preventDefault');
-    menu.dispatchEvent(event);
-    expect(preventDefault).toHaveBeenCalled();
-  });
-
   it('does not open when isDisabled is true', () => {
     render(
       <ContextMenu items={[{label: 'Item 1'}]} isDisabled>

package/src/ContextMenu/ContextMenu.tsx

@@ -87,7 +87,6 @@ const styles = stylex.create({
     transitionProperty: 'opacity',
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
-    userSelect: 'none',
   },
   popover: {
     minWidth: '160px',
@@ -410,7 +409,6 @@ export function ContextMenu({
           role="menu"
           aria-label={label}
           onKeyDown={listKeyDown}
-          onContextMenu={e => e.preventDefault()}
           {...mergeProps(
             themeProps('context-menu'),
             stylex.props(styles.menu, xstyle),

package/src/ContextMenu/ContextMenuItem.doc.mjs

@@ -35,12 +35,6 @@ export const docs = {
       description: 'StyleX styles for layout customization.',
     },
   ],
-  playground: {
-    defaults: {
-      label: 'Edit',
-      description: 'Modify this item',
-    },
-  },
 };
 
 export const docsZh = {

package/src/DateTimeInput/DateTimeInput.test.tsx

@@ -214,21 +214,6 @@ describe('DateTimeInput', () => {
     expect(screen.getByRole('combobox')).not.toHaveAttribute('aria-busy');
   });
 
-  it('sets aria-busy on the time input when isLoading is true', () => {
-    render(<DateTimeInput label="Meeting" isLoading onChange={() => {}} />);
-    expect(screen.getByLabelText('Meeting time')).toHaveAttribute(
-      'aria-busy',
-      'true',
-    );
-  });
-
-  it('does not set aria-busy on the time input when not loading', () => {
-    render(<DateTimeInput label="Meeting" onChange={() => {}} />);
-    expect(screen.getByLabelText('Meeting time')).not.toHaveAttribute(
-      'aria-busy',
-    );
-  });
-
   it('renders status icon for error status', () => {
     render(
       <DateTimeInput
@@ -285,61 +270,6 @@ describe('DateTimeInput', () => {
     expect(found).toBe(true);
   });
 
-  it('links the description to the time input via aria-describedby', () => {
-    render(
-      <DateTimeInput
-        label="Meeting"
-        description="Pick the meeting datetime"
-        onChange={() => {}}
-      />,
-    );
-    // The description covers both halves of the field, so the time input must
-    // carry it too — a screen-reader user tabbing into the time half should
-    // not lose the field's description.
-    const timeInput = screen.getByLabelText('Meeting time');
-    const describedBy = timeInput.getAttribute('aria-describedby')!;
-    const ids = describedBy.split(' ');
-    const found = ids.some(id =>
-      document
-        .getElementById(id)
-        ?.textContent?.includes('Pick the meeting datetime'),
-    );
-    expect(found).toBe(true);
-  });
-
-  it('links the status message to the time input via aria-describedby', () => {
-    render(
-      <DateTimeInput
-        label="Meeting"
-        onChange={() => {}}
-        status={{type: 'error', message: 'Invalid datetime'}}
-      />,
-    );
-    const timeInput = screen.getByLabelText('Meeting time');
-    const describedBy = timeInput.getAttribute('aria-describedby')!;
-    const ids = describedBy.split(' ');
-    const found = ids.some(id =>
-      document.getElementById(id)?.textContent?.includes('Invalid datetime'),
-    );
-    expect(found).toBe(true);
-  });
-
-  it('links the disabled reason to the time input via aria-describedby', () => {
-    HTMLElement.prototype.showPopover = vi.fn();
-    HTMLElement.prototype.hidePopover = vi.fn();
-    render(
-      <DateTimeInput
-        label="When"
-        onChange={() => {}}
-        isDisabled
-        disabledMessage="You need the Editor role"
-      />,
-    );
-    const timeInput = screen.getByLabelText('When time');
-    const tooltip = screen.getByRole('tooltip', {hidden: true});
-    expect(timeInput.getAttribute('aria-describedby')).toContain(tooltip.id);
-  });
-
   it('handles Escape keydown on date input without error', () => {
     render(<DateTimeInput label="Meeting" onChange={() => {}} />);
     const input = screen.getByRole('combobox');

package/src/DateTimeInput/DateTimeInput.tsx

@@ -987,12 +987,10 @@ export function DateTimeInput({
             aria-disabled={showsDisabledMessage ? 'true' : undefined}
             readOnly={showsDisabledMessage || undefined}
             aria-label={timeLabel ?? `${label} time`}
-            aria-describedby={ariaDescribedBy}
             aria-required={isRequired === true ? 'true' : undefined}
             aria-invalid={
               status?.type === 'error' || !isTimeInputValid ? 'true' : undefined
             }
-            aria-busy={isBusy || undefined}
             {...stylex.props(
               styles.input,
               isEffectivelyDisabled && styles.inputDisabled,

package/src/Dialog/DialogHeader.doc.mjs

@@ -65,51 +65,6 @@ export const docs = {
       default: 'true',
     },
   ],
-  playground: {
-    defaults: {
-      title: 'Delete file?',
-      subtitle: 'This action cannot be undone.',
-      hasDivider: true,
-    },
-  },
-  examples: [
-    {
-      label: 'Basic',
-      code: `
-import {DialogHeader} from '@astryxdesign/core/Dialog';
-
-<DialogHeader title="Delete file?" subtitle="This action cannot be undone." />;
-`,
-    },
-    {
-      label: 'With close button',
-      code: `
-import {useState} from 'react';
-import {DialogHeader} from '@astryxdesign/core/Dialog';
-
-function Header() {
-  const [, setIsOpen] = useState(true);
-
-  // Passing onOpenChange renders a close button that calls it with false.
-  return <DialogHeader title="Settings" onOpenChange={setIsOpen} />;
-}
-`,
-    },
-    {
-      label: 'With start and end content',
-      code: `
-import {DialogHeader} from '@astryxdesign/core/Dialog';
-import {Icon} from '@astryxdesign/core/Icon';
-import {Badge} from '@astryxdesign/core/Badge';
-
-<DialogHeader
-  title="Notifications"
-  startContent={<Icon icon="chevronLeft" size="sm" />}
-  endContent={<Badge label="3" />}
-/>;
-`,
-    },
-  ],
 };
 
 export const docsZh = {

package/src/DropdownMenu/DropdownMenu.doc.mjs

@@ -11,7 +11,7 @@ export const docs = {
   theming: {
     targets: [
       {className: 'astryx-dropdown-menu'},
-      {className: 'astryx-dropdown-menu-item', visualProps: ['size']},
+      {className: 'astryx-dropdown-menu-item'},
     ],
     vars: [
       {name: '--_dropdown-menu-radius', description: 'Border radius of the menu popup', default: 'var(--radius-element)', private: true},

package/src/Field/FieldLabel.test.tsx

@@ -11,7 +11,7 @@
 
 import {describe, it, expect, vi} from 'vitest';
 import {render, screen} from '@testing-library/react';
-import {TestIcon} from '../__tests__/TestIcon';
+import {StarIcon} from '@heroicons/react/24/outline';
 import {FieldLabel} from './FieldLabel';
 
 describe('FieldLabel', () => {
@@ -49,7 +49,7 @@ describe('FieldLabel', () => {
       <FieldLabel
         label="Starred"
         inputID="starred-input"
-        labelIcon={TestIcon}
+        labelIcon={StarIcon}
       />,
     );
     const svg = document.querySelector('svg');

package/src/FormLayout/__snapshots__/FormLayout.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`FormLayout > matches snapshot for horizontal direction 1`] = `
 <div
   class="astryx-form-layout horizontal FormLayout__styles.base xdt5ytf x18g69wz FormLayout__styles.horizontal xrvj5dj x1mt1orb xu6a5m6"
   data-direction="horizontal"
+  data-style-src="@astryxdesign/core:src/FormLayout/FormLayout.tsx:40; @astryxdesign/core:src/FormLayout/FormLayout.tsx:45"
   data-testid="layout"
 >
   <input
@@ -19,6 +20,7 @@ exports[`FormLayout > matches snapshot for horizontal-labels direction 1`] = `
 <div
   class="astryx-form-layout horizontal-labels FormLayout__styles.base xdt5ytf FormLayout__styles.horizontalLabels xrvj5dj x1pmbctz xlaq8a2 x7a106z xedohl4 x1rpgqan x1a1jff"
   data-direction="horizontal-labels"
+  data-style-src="@astryxdesign/core:src/FormLayout/FormLayout.tsx:40; @astryxdesign/core:src/FormLayout/FormLayout.tsx:50"
   data-testid="layout"
 >
   <label>
@@ -34,6 +36,7 @@ exports[`FormLayout > matches snapshot for vertical direction 1`] = `
 <div
   class="astryx-form-layout vertical FormLayout__styles.base x78zum5 xdt5ytf x18g69wz"
   data-direction="vertical"
+  data-style-src="@astryxdesign/core:src/FormLayout/FormLayout.tsx:40"
   data-testid="layout"
 >
   <input