@symbiote-native/slider 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 A. Prokopenko
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,90 @@
+# @symbiote-native/slider
+
+A wrapper package for [SymbioteJS](../../README.md) that makes the third-party native
+`@react-native-community/slider` view usable from **every** adapter — React, Vue, and Angular —
+not just React. The library's default export is a React component (it calls hooks off the React
+dispatcher), so a non-React adapter renders it with a null dispatcher and it throws. This package
+reaches the native `RNCSlider` view directly through the engine's `createNode`-by-ViewConfig path
+instead of importing the library's React component — the same mechanism SymbioteJS uses for its
+own primitives. See the `symbiote-third-party-native-view` skill and ADR 0027 for the full
+mechanism and rationale.
+
+## Shape
+
+One framework-agnostic core, one thin entry per adapter, selected through the package's `exports`
+map:
+
+```
+src/core/       pure folds (value sanitation, limit/disabled resolution, step-indicator layout)
+                + renderSlider/renderSliderNative → Descriptor, the agnostic ISliderProps
+src/register.ts side-effect import of RNCSlider's codegen spec — registers its ViewConfig
+                (never the library's React Slider.tsx)
+src/react/      @symbiote-native/slider/react — forwardRef FC + descriptorToReact
+src/vue/        @symbiote-native/slider/vue   — defineComponent + descriptorToVue
+src/angular/    @symbiote-native/slider/angular — Angular component + descriptorToAngular
+```
+
+Each adapter entry imports `../register` first (so the ViewConfig is registered before the
+component ever mounts), then exposes a platform-split `Slider`. The core is written once; every
+adapter inherits the same folding logic and the same `ISliderProps` surface (extended per-adapter
+only where a field carries a framework element — the custom `StepMarker` is a React render prop
+but a Vue scoped slot).
+
+## Packaging — one dependency, not two
+
+A consuming app depends on `@symbiote-native/slider` only — never on
+`@react-native-community/slider` directly. `@symbiote-native/slider` owns the native dependency and
+ships `react-native.config.cjs` (points RN's Android autolinking at the nested native lib's
+Android sources) and `symbiote-slider.podspec` (the iOS proxy pod), so RN autolinking discovers
+`@symbiote-native/slider` itself as the native package. Plain transitive native deps do **not**
+autolink; this proxy-package shape is the verified escape hatch (`npx react-native config` lists
+`@symbiote-native/slider` with iOS + Android config in `examples/react`, `examples/vue-sfc`,
+`examples/vue-tsx`, and `examples/angular`).
+
+## Use it
+
+```tsx
+// React — examples/react/App.tsx
+import { Slider } from '@symbiote-native/slider/react';
+
+<Slider
+  value={volume}
+  onValueChange={setVolume}
+  minimumValue={0}
+  maximumValue={1}
+  step={0.01}
+  minimumTrackTintColor="#7fb5ff"
+  maximumTrackTintColor="#334155"
+  thumbTintColor="#ffffff"
+/>
+```
+
+```vue
+<!-- Vue — examples/vue-sfc/App.vue -->
+<script setup lang="ts">
+import { Slider } from '@symbiote-native/slider/vue';
+</script>
+<template>
+  <Slider
+    testID="volume-slider"
+    :value="volume"
+    @update:value="volume = $event"
+  />
+</template>
+```
+
+```ts
+// Angular — examples/angular/App.ts
+import { Slider } from '@symbiote-native/slider/angular';
+// ... Slider added to the component's `imports`, used the same way in its template.
+```
+
+Colors and images are passed raw in every adapter — the engine derives `RNCSlider`'s color/image
+processors from its own ViewConfig at runtime, so there is nothing to pre-resolve on the app side.
+
+## Test it
+
+Headless component tests live next to each adapter entry
+(`src/{react,vue,angular}/slider/slider.test.{ts,tsx}`) and inject a fake ViewConfig via
+`setNativeViewConfigSource`, so they run without a real Fabric host. Native rendering is verified
+on-device (see the parent [README](../../README.md) for the project's testing model).

package/build/angular/index.d.ts

@@ -0,0 +1,3 @@
+import '../register';
+export { Slider } from './slider';
+export type { ISliderProps } from './slider/shared';

package/build/angular/index.js

@@ -0,0 +1,2 @@
+import '../register';
+export { Slider } from './slider';

package/build/angular/slider/index.android.d.ts

@@ -0,0 +1,9 @@
+import { SliderBase } from './shared';
+export type { ISliderProps } from './shared';
+export declare class Slider extends SliderBase {
+    protected readonly platform: {
+        defaultStyle: {};
+        stepResolution: number;
+        stepsContainerTop: number;
+    };
+}

package/build/angular/slider/index.android.js

@@ -0,0 +1,71 @@
+// 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.
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { DescriptorOutlet } from '@symbiote-native/angular';
+import { SliderBase } from './shared';
+import { SLIDER_STEP_RESOLUTION_ANDROID } from '../../core';
+const ANDROID_STEPS_CONTAINER_TOP = 0;
+let Slider = (() => {
+    let _classDecorators = [Component({
+            selector: 'Slider',
+            standalone: true,
+            imports: [DescriptorOutlet],
+            changeDetection: ChangeDetectionStrategy.OnPush,
+            template: `<symbiote-descriptor-outlet [node]="descriptor" />`,
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = SliderBase;
+    var Slider = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            Slider = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        platform = {
+            defaultStyle: {},
+            stepResolution: SLIDER_STEP_RESOLUTION_ANDROID,
+            stepsContainerTop: ANDROID_STEPS_CONTAINER_TOP,
+        };
+    };
+    return Slider = _classThis;
+})();
+export { Slider };

package/build/angular/slider/index.d.ts

@@ -0,0 +1,2 @@
+export { Slider } from './index.ios';
+export type { ISliderProps } from './shared';

package/build/angular/slider/index.ios.d.ts

@@ -0,0 +1,11 @@
+import { SliderBase } from './shared';
+export type { ISliderProps } from './shared';
+export declare class Slider extends SliderBase {
+    protected readonly platform: {
+        defaultStyle: {
+            height: number;
+        };
+        stepResolution: number;
+        stepsContainerTop: number;
+    };
+}

package/build/angular/slider/index.ios.js

@@ -0,0 +1,72 @@
+// 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.
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { DescriptorOutlet } from '@symbiote-native/angular';
+import { SliderBase } from './shared';
+import { SLIDER_IOS_DEFAULT_HEIGHT, SLIDER_STEP_RESOLUTION_IOS } from '../../core';
+const IOS_STEPS_CONTAINER_TOP = 10;
+let Slider = (() => {
+    let _classDecorators = [Component({
+            selector: 'Slider',
+            standalone: true,
+            imports: [DescriptorOutlet],
+            changeDetection: ChangeDetectionStrategy.OnPush,
+            template: `<symbiote-descriptor-outlet [node]="descriptor" />`,
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = SliderBase;
+    var Slider = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            Slider = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        platform = {
+            defaultStyle: { height: SLIDER_IOS_DEFAULT_HEIGHT },
+            stepResolution: SLIDER_STEP_RESOLUTION_IOS,
+            stepsContainerTop: IOS_STEPS_CONTAINER_TOP,
+        };
+    };
+    return Slider = _classThis;
+})();
+export { Slider };

package/build/angular/slider/index.js

@@ -0,0 +1,3 @@
+// Base entry for headless / tsc: re-exports the iOS variant (Metro picks index.ios / index.android
+// per platform via filename selection; this no-suffix file is what tsx/vitest resolve). ADR 0026.
+export { Slider } from './index.ios';

package/build/angular/slider/shared.d.ts

@@ -0,0 +1,84 @@
+import { EventEmitter, type OnChanges } from '@angular/core';
+import type { IAccessibilityProps, IAccessibilityStateValue, IAriaProps, IDescriptor } from '@symbiote-native/components';
+import { type ISymbioteEvent } from '@symbiote-native/engine';
+import { type ISliderPlatform, type ISliderProps as ISliderBaseProps } from '../../core';
+export type ISliderProps = Omit<ISliderBaseProps, 'onValueChange' | 'onSlidingStart' | 'onSlidingComplete' | 'onAccessibilityAction'>;
+export declare abstract class SliderBase implements ISliderProps, OnChanges {
+    value?: number;
+    minimumValue?: number;
+    maximumValue?: number;
+    step?: number;
+    lowerLimit?: number;
+    upperLimit?: number;
+    minimumTrackTintColor?: ISliderProps['minimumTrackTintColor'];
+    maximumTrackTintColor?: ISliderProps['maximumTrackTintColor'];
+    thumbTintColor?: ISliderProps['thumbTintColor'];
+    disabled?: boolean;
+    inverted?: boolean;
+    tapToSeek?: boolean;
+    vertical?: boolean;
+    thumbImage?: ISliderProps['thumbImage'];
+    minimumTrackImage?: ISliderProps['minimumTrackImage'];
+    maximumTrackImage?: ISliderProps['maximumTrackImage'];
+    trackImage?: ISliderProps['trackImage'];
+    thumbSize?: number;
+    accessibilityUnits?: string;
+    accessibilityIncrements?: readonly string[];
+    renderStepNumber?: boolean;
+    testID?: string;
+    style?: ISliderProps['style'];
+    nativeID?: string;
+    accessible?: boolean;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+    accessibilityRole?: IAccessibilityProps['accessibilityRole'];
+    accessibilityState?: IAccessibilityStateValue;
+    accessibilityValue?: IAccessibilityProps['accessibilityValue'];
+    accessibilityActions?: IAccessibilityProps['accessibilityActions'];
+    accessibilityLabelledBy?: string | string[];
+    importantForAccessibility?: IAccessibilityProps['importantForAccessibility'];
+    accessibilityLiveRegion?: IAccessibilityProps['accessibilityLiveRegion'];
+    screenReaderFocusable?: boolean;
+    accessibilityViewIsModal?: boolean;
+    accessibilityElementsHidden?: boolean;
+    accessibilityIgnoresInvertColors?: boolean;
+    accessibilityLanguage?: string;
+    accessibilityRespondsToUserInteraction?: boolean;
+    accessibilityShowsLargeContentViewer?: boolean;
+    accessibilityLargeContentTitle?: string;
+    onAccessibilityTap?: (event: ISymbioteEvent) => void;
+    onMagicTap?: (event: ISymbioteEvent) => void;
+    onAccessibilityEscape?: (event: ISymbioteEvent) => void;
+    role?: IAriaProps['role'];
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    ariaLive?: IAriaProps['aria-live'];
+    ariaHidden?: boolean;
+    ariaBusy?: boolean;
+    ariaChecked?: boolean | 'mixed';
+    ariaDisabled?: boolean;
+    ariaExpanded?: boolean;
+    ariaSelected?: boolean;
+    ariaModal?: boolean;
+    ariaValueMax?: number;
+    ariaValueMin?: number;
+    ariaValueNow?: number;
+    ariaValueText?: string;
+    readonly valueChange: EventEmitter<number>;
+    readonly slidingStart: EventEmitter<number>;
+    readonly slidingComplete: EventEmitter<number>;
+    readonly accessibilityAction: EventEmitter<ISymbioteEvent>;
+    protected abstract readonly platform: ISliderPlatform;
+    private readonly changeDetector;
+    private readonly elementRef;
+    private reportedValue;
+    private width;
+    ngOnChanges(): void;
+    protected readonly handleValueChange: (event: ISymbioteEvent) => void;
+    protected readonly handleSlidingStart: (event: ISymbioteEvent) => void;
+    protected readonly handleSlidingComplete: (event: ISymbioteEvent) => void;
+    protected readonly handleAccessibilityAction: (event: ISymbioteEvent) => void;
+    protected readonly handleLayout: (event: ISymbioteEvent) => void;
+    private inputProps;
+    get descriptor(): IDescriptor;
+}