@symbiote-native/slider 5.1.0 → 5.2.0

package/src/angular/slider/shared.ts

@@ -72,7 +72,10 @@ import {
 
 export type ISliderProps = Omit<
   ISliderBaseProps,
-  'onValueChange' | 'onSlidingStart' | 'onSlidingComplete' | 'onAccessibilityAction'
+  | 'onValueChange'
+  | 'onSlidingStart'
+  | 'onSlidingComplete'
+  | 'onAccessibilityAction'
 >;
 
 function isRecord(value: unknown): value is Record<string, unknown> {
@@ -88,7 +91,9 @@ function asStyle(value: unknown): ISliderProps['style'] {
 }
 
 @Directive()
-export abstract class SliderBase implements ISliderProps, OnChanges, ControlValueAccessor {
+export abstract class SliderBase
+  implements ISliderProps, OnChanges, ControlValueAccessor
+{
   @Input() value?: number;
   @Input() minimumValue?: number;
   @Input() maximumValue?: number;
@@ -122,8 +127,10 @@ export abstract class SliderBase implements ISliderProps, OnChanges, ControlValu
   @Input() accessibilityValue?: IAccessibilityProps['accessibilityValue'];
   @Input() accessibilityActions?: IAccessibilityProps['accessibilityActions'];
   @Input() accessibilityLabelledBy?: string | string[];
-  @Input() importantForAccessibility?: IAccessibilityProps['importantForAccessibility'];
-  @Input() accessibilityLiveRegion?: IAccessibilityProps['accessibilityLiveRegion'];
+  @Input()
+  importantForAccessibility?: IAccessibilityProps['importantForAccessibility'];
+  @Input()
+  accessibilityLiveRegion?: IAccessibilityProps['accessibilityLiveRegion'];
   @Input() screenReaderFocusable?: boolean;
   @Input() accessibilityViewIsModal?: boolean;
   @Input() accessibilityElementsHidden?: boolean;
@@ -200,7 +207,9 @@ export abstract class SliderBase implements ISliderProps, OnChanges, ControlValu
     if (value !== undefined) this.slidingComplete.emit(value);
   };
 
-  protected readonly handleAccessibilityAction = (event: ISymbioteEvent): void => {
+  protected readonly handleAccessibilityAction = (
+    event: ISymbioteEvent,
+  ): void => {
     this.accessibilityAction.emit(event);
   };
 
@@ -280,8 +289,10 @@ export abstract class SliderBase implements ISliderProps, OnChanges, ControlValu
       accessibilityElementsHidden: this.accessibilityElementsHidden,
       accessibilityIgnoresInvertColors: this.accessibilityIgnoresInvertColors,
       accessibilityLanguage: this.accessibilityLanguage,
-      accessibilityRespondsToUserInteraction: this.accessibilityRespondsToUserInteraction,
-      accessibilityShowsLargeContentViewer: this.accessibilityShowsLargeContentViewer,
+      accessibilityRespondsToUserInteraction:
+        this.accessibilityRespondsToUserInteraction,
+      accessibilityShowsLargeContentViewer:
+        this.accessibilityShowsLargeContentViewer,
       accessibilityLargeContentTitle: this.accessibilityLargeContentTitle,
       onAccessibilityTap: this.onAccessibilityTap,
       onMagicTap: this.onMagicTap,
@@ -349,9 +360,16 @@ export abstract class SliderBase implements ISliderProps, OnChanges, ControlValu
       upperLimit,
       disabled: resolveSliderDisabled(disabled, accessibilityState),
       inverted,
-      thumbTintColor: resolveThumbTintColor(thumbTintColor, false, hasThumbImage),
+      thumbTintColor: resolveThumbTintColor(
+        thumbTintColor,
+        false,
+        hasThumbImage,
+      ),
       thumbImage: nativeThumbImage,
-      accessibilityState: resolveSliderAccessibilityState(disabled, accessibilityState),
+      accessibilityState: resolveSliderAccessibilityState(
+        disabled,
+        accessibilityState,
+      ),
       width: this.width,
       style,
       passthrough: {
@@ -384,6 +402,9 @@ export abstract class SliderBase implements ISliderProps, OnChanges, ControlValu
       inverted,
       platform: this.platform,
     });
-    return renderSlider(view, this.platform, { steps, onLayout: this.handleLayout });
+    return renderSlider(view, this.platform, {
+      steps,
+      onLayout: this.handleLayout,
+    });
   }
 }

package/src/core/index.ts

@@ -22,7 +22,11 @@ export {
 } from './slider-state';
 export type { ISliderAccessibilityState } from './slider-state';
 
-export type { ISliderProps, ISliderPlatform, ISliderViewProps } from './slider-props';
+export type {
+  ISliderProps,
+  ISliderPlatform,
+  ISliderViewProps,
+} from './slider-props';
 
 export {
   renderSlider,
@@ -42,4 +46,7 @@ export {
   THUMB_IMAGE_STYLE,
   STEP_NUMBER_CONTAINER_STYLE,
 } from './render-steps-indicator';
-export type { IStepsIndicatorParams, IStepMarkerProps } from './render-steps-indicator';
+export type {
+  IStepsIndicatorParams,
+  IStepMarkerProps,
+} from './render-steps-indicator';

package/src/core/render-slider.ts

@@ -7,9 +7,16 @@
 // width measurement that feeds `view.width`.
 
 import { dlog } from '@symbiote-native/engine';
-import type { IStyleProp, IViewStyle, ISymbioteEvent } from '@symbiote-native/engine';
+import type {
+  IStyleProp,
+  IViewStyle,
+  ISymbioteEvent,
+} from '@symbiote-native/engine';
 import { el } from '@symbiote-native/components';
-import type { IDescriptor, IDescriptorChild } from '@symbiote-native/components';
+import type {
+  IDescriptor,
+  IDescriptorChild,
+} from '@symbiote-native/components';
 import { RNC_SLIDER_VIEW_NAME } from './constants';
 import type { ISliderPlatform, ISliderViewProps } from './slider-props';
 
@@ -27,21 +34,32 @@ export function resolveSliderNativeStyle(
   width: number | undefined,
   platform: ISliderPlatform,
 ): IStyleProp<IViewStyle> {
-  const base: IViewStyle = { zIndex: 1, alignContent: 'center', alignItems: 'center' };
-  const sized: IStyleProp<IViewStyle> = width === undefined ? base : [base, { width }];
+  const base: IViewStyle = {
+    zIndex: 1,
+    alignContent: 'center',
+    alignItems: 'center',
+  };
+  const sized: IStyleProp<IViewStyle> =
+    width === undefined ? base : [base, { width }];
   return [platform.defaultStyle, sized];
 }
 
 // The outer wrapper centers the native slider and gives it the platform default height; the
 // caller's style layers on top, exactly as the library composes [defaultStyle, props.style]. The
 // caller's style is opaque (`unknown`) — the engine flattens the array — so it is not narrowed.
-export function resolveSliderWrapperStyle(style: unknown, platform: ISliderPlatform): unknown {
+export function resolveSliderWrapperStyle(
+  style: unknown,
+  platform: ISliderPlatform,
+): unknown {
   return [platform.defaultStyle, style, { justifyContent: 'center' }];
 }
 
 // The native `RNCSlider` leaf alone (no wrapper). Adapters that compose a custom step overlay
 // (a per-adapter StepMarker element) assemble the wrapper themselves and drop this leaf in.
-export function renderSliderNative(view: ISliderViewProps, platform: ISliderPlatform): IDescriptor {
+export function renderSliderNative(
+  view: ISliderViewProps,
+  platform: ISliderPlatform,
+): IDescriptor {
   dlog(
     `Slider render value=${String(view.value)} disabled=${String(view.disabled)} width=${String(view.width)}`,
   );

package/src/core/render-steps-indicator.ts

@@ -6,7 +6,10 @@
 // assembles the overlay itself from these same helpers, dropping its element into each mark.
 
 import { el, txt } from '@symbiote-native/components';
-import type { IDescriptor, IDescriptorChild } from '@symbiote-native/components';
+import type {
+  IDescriptor,
+  IDescriptorChild,
+} from '@symbiote-native/components';
 import type { IViewStyle, ITextStyle } from '@symbiote-native/engine';
 import {
   SLIDER_MARGIN_HORIZONTAL_PADDING,
@@ -54,7 +57,10 @@ export const STEP_NUMBER_CONTAINER_STYLE: IViewStyle = {
 
 // The mark row: flex row, evenly spaced, inset by a fraction of the measured width. `top` is
 // platform-specific (iOS nudges the row down 10pt), supplied via the platform piece.
-export function resolveStepsContainerStyle(width: number, platform: ISliderPlatform): IViewStyle {
+export function resolveStepsContainerStyle(
+  width: number,
+  platform: ISliderPlatform,
+): IViewStyle {
   return {
     flex: 1,
     flexDirection: 'row',
@@ -114,29 +120,51 @@ function renderStepCell(
     trackMarkChildren.push(
       el(
         'symbiote-view',
-        { style: THUMB_IMAGE_CONTAINER_STYLE, testID: 'sliderTrackMark-thumbImage' },
-        [el('symbiote-image', { source: params.thumbImage, style: THUMB_IMAGE_STYLE })],
+        {
+          style: THUMB_IMAGE_CONTAINER_STYLE,
+          testID: 'sliderTrackMark-thumbImage',
+        },
+        [
+          el('symbiote-image', {
+            source: params.thumbImage,
+            style: THUMB_IMAGE_STYLE,
+          }),
+        ],
       ),
     );
   }
 
   const cellChildren: IDescriptorChild[] = [
-    el('symbiote-view', { style: TRACK_MARK_CONTAINER_STYLE }, trackMarkChildren),
+    el(
+      'symbiote-view',
+      { style: TRACK_MARK_CONTAINER_STYLE },
+      trackMarkChildren,
+    ),
   ];
   if (params.renderStepNumber === true) {
     cellChildren.push(
       el('symbiote-view', { style: STEP_NUMBER_CONTAINER_STYLE }, [
-        txt({ testID: `${displayIndex}th-step`, style: { fontSize } satisfies ITextStyle }, [
-          String(value),
-        ]),
+        txt(
+          {
+            testID: `${displayIndex}th-step`,
+            style: { fontSize } satisfies ITextStyle,
+          },
+          [String(value)],
+        ),
       ]),
     );
   }
-  return el('symbiote-view', { style: STEP_INDICATOR_ELEMENT_STYLE }, cellChildren);
+  return el(
+    'symbiote-view',
+    { style: STEP_INDICATOR_ELEMENT_STYLE },
+    cellChildren,
+  );
 }
 
 // The default overlay (no custom StepMarker). pointerEvents none so it never eats the drag.
-export function renderStepsIndicator(params: IStepsIndicatorParams): IDescriptor {
+export function renderStepsIndicator(
+  params: IStepsIndicatorParams,
+): IDescriptor {
   const fontSize = stepNumberFontSize(params.options.length);
   const ordered = orderStepOptions(params.options, params.inverted);
   const cells = ordered.map((value, displayIndex) =>

package/src/core/slider-props.ts

@@ -3,7 +3,11 @@
 // `StepMarker` field is per-adapter (a framework element return type can't live here) - see
 // CLAUDE.md's <prop_types_split_agnostic_vs_per_adapter>.
 
-import type { IColorValue, IStyleProp, IViewStyle } from '@symbiote-native/engine';
+import type {
+  IColorValue,
+  IStyleProp,
+  IViewStyle,
+} from '@symbiote-native/engine';
 import type {
   IAccessibilityProps,
   IAriaProps,

package/src/core/slider-state.ts

@@ -18,7 +18,9 @@ export type ISliderAccessibilityState = {
 // Mirror the library's `passedValue`: NaN or a falsy value (incl. 0) becomes undefined, so the
 // native view falls back to its own default initial value rather than receiving NaN/0 as a
 // write. Entered once it still acts as the initial value (the slider is uncontrolled after).
-export function sanitizeSliderValue(value: number | undefined): number | undefined {
+export function sanitizeSliderValue(
+  value: number | undefined,
+): number | undefined {
   if (value === undefined) return undefined;
   return Number.isNaN(value) || !value ? undefined : value;
 }
@@ -44,17 +46,23 @@ export function resolveSliderAccessibilityState(
 }
 
 // Default the slide limits to the unbounded sentinels when unset (the native, non-web case).
-export function resolveSliderLowerLimit(lowerLimit: number | undefined): number {
+export function resolveSliderLowerLimit(
+  lowerLimit: number | undefined,
+): number {
   return lowerLimit ?? SLIDER_LIMIT_MIN_VALUE;
 }
 
-export function resolveSliderUpperLimit(upperLimit: number | undefined): number {
+export function resolveSliderUpperLimit(
+  upperLimit: number | undefined,
+): number {
   return upperLimit ?? SLIDER_LIMIT_MAX_VALUE;
 }
 
 // The value the native value/sliding events carry as nativeEvent.value. nativeEvent is an
 // untyped Record, so narrow; a non-number payload yields undefined (no callback fired upstream).
-export function valueFromSliderEvent(event: ISymbioteEvent): number | undefined {
+export function valueFromSliderEvent(
+  event: ISymbioteEvent,
+): number | undefined {
   const value = event.nativeEvent.value;
   return typeof value === 'number' ? value : undefined;
 }
@@ -91,7 +99,10 @@ export function shouldPassNativeThumbImage(
 }
 
 // The library warns when the limits cross; surfaced as a pure predicate so the adapter logs it.
-export function isInvalidLimitConfig(lowerLimit: number, upperLimit: number): boolean {
+export function isInvalidLimitConfig(
+  lowerLimit: number,
+  upperLimit: number,
+): boolean {
   return lowerLimit >= upperLimit;
 }
 

package/src/react/slider/index.ios.ts

@@ -3,7 +3,10 @@
 // Also the base (./index re-exports it) for headless. Mirrors the library's iOS branches.
 
 import { createSlider } from './shared';
-import { SLIDER_IOS_DEFAULT_HEIGHT, SLIDER_STEP_RESOLUTION_IOS } from '../../core';
+import {
+  SLIDER_IOS_DEFAULT_HEIGHT,
+  SLIDER_STEP_RESOLUTION_IOS,
+} from '../../core';
 
 const IOS_STEPS_CONTAINER_TOP = 10;
 

package/src/react/slider/shared.ts

@@ -9,7 +9,13 @@
 // library's React Slider component — that component internally calls React hooks off the React
 // dispatcher, so a non-React adapter rendering it directly would crash on a null dispatcher.
 
-import { createElement, forwardRef, useCallback, useEffect, useState } from 'react';
+import {
+  createElement,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
 import type {
   FC,
   ForwardRefExoticComponent,
@@ -19,8 +25,16 @@ import type {
 } from 'react';
 import { descriptorToReact, Image } from '@symbiote-native/react';
 import { resolveAccessibilityProps } from '@symbiote-native/components';
-import type { IDescriptor, IDescriptorChild, IImageSourceProp } from '@symbiote-native/components';
-import { dlog, type ISymbioteEvent, type ISymbioteNode } from '@symbiote-native/engine';
+import type {
+  IDescriptor,
+  IDescriptorChild,
+  IImageSourceProp,
+} from '@symbiote-native/components';
+import {
+  dlog,
+  type ISymbioteEvent,
+  type ISymbioteNode,
+} from '@symbiote-native/engine';
 import {
   sanitizeSliderValue,
   resolveSliderDisabled,
@@ -86,7 +100,10 @@ function toChild(child: IDescriptorChild): ReactElement | string {
 // renderSlider's Descriptor IS the outer wrapper (symbiote-view hosting the native leaf +
 // optional steps overlay); className is reapplied on it here, exactly like ImageBackground's
 // wrapper.
-function withClassName(descriptor: IDescriptor, className: string | undefined): ReactElement {
+function withClassName(
+  descriptor: IDescriptor,
+  className: string | undefined,
+): ReactElement {
   return createElement(
     descriptor.type,
     { key: descriptor.key, ...descriptor.props, className },
@@ -123,7 +140,9 @@ export function createSlider(platform: ISliderPlatform): ISliderComponent {
       ...passthrough
     } = props;
 
-    const [reportedValue, setReportedValue] = useState<number | undefined>(undefined);
+    const [reportedValue, setReportedValue] = useState<number | undefined>(
+      undefined,
+    );
     const [width, setWidth] = useState(0);
 
     const handleValueChange = useCallback(
@@ -157,7 +176,8 @@ export function createSlider(platform: ISliderPlatform): ISliderComponent {
     );
     const handleLayout = useCallback((event: ISymbioteEvent): void => {
       const layout = event.nativeEvent.layout;
-      if (isRecord(layout) && typeof layout.width === 'number') setWidth(layout.width);
+      if (isRecord(layout) && typeof layout.width === 'number')
+        setWidth(layout.width);
     }, []);
 
     const minimum = minimumValue ?? SLIDER_DEFAULT_MINIMUM_VALUE;
@@ -173,10 +193,16 @@ export function createSlider(platform: ISliderPlatform): ISliderComponent {
 
     const hasStepMarker = StepMarker !== undefined;
     const hasThumbImage = thumbImage !== undefined;
-    const showSteps = shouldRenderStepsIndicator(hasStepMarker, renderStepNumber);
+    const showSteps = shouldRenderStepsIndicator(
+      hasStepMarker,
+      renderStepNumber,
+    );
     // Passed to the native view raw — the engine runs the image processor derived from RNCSlider's
     // ViewConfig — and only when no custom marker draws its own thumb (matches the library).
-    const nativeThumbImage = shouldPassNativeThumbImage(hasStepMarker, hasThumbImage)
+    const nativeThumbImage = shouldPassNativeThumbImage(
+      hasStepMarker,
+      hasThumbImage,
+    )
       ? thumbImage
       : undefined;
 
@@ -189,9 +215,16 @@ export function createSlider(platform: ISliderPlatform): ISliderComponent {
       upperLimit: upper,
       disabled: resolveSliderDisabled(disabled, accessibilityState),
       inverted: inverted ?? false,
-      thumbTintColor: resolveThumbTintColor(thumbTintColor, hasStepMarker, hasThumbImage),
+      thumbTintColor: resolveThumbTintColor(
+        thumbTintColor,
+        hasStepMarker,
+        hasThumbImage,
+      ),
       thumbImage: nativeThumbImage,
-      accessibilityState: resolveSliderAccessibilityState(disabled, accessibilityState),
+      accessibilityState: resolveSliderAccessibilityState(
+        disabled,
+        accessibilityState,
+      ),
       width,
       style,
       passthrough: {
@@ -206,10 +239,18 @@ export function createSlider(platform: ISliderPlatform): ISliderComponent {
     };
 
     if (!showSteps) {
-      return withClassName(renderSlider(view, platform, { onLayout: handleLayout }), className);
+      return withClassName(
+        renderSlider(view, platform, { onLayout: handleLayout }),
+        className,
+      );
     }
 
-    const options = computeStepOptions(minimum, maximum, stepValue, platform.stepResolution);
+    const options = computeStepOptions(
+      minimum,
+      maximum,
+      stepValue,
+      platform.stepResolution,
+    );
     const currentValue = reportedValue ?? view.value ?? minimum;
 
     if (StepMarker !== undefined) {
@@ -225,7 +266,11 @@ export function createSlider(platform: ISliderPlatform): ISliderComponent {
       });
       return createElement(
         'symbiote-view',
-        { style: resolveStepsWrapperStyle(style, platform), onLayout: handleLayout, className },
+        {
+          style: resolveStepsWrapperStyle(style, platform),
+          onLayout: handleLayout,
+          className,
+        },
         overlay,
         descriptorToReact(renderSliderNative(view, platform)),
       );
@@ -248,7 +293,10 @@ export function createSlider(platform: ISliderPlatform): ISliderComponent {
 }
 
 // The wrapper style for the custom-marker steps path mirrors renderSlider's wrapper.
-function resolveStepsWrapperStyle(style: unknown, platform: ISliderPlatform): unknown {
+function resolveStepsWrapperStyle(
+  style: unknown,
+  platform: ISliderPlatform,
+): unknown {
   return [platform.defaultStyle, style, { justifyContent: 'center' }];
 }
 
@@ -291,7 +339,10 @@ function renderCustomStepsOverlay(params: ICustomStepsParams): ReactElement {
             style: THUMB_IMAGE_CONTAINER_STYLE,
             testID: 'sliderTrackMark-thumbImage',
           },
-          createElement(Image, { source: params.thumbImage, style: THUMB_IMAGE_STYLE }),
+          createElement(Image, {
+            source: params.thumbImage,
+            style: THUMB_IMAGE_STYLE,
+          }),
         ),
       );
     }

package/src/register/index.ts

@@ -7,7 +7,11 @@
 // barrel imports it; the component modules and their headless tests stay free of the spec.
 
 import '@react-native-community/slider/dist/RNCSliderNativeComponent';
-import { processColor, registerComponent, type IColorValue } from '@symbiote-native/engine';
+import {
+  processColor,
+  registerComponent,
+  type IColorValue,
+} from '@symbiote-native/engine';
 import {
   RNC_SLIDER_VIEW_NAME,
   SLIDER_ON_CHANGE,
@@ -33,7 +37,10 @@ function processSliderColor(value: unknown): unknown {
 registerComponent(RNC_SLIDER_VIEW_NAME, {
   events: [
     { raw: 'topChange', listener: listenerName(SLIDER_ON_CHANGE) },
-    { raw: 'topRNCSliderValueChange', listener: listenerName(SLIDER_ON_VALUE_CHANGE) },
+    {
+      raw: 'topRNCSliderValueChange',
+      listener: listenerName(SLIDER_ON_VALUE_CHANGE),
+    },
     {
       raw: 'topRNCSliderSlidingStart',
       listener: listenerName(SLIDER_ON_SLIDING_START),

package/src/solid/index.ts

@@ -0,0 +1,12 @@
+// @symbiote-native/slider/solid: the Solid wrapper over the @react-native-community/slider native
+// view. The bare import below is FIRST and is a side effect, not a re-export: it registers the
+// native view's ViewConfig (the codegen spec, never the library's React component) before any
+// Slider can mount. Metro's production-only `inlineRequires` moves a require down to the first
+// place its binding is USED and compiles a barrel's re-export into a lazy getter, so a registration
+// reached through one silently never runs in RELEASE builds only. Do not restructure it.
+
+import '../register';
+
+export { Slider } from './slider';
+export type { ISliderProps, ISliderStepMarker } from './slider';
+export type { IStepMarkerProps } from '../core';

package/src/solid/slider/index.android.ts

@@ -0,0 +1,15 @@
+// Slider on Android: the native view sizes itself (no default height), lays out implicit steps at
+// 128-point resolution, and keeps the step row at the top. Mirrors the library's Android branches.
+
+import { createSlider } from './shared';
+import { SLIDER_STEP_RESOLUTION_ANDROID } from '../../core';
+
+export type { ISliderProps, ISliderStepMarker } from './shared';
+
+const ANDROID_STEPS_CONTAINER_TOP = 0;
+
+export const Slider = createSlider({
+  defaultStyle: {},
+  stepResolution: SLIDER_STEP_RESOLUTION_ANDROID,
+  stepsContainerTop: ANDROID_STEPS_CONTAINER_TOP,
+});

package/src/solid/slider/index.ios.ts

@@ -0,0 +1,19 @@
+// Slider on iOS: the native view has an intrinsic 40pt height (the wrapper applies it as the
+// default), lays out implicit steps at 1000-point resolution, and nudges the step row down 10pt.
+// Also the base (./index re-exports it) for headless. Mirrors the library's iOS branches.
+
+import { createSlider } from './shared';
+import {
+  SLIDER_IOS_DEFAULT_HEIGHT,
+  SLIDER_STEP_RESOLUTION_IOS,
+} from '../../core';
+
+export type { ISliderProps, ISliderStepMarker } from './shared';
+
+const IOS_STEPS_CONTAINER_TOP = 10;
+
+export const Slider = createSlider({
+  defaultStyle: { height: SLIDER_IOS_DEFAULT_HEIGHT },
+  stepResolution: SLIDER_STEP_RESOLUTION_IOS,
+  stepsContainerTop: IOS_STEPS_CONTAINER_TOP,
+});

package/src/solid/slider/index.ts

@@ -0,0 +1,5 @@
+// Base / default Slider: re-exports the iOS build. Metro overrides this with index.ios.ts /
+// index.android.ts on a real host; under vitest / tsc the resolution lands here. Filename is the
+// selector, no Platform.OS read — the same convention adapters/solid's own Switch follows.
+
+export * from './index.ios';