@astryxdesign/core 0.3.0 → 0.4.0-canary.3112e99

package/src/RadioList/RadioListItem.tsx

@@ -18,19 +18,15 @@
  * - /packages/cli/assets/templates/blocks/components/RadioList/ (showcase blocks)
  */
 
-import React, {use, useId, type ReactNode} from 'react';
+import React, {use, useId, useRef, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import type {BaseProps} from '../BaseProps';
-import {
-  colorVars,
-  spacingVars,
-  durationVars,
-  easeVars,
-  borderVars,
-} from '../theme/tokens.stylex';
+import {colorVars, spacingVars} from '../theme/tokens.stylex';
 import {RadioListContext} from './RadioList';
 import {mergeProps} from '../utils';
-import {radioScope} from './radio.markers.stylex';
+import {indicatorScope} from '../Indicator/indicator.markers.stylex';
+import {useIndicatorFocusRing} from '../hooks/useIndicatorFocusRing';
+import {useIndicator} from '../Indicator';
 import {Item} from '../Item';
 import {themeProps} from '../utils/themeProps';
 
@@ -59,74 +55,9 @@ const styles = stylex.create({
   inputDisabled: {
     cursor: 'not-allowed',
   },
-  radio: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderWidth: borderVars['--border-width'],
-    borderStyle: 'solid',
-    borderRadius: '50%',
-    transitionProperty: 'background-color, border-color',
-    transitionDuration: durationVars['--duration-fast'],
-    transitionTimingFunction: easeVars['--ease-standard'],
-    boxSizing: 'border-box',
-  },
-  radioUnchecked: {
-    borderColor: {
-      default: colorVars['--color-border-emphasized'],
-      [stylex.when.ancestor(':hover', radioScope)]: {
-        '@media (hover: hover)': `color-mix(in srgb, ${colorVars['--color-border-emphasized']}, ${colorVars['--color-tint-hover']} 20%)`,
-      },
-    },
-    backgroundColor: {
-      default: colorVars['--color-background-surface'],
-      [stylex.when.ancestor(':hover', radioScope)]: {
-        '@media (hover: hover)': `color-mix(in srgb, ${colorVars['--color-background-surface']}, ${colorVars['--color-tint-hover']} 5%)`,
-      },
-    },
-  },
-  radioChecked: {
-    borderColor: {
-      default: colorVars['--color-accent'],
-      [stylex.when.ancestor(':hover', radioScope)]: {
-        '@media (hover: hover)': `color-mix(in srgb, ${colorVars['--color-accent']}, ${colorVars['--color-tint-hover']} 15%)`,
-      },
-    },
-    backgroundColor: {
-      default: colorVars['--color-accent'],
-      [stylex.when.ancestor(':hover', radioScope)]: {
-        '@media (hover: hover)': `color-mix(in srgb, ${colorVars['--color-accent']}, ${colorVars['--color-tint-hover']} 15%)`,
-      },
-    },
-  },
-  radioWrapperFocus: {
-    outline: {
-      default: 'none',
-      ':has(:focus-visible)': `2px solid ${colorVars['--color-accent']}`,
-    },
-    outlineOffset: {
-      default: '0',
-      ':has(:focus-visible)': '2px',
-    },
-    borderRadius: '50%',
-  },
-  radioDisabled: {
-    opacity: 0.5,
-    borderColor: colorVars['--color-border'],
-  },
-  radioDisabledUnchecked: {
-    backgroundColor: colorVars['--color-background-muted'],
-  },
-  innerDot: {
-    borderRadius: '50%',
-    backgroundColor: {
-      default: colorVars['--color-on-accent'],
-      // Forced colors (Windows High Contrast) strips painted backgrounds,
-      // which would make the selected dot invisible — checked and unchecked
-      // radios would look identical. CanvasText keeps the dot perceivable on
-      // the Canvas circle fill (WCAG 1.4.11).
-      '@media (forced-colors: active)': 'CanvasText',
-    },
+  // Holds only the indicator, so the focus ring has one unambiguous target.
+  indicatorSlot: {
+    display: 'contents',
   },
   labelDisabled: {
     color: colorVars['--color-text-disabled'],
@@ -145,28 +76,6 @@ const wrapperSizeStyles = stylex.create({
   },
 });
 
-const radioSizeStyles = stylex.create({
-  sm: {
-    width: 20,
-    height: 20,
-  },
-  md: {
-    width: 24,
-    height: 24,
-  },
-});
-
-const dotSizeStyles = stylex.create({
-  sm: {
-    width: 8,
-    height: 8,
-  },
-  md: {
-    width: 10,
-    height: 10,
-  },
-});
-
 const embeddedStyles = stylex.create({
   root: {
     paddingBlock: 0,
@@ -248,14 +157,18 @@ export function RadioListItem({
     context.hasDisabledMessage && !isItemDisabled;
   const isChecked = context.value === value;
   const size = context.size;
+  // The radio visual is an indicator: a theme can restyle it through the
+  // `radio` / `radio-dot` targets or replace the component outright.
+  const RadioControl = useIndicator('radio');
+  // See CheckboxInput: the ring goes on the indicator's own element, because
+  // the native input is visually hidden and only the indicator knows its shape.
+  const indicatorRef = useRef<HTMLSpanElement>(null);
+  const {focusProps} = useIndicatorFocusRing(indicatorRef, isDisabled);
 
   const radioCircle = (
     <div
-      {...stylex.props(
-        styles.radioWrapper,
-        wrapperSizeStyles[size],
-        !isDisabled && styles.radioWrapperFocus,
-      )}>
+      {...stylex.props(styles.radioWrapper, wrapperSizeStyles[size])}
+      {...focusProps}>
       <input
         id={id}
         type="radio"
@@ -282,31 +195,13 @@ export function RadioListItem({
           isDisabled && styles.inputDisabled,
         )}
       />
-      <div
-        aria-hidden="true"
-        {...mergeProps(
-          themeProps('radio', {
-            size,
-            checked: isChecked ? 'checked' : null,
-            disabled: isDisabled ? 'disabled' : null,
-          }),
-          stylex.props(
-            styles.radio,
-            radioSizeStyles[size],
-            isChecked ? styles.radioChecked : styles.radioUnchecked,
-            isDisabled && styles.radioDisabled,
-            isDisabled && !isChecked && styles.radioDisabledUnchecked,
-          ),
-        )}>
-        {isChecked && (
-          <div
-            {...mergeProps(
-              themeProps('radio-dot', {size}),
-              stylex.props(styles.innerDot, dotSizeStyles[size]),
-            )}
-          />
-        )}
-      </div>
+      <span ref={indicatorRef} {...stylex.props(styles.indicatorSlot)}>
+        <RadioControl
+          state={isChecked ? 'checked' : 'unchecked'}
+          size={size}
+          isDisabled={isDisabled}
+        />
+      </span>
     </div>
   );
 
@@ -325,7 +220,13 @@ export function RadioListItem({
       ref={ref}
       {...mergeProps(
         themeProps('radio-list-item'),
-        stylex.props(styles.container, !isDisabled && radioScope, xstyle),
+        stylex.props(
+          styles.container,
+          // Hover reaches the radio visual through this ancestor marker rather
+          // than props, so hovering the row tints the control.
+          !isDisabled && indicatorScope,
+          xstyle,
+        ),
         className,
         style,
       )}

package/src/Resizable/ResizeHandle.tsx

@@ -34,6 +34,7 @@ import {
   radiusVars,
   spacingVars,
 } from '../theme/tokens.stylex';
+import {focusOutlineProps} from '../utils/focusOutline.stylex';
 import {mergeProps, mergeRefs, rtlStyles} from '../utils';
 import type {ResizableProps} from './useResizable';
 import {themeProps} from '../utils/themeProps';
@@ -94,14 +95,6 @@ const styles = stylex.create({
     transitionProperty: 'background-color',
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
-    outline: {
-      default: 'none',
-      ':focus-visible': `2px solid ${colorVars['--color-accent']}`,
-    },
-    outlineOffset: {
-      default: null,
-      ':focus-visible': spacingVars['--spacing-0-5'],
-    },
   },
   // Overlay mode — absolutely positioned inside the parent panel
   // instead of being a sibling in flex flow. Used when the handle
@@ -554,7 +547,7 @@ export function ResizeHandle({
       data-resizing={isDragging || undefined}
       {...mergeProps(
         themeProps('resize-handle'),
-        stylex.props(
+        focusOutlineProps.focusVisible(
           styles.handle,
           isOverlay && styles.overlay,
           isOverlay &&

package/src/SegmentedControl/SegmentedControlItem.tsx

@@ -32,6 +32,7 @@ import type {SegmentedControlSize} from './SegmentedControlContext';
 import {mergeProps, composeEventHandlers} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
+import {focusOutlineProps} from '../utils/focusOutline.stylex';
 
 export interface SegmentedControlItemProps extends BaseProps<HTMLButtonElement> {
   ref?: React.Ref<HTMLButtonElement>;
@@ -85,14 +86,6 @@ const styles = stylex.create({
     transitionProperty: 'color, background-color, box-shadow',
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
-    outline: {
-      default: null,
-      ':focus-visible': `2px solid ${colorVars['--color-accent']}`,
-    },
-    outlineOffset: {
-      default: '0',
-      ':focus-visible': '2px',
-    },
   },
   hover: {
     backgroundColor: {
@@ -240,7 +233,7 @@ export function SegmentedControlItem({
           selected: isSelected ? 'selected' : null,
           disabled: isItemDisabled ? 'disabled' : null,
         }),
-        stylex.props(
+        focusOutlineProps.focusVisible(
           styles.base,
           sizeStyles[size],
           isFill && styles.fill,

package/src/SelectableCard/SelectableCard.tsx

@@ -46,6 +46,7 @@ import type {CardVariant} from '../Card/Card';
 import {useClickableContainer} from '../hooks/useClickableContainer';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
+import {focusOutlineProps} from '../utils/focusOutline.stylex';
 
 // =============================================================================
 // Styles — selection + interaction; Card handles the rest
@@ -58,13 +59,6 @@ const styles = stylex.create({
     transitionProperty: 'box-shadow, border-color',
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
-    outlineOffset: '2px',
-  },
-  focusWithin: {
-    ':has(:focus-visible)': {
-      outline: `2px solid ${colorVars['--color-accent']}`,
-      outlineOffset: '2px',
-    },
   },
   // Hover overlay — guarded by @media (hover: hover) so touch devices
   // don't show a stuck hover state. Active/pressed state works everywhere.
@@ -361,12 +355,13 @@ export function SelectableCard({
           variant,
           selected: isSelected ? 'true' : 'false',
         }),
-        {className: classNameProp, style},
+        focusOutlineProps.focusWithin(),
+        classNameProp,
+        style,
       )}
       xstyle={
         [
           styles.interactive,
-          styles.focusWithin,
           isSelected && selectedStyleForVariant(variant),
           !isDisabled && styles.overlay,
           !isDisabled && styles.hoverOnPointer,

package/src/Selector/Selector.doc.mjs

@@ -24,10 +24,14 @@ export const docs = {
       {
         className: 'astryx-selector',
         visualProps: ['variant', 'size', 'status'],
+        states: ['disabled'],
       },
       {className: 'astryx-selector-option'},
-      {className: 'astryx-selector-clear-icon'},
+      {className: 'astryx-selector-empty-state'},
+      {className: 'astryx-selector-clear-icon', deprecatedFor: 'input-clear-icon'},
       {className: 'astryx-selector-indicator-icon', states: ['state']},
+      {className: 'astryx-selector-check'},
+      {className: 'astryx-selector-popup'},
     ],
   },
   description: 'Dropdown selector for choosing from a list of options.',
@@ -153,6 +157,13 @@ export const docs = {
       description:
         'Custom render function for each selectable option in the dropdown. Use this instead of JSX children; dividers and sections are rendered by the selector.',
     },
+    {
+      name: 'indicatorPosition',
+      type: "'start' | 'end'",
+      description:
+        'Which edge of the option row carries the selected mark. start reserves a mark column ahead of every label so they stay aligned, the way a native menu does; end is the house convention shared with Typeahead and CommandPalette.',
+      default: "'end'",
+    },
     {
       name: 'width',
       type: 'SizeValue',
@@ -169,7 +180,7 @@ export const docs = {
   components: [{name: 'SelectorOption'}],
   usage: {
     description:
-      'A dropdown selector for choosing a single value from a list of options. Supports labels, validation, descriptions, and required/optional states. Use it in forms and settings when presenting a moderate number of options.',
+      'A dropdown selector for choosing a single value from a list of options. Supports labels, validation, descriptions, and required/optional states. Use it in forms and settings when presenting a moderate number of options. Keyboard typeahead matches a native select: typing on the focused closed trigger selects the matching option directly, repeated presses cycle through options sharing a first letter, and spaces count as match characters ("new y" reaches "New York"). With the menu open, typing moves the highlight and Enter commits. With hasSearch, typing on the closed trigger opens the popup and seeds the search input.',
     bestPractices: [
       {
         guidance: true,
@@ -271,7 +282,7 @@ export const docs = {
 export const docsZh = {
   usage: {
     description:
-      'A dropdown selector for choosing a single value from a list of options. Supports labels, validation, descriptions, and required/optional states. Use it in forms and settings when presenting a moderate number of options.',
+      'A dropdown selector for choosing a single value from a list of options. Supports labels, validation, descriptions, and required/optional states. Use it in forms and settings when presenting a moderate number of options. Keyboard typeahead matches a native select: typing on the focused closed trigger selects the matching option directly, repeated presses cycle through options sharing a first letter, and spaces count as match characters ("new y" reaches "New York"). With the menu open, typing moves the highlight and Enter commits. With hasSearch, typing on the closed trigger opens the popup and seeds the search input.',
     bestPractices: [
       {
         guidance: true,
@@ -363,7 +374,7 @@ export const docsZh = {
 export const docsDense = {
   usage: {
     description:
-      'A dropdown selector for choosing a single value from a list of options. Supports labels, validation, descriptions, and required/optional states. Use it in forms and settings when presenting a moderate number of options.',
+      'A dropdown selector for choosing a single value from a list of options. Supports labels, validation, descriptions, and required/optional states. Use it in forms and settings when presenting a moderate number of options. Keyboard typeahead matches a native select: typing on the focused closed trigger selects the matching option directly, repeated presses cycle through options sharing a first letter, and spaces count as match characters ("new y" reaches "New York"). With the menu open, typing moves the highlight and Enter commits. With hasSearch, typing on the closed trigger opens the popup and seeds the search input.',
     bestPractices: [
       {
         guidance: true,