@cdx-ui/components 0.0.1-beta.16 → 0.0.1-beta.160

package/src/components/Slider/getSliderPopupPosition.ts

@@ -0,0 +1,49 @@
+import { Platform, type ViewStyle } from 'react-native';
+import {
+  getAnchoredOverlayPosition,
+  type AnchorLayout,
+  type 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 result = getAnchoredOverlayPosition(
+    anchor,
+    { width: 0, height: 0 },
+    { width: Number.MAX_SAFE_INTEGER, height: Number.MAX_SAFE_INTEGER },
+    {
+      placement: orientation === 'vertical' ? 'right' : 'top',
+      offset,
+      collisionBehavior: 'none',
+    },
+  );
+  const position = (Platform.OS === 'web' ? 'fixed' : 'absolute') as ViewStyle['position'];
+
+  if (orientation === 'vertical') {
+    return {
+      position,
+      left: result.style.left,
+      top: result.style.top,
+      zIndex: SLIDER_POPUP_Z_INDEX,
+      transform: [{ translateY: '-50%' }] as ViewStyle['transform'],
+    };
+  }
+
+  return {
+    position,
+    left: result.style.left,
+    top: result.style.top,
+    zIndex: SLIDER_POPUP_Z_INDEX,
+    transform: [{ translateX: '-50%' }, { translateY: '-100%' }] as ViewStyle['transform'],
+  };
+}

package/src/components/Slider/index.tsx

@@ -0,0 +1,472 @@
+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,
+  useAnchoredOverlay,
+  dataAttributes,
+  getMarkerPositionStyle,
+  getMarkerStepValues,
+  mergeDataAttributes,
+  percentToFillExtent,
+  useSliderContext,
+  valueToPercent,
+  type ISliderProps,
+  type ISliderRailProps,
+  type ISliderThumbProps,
+  type SliderOrientation,
+} from '@cdx-ui/primitives';
+import {
+  cn,
+  composeEventHandlers,
+  mergeRefs,
+  ParentContext,
+  useParentContext,
+  useStyleContext,
+} from '@cdx-ui/utils';
+import {
+  sliderMarkerVariants,
+  sliderPopupBaseVariants,
+  sliderRootVariants,
+  sliderRailVariants,
+  sliderRailColorVariants,
+  sliderTrackColorVariants,
+  sliderTrackVariants,
+  sliderThumbVariants,
+  type SliderColor,
+  type SliderVariantProps,
+} from './styles';
+import { SLIDER_POPUP_OFFSET, 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, onLayout, ...props }, ref) => {
+    const { orientation } = useSliderStyleContext();
+    const { isDragging, isHovered, isFocused, getValueLabel, thumbRef, percent } =
+      useSliderContext();
+    const portalName = useId();
+
+    const visible = isDragging || isHovered || isFocused;
+    const {
+      floatingRef,
+      onFloatingLayout,
+      style: popupPositionStyle,
+    } = useAnchoredOverlay(thumbRef, visible, {
+      placement: orientation === 'vertical' ? 'right' : 'top',
+      offset: SLIDER_POPUP_OFFSET,
+      collisionBehavior: 'none',
+      width: 'content',
+      remeasureKey: percent,
+      trackWhileOpen: true,
+    });
+
+    if (!visible) {
+      return null;
+    }
+
+    const label = renderPopupLabel(children, getValueLabel);
+    const computedClassName = cn(sliderPopupBaseVariants(), className);
+    const Comp = asChild ? Slot : View;
+
+    const popup = (
+      <View pointerEvents="none" style={[popupPositionStyle, { zIndex: SLIDER_POPUP_Z_INDEX }]}>
+        <Comp
+          ref={mergeRefs(ref, floatingRef)}
+          className={computedClassName}
+          style={style}
+          onLayout={composeEventHandlers(onLayout, onFloatingLayout)}
+          {...props}
+          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 };

package/src/components/Slider/styles.ts

@@ -0,0 +1,147 @@
+import { Platform } from 'react-native';
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
+
+export const sliderColorOptions = ['action', 'danger', 'warning', 'success', 'info'] as const;
+export type SliderColor = (typeof sliderColorOptions)[number];
+
+export const sliderRootVariants = cva(
+  [
+    'relative w-full touch-none select-none',
+    'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
+    DISABLED_CURSOR,
+    'web:outline-none',
+  ],
+  {
+    variants: {
+      orientation: {
+        horizontal: 'h-5 overflow-visible',
+        vertical: 'flex h-48 w-8 items-center justify-center overflow-visible',
+      },
+    },
+    defaultVariants: {
+      orientation: 'horizontal',
+    },
+  },
+);
+
+export const sliderRailVariants = cva(
+  ['relative w-full overflow-hidden rounded-full', TRANSITION_COLORS],
+  {
+    variants: {
+      orientation: {
+        horizontal: 'h-1.5',
+        vertical: 'h-full w-1.5',
+      },
+    },
+    defaultVariants: {
+      orientation: 'horizontal',
+    },
+  },
+);
+
+export const sliderRailColorVariants = cva([], {
+  variants: {
+    color: {
+      action: 'bg-surface-action-subtle',
+      danger: 'bg-surface-danger-subtle',
+      warning: 'bg-surface-warning-subtle',
+      success: 'bg-surface-success-subtle',
+      info: 'bg-surface-info-subtle',
+    },
+  },
+  defaultVariants: {
+    color: 'action',
+  },
+});
+
+export const sliderTrackVariants = cva(['rounded-full transition-none'], {
+  variants: {
+    orientation: {
+      horizontal: '',
+      vertical: '',
+    },
+  },
+  defaultVariants: {
+    orientation: 'horizontal',
+  },
+});
+
+export const sliderTrackColorVariants = cva([], {
+  variants: {
+    color: {
+      action: 'bg-surface-action-strong',
+      danger: 'bg-surface-danger-strong',
+      warning: 'bg-surface-warning-strong',
+      success: 'bg-surface-success-strong',
+      info: 'bg-surface-info-strong',
+    },
+  },
+  defaultVariants: {
+    color: 'action',
+  },
+});
+
+export const sliderThumbVariants = cva(
+  [
+    'box-border size-5 z-2 overflow-visible rounded-full bg-white border-3 border-solid shadow-md',
+    'web:cursor-grab web:active:cursor-grabbing',
+    'transition-[transform,box-shadow,opacity] duration-150',
+    'data-[dragging=true]:transition-none',
+    Platform.select({
+      default: 'data-[active=true]:scale-105',
+      web: 'data-[hover=true]:scale-110 data-[dragging=true]:scale-110 data-[hover=true]:shadow-lg web:data-[focus-visible=true]:ring-4 web:data-[focus-visible=true]:ring-stroke-focus',
+    }),
+  ],
+  {
+    variants: {
+      color: {
+        action: 'border-surface-action-strong',
+        danger: 'border-surface-danger-strong',
+        warning: 'border-surface-warning-strong',
+        success: 'border-surface-success-strong',
+        info: 'border-surface-info-strong',
+      },
+    },
+    defaultVariants: {
+      color: 'action',
+    },
+  },
+);
+
+export const sliderThumbHaloVariants = cva(['hidden'], {
+  variants: {
+    visible: {
+      true: '',
+      false: '',
+    },
+  },
+  defaultVariants: { visible: false },
+});
+
+export const sliderPopupBaseVariants = cva([
+  'rounded-md bg-white px-2 py-1',
+  'text-content-primary text-xs font-medium shadow-md select-none pointer-events-none',
+]);
+
+export const sliderMarkerVariants = cva(
+  ['rounded-full size-0.5 shrink-0', 'data-[value=0]:hidden data-[value=100]:hidden'],
+  {
+    variants: {
+      filled: {
+        true: 'bg-surface-action-subtle',
+        false: 'bg-content-action',
+      },
+    },
+    defaultVariants: {
+      filled: false,
+    },
+  },
+);
+
+export type SliderVariantProps = VariantProps<typeof sliderRootVariants> &
+  VariantProps<typeof sliderRailVariants> &
+  VariantProps<typeof sliderRailColorVariants> &
+  VariantProps<typeof sliderTrackVariants> &
+  VariantProps<typeof sliderTrackColorVariants> &
+  VariantProps<typeof sliderThumbVariants>;

package/src/components/Stack/styles.ts

@@ -1,4 +1,4 @@
-import { cva } from 'class-variance-authority';
+import { cva } from '@cdx-ui/utils';
 
 const spaceMap = {
   xs: 'gap-1',