@cdx-ui/primitives 0.0.1-beta.115 → 0.0.1-beta.117

package/lib/typescript/slider/SliderRoot.d.ts

@@ -0,0 +1,7 @@
+import { View } from 'react-native';
+import type { InterfaceSliderProps } from './types';
+export interface SliderRootProps extends InterfaceSliderProps {
+    readonly asChild?: boolean;
+}
+export declare const SliderRoot: import("react").ForwardRefExoticComponent<SliderRootProps & import("react").RefAttributes<View>>;
+//# sourceMappingURL=SliderRoot.d.ts.map

package/lib/typescript/slider/SliderRoot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderRoot.d.ts","sourceRoot":"","sources":["../../../src/slider/SliderRoot.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,IAAI,EAIL,MAAM,cAAc,CAAC;AAMtB,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAKpD,MAAM,WAAW,eAAgB,SAAQ,oBAAoB;IAC3D,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,UAAU,kGAiPtB,CAAC"}

package/lib/typescript/slider/SliderThumb.d.ts

@@ -0,0 +1,6 @@
+import { View } from 'react-native';
+import type { InterfaceSliderThumbProps } from './types';
+export interface SliderThumbProps extends InterfaceSliderThumbProps {
+}
+export declare const SliderThumb: import("react").ForwardRefExoticComponent<SliderThumbProps & import("react").RefAttributes<View>>;
+//# sourceMappingURL=SliderThumb.d.ts.map

package/lib/typescript/slider/SliderThumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderThumb.d.ts","sourceRoot":"","sources":["../../../src/slider/SliderThumb.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,IAAI,EAKL,MAAM,cAAc,CAAC;AAQtB,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AAIzD,MAAM,WAAW,gBAAiB,SAAQ,yBAAyB;CAAG;AAEtE,eAAO,MAAM,WAAW,mGAiPvB,CAAC"}

package/lib/typescript/slider/context.d.ts

@@ -0,0 +1,37 @@
+import type { RefObject } from 'react';
+import type { View } from 'react-native';
+import type { SliderOrientation } from './types';
+export interface SliderTrackLayout {
+    readonly width: number;
+    readonly height: number;
+    readonly x: number;
+    readonly y: number;
+}
+export interface SliderContextValue {
+    readonly value: number;
+    readonly min: number;
+    readonly max: number;
+    readonly step: number;
+    readonly percent: number;
+    readonly orientation: SliderOrientation;
+    readonly isDisabled: boolean;
+    readonly isDragging: boolean;
+    readonly isHovered: boolean;
+    readonly isFocused: boolean;
+    readonly trackLayout: SliderTrackLayout | null;
+    readonly thumbSize: number;
+    readonly setValue: (value: number, complete?: boolean) => void;
+    readonly setValueFromRatio: (ratio: number, complete?: boolean) => void;
+    readonly setTrackLayout: (layout: SliderTrackLayout) => void;
+    readonly setThumbSize: (size: number) => void;
+    readonly setIsDragging: (dragging: boolean) => void;
+    readonly setIsHovered: (hovered: boolean) => void;
+    readonly setIsFocused: (focused: boolean) => void;
+    readonly getValueLabel: () => string;
+    readonly thumbRef: RefObject<View | null>;
+}
+export declare const SliderProvider: import("react").FunctionComponent<{
+    children: import("react").ReactNode;
+    value: SliderContextValue;
+}>, useSliderContext: () => SliderContextValue;
+//# sourceMappingURL=context.d.ts.map

package/lib/typescript/slider/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/slider/context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEjD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,WAAW,EAAE,iBAAiB,CAAC;IACxC,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,WAAW,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC/C,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/D,QAAQ,CAAC,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACxE,QAAQ,CAAC,cAAc,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,CAAC,aAAa,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACpD,QAAQ,CAAC,YAAY,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,YAAY,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,aAAa,EAAE,MAAM,MAAM,CAAC;IACrC,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;CAC3C;AAED,eAAO,MAAO,cAAc;;;IAAE,gBAAgB,0BACM,CAAC"}

package/lib/typescript/slider/index.d.ts

@@ -0,0 +1,8 @@
+export type { ISliderProps, ISliderRailProps, ISliderThumbProps, SliderAccessibilityValue, SliderOrientation, } from './types';
+export type { SliderContextValue, SliderTrackLayout } from './context';
+export { useSliderContext } from './context';
+export { SliderRoot, type SliderRootProps } from './SliderRoot';
+export { SliderRail, type SliderRailProps } from './SliderRail';
+export { SliderThumb, type SliderThumbProps } from './SliderThumb';
+export { getMarkerPositionStyle, getMarkerStepValues, percentToFillExtent, SLIDER_MARKER_SIZE, valueToPercent, } from './utils';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/slider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/slider/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,wBAAwB,EACxB,iBAAiB,GAClB,MAAM,SAAS,CAAC;AACjB,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AACvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EACL,sBAAsB,EACtB,mBAAmB,EACnB,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,GACf,MAAM,SAAS,CAAC"}

package/lib/typescript/slider/types.d.ts

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+import type { PressableProps, ViewProps } from 'react-native';
+export type SliderOrientation = 'horizontal' | 'vertical';
+export type SliderAccessibilityValue = NonNullable<ViewProps['accessibilityValue']>;
+export interface InterfaceSliderProps extends Omit<ViewProps, 'children' | 'accessibilityValue'> {
+    readonly value?: number;
+    readonly defaultValue?: number;
+    readonly onChange?: (value: number) => void;
+    readonly onChangeComplete?: (value: number) => void;
+    readonly min?: number;
+    readonly max?: number;
+    readonly step?: number;
+    readonly isDisabled?: boolean;
+    readonly orientation?: SliderOrientation;
+    /**
+     * Screen reader label when there is no visible label.
+     */
+    readonly accessibilityLabel?: string;
+    /**
+     * Screen reader value for the slider. Merged with derived `min`, `max`, `now`, and formatted
+     * `text` when fields are omitted. `text` overrides the numeric announcement when set.
+     */
+    readonly accessibilityValue?: SliderAccessibilityValue;
+    readonly children?: ReactNode;
+}
+export type ISliderProps = InterfaceSliderProps;
+export interface InterfaceSliderRailProps extends ViewProps {
+    readonly asChild?: boolean;
+    readonly children?: ReactNode;
+}
+export type ISliderRailProps = InterfaceSliderRailProps;
+export interface InterfaceSliderThumbProps extends PressableProps {
+    readonly asChild?: boolean;
+    readonly children?: ReactNode;
+}
+export type ISliderThumbProps = InterfaceSliderThumbProps;
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/slider/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/slider/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9D,MAAM,MAAM,iBAAiB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE1D,MAAM,MAAM,wBAAwB,GAAG,WAAW,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAC,CAAC;AAEpF,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,oBAAoB,CAAC;IAC9F,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,QAAQ,CAAC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,WAAW,CAAC,EAAE,iBAAiB,CAAC;IACzC;;OAEG;IACH,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IACrC;;;OAGG;IACH,QAAQ,CAAC,kBAAkB,CAAC,EAAE,wBAAwB,CAAC;IACvD,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;CAC/B;AAED,MAAM,MAAM,YAAY,GAAG,oBAAoB,CAAC;AAEhD,MAAM,WAAW,wBAAyB,SAAQ,SAAS;IACzD,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;CAC/B;AAED,MAAM,MAAM,gBAAgB,GAAG,wBAAwB,CAAC;AAExD,MAAM,WAAW,yBAA0B,SAAQ,cAAc;IAC/D,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;CAC/B;AAED,MAAM,MAAM,iBAAiB,GAAG,yBAAyB,CAAC"}

package/lib/typescript/slider/useSliderPointer.d.ts

@@ -0,0 +1,23 @@
+import type { SliderTrackLayout } from './context';
+import type { SliderOrientation } from './types';
+export declare function getPointerCoords(nativeEvent: {
+    pageX?: number;
+    pageY?: number;
+    clientX?: number;
+    clientY?: number;
+}): {
+    x: number;
+    y: number;
+};
+export declare function getRatioFromPagePoint(pageX: number, pageY: number, trackLayout: SliderTrackLayout | null, orientation: SliderOrientation, thumbSize: number): number;
+export declare function useWebSliderDrag({ isDisabled, setIsDragging, setValueFromRatio, trackLayout, orientation, thumbSize, }: {
+    isDisabled: boolean;
+    setIsDragging: (dragging: boolean) => void;
+    setValueFromRatio: (ratio: number, complete?: boolean) => void;
+    trackLayout: SliderTrackLayout | null;
+    orientation: SliderOrientation;
+    thumbSize: number;
+}): {
+    startDrag: (pageX: number, pageY: number, anchorRatio?: number, trackLayoutOverride?: SliderTrackLayout) => void;
+};
+//# sourceMappingURL=useSliderPointer.d.ts.map

package/lib/typescript/slider/useSliderPointer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSliderPointer.d.ts","sourceRoot":"","sources":["../../../src/slider/useSliderPointer.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AACnD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAGjD,wBAAgB,gBAAgB,CAAC,WAAW,EAAE;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAS3B;AAED,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,WAAW,EAAE,iBAAiB,GAAG,IAAI,EACrC,WAAW,EAAE,iBAAiB,EAC9B,SAAS,EAAE,MAAM,GAChB,MAAM,CAUR;AAQD,wBAAgB,gBAAgB,CAAC,EAC/B,UAAU,EACV,aAAa,EACb,iBAAiB,EACjB,WAAW,EACX,WAAW,EACX,SAAS,GACV,EAAE;IACD,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/D,WAAW,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACtC,WAAW,EAAE,iBAAiB,CAAC;IAC/B,SAAS,EAAE,MAAM,CAAC;CACnB;uBAyBY,MAAM,SACN,MAAM,gBACC,MAAM,wBACE,iBAAiB;EAoE5C"}

package/lib/typescript/slider/utils.d.ts

@@ -0,0 +1,23 @@
+import type { ViewStyle } from 'react-native';
+import type { SliderTrackLayout } from './context';
+import type { SliderOrientation } from './types';
+export declare const SLIDER_MARKER_SIZE = 3;
+export declare function clamp(value: number, min: number, max: number): number;
+export declare function getThumbTravel(trackSize: number, _thumbSize: number): number;
+/** Thumb leading-edge offset along the track axis (center-based). */
+export declare function percentToThumbOffset(percent: number, trackSize: number, thumbSize: number): number;
+/** Filled track extent to the thumb center. */
+export declare function percentToFillExtent(percent: number, trackSize: number, _thumbSize: number): number;
+/** Map a pointer coordinate on the track axis to a 0–1 ratio. */
+export declare function pointerCoordToRatio(pointerCoord: number, trackStart: number, trackSize: number, _thumbSize: number): number;
+/** Vertical slider: bottom = min (0), top = max (1). */
+export declare function pointerCoordToVerticalRatio(pointerCoord: number, trackStart: number, trackSize: number, _thumbSize: number): number;
+export declare function snapToStep(value: number, min: number, max: number, step: number): number;
+export declare function valueToPercent(value: number, min: number, max: number): number;
+export declare function percentToValue(percent: number, min: number, max: number, step: number): number;
+export declare function formatSliderValue(value: number): string;
+export declare function getMarkerStepValues(min: number, max: number, step: number): number[];
+/** Marker leading-edge offset (center-aligned to the thumb coordinate system). */
+export declare function percentToMarkerCenterOffset(percent: number, trackSize: number, markerSize?: number): number;
+export declare function getMarkerPositionStyle(percent: number, orientation: SliderOrientation, trackLayout: SliderTrackLayout | null, _thumbSize: number, markerSize?: number): ViewStyle;
+//# sourceMappingURL=utils.d.ts.map

package/lib/typescript/slider/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/slider/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AACnD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAQjD,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAEpC,wBAAgB,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAErE;AAED,wBAAgB,cAAc,CAAC,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,CAE5E;AAED,qEAAqE;AACrE,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,MAAM,EACjB,SAAS,EAAE,MAAM,GAChB,MAAM,CAGR;AAED,+CAA+C;AAC/C,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,MAAM,GACjB,MAAM,CAGR;AAED,iEAAiE;AACjE,wBAAgB,mBAAmB,CACjC,YAAY,EAAE,MAAM,EACpB,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,MAAM,GACjB,MAAM,CAKR;AAED,wDAAwD;AACxD,wBAAgB,2BAA2B,CACzC,YAAY,EAAE,MAAM,EACpB,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,MAAM,GACjB,MAAM,CAKR;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAMxF;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAK9E;AAED,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAG9F;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEvD;AAED,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,CAcpF;AAaD,kFAAkF;AAClF,wBAAgB,2BAA2B,CACzC,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,MAAM,EACjB,UAAU,SAAqB,GAC9B,MAAM,CAGR;AAED,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,MAAM,EACf,WAAW,EAAE,iBAAiB,EAC9B,WAAW,EAAE,iBAAiB,GAAG,IAAI,EACrC,UAAU,EAAE,MAAM,EAClB,UAAU,SAAqB,GAC9B,SAAS,CA+CX"}

package/lib/typescript/utils/assignRef.d.ts

@@ -0,0 +1,3 @@
+import type { ForwardedRef } from 'react';
+export declare function assignRef<T>(ref: ForwardedRef<T>, value: T | null): void;
+//# sourceMappingURL=assignRef.d.ts.map

package/lib/typescript/utils/assignRef.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"assignRef.d.ts","sourceRoot":"","sources":["../../../src/utils/assignRef.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,wBAAgB,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,IAAI,QAQjE"}

package/lib/typescript/utils/createPortal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createPortal.d.ts","sourceRoot":"","sources":["../../../src/utils/createPortal.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,cAAc,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,EAAE,OAAO,KAAK,KAAK,CAAC,WAAW,CAAC;AAE3F;;;;;GAKG;AACH,eAAO,MAAM,cAAc,EAAE,cAAc,GAAG,SAQ1C,CAAC"}
+{"version":3,"file":"createPortal.d.ts","sourceRoot":"","sources":["../../../src/utils/createPortal.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,cAAc,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,EAAE,OAAO,KAAK,KAAK,CAAC,WAAW,CAAC;AAE3F;;;;;GAKG;AACH,eAAO,MAAM,cAAc,EAAE,cAAc,GAAG,SAU1C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/primitives",
-  "version": "0.0.1-beta.115",
+  "version": "0.0.1-beta.117",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -60,7 +60,7 @@
     "@react-stately/checkbox": "3.7.4",
     "@react-stately/radio": "3.12.0",
     "@react-stately/toggle": "3.9.4",
-    "@cdx-ui/utils": "0.0.1-beta.115"
+    "@cdx-ui/utils": "0.0.1-beta.117"
   },
   "devDependencies": {
     "@types/react": "19.1.17",

package/src/index.ts

@@ -11,6 +11,7 @@ export * from './otp-input';
 export * from './link';
 export * from './list-item';
 export { type EdgeInsets, OverlayInsetsProvider } from './overlay';
+export { useAnchorPosition, type AnchorLayout } from './overlay';
 export * from './select';
 export * from './switch';
 export * from './tile';
@@ -18,6 +19,7 @@ export * from './toast';
 export * from './portal';
 export * from './progress-bar';
 export * from './radio';
+export * from './slider';
 export type { InteractionState } from './types';
 export { FormControlContext, useFormControlContext } from '@cdx-ui/utils';
 export { dataAttributes, mergeDataAttributes } from './utils/dataAttributes';
@@ -26,4 +28,6 @@ export {
   mergeDomDataAttributes,
   type DomDataAttributeValue,
 } from './utils/domDataAttributes';
+export { assignRef } from './utils/assignRef';
+export { createPortalFn } from './utils/createPortal';
 export { Slot } from './slot';

package/src/overlay/useAnchorPosition.ts

@@ -16,32 +16,79 @@ function measureWeb(element: any): AnchorLayout {
   return { x: rect.left, y: rect.top, width: rect.width, height: rect.height };
 }
 
+function setLayoutIfChanged(
+  setLayout: React.Dispatch<React.SetStateAction<AnchorLayout | null>>,
+  next: AnchorLayout,
+) {
+  setLayout((prev) => {
+    if (
+      prev?.x === next.x &&
+      prev.y === next.y &&
+      prev.width === next.width &&
+      prev.height === next.height
+    ) {
+      return prev;
+    }
+    return next;
+  });
+}
+
+export interface UseAnchorPositionOptions {
+  /** Re-run layout measurement when this value changes (e.g. slider value percent). */
+  remeasureKey?: unknown;
+  /** Poll anchor position each animation frame while open (for anchors that move). */
+  trackWhileOpen?: boolean;
+}
+
 /**
  * Measures an anchor element's position and size, re-measuring on scroll/resize
  * (web) so a positioned overlay can track its anchor across layout changes.
  *
  * Returns `null` until the first measurement completes.
  */
-export function useAnchorPosition(anchorRef: RefObject<any>, open: boolean): AnchorLayout | null {
+export function useAnchorPosition(
+  anchorRef: RefObject<any>,
+  open: boolean,
+  options?: UseAnchorPositionOptions,
+): AnchorLayout | null {
+  const { remeasureKey, trackWhileOpen = false } = options ?? {};
   const [layout, setLayout] = useState<AnchorLayout | null>(null);
 
+  const measureAnchor = () => {
+    const anchor = anchorRef.current;
+    if (!anchor) {
+      return;
+    }
+
+    if (Platform.OS === 'web') {
+      setLayoutIfChanged(setLayout, measureWeb(anchor));
+      return;
+    }
+
+    anchor.measureInWindow((x: number, y: number, width: number, height: number) => {
+      setLayoutIfChanged(setLayout, { x, y, width, height });
+    });
+  };
+
   useIsomorphicLayoutEffect(() => {
     if (!open) {
       setLayout(null);
       return;
     }
 
-    const anchor = anchorRef.current;
-    if (!anchor) return;
-
     let cancelled = false;
 
     if (Platform.OS === 'web') {
-      setLayout(measureWeb(anchor));
+      measureAnchor();
     } else {
+      const anchor = anchorRef.current;
+      if (!anchor) {
+        return;
+      }
+
       anchor.measureInWindow((x: number, y: number, width: number, height: number) => {
         if (!cancelled) {
-          setLayout({ x, y, width, height });
+          setLayoutIfChanged(setLayout, { x, y, width, height });
         }
       });
     }
@@ -49,15 +96,36 @@ export function useAnchorPosition(anchorRef: RefObject<any>, open: boolean): Anc
     return () => {
       cancelled = true;
     };
-  }, [open, anchorRef]);
+  }, [open, anchorRef, remeasureKey]);
 
   useEffect(() => {
-    if (!open || Platform.OS !== 'web') return;
+    if (!open || !trackWhileOpen) {
+      return;
+    }
+
+    let frameId = 0;
+    const tick = () => {
+      measureAnchor();
+      frameId = requestAnimationFrame(tick);
+    };
+    frameId = requestAnimationFrame(tick);
+
+    return () => {
+      cancelAnimationFrame(frameId);
+    };
+  }, [open, anchorRef, remeasureKey, trackWhileOpen]);
+
+  useEffect(() => {
+    if (!open || Platform.OS !== 'web' || trackWhileOpen) {
+      return;
+    }
 
     const anchor = anchorRef.current;
-    if (!anchor) return;
+    if (!anchor) {
+      return;
+    }
 
-    const update = () => setLayout(measureWeb(anchor));
+    const update = () => setLayoutIfChanged(setLayout, measureWeb(anchor));
 
     window.addEventListener('scroll', update, true);
     window.addEventListener('resize', update);
@@ -66,7 +134,7 @@ export function useAnchorPosition(anchorRef: RefObject<any>, open: boolean): Anc
       window.removeEventListener('scroll', update, true);
       window.removeEventListener('resize', update);
     };
-  }, [open, anchorRef]);
+  }, [open, anchorRef, remeasureKey, trackWhileOpen]);
 
   return layout;
 }

package/src/slider/SliderRail.tsx

@@ -0,0 +1,143 @@
+import { forwardRef, useCallback, useRef } from 'react';
+import {
+  Platform,
+  Pressable,
+  StyleSheet,
+  View,
+  type GestureResponderEvent,
+  type LayoutChangeEvent,
+  type PressableProps,
+} from 'react-native';
+import { Slot } from '../slot';
+import { assignRef } from '../utils/assignRef';
+import { dataAttributes } from '../utils/dataAttributes';
+import { useSliderContext } from './context';
+import type { InterfaceSliderRailProps } from './types';
+import { getPointerCoords, getRatioFromPagePoint, useWebSliderDrag } from './useSliderPointer';
+
+export interface SliderRailProps extends InterfaceSliderRailProps {}
+
+export const SliderRail = forwardRef<View, SliderRailProps>(
+  ({ asChild, style, onLayout, children, ...props }, ref) => {
+    const {
+      orientation,
+      isDisabled,
+      isDragging,
+      trackLayout,
+      thumbSize,
+      setValueFromRatio,
+      setTrackLayout,
+      setIsDragging,
+    } = useSliderContext();
+
+    const railRef = useRef<View>(null);
+
+    const measureRail = useCallback(() => {
+      const node = railRef.current;
+      if (!node?.measureInWindow) {
+        return;
+      }
+      node.measureInWindow((x, y, width, height) => {
+        setTrackLayout({ x, y, width, height });
+      });
+    }, [setTrackLayout]);
+
+    const handleLayout = useCallback(
+      (event: LayoutChangeEvent) => {
+        measureRail();
+        onLayout?.(event);
+      },
+      [measureRail, onLayout],
+    );
+
+    const { startDrag } = useWebSliderDrag({
+      isDisabled,
+      setIsDragging,
+      setValueFromRatio,
+      trackLayout,
+      orientation,
+      thumbSize,
+    });
+
+    const updateFromEvent = useCallback(
+      (event: GestureResponderEvent) => {
+        if (isDisabled) {
+          return;
+        }
+        const { x, y } = getPointerCoords(event.nativeEvent);
+        setValueFromRatio(getRatioFromPagePoint(x, y, trackLayout, orientation, thumbSize), true);
+      },
+      [isDisabled, orientation, setValueFromRatio, thumbSize, trackLayout],
+    );
+
+    const handlePress = useCallback(
+      (event: GestureResponderEvent) => {
+        updateFromEvent(event);
+      },
+      [updateFromEvent],
+    );
+
+    const handlePointerDown = useCallback(
+      (event: GestureResponderEvent) => {
+        if (Platform.OS !== 'web' || isDisabled) {
+          return;
+        }
+        event.preventDefault();
+
+        const node = railRef.current as unknown as HTMLElement | null;
+        if (!node) return;
+        const rect = node.getBoundingClientRect();
+        const freshLayout = { x: rect.left, y: rect.top, width: rect.width, height: rect.height };
+        setTrackLayout(freshLayout);
+
+        const { x, y } = getPointerCoords(event.nativeEvent);
+        startDrag(x, y, undefined, freshLayout);
+      },
+      [isDisabled, setTrackLayout, startDrag],
+    );
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <Pressable
+        accessibilityRole="none"
+        accessible={false}
+        disabled={isDisabled}
+        onPress={Platform.OS === 'web' ? undefined : handlePress}
+        onPointerDown={
+          Platform.OS === 'web'
+            ? (handlePointerDown as unknown as PressableProps['onPointerDown'])
+            : undefined
+        }
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+        aria-hidden
+        tabIndex={-1}
+        style={styles.railHitArea}
+      >
+        <Comp
+          ref={(node: View | null) => {
+            railRef.current = node;
+            assignRef(ref, node);
+          }}
+          {...props}
+          onLayout={handleLayout}
+          style={style}
+          {...dataAttributes({ slot: 'slider-rail', dragging: isDragging })}
+        >
+          {children}
+        </Comp>
+      </Pressable>
+    );
+  },
+);
+
+SliderRail.displayName = 'SliderRail';
+
+const styles = StyleSheet.create({
+  railHitArea: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});