@symbiote-native/slider 5.1.0 → 6.0.0

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';