@cdx-ui/components 0.0.1-beta.98 → 0.1.0

package/src/components/Slider/index.tsx

@@ -0,0 +1,520 @@
+import {
+  Children,
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  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,
+  getFillExtent,
+  getMarkerPositionStyle,
+  getMarkerStepValues,
+  mergeDataAttributes,
+  useSliderContext,
+  useSliderThumbContext,
+  valueToPercent,
+  type ISliderProps,
+  type ISliderRailProps,
+  type ISliderThumbProps,
+  type SliderOrientation,
+  type SliderRangeValueProps,
+  type SliderSingleValueProps,
+} 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 {
+  getSliderPopupPortalStyle,
+  SLIDER_POPUP_OFFSET,
+  SLIDER_POPUP_Z_INDEX,
+  type SliderPopupPortalOrigin,
+} 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;
+}
+
+export type { SliderRangeValueProps, SliderSingleValueProps };
+
+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 { values, isDragging, trackLayout, thumbSize, getThumbPercent } = 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 isSingleThumb = values.length <= 1;
+      const startPercent = isSingleThumb ? 0 : getThumbPercent(0);
+      const endPercent = isSingleThumb ? getThumbPercent(0) : getThumbPercent(values.length - 1);
+      const { offset, length } = getFillExtent(startPercent, endPercent, trackSize, thumbSize);
+
+      if (orientation === 'vertical') {
+        return {
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          bottom: offset,
+          height: length,
+        };
+      }
+
+      return {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: offset,
+        width: length,
+      };
+    }, [getThumbPercent, orientation, thumbSize, trackLayout, values.length]);
+
+    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;
+  /**
+   * Zero-based thumb index. Defaults to `0` for single-value sliders.
+   */
+  index?: number;
+  children?: ReactNode;
+}
+
+const SliderThumb = forwardRef<View, SliderThumbProps>(
+  ({ className, style, index, children, ...props }, ref) => {
+    const { color } = useSliderStyleContext();
+
+    const computedClassName = cn(sliderThumbVariants({ color }), className);
+
+    return (
+      <SliderThumbPrimitive
+        ref={ref}
+        index={index}
+        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 { index, isDragging, isHovered, isFocused, thumbRef, percent } = useSliderThumbContext();
+    const { getThumbValueLabel } = useSliderContext();
+    const portalName = useId();
+    const portalRef = useRef<View>(null);
+    const [portalOrigin, setPortalOrigin] = useState<SliderPopupPortalOrigin | null>(null);
+
+    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,
+    });
+    const measurePortalOrigin = useCallback(() => {
+      if (Platform.OS === 'web' || orientation !== 'vertical') {
+        return;
+      }
+
+      portalRef.current?.measureInWindow((x, y) => {
+        setPortalOrigin((previous) =>
+          previous?.x === x && previous.y === y ? previous : { x, y },
+        );
+      });
+    }, [orientation]);
+    const resolvedPopupPositionStyle = useMemo(
+      () =>
+        Platform.OS !== 'web' && orientation === 'vertical'
+          ? getSliderPopupPortalStyle(popupPositionStyle, portalOrigin)
+          : popupPositionStyle,
+      [orientation, popupPositionStyle, portalOrigin],
+    );
+
+    if (!visible) {
+      return null;
+    }
+
+    const getValueLabel = () => getThumbValueLabel(index);
+    const label = renderPopupLabel(children, getValueLabel);
+    const computedClassName = cn(sliderPopupBaseVariants(), className);
+    const Comp = asChild ? Slot : View;
+
+    const popup = (
+      <View
+        pointerEvents="none"
+        style={[resolvedPopupPositionStyle, { 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
+          ref={portalRef}
+          pointerEvents="box-none"
+          style={[StyleSheet.absoluteFill, { zIndex: SLIDER_POPUP_Z_INDEX }]}
+          onLayout={measurePortalOrigin}
+        >
+          {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 { values, 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 low = values[0] ?? min;
+    const high = values[values.length - 1] ?? low;
+    const isFilled =
+      value != null && (values.length <= 1 ? value <= low : value >= low && value <= high);
+    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',

package/src/components/Switch/index.tsx

@@ -7,12 +7,20 @@ import {
   type ISwitchProps,
 } from '@cdx-ui/primitives';
 import { BaseSwitch } from './BaseSwitch';
-import type { SwitchVariantProps } from './styles';
 
-export interface SwitchProps extends ISwitchProps, SwitchVariantProps {
+export interface SwitchProps extends ISwitchProps {
+  /**
+   * Track and thumb size.
+   * @default 'md'
+   */
+  size?: 'sm' | 'md' | 'lg';
+  /** Additional Uniwind/Tailwind classes, merged after the switch's own styles. */
   className?: string;
+  /** Accessible label announced by screen readers. */
   accessibilityLabel?: string;
+  /** Called when the switch receives focus. */
   onFocus?: () => void;
+  /** Called when the switch loses focus. */
   onBlur?: () => void;
 }
 

package/src/components/Switch/styles.ts

@@ -1,4 +1,4 @@
-import { cva, type VariantProps } from 'class-variance-authority';
+import { cva, type VariantProps } from '@cdx-ui/utils';
 
 // =============================================================================
 // NATIVE — Uniwind className bindings for RN Switch