@coze-arch/cli 0.0.10-alpha.11b7ea → 0.0.10-alpha.954690

package/lib/__templates__/expo/client/heroui/primitives/slider/slider.tsx

@@ -1,464 +0,0 @@
-/* eslint-disable react-hooks/refs */
-import {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { View } from 'react-native';
-import { useControllableState } from '../../helpers/internal/hooks';
-import { createContext } from '../../helpers/internal/utils';
-import * as Slot from '../slot';
-import type {
-  FillProps,
-  FillRef,
-  OutputProps,
-  OutputRef,
-  RootProps,
-  RootRef,
-  SliderContextValue,
-  SliderRenderProps,
-  SliderState,
-  SliderValue,
-  ThumbProps,
-  ThumbRef,
-  TrackProps,
-  TrackRef,
-} from './slider.types';
-import {
-  clamp,
-  denormalizeValue,
-  formatValue,
-  normalizeValue,
-  snapToStep,
-  valueToPercent,
-} from './slider.utils';
-
-// ---------------------------------------------------------------------------
-// Slider context – provides all value logic to sub-components
-// ---------------------------------------------------------------------------
-
-const [SliderProvider, useSlider] = createContext<SliderContextValue>({
-  name: 'SliderPrimitiveContext',
-  errorMessage:
-    'Slider compound components cannot be rendered outside the Slider.Root component',
-});
-
-// --------------------------------------------------
-// Root – manages value state and provides context
-// --------------------------------------------------
-
-const Root = forwardRef<RootRef, RootProps>(
-  (
-    {
-      asChild,
-      children,
-      'value': valueProp,
-      defaultValue,
-      onChange,
-      onChangeEnd,
-      minValue = 0,
-      maxValue = 100,
-      step = 1,
-      formatOptions,
-      orientation = 'horizontal',
-      isDisabled = false,
-      'aria-label': ariaLabel,
-      ...restProps
-    },
-    ref
-  ) => {
-    /** Track whether the consumer originally passed an array value */
-    const wasArray = useRef(
-      Array.isArray(valueProp) || Array.isArray(defaultValue)
-    );
-
-    /** Track layout width (horizontal) or height (vertical) in pixels */
-    const [trackSize, setTrackSize] = useState(0);
-
-    /** Measured thumb dimension (main-axis) in pixels, set via onLayout at the component level */
-    const [thumbSize, setThumbSize] = useState(0);
-
-    const [internalValue, setInternalValue] = useControllableState<SliderValue>(
-      {
-        prop: valueProp,
-        defaultProp: defaultValue ?? minValue,
-        onChange,
-      }
-    );
-
-    const values = useMemo(
-      () =>
-        normalizeValue(internalValue ?? minValue).map((v) =>
-          clamp(v, minValue, maxValue)
-        ),
-      [internalValue, minValue, maxValue]
-    );
-
-    // -----------------------------------------------------------------
-    // Dragging state – tracks which thumb (if any) is being dragged.
-    // When dragging transitions true → false, `onChangeEnd` fires with
-    // the latest committed value (avoids the stale-closure problem of
-    // calling onChangeEnd directly from gesture callbacks).
-    // -----------------------------------------------------------------
-
-    const [draggingIndex, setDraggingIndex] = useState<number | null>(null);
-
-    const internalValueRef = useRef(internalValue);
-    internalValueRef.current = internalValue;
-
-    const onChangeEndRef = useRef(onChangeEnd);
-    onChangeEndRef.current = onChangeEnd;
-
-    const prevDraggingRef = useRef<number | null>(null);
-
-    useEffect(() => {
-      const wasDragging = prevDraggingRef.current !== null;
-      const isNowIdle = draggingIndex === null;
-
-      if (wasDragging && isNowIdle && internalValueRef.current !== undefined) {
-        onChangeEndRef.current?.(internalValueRef.current);
-      }
-
-      prevDraggingRef.current = draggingIndex;
-    }, [draggingIndex]);
-
-    // -----------------------------------------------------------------
-    // Value helpers
-    // -----------------------------------------------------------------
-
-    const getThumbPercent = useCallback(
-      (index: number): number => {
-        const val = values[index] ?? minValue;
-        return valueToPercent(val, minValue, maxValue);
-      },
-      [values, minValue, maxValue]
-    );
-
-    const getThumbValueLabel = useCallback(
-      (index: number): string => {
-        const val = values[index] ?? minValue;
-        return formatValue(val, formatOptions);
-      },
-      [values, minValue, formatOptions]
-    );
-
-    /**
-     * For range sliders the thumb's min is bounded by the previous thumb's value;
-     * for the first thumb (or single-thumb sliders) it equals `minValue`.
-     */
-    const getThumbMinValue = useCallback(
-      (index: number): number => {
-        return index === 0 ? minValue : (values[index - 1] ?? minValue);
-      },
-      [values, minValue]
-    );
-
-    /**
-     * For range sliders the thumb's max is bounded by the next thumb's value;
-     * for the last thumb (or single-thumb sliders) it equals `maxValue`.
-     */
-    const getThumbMaxValue = useCallback(
-      (index: number): number => {
-        return index === values.length - 1
-          ? maxValue
-          : (values[index + 1] ?? maxValue);
-      },
-      [values, maxValue]
-    );
-
-    /**
-     * Update a single thumb's value with range-ordering enforcement.
-     * Adjacent thumbs act as boundaries: a thumb can never cross its neighbours.
-     */
-    const updateValue = useCallback(
-      (index: number, newValue: number) => {
-        const newValues = [...values];
-        newValues[index] = newValue;
-
-        if (newValues.length > 1) {
-          if (index > 0 && newValue < (newValues[index - 1] ?? minValue)) {
-            newValues[index] = newValues[index - 1] ?? minValue;
-          }
-          if (
-            index < newValues.length - 1 &&
-            newValue > (newValues[index + 1] ?? maxValue)
-          ) {
-            newValues[index] = newValues[index + 1] ?? maxValue;
-          }
-        }
-
-        setInternalValue(denormalizeValue(newValues, wasArray.current));
-      },
-      [values, minValue, maxValue, setInternalValue]
-    );
-
-    // -----------------------------------------------------------------
-    // Dragging helpers exposed via context
-    // -----------------------------------------------------------------
-
-    const isThumbDragging = useCallback(
-      (index: number): boolean => {
-        return draggingIndex === index;
-      },
-      [draggingIndex]
-    );
-
-    const setThumbDragging = useCallback(
-      (index: number, dragging: boolean): void => {
-        setDraggingIndex(dragging ? index : null);
-      },
-      []
-    );
-
-    /**
-     * Snap the closest thumb to a raw target value.
-     * Used by tap-to-position on the track (implemented at the component level).
-     * Calls `onChangeEnd` directly since no drag phase is involved.
-     */
-    const handleTapAtValue = useCallback(
-      (targetValue: number) => {
-        if (isDisabled) return;
-
-        const snapped = snapToStep(targetValue, minValue, maxValue, step);
-
-        let closestIdx = 0;
-        if (values.length > 1) {
-          let closestDist = Math.abs((values[0] ?? 0) - snapped);
-          for (let i = 1; i < values.length; i++) {
-            const dist = Math.abs((values[i] ?? 0) - snapped);
-            if (dist < closestDist) {
-              closestDist = dist;
-              closestIdx = i;
-            }
-          }
-        }
-
-        const newValues = [...values];
-        newValues[closestIdx] = snapped;
-        const newSliderValue = denormalizeValue(newValues, wasArray.current);
-        setInternalValue(newSliderValue);
-        onChangeEnd?.(newSliderValue);
-      },
-      [
-        isDisabled,
-        values,
-        minValue,
-        maxValue,
-        step,
-        setInternalValue,
-        onChangeEnd,
-      ]
-    );
-
-    // -----------------------------------------------------------------
-    // Context
-    // -----------------------------------------------------------------
-
-    const contextValue = useMemo<SliderContextValue>(
-      () => ({
-        values,
-        minValue,
-        maxValue,
-        step,
-        orientation,
-        isDisabled,
-        formatOptions,
-        getThumbPercent,
-        getThumbValueLabel,
-        getThumbMinValue,
-        getThumbMaxValue,
-        updateValue,
-        isThumbDragging,
-        setThumbDragging,
-        handleTapAtValue,
-        trackSize,
-        setTrackSize,
-        thumbSize,
-        setThumbSize,
-      }),
-      [
-        values,
-        minValue,
-        maxValue,
-        step,
-        orientation,
-        isDisabled,
-        formatOptions,
-        getThumbPercent,
-        getThumbValueLabel,
-        getThumbMinValue,
-        getThumbMaxValue,
-        updateValue,
-        isThumbDragging,
-        setThumbDragging,
-        handleTapAtValue,
-        trackSize,
-        thumbSize,
-      ]
-    );
-
-    const Component = asChild ? Slot.View : View;
-
-    return (
-      <SliderProvider value={contextValue}>
-        <Component
-          ref={ref}
-          aria-label={ariaLabel}
-          aria-disabled={isDisabled}
-          accessibilityState={{ disabled: isDisabled }}
-          {...restProps}
-        >
-          {children}
-        </Component>
-      </SliderProvider>
-    );
-  }
-);
-
-Root.displayName = 'HeroUINative.Primitive.Slider.Root';
-
-// --------------------------------------------------
-// Track – resolves render-function children via context
-// --------------------------------------------------
-
-const Track = forwardRef<TrackRef, TrackProps>(
-  ({ asChild, children, onLayout, ...restProps }, ref) => {
-    const {
-      values,
-      orientation,
-      isDisabled,
-      getThumbValueLabel,
-      setTrackSize,
-    } = useSlider();
-
-    const state = useMemo<SliderState>(
-      () => ({ values, getThumbValueLabel }),
-      [values, getThumbValueLabel]
-    );
-
-    const renderProps: SliderRenderProps = { state, orientation, isDisabled };
-
-    const resolvedChildren =
-      typeof children === 'function' ? children(renderProps) : children;
-
-    const handleLayout = useCallback(
-      (event: import('react-native').LayoutChangeEvent) => {
-        const { width, height } = event.nativeEvent.layout;
-        setTrackSize(orientation === 'horizontal' ? width : height);
-        onLayout?.(event);
-      },
-      [orientation, setTrackSize, onLayout]
-    );
-
-    const Component = asChild ? Slot.View : View;
-
-    return (
-      <Component ref={ref} onLayout={handleLayout} {...restProps}>
-        {resolvedChildren}
-      </Component>
-    );
-  }
-);
-
-Track.displayName = 'HeroUINative.Primitive.Slider.Track';
-
-// --------------------------------------------------
-// Fill – unstyled placeholder
-// --------------------------------------------------
-
-const Fill = forwardRef<FillRef, FillProps>(({ asChild, ...props }, ref) => {
-  const Component = asChild ? Slot.View : View;
-
-  return <Component ref={ref} {...props} />;
-});
-
-Fill.displayName = 'HeroUINative.Primitive.Slider.Fill';
-
-// --------------------------------------------------
-// Thumb – accessibility-enabled view for each slider thumb
-// --------------------------------------------------
-
-const Thumb = forwardRef<ThumbRef, ThumbProps>(
-  ({ asChild, index = 0, onLayout, ...props }, ref) => {
-    const {
-      orientation,
-      isDisabled,
-      getThumbPercent,
-      getThumbValueLabel,
-      setThumbSize,
-    } = useSlider();
-
-    const Component = asChild ? Slot.View : View;
-
-    /**
-     * RN's native bridge converts `accessibilityValue.min/max/now` to integers
-     * (`long long`), so passing fractional slider values (e.g. 0.75) crashes.
-     * We normalise to a 0–100 percentage scale and let `text` carry the
-     * human-readable label.
-     */
-    const percentNow = Math.round(getThumbPercent(index) * 100);
-
-    const handleLayout = useCallback(
-      (event: import('react-native').LayoutChangeEvent) => {
-        const { width, height } = event.nativeEvent.layout;
-        setThumbSize(orientation === 'horizontal' ? width : height);
-        onLayout?.(event);
-      },
-      [orientation, setThumbSize, onLayout]
-    );
-
-    return (
-      <Component
-        ref={ref}
-        role="slider"
-        aria-disabled={isDisabled}
-        accessibilityValue={{
-          min: 0,
-          max: 100,
-          now: percentNow,
-          text: getThumbValueLabel(index),
-        }}
-        accessibilityState={{ disabled: isDisabled }}
-        onLayout={handleLayout}
-        {...props}
-      />
-    );
-  }
-);
-
-Thumb.displayName = 'HeroUINative.Primitive.Slider.Thumb';
-
-// --------------------------------------------------
-// Output – resolves render-function children via context
-// --------------------------------------------------
-
-const Output = forwardRef<OutputRef, OutputProps>(
-  ({ asChild, children, ...restProps }, ref) => {
-    const { values, orientation, isDisabled, getThumbValueLabel } = useSlider();
-
-    const state = useMemo<SliderState>(
-      () => ({ values, getThumbValueLabel }),
-      [values, getThumbValueLabel]
-    );
-
-    const renderProps: SliderRenderProps = { state, orientation, isDisabled };
-
-    const resolvedChildren =
-      typeof children === 'function' ? children(renderProps) : children;
-
-    const Component = asChild ? Slot.View : View;
-
-    return (
-      <Component ref={ref} {...restProps}>
-        {resolvedChildren}
-      </Component>
-    );
-  }
-);
-
-Output.displayName = 'HeroUINative.Primitive.Slider.Output';
-
-export { Fill, Output, Root, Thumb, Track, useSlider };

package/lib/__templates__/expo/client/heroui/primitives/slider/slider.types.ts

@@ -1,208 +0,0 @@
-import type { SlottableViewProps, ViewRef } from '../../helpers/internal/types';
-
-/**
- * Value type for slider - single number or array for range sliders
- */
-type SliderValue = number | number[];
-
-/**
- * Orientation of the slider
- */
-type SliderOrientation = 'horizontal' | 'vertical';
-
-/**
- * State object provided to render functions
- */
-interface SliderState {
-  /** Current slider value(s) by thumb index */
-  values: number[];
-  /** Returns the formatted string label for a given thumb index */
-  getThumbValueLabel: (index: number) => string;
-}
-
-/**
- * Render props provided to children render functions on Track and Output
- */
-interface SliderRenderProps {
-  /** Current slider state with values and label helpers */
-  state: SliderState;
-  /** Orientation of the slider */
-  orientation: SliderOrientation;
-  /** Whether the slider is disabled */
-  isDisabled: boolean;
-}
-
-/**
- * Context value provided by the primitive Root to all slider sub-components.
- * Contains all value-related state and business logic.
- */
-interface SliderContextValue {
-  /** Current slider values (one per thumb) */
-  values: number[];
-  /** Minimum value */
-  minValue: number;
-  /** Maximum value */
-  maxValue: number;
-  /** Step increment */
-  step: number;
-  /** Current orientation */
-  orientation: SliderOrientation;
-  /** Whether the slider is disabled */
-  isDisabled: boolean;
-  /** Number format options for labels */
-  formatOptions?: Intl.NumberFormatOptions;
-  /** Get the percentage position (0–1) for a given thumb index */
-  getThumbPercent: (index: number) => number;
-  /** Get the formatted label for a given thumb index */
-  getThumbValueLabel: (index: number) => string;
-  /**
-   * Get the minimum allowed value for a thumb.
-   * For range sliders the min is bounded by the previous thumb's value.
-   */
-  getThumbMinValue: (index: number) => number;
-  /**
-   * Get the maximum allowed value for a thumb.
-   * For range sliders the max is bounded by the next thumb's value.
-   */
-  getThumbMaxValue: (index: number) => number;
-  /** Update a thumb value by index */
-  updateValue: (index: number, newValue: number) => void;
-  /** Whether a given thumb is currently being dragged */
-  isThumbDragging: (index: number) => boolean;
-  /**
-   * Set the dragging state of a thumb.
-   * When dragging transitions `true → false`, `onChangeEnd` fires automatically
-   * with the latest committed value.
-   */
-  setThumbDragging: (index: number, dragging: boolean) => void;
-  /** Snaps the closest thumb to a target value (used for tap-to-position) */
-  handleTapAtValue: (targetValue: number) => void;
-  /** Track layout width (horizontal) or height (vertical) in pixels */
-  trackSize: number;
-  /** Set the track layout size after measurement */
-  setTrackSize: (size: number) => void;
-  /** Measured thumb size (main-axis dimension) in pixels, populated via onLayout */
-  thumbSize: number;
-  /** Set the thumb size after measurement */
-  setThumbSize: (size: number) => void;
-}
-
-// ---------------------------------------------------------------------------
-// Component props
-// ---------------------------------------------------------------------------
-
-/**
- * Props for the primitive Slider Root component.
- * Manages value state, provides context, and handles accessibility.
- */
-interface RootProps extends Omit<SlottableViewProps, 'children'> {
-  /** Children content */
-  children?: React.ReactNode;
-
-  /** Current slider value (controlled mode) */
-  value?: SliderValue;
-
-  /** Default slider value (uncontrolled mode) */
-  defaultValue?: SliderValue;
-
-  /** Callback fired when the slider value changes during interaction */
-  onChange?: (value: SliderValue) => void;
-
-  /** Callback fired when an interaction completes (drag end or tap) */
-  onChangeEnd?: (value: SliderValue) => void;
-
-  /**
-   * Minimum value of the slider
-   * @default 0
-   */
-  minValue?: number;
-
-  /**
-   * Maximum value of the slider
-   * @default 100
-   */
-  maxValue?: number;
-
-  /**
-   * Step increment for the slider
-   * @default 1
-   */
-  step?: number;
-
-  /** Intl.NumberFormat options for value label formatting */
-  formatOptions?: Intl.NumberFormatOptions;
-
-  /**
-   * Orientation of the slider
-   * @default "horizontal"
-   */
-  orientation?: SliderOrientation;
-
-  /**
-   * Whether the slider is disabled
-   * @default false
-   */
-  isDisabled?: boolean;
-}
-
-/**
- * Props for the primitive Slider Track component.
- * Supports render-function children that receive slider state.
- */
-interface TrackProps extends Omit<SlottableViewProps, 'children'> {
-  /** Children content or render function receiving slider state */
-  children?: React.ReactNode | ((props: SliderRenderProps) => React.ReactNode);
-}
-
-/**
- * Props for the primitive Slider Fill component
- */
-type FillProps = SlottableViewProps;
-
-/**
- * Props for the primitive Slider Thumb component
- */
-interface ThumbProps extends SlottableViewProps {
-  /**
-   * Index of this thumb within the slider (for range sliders)
-   * @default 0
-   */
-  index?: number;
-}
-
-/**
- * Props for the primitive Slider Output component.
- * Supports render-function children that receive slider state.
- */
-interface OutputProps extends Omit<SlottableViewProps, 'children'> {
-  /** Children content or render function receiving slider state */
-  children?: React.ReactNode | ((props: SliderRenderProps) => React.ReactNode);
-}
-
-// ---------------------------------------------------------------------------
-// Ref types
-// ---------------------------------------------------------------------------
-
-type RootRef = ViewRef;
-type TrackRef = ViewRef;
-type FillRef = ViewRef;
-type ThumbRef = ViewRef;
-type OutputRef = ViewRef;
-
-export type {
-  FillProps,
-  FillRef,
-  OutputProps,
-  OutputRef,
-  RootProps,
-  RootRef,
-  SliderContextValue,
-  SliderOrientation,
-  SliderRenderProps,
-  SliderState,
-  SliderValue,
-  ThumbProps,
-  ThumbRef,
-  TrackProps,
-  TrackRef,
-};