pixelize-native-library 1.0.6

package/lib/module/modules/skeleton/Skeleton.variants.js

@@ -0,0 +1,145 @@
+"use strict";
+
+/**
+ * Skeleton's style + accessibility resolution — the pure functions the component (and its tests)
+ * depend on, plus the themed structural variant resolver.
+ *
+ * The split every sibling module copies (see `Button.variants.ts` / `Avatar.variants.ts`):
+ *  - STRUCTURE (the shape's corner radius) lives in the `createThemedVariants` resolver below —
+ *    static per (brand, mode), registered once via `StyleSheet.create`.
+ *  - SIZE is NOT theme-driven: a skeleton's whole job is standing in for a specific piece of
+ *    content, so `width`/`height` are per-instance numbers the caller supplies (or a per-shape
+ *    fallback), resolved by `resolveSkeletonSize` and applied inline — never a themed variant,
+ *    since there is no closed set of values to register.
+ *  - COLOUR is resolved from the theme's ROLE colours (`resolveSkeletonColors`), never a raw ramp,
+ *    never a hardcoded hex. There is no `tone` prop to widen — a loading placeholder has exactly
+ *    one neutral appearance (same reasoning as `resolveAvatarColors`). `pulse` is `base` composited
+ *    with a fixed-alpha overlay (see `resolveSkeletonColors`), not a second role lookup — two
+ *    arbitrary role rungs are not guaranteed to differ enough to read as a shimmer.
+ *  - ACCESSIBILITY prop derivation is `resolveSkeletonAccessibility`, kept pure so the "decorative
+ *    unless labelled" contract is unit-testable without rendering React Native (same shape as
+ *    `resolveAvatarAccessibility`).
+ *
+ * Free of React and of any lucide import, so the WCAG + behaviour tests import it directly (mocking
+ * only `react-native`'s `StyleSheet`, as `core/style` and every sibling module's tests do).
+ */
+
+import { compositeOver } from "../../theme/tokens/builders/color.js";
+import { createThemedVariants } from "../../core/style/index.js";
+/** Fallback dp size per shape, used whenever the caller gives neither `width` nor `height`. */
+export const SKELETON_DEFAULT_SIZE = {
+  rect: {
+    width: 120,
+    height: 80
+  },
+  circle: {
+    width: 40,
+    height: 40
+  },
+  text: {
+    width: 120,
+    height: 16
+  }
+};
+
+/**
+ * Resolves the box's actual dp size. `circle` is the one shape that cannot take independent
+ * width/height — an unequal pair would render an ellipse under the shared `radii.full` corner
+ * radius, not a circle — so a single given dimension mirrors onto the other rather than the two
+ * silently drifting apart.
+ */
+export function resolveSkeletonSize(shape, width, height) {
+  const fallback = SKELETON_DEFAULT_SIZE[shape];
+  if (shape === "circle") {
+    const diameter = width ?? height ?? fallback.width;
+    return {
+      width: diameter,
+      height: diameter
+    };
+  }
+  return {
+    width: width ?? fallback.width,
+    height: height ?? fallback.height
+  };
+}
+// Fixed-alpha overlay composited onto `base` (Button's `PRESS_SCRIM_DARK`/`LIGHT` precedent for "I
+// need a guaranteed visible delta, not a role lookup"). `fg.default` is dark in light mode and light
+// in dark mode, so compositing it darkens/lightens `base` for free with no `if (dark)` branch. ~30%
+// alpha keeps the composited contrast ratio ≥ `MIN_PULSE_CONTRAST` (see `Skeleton.test.ts`) on every
+// brand × mode, with comfortable headroom above the floor.
+const PULSE_OVERLAY_ALPHA_HEX = "4d"; // 0x4d / 0xff ≈ 30%
+
+/**
+ * Maps the placeholder onto role colours, then derives `pulse` as `base` composited with a small,
+ * fixed-alpha overlay — never a second role lookup. A prior version returned `base: bg.sunken, pulse:
+ * bg.raised`: two role rungs whose luminance gap is whatever the brand's ramp happens to produce, and
+ * an independent re-measurement found that gap collapses to visually-indistinguishable on every
+ * brand × mode — the shimmer was a silent no-op everywhere, not just on one theme. Compositing a
+ * fixed-alpha overlay makes the luminance delta a controlled constant instead of an incidental one,
+ * so it can't collapse regardless of how a brand's `bg.raised`/`bg.sunken` rungs happen to relate.
+ */
+export function resolveSkeletonColors(colors) {
+  const base = colors.bg.sunken;
+  const pulse = compositeOver(`${colors.fg.default}${PULSE_OVERLAY_ALPHA_HEX}`, base);
+  return {
+    base,
+    pulse
+  };
+}
+/**
+ * Derives the accessibility surface once, purely, so the "decorative unless labelled" contract is
+ * testable without a renderer (same shape as `resolveAvatarAccessibility`):
+ *  - no label → the placeholder stands in for content that hasn't rendered yet and carries no
+ *    meaning of its own, so it is hidden from assistive tech (`accessibilityElementsHidden` on
+ *    iOS + `importantForAccessibility="no-hide-descendants"` on Android) rather than read as a
+ *    bare, unexplained box.
+ *  - a label (e.g. `"Loading"`) → exposed as one `"progressbar"`-role element carrying it, with
+ *    `busy: true` (WCAG 1.4.1 — the loading state is announced, not left to be inferred from a box
+ *    appearing on screen).
+ */
+export function resolveSkeletonAccessibility(input) {
+  const hasLabel = input.accessibilityLabel !== undefined && input.accessibilityLabel.length > 0;
+  return {
+    accessible: hasLabel,
+    accessibilityRole: hasLabel ? "progressbar" : undefined,
+    accessibilityLabel: hasLabel ? input.accessibilityLabel : undefined,
+    accessibilityState: hasLabel ? {
+      busy: true
+    } : undefined,
+    accessibilityElementsHidden: !hasLabel,
+    importantForAccessibility: hasLabel ? "auto" : "no-hide-descendants"
+  };
+}
+
+/**
+ * Structural styles only — the shape's corner radius, plus `overflow: "hidden"` so the animated
+ * shimmer overlay (an absolutely-positioned sibling, see `Skeleton.tsx`) clips to it without each
+ * shape recomputing the same radius on that overlay. No colour (state-driven, applied inline over
+ * this), so this compiles once per theme identity via the `WeakMap`-cached themed resolver and
+ * never rebuilds per render.
+ *
+ * Unlike `Button`, there is no focus ring here that needs to escape the bounds, so `overflow:
+ * "hidden"` is safe — nothing else needs to be drawn outside this box.
+ */
+export const skeletonStructure = createThemedVariants(theme => ({
+  base: {
+    overflow: "hidden"
+  },
+  variants: {
+    shape: {
+      rect: {
+        borderRadius: theme.radii.base
+      },
+      circle: {
+        borderRadius: theme.radii.full
+      },
+      text: {
+        borderRadius: theme.radii.sm
+      }
+    }
+  },
+  defaultVariants: {
+    shape: "rect"
+  }
+}));
+//# sourceMappingURL=Skeleton.variants.js.map

package/lib/module/modules/skeleton/Skeleton.variants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["compositeOver","createThemedVariants","SKELETON_DEFAULT_SIZE","rect","width","height","circle","text","resolveSkeletonSize","shape","fallback","diameter","PULSE_OVERLAY_ALPHA_HEX","resolveSkeletonColors","colors","base","bg","sunken","pulse","fg","default","resolveSkeletonAccessibility","input","hasLabel","accessibilityLabel","undefined","length","accessible","accessibilityRole","accessibilityState","busy","accessibilityElementsHidden","importantForAccessibility","skeletonStructure","theme","overflow","variants","borderRadius","radii","full","sm","defaultVariants"],"sourceRoot":"../../../../src","sources":["modules/skeleton/Skeleton.variants.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/modules/skeleton/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+/**
+ * Public surface of `pixelize-native-library/skeleton`. Value exports and type exports are split for
+ * `verbatimModuleSyntax`. The resolvers (`resolveSkeletonSize`, `resolveSkeletonColors`, …) stay
+ * internal — a consumer configures a Skeleton through its props, never by importing its internals.
+ */
+
+export { Skeleton } from "./Skeleton.js";
+//# sourceMappingURL=index.js.map

package/lib/module/modules/skeleton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Skeleton"],"sourceRoot":"../../../../src","sources":["modules/skeleton/index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;;AAEA,SAASA,QAAQ,QAAQ,eAAY","ignoreList":[]}

package/lib/module/modules/slider/MODULE.md

@@ -0,0 +1,95 @@
+# slider/ — a draggable range control, hand-rolled on React Native's own PanResponder
+
+`Slider` is a Wave 3 component: no new npm/Expo dependency (no `@react-native-community/slider`) —
+the drag gesture is built entirely on RN's own `PanResponder`, the same "we own every interaction
+primitive" philosophy `Modal`/`Select` already apply to RN's raw `<Modal>`.
+
+## Files
+
+| File | Role |
+|------|------|
+| `Slider.tsx` | The component. `PanResponder` wiring, layout measurement, accessibility actions. |
+| `Slider.variants.ts` | Pure drag math (`resolveSliderPositionValue`, `snapSliderValue`, `stepSliderValue`, …), colour resolvers, accessibility resolver, and the `createThemedVariants` structural resolvers. No React, no PanResponder. |
+| `index.ts` | Public surface: `Slider`, `SliderProps`, `SliderSize`. |
+| `__tests__/Slider.test.ts` | Pure: WCAG contrast (all brands × modes) + drag-math/step/accessibility contracts. |
+| `__tests__/Slider.render.test.tsx` | Render: layout-driven positioning, the REAL `PanResponder` gesture fired end-to-end, increment/decrement actions, disabled. |
+
+## Props
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `value` | `number` | — | Required. Controlled. |
+| `onValueChange` | `(value: number) => void` | — | Required. Fires on every grant/move/release AND on an increment/decrement action. |
+| `onSlidingComplete` | `(value: number) => void` | — | Fires once, on release or after an increment/decrement action — never on an intermediate move. |
+| `min` / `max` | `number` | `0` / `100` | |
+| `step` | `number` | `1` | Drag-snap AND the increment/decrement amount. |
+| `disabled` | `boolean` | `false` | Blocks the gesture and the accessibility actions; dims (opacity 0.5). |
+| `size` | `sm \| md` | `md` | Closed union — track height + thumb diameter. |
+| `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once. No `width`/`fullWidth` prop — the row stretches to its container by RN's default `alignItems: stretch`, same as `ProgressBar`. |
+| `accessibilityLabel` | `string` | — | **Required** — the control structurally never renders visible text, so this is the only accessible name a screen reader has (mirrors `Switch`'s and `Button`'s icon-only contract). |
+| `testID` | `string` | — | Also stamps `${testID}-fill` and `${testID}-thumb`. |
+
+## Two design choices (spec left these open — documented here)
+
+1. **`PanResponder` is wired on the WHOLE TRACK ROW, not just the thumb.** A thin 4–6dp visual
+   track/thumb would be a poor mobile drag target even before the 44dp floor; a full-width row is
+   both a much larger target AND lets a touch anywhere jump the thumb there directly (the usual
+   native slider affordance). `hitSlop` then only needs to grow the SHORT axis to 44dp — the long
+   axis already spans the component's width.
+2. **Position reads `evt.nativeEvent.locationX`, not `gestureState.dx`.** `locationX` is the touch's
+   position relative to the row that received it — an ABSOLUTE position with no drift and no
+   dependency on `PanResponder`'s internal touch-history accumulation. `gestureState.dx` accumulates
+   a RELATIVE delta since the gesture started, which is the wrong model for "the thumb should always
+   sit under the finger" (it's the right model for e.g. a swipe-to-dismiss). `onPanResponderTerminationRequest`
+   returns `false` so a parent `ScrollView` can't steal the responder mid-drag.
+
+## Accessibility contract (WCAG)
+
+- **2.5.7 (dragging movements)** — `accessibilityRole="adjustable"` with `accessibilityActions`
+  declaring `increment`/`decrement` and `onAccessibilityAction` adjusting `value` by `step`, clamped.
+  iOS's `adjustable` trait already offers these via the two-finger swipe gesture without the actions
+  declared; Android TalkBack has no native "adjustable" gesture and only surfaces custom actions that
+  are declared. Both fire `onSlidingComplete` (mirrors a drag's release), never left silent.
+- **2.5.5 / 2.5.8 (target size)** — the row's rendered height is `thumbSize` (16sm/20md);
+  `SLIDER_SIZES[size].hitSlop`, applied as the row's `hitSlop`, expands it to the 44dp floor —
+  ACHIEVED via `hitSlop` on the actual responder node, not just arithmetic (`Slider.test.ts`).
+- **1.4.11 (non-text contrast)** — measured, not assumed, for all 8 brands × both modes
+  (`Slider.test.ts`):
+  - Fill vs track: `accent.text` (NOT `accent.solid` — measured as low as ~1.6:1 against `bg.sunken`
+    on rosewood light, the same class of gap `ProgressBar` found) clears ≥ 4.4:1 against `bg.sunken`.
+  - Thumb ring (`border.interactive`) vs the RESTING track: ≥ 3.05:1 worst case — this is the
+    boundary that rescues the thumb's own fill (`bg.canvas`), which is as low as ~1:1 against
+    `bg.sunken` on some brands (they're near-identical there).
+  - Thumb fill (`bg.canvas`) vs the ACCENT fill: ≥ 4.6:1 worst case — here the ring alone would be as
+    low as ~1:1 against a saturated accent on several brands, so the much larger fill area is what
+    actually carries the boundary, not the 2dp ring.
+- **2.3.3 (reduced motion)** — N/A. No animation: the thumb's position is a direct function of
+  `value`, never an eased/animated transition.
+- `accessibilityValue={{ min, max, now }}` — `now` is clamped onto `[min, max]` even if a caller
+  passes an out-of-range `value`, so a screen reader never announces something the track can't render.
+
+## Patterns
+
+1. **Structure vs colour split**, same as every sibling: `createThemedVariants` for row/track/thumb
+   dimensions (registered once per theme); colour resolved from ROLE tokens
+   (`resolveSliderTrackColors`/`resolveSliderThumbColors`), applied inline.
+2. **Pure, testable drag math** (`Slider.variants.ts`) — `resolveSliderPositionValue` (touch → value),
+   `snapSliderValue`, `sliderValueToFraction` (value → render position), `stepSliderValue` — none of
+   it depends on React Native, so `Slider.test.ts` exercises real edge cases (unmeasured track,
+   `max ≤ min`, `NaN`, non-positive `step`) without a renderer.
+3. **A "latest props" ref** (`live`), reassigned in the render body (not an effect). The
+   `PanResponder` instance is created exactly once (`useState` lazy init) so a gesture in progress
+   is never disrupted by a re-render, while its callbacks still always read the current
+   value/bounds/disabled/measured-width.
+4. **The render test fires the REAL `PanResponder`**, not a stub: `onResponderGrant`/`Move`/`Release`
+   are RN's actual implementation, which internally reads `event.touchHistory` for its own
+   gesture-negotiation bookkeeping (independent of what this component's callbacks read). The test's
+   `gestureEvent()` helper fabricates a minimal-but-valid single-touch `touchHistory`.
+
+## Known gaps
+
+None.
+
+## Performance
+
+Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). `applyTouch`/`handleLayout`/`handleAccessibilityAction` are only wired to the root `View`'s host props, never handed to a library child component — nothing to memoize.

package/lib/module/modules/slider/Slider.js

@@ -0,0 +1,183 @@
+"use strict";
+
+/**
+ * Slider — a draggable range control, hand-rolled entirely on React Native's own `PanResponder`
+ * (Wave 3's standing rule: no new npm/Expo dependency — the same "we own every interaction
+ * primitive" philosophy as `Modal`/`Select` owning RN's raw `<Modal>`).
+ *
+ * Two design choices worth documenting up front:
+ *
+ *  1. `PanResponder` is wired on the WHOLE TRACK ROW, not just the visual thumb. A thin 4–6dp thumb
+ *     would be a poor mobile drag target even before the 44dp floor; a full-width row is both a much
+ *     larger target AND lets a touch anywhere on the track jump the thumb there directly (the usual
+ *     native slider affordance). The row's `hitSlop` then only needs to grow the SHORT axis up to
+ *     44dp — the long axis already spans the component's full width.
+ *  2. Position is read from `evt.nativeEvent.locationX` (the touch's position relative to the row
+ *     that received it) on every grant/move, NOT from `gestureState.dx` (PanResponder's accumulated
+ *     delta since the gesture started). `locationX` gives an ABSOLUTE position with no drift and no
+ *     dependency on the responder's internal touch-history bookkeeping — exactly what a track-based
+ *     slider needs (the thumb should always sit under the finger, not accumulate a relative offset).
+ */
+
+import { memo, useRef, useState } from "react";
+import { PanResponder, StyleSheet, View } from "react-native";
+import { useTheme } from "../../theme/index.js";
+import { resolveSliderAccessibility, resolveSliderPositionValue, resolveSliderThumbColors, resolveSliderTrackColors, sliderFillStructure, sliderRowStructure, SLIDER_HIT_SLOP, SLIDER_SIZES, sliderThumbStructure, sliderTrackStructure, sliderValueToFraction, stepSliderValue } from "./Slider.variants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Slider = /*#__PURE__*/memo(function Slider(props) {
+  const {
+    value,
+    onValueChange,
+    onSlidingComplete,
+    min = 0,
+    max = 100,
+    step = 1,
+    disabled = false,
+    size = "md",
+    style,
+    accessibilityLabel,
+    testID
+  } = props;
+  const theme = useTheme();
+  const [trackWidth, setTrackWidth] = useState(0);
+
+  // The PanResponder callbacks below are created ONCE (see `useState` lazy init further down) and
+  // must never close over a stale render's props. Reassigning a ref's `.current` in the render body
+  // (not an effect) is synchronous and triggers no re-render, so every gesture callback reads the
+  // latest value/bounds/disabled/trackWidth without the responder itself being recreated per render.
+  const live = useRef({
+    value,
+    min,
+    max,
+    step,
+    disabled,
+    trackWidth,
+    onValueChange,
+    onSlidingComplete
+  });
+  live.current = {
+    value,
+    min,
+    max,
+    step,
+    disabled,
+    trackWidth,
+    onValueChange,
+    onSlidingComplete
+  };
+  const spec = SLIDER_SIZES[size];
+  const trackColors = resolveSliderTrackColors(theme.colors);
+  const thumbColors = resolveSliderThumbColors(theme.colors);
+  const a11y = resolveSliderAccessibility({
+    value,
+    min,
+    max,
+    disabled
+  });
+  const fraction = sliderValueToFraction(value, min, max);
+
+  /** Converts one touch event into a value and reports it. `undefined` when disabled/unmeasured. */
+  const applyTouch = event => {
+    const state = live.current;
+    if (state.disabled || state.trackWidth <= 0) return undefined;
+    const next = resolveSliderPositionValue({
+      locationX: event.nativeEvent.locationX,
+      trackWidth: state.trackWidth,
+      min: state.min,
+      max: state.max,
+      step: state.step
+    });
+    state.onValueChange(next);
+    return next;
+  };
+  const [panResponder] = useState(() => PanResponder.create({
+    onStartShouldSetPanResponder: () => !live.current.disabled,
+    onMoveShouldSetPanResponder: () => !live.current.disabled,
+    // A parent ScrollView must not be able to yank the responder away mid-drag.
+    onPanResponderTerminationRequest: () => false,
+    onPanResponderGrant: event => {
+      applyTouch(event);
+    },
+    onPanResponderMove: event => {
+      applyTouch(event);
+    },
+    onPanResponderRelease: event => {
+      const next = applyTouch(event);
+      if (next !== undefined) live.current.onSlidingComplete?.(next);
+    }
+  }));
+  const handleLayout = event => {
+    setTrackWidth(event.nativeEvent.layout.width);
+  };
+
+  // WCAG 2.5.7 — the non-drag alternative. iOS's `adjustable` trait already offers increment/decrement
+  // via the two-finger swipe gesture; Android TalkBack needs them declared as `accessibilityActions`
+  // (below) to surface them at all.
+  const handleAccessibilityAction = event => {
+    const state = live.current;
+    if (state.disabled) return;
+    const {
+      actionName
+    } = event.nativeEvent;
+    if (actionName !== "increment" && actionName !== "decrement") return;
+    const next = stepSliderValue(state.value, actionName === "increment" ? 1 : -1, state.min, state.max, state.step);
+    state.onValueChange(next);
+    state.onSlidingComplete?.(next);
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    accessible: true,
+    accessibilityRole: a11y.accessibilityRole,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityValue: a11y.accessibilityValue,
+    accessibilityState: a11y.accessibilityState,
+    accessibilityActions: a11y.accessibilityActions,
+    onAccessibilityAction: handleAccessibilityAction,
+    onLayout: handleLayout,
+    onStartShouldSetResponder: panResponder.panHandlers.onStartShouldSetResponder,
+    onMoveShouldSetResponder: panResponder.panHandlers.onMoveShouldSetResponder,
+    onResponderGrant: panResponder.panHandlers.onResponderGrant,
+    onResponderMove: panResponder.panHandlers.onResponderMove,
+    onResponderRelease: panResponder.panHandlers.onResponderRelease,
+    onResponderTerminate: panResponder.panHandlers.onResponderTerminate,
+    onResponderTerminationRequest: panResponder.panHandlers.onResponderTerminationRequest,
+    hitSlop: SLIDER_HIT_SLOP[size],
+    style: [sliderRowStructure(theme, {
+      size
+    }), disabled && styles.dimmed, style],
+    children: [/*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      style: [sliderTrackStructure(theme, {
+        size
+      }), {
+        backgroundColor: trackColors.track
+      }],
+      children: /*#__PURE__*/_jsx(View, {
+        testID: testID === undefined ? undefined : `${testID}-fill`,
+        style: [sliderFillStructure(theme), {
+          width: `${fraction * 100}%`,
+          backgroundColor: trackColors.fill
+        }]
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      testID: testID === undefined ? undefined : `${testID}-thumb`,
+      style: [sliderThumbStructure(theme, {
+        size
+      }), {
+        left: `${fraction * 100}%`,
+        marginLeft: -(spec.thumbSize / 2),
+        backgroundColor: thumbColors.fill,
+        borderColor: thumbColors.border
+      }]
+    })]
+  });
+});
+const styles = StyleSheet.create({
+  // A disabled control is exempt from the contrast minimum (WCAG 1.4.3), so a uniform dim is correct
+  // — the same treatment `Button`/`Checkbox`/`NumberInput` use.
+  dimmed: {
+    opacity: 0.5
+  }
+});
+//# sourceMappingURL=Slider.js.map

package/lib/module/modules/slider/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["memo","useRef","useState","PanResponder","StyleSheet","View","useTheme","resolveSliderAccessibility","resolveSliderPositionValue","resolveSliderThumbColors","resolveSliderTrackColors","sliderFillStructure","sliderRowStructure","SLIDER_HIT_SLOP","SLIDER_SIZES","sliderThumbStructure","sliderTrackStructure","sliderValueToFraction","stepSliderValue","jsx","_jsx","jsxs","_jsxs","Slider","props","value","onValueChange","onSlidingComplete","min","max","step","disabled","size","style","accessibilityLabel","testID","theme","trackWidth","setTrackWidth","live","current","spec","trackColors","colors","thumbColors","a11y","fraction","applyTouch","event","state","undefined","next","locationX","nativeEvent","panResponder","create","onStartShouldSetPanResponder","onMoveShouldSetPanResponder","onPanResponderTerminationRequest","onPanResponderGrant","onPanResponderMove","onPanResponderRelease","handleLayout","layout","width","handleAccessibilityAction","actionName","accessible","accessibilityRole","accessibilityValue","accessibilityState","accessibilityActions","onAccessibilityAction","onLayout","onStartShouldSetResponder","panHandlers","onMoveShouldSetResponder","onResponderGrant","onResponderMove","onResponderRelease","onResponderTerminate","onResponderTerminationRequest","hitSlop","styles","dimmed","children","pointerEvents","backgroundColor","track","fill","left","marginLeft","thumbSize","borderColor","border","opacity"],"sourceRoot":"../../../../src","sources":["modules/slider/Slider.tsx"],"mappings":"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","ignoreList":[]}