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

package/lib/typescript/components/Slider/styles.d.ts

@@ -0,0 +1,30 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const sliderColorOptions: readonly ["action", "danger", "warning", "success", "info"];
+export type SliderColor = (typeof sliderColorOptions)[number];
+export declare const sliderRootVariants: (props?: ({
+    orientation?: "vertical" | "horizontal" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const sliderRailVariants: (props?: ({
+    orientation?: "vertical" | "horizontal" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const sliderRailColorVariants: (props?: ({
+    color?: "danger" | "warning" | "success" | "info" | "action" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const sliderTrackVariants: (props?: ({
+    orientation?: "vertical" | "horizontal" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const sliderTrackColorVariants: (props?: ({
+    color?: "danger" | "warning" | "success" | "info" | "action" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const sliderThumbVariants: (props?: ({
+    color?: "danger" | "warning" | "success" | "info" | "action" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const sliderThumbHaloVariants: (props?: ({
+    visible?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const sliderPopupBaseVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const sliderMarkerVariants: (props?: ({
+    filled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type SliderVariantProps = VariantProps<typeof sliderRootVariants> & VariantProps<typeof sliderRailVariants> & VariantProps<typeof sliderRailColorVariants> & VariantProps<typeof sliderTrackVariants> & VariantProps<typeof sliderTrackColorVariants> & VariantProps<typeof sliderThumbVariants>;
+//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/components/Slider/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Slider/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,eAAO,MAAM,kBAAkB,6DAA8D,CAAC;AAC9F,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE9D,eAAO,MAAM,kBAAkB;;8EAkB9B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;8EAa9B,CAAC;AAEF,eAAO,MAAM,uBAAuB;;8EAalC,CAAC;AAEH,eAAO,MAAM,mBAAmB;;8EAU9B,CAAC;AAEH,eAAO,MAAM,wBAAwB;;8EAanC,CAAC;AAEH,eAAO,MAAM,mBAAmB;;8EAyB/B,CAAC;AAEF,eAAO,MAAM,uBAAuB;;8EAQlC,CAAC;AAEH,eAAO,MAAM,uBAAuB,oFAGlC,CAAC;AAEH,eAAO,MAAM,oBAAoB;;8EAahC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,GACtE,YAAY,CAAC,OAAO,kBAAkB,CAAC,GACvC,YAAY,CAAC,OAAO,uBAAuB,CAAC,GAC5C,YAAY,CAAC,OAAO,mBAAmB,CAAC,GACxC,YAAY,CAAC,OAAO,wBAAwB,CAAC,GAC7C,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}

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

@@ -26,6 +26,7 @@ export * from './ProgressSegmented';
 export * from './Radio';
 export * from './ScopedTheme';
 export * from './Select';
+export * from './Slider';
 export * from './VirtualizedList';
 export * from './Switch';
 export * from './Textarea';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/components",
-  "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",
@@ -76,9 +76,9 @@
     "class-variance-authority": "^0.7.1",
     "react-native-reanimated-carousel": "5.0.0-beta.5",
     "uniwind": "1.10.0",
-    "@cdx-ui/primitives": "0.0.1-beta.115",
-    "@cdx-ui/utils": "0.0.1-beta.115",
-    "@cdx-ui/icons": "0.0.1-beta.115"
+    "@cdx-ui/primitives": "0.0.1-beta.117",
+    "@cdx-ui/utils": "0.0.1-beta.117",
+    "@cdx-ui/icons": "0.0.1-beta.117"
   },
   "devDependencies": {
     "@react-navigation/bottom-tabs": "*",

package/src/components/Slider/getSliderPopupPosition.ts

@@ -0,0 +1,37 @@
+import { Platform, type ViewStyle } from 'react-native';
+import type { AnchorLayout, SliderOrientation } from '@cdx-ui/primitives';
+
+export const SLIDER_POPUP_OFFSET = 8;
+export const SLIDER_POPUP_Z_INDEX = 9999;
+
+/**
+ * Popover-style placement for the slider value tooltip, modeled after anchored
+ * popover content positioning (placement + offset relative to a measured trigger).
+ */
+export function getSliderPopupAnchorStyle(
+  anchor: AnchorLayout,
+  orientation: SliderOrientation,
+  offset = SLIDER_POPUP_OFFSET,
+): ViewStyle {
+  const position = (Platform.OS === 'web' ? 'fixed' : 'absolute') as ViewStyle['position'];
+
+  if (orientation === 'vertical') {
+    const centerY = anchor.y + anchor.height / 2;
+    return {
+      position,
+      left: anchor.x + anchor.width + offset,
+      top: centerY,
+      zIndex: SLIDER_POPUP_Z_INDEX,
+      transform: [{ translateY: '-50%' }] as ViewStyle['transform'],
+    };
+  }
+
+  const centerX = anchor.x + anchor.width / 2;
+  return {
+    position,
+    left: centerX,
+    top: anchor.y - offset,
+    zIndex: SLIDER_POPUP_Z_INDEX,
+    transform: [{ translateX: '-50%' }, { translateY: '-100%' }] as ViewStyle['transform'],
+  };
+}

package/src/components/Slider/index.tsx

@@ -0,0 +1,456 @@
+import {
+  Children,
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  useId,
+  useMemo,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+import { Platform, StyleSheet, Text, View, type ViewProps, type ViewStyle } from 'react-native';
+import {
+  SliderRoot as SliderRootPrimitive,
+  SliderRail as SliderRailPrimitive,
+  SliderThumb as SliderThumbPrimitive,
+  Slot,
+  Portal,
+  createPortalFn,
+  useAnchorPosition,
+  dataAttributes,
+  getMarkerPositionStyle,
+  getMarkerStepValues,
+  mergeDataAttributes,
+  percentToFillExtent,
+  useSliderContext,
+  valueToPercent,
+  type ISliderProps,
+  type ISliderRailProps,
+  type ISliderThumbProps,
+  type SliderOrientation,
+} from '@cdx-ui/primitives';
+import { cn, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
+import {
+  sliderMarkerVariants,
+  sliderPopupBaseVariants,
+  sliderRootVariants,
+  sliderRailVariants,
+  sliderRailColorVariants,
+  sliderTrackColorVariants,
+  sliderTrackVariants,
+  sliderThumbVariants,
+  type SliderColor,
+  type SliderVariantProps,
+} from './styles';
+import { getSliderPopupAnchorStyle, SLIDER_POPUP_Z_INDEX } from './getSliderPopupPosition';
+
+const SCOPE = 'SLIDER';
+
+const useSliderStyleContext = () => {
+  const { color, orientation } = useStyleContext(SCOPE) as Pick<
+    SliderVariantProps,
+    'color' | 'orientation'
+  >;
+
+  return {
+    color,
+    orientation: orientation ?? 'horizontal',
+  };
+};
+
+export interface SliderProps extends Omit<ISliderProps, 'orientation'> {
+  className?: string;
+  /**
+   * Semantic color token for the track fill and thumb border.
+   * @default `action`
+   */
+  color?: SliderColor;
+  orientation?: SliderOrientation;
+  children?: ReactNode;
+}
+
+const SliderRoot = forwardRef<View, SliderProps>(
+  (
+    {
+      className,
+      style,
+      color = 'action',
+      orientation = 'horizontal',
+      children,
+      isDisabled,
+      ...props
+    },
+    ref,
+  ) => {
+    const parent = useParentContext();
+    const ctx = useMemo(
+      () => ({
+        ...parent,
+        [SCOPE]: { color, orientation },
+      }),
+      [color, orientation, parent],
+    );
+
+    const computedClassName = cn(sliderRootVariants({ orientation }), className);
+
+    return (
+      <ParentContext.Provider value={ctx}>
+        <SliderRootPrimitive
+          ref={ref}
+          className={computedClassName}
+          style={style}
+          orientation={orientation}
+          isDisabled={isDisabled}
+          {...props}
+        >
+          {children}
+        </SliderRootPrimitive>
+      </ParentContext.Provider>
+    );
+  },
+);
+
+SliderRoot.displayName = 'Slider';
+
+export interface SliderRailProps extends ISliderRailProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const SliderRail = forwardRef<View, SliderRailProps>(
+  ({ className, style, children, ...props }, ref) => {
+    const { orientation, color } = useSliderStyleContext();
+
+    const computedClassName = cn(
+      sliderRailVariants({ orientation }),
+      sliderRailColorVariants({ color }),
+      className,
+    );
+
+    return (
+      <SliderRailPrimitive ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </SliderRailPrimitive>
+    );
+  },
+);
+
+SliderRail.displayName = 'Slider.Rail';
+
+export interface SliderTrackProps extends ViewProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+const SliderTrack = forwardRef<View, SliderTrackProps>(
+  ({ asChild, className, style, children, testID, ...props }, ref) => {
+    const { color, orientation } = useSliderStyleContext();
+    const { percent, isDragging, trackLayout, thumbSize } = useSliderContext();
+
+    const fillStyle = useMemo((): ViewStyle => {
+      const trackSize =
+        trackLayout == null
+          ? 0
+          : orientation === 'horizontal'
+            ? trackLayout.width
+            : trackLayout.height;
+
+      if (trackSize <= 0) {
+        return orientation === 'vertical'
+          ? { position: 'absolute', left: 0, right: 0, bottom: 0, height: 0 }
+          : { position: 'absolute', top: 0, bottom: 0, left: 0, width: 0 };
+      }
+
+      const extent = percentToFillExtent(percent, trackSize, thumbSize);
+
+      if (orientation === 'vertical') {
+        return {
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          bottom: 0,
+          height: extent,
+        };
+      }
+
+      return {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        width: extent,
+      };
+    }, [orientation, percent, thumbSize, trackLayout]);
+
+    const computedClassName = cn(
+      sliderTrackVariants({ orientation }),
+      sliderTrackColorVariants({ color }),
+      className,
+    );
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <Comp
+        ref={ref}
+        testID={testID}
+        className={computedClassName}
+        pointerEvents="none"
+        style={[fillStyle, style]}
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({ slot: 'slider-track', dragging: isDragging }),
+        )}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+SliderTrack.displayName = 'Slider.Track';
+
+export interface SliderThumbProps extends ISliderThumbProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const SliderThumb = forwardRef<View, SliderThumbProps>(
+  ({ className, style, children, ...props }, ref) => {
+    const { color } = useSliderStyleContext();
+
+    const computedClassName = cn(sliderThumbVariants({ color }), className);
+
+    return (
+      <SliderThumbPrimitive ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </SliderThumbPrimitive>
+    );
+  },
+);
+
+SliderThumb.displayName = 'Slider.Thumb';
+
+function dataOrientation(orientation: 'horizontal' | 'vertical' | null | undefined) {
+  return { 'data-orientation': orientation ?? 'horizontal' } as const;
+}
+
+function renderPopupLabel(children: ReactNode, getValueLabel: () => string) {
+  if (children == null || typeof children === 'string' || typeof children === 'number') {
+    return (
+      <Text className="text-content-primary text-xs font-medium select-none" selectable={false}>
+        {children ?? getValueLabel()}
+      </Text>
+    );
+  }
+
+  return children;
+}
+
+export interface SliderPopupProps extends ViewProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+const SliderPopup = forwardRef<View, SliderPopupProps>(
+  ({ asChild, className, style, children, ...props }, ref) => {
+    const { orientation } = useSliderStyleContext();
+    const { isDragging, isHovered, isFocused, getValueLabel, thumbRef, percent } =
+      useSliderContext();
+    const portalName = useId();
+
+    const visible = isDragging || isHovered || isFocused;
+    const anchorLayout = useAnchorPosition(thumbRef, visible, {
+      remeasureKey: percent,
+      trackWhileOpen: true,
+    });
+
+    if (!visible || anchorLayout == null) {
+      return null;
+    }
+
+    const label = renderPopupLabel(children, getValueLabel);
+    const computedClassName = cn(sliderPopupBaseVariants(), className);
+    const Comp = asChild ? Slot : View;
+    const anchorStyle = getSliderPopupAnchorStyle(anchorLayout, orientation);
+
+    const popup = (
+      <View pointerEvents="none" style={anchorStyle}>
+        <Comp
+          ref={ref}
+          className={computedClassName}
+          style={style}
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({ slot: 'slider-popup', visible: true }),
+            dataOrientation(orientation),
+          )}
+        >
+          {label}
+        </Comp>
+      </View>
+    );
+
+    if (Platform.OS === 'web' && createPortalFn && typeof document !== 'undefined') {
+      return createPortalFn(popup, document.body);
+    }
+
+    return (
+      <Portal name={portalName}>
+        <View
+          pointerEvents="box-none"
+          style={[StyleSheet.absoluteFill, { zIndex: SLIDER_POPUP_Z_INDEX }]}
+        >
+          {popup}
+        </View>
+      </Portal>
+    );
+  },
+);
+
+SliderPopup.displayName = 'Slider.Popup';
+
+export interface SliderMarkerProps extends ViewProps {
+  asChild?: boolean;
+  className?: string;
+  value?: number;
+  children?: ReactNode;
+}
+
+const SliderMarker = forwardRef<View, SliderMarkerProps>(
+  ({ asChild, className, style, value, testID, ...props }, ref) => {
+    const {
+      value: currentValue,
+      min,
+      max,
+      orientation,
+      trackLayout,
+      thumbSize,
+    } = useSliderContext();
+
+    const markerStyle = useMemo(() => {
+      if (value == null) {
+        return undefined;
+      }
+      const percent = valueToPercent(value, min, max);
+      return getMarkerPositionStyle(percent, orientation, trackLayout, thumbSize);
+    }, [max, min, orientation, thumbSize, trackLayout, value]);
+
+    const isFilled = value != null && value <= currentValue;
+    const computedClassName = cn(sliderMarkerVariants({ filled: isFilled }), className);
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <Comp
+        ref={ref}
+        testID={testID}
+        className={computedClassName}
+        style={[markerStyle, style]}
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({
+            slot: 'slider-marker',
+            value: value == null ? undefined : String(value),
+            filled: isFilled,
+          }),
+        )}
+      />
+    );
+  },
+);
+
+SliderMarker.displayName = 'Slider.Marker';
+
+function isSliderMarkerElement(child: unknown): child is ReactElement<SliderMarkerProps> {
+  if (!isValidElement(child)) {
+    return false;
+  }
+  const type = child.type as { displayName?: string };
+  return type.displayName === 'Slider.Marker';
+}
+
+export interface SliderMarkerGroupProps extends ViewProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+const SliderMarkerGroup = forwardRef<View, SliderMarkerGroupProps>(
+  ({ asChild, className, style, children, testID, ...props }, ref) => {
+    const { min, max, step } = useSliderContext();
+
+    const markers = useMemo(() => {
+      if (step <= 0 || max <= min) {
+        return null;
+      }
+
+      const childList = Children.toArray(children);
+      if (childList.length === 0) {
+        return null;
+      }
+
+      const templateMarker = childList.find(
+        (child): child is ReactElement<SliderMarkerProps> =>
+          isSliderMarkerElement(child) && child.props.value == null,
+      );
+
+      if (templateMarker) {
+        return getMarkerStepValues(min, max, step).map((markerValue) =>
+          cloneElement(templateMarker, { key: markerValue, value: markerValue }),
+        );
+      }
+
+      return childList;
+    }, [children, max, min, step]);
+
+    if (!markers) {
+      return null;
+    }
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <Comp
+        ref={ref}
+        testID={testID}
+        className={cn('absolute inset-0 z-[1]', className)}
+        style={style}
+        pointerEvents="none"
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'slider-marker-group' }))}
+      >
+        {markers}
+      </Comp>
+    );
+  },
+);
+
+SliderMarkerGroup.displayName = 'Slider.MarkerGroup';
+
+type SliderCompoundComponent = typeof SliderRoot & {
+  Rail: typeof SliderRail;
+  Track: typeof SliderTrack;
+  Thumb: typeof SliderThumb;
+  Popup: typeof SliderPopup;
+  MarkerGroup: typeof SliderMarkerGroup;
+  Marker: typeof SliderMarker;
+};
+
+export const Slider = Object.assign(SliderRoot, {
+  Rail: SliderRail,
+  Track: SliderTrack,
+  Thumb: SliderThumb,
+  Popup: SliderPopup,
+  MarkerGroup: SliderMarkerGroup,
+  Marker: SliderMarker,
+}) as SliderCompoundComponent;
+
+export type { SliderColor, SliderVariantProps };