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

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

@@ -1,413 +0,0 @@
-import { forwardRef, useMemo, useRef } from 'react';
-import { View, type GestureResponderEvent } from 'react-native';
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import Animated, { useSharedValue } from 'react-native-reanimated';
-import { HeroText } from '../../helpers/internal/components';
-import { AnimationSettingsProvider } from '../../helpers/internal/contexts';
-import type { ViewRef } from '../../helpers/internal/types';
-import * as SliderPrimitives from '../../primitives/slider';
-import { useSlider } from '../../primitives/slider';
-import { clamp } from '../../primitives/slider/slider.utils';
-import {
-  useSliderRootAnimation,
-  useSliderThumbAnimation,
-} from './slider.animation';
-import { DISPLAY_NAME } from './slider.constants';
-import sliderClassNames, { styleSheet } from './slider.styles';
-import type {
-  SliderFillProps,
-  SliderOutputProps,
-  SliderProps,
-  SliderThumbProps,
-  SliderTrackProps,
-} from './slider.types';
-
-const AnimatedKnob = Animated.createAnimatedComponent(View);
-
-// --------------------------------------------------
-
-const SliderRoot = forwardRef<ViewRef, SliderProps>((props, ref) => {
-  const {
-    children,
-    orientation = 'horizontal',
-    isDisabled = false,
-    animation,
-    className,
-    style,
-    ...primitiveProps
-  } = props;
-
-  const { isAllAnimationsDisabled } = useSliderRootAnimation({ animation });
-
-  const animationSettingsContextValue = useMemo(
-    () => ({
-      isAllAnimationsDisabled,
-    }),
-    [isAllAnimationsDisabled]
-  );
-
-  const rootClassName = sliderClassNames.root({
-    orientation,
-    isDisabled,
-    className,
-  });
-
-  return (
-    <AnimationSettingsProvider value={animationSettingsContextValue}>
-      <SliderPrimitives.Root
-        ref={ref}
-        orientation={orientation}
-        isDisabled={isDisabled}
-        className={rootClassName}
-        style={style}
-        {...primitiveProps}
-      >
-        {children}
-      </SliderPrimitives.Root>
-    </AnimationSettingsProvider>
-  );
-});
-
-// --------------------------------------------------
-
-const SliderOutput = forwardRef<ViewRef, SliderOutputProps>((props, ref) => {
-  const { children, className, style, ...restProps } = props;
-
-  const { values, orientation, isDisabled, getThumbValueLabel } = useSlider();
-
-  const outputClassName = sliderClassNames.output({ className });
-
-  const defaultContent = values
-    .map((_, i) => getThumbValueLabel(i))
-    .join(' – ');
-
-  const resolvedChildren =
-    typeof children === 'function'
-      ? children({
-          state: { values, getThumbValueLabel },
-          orientation,
-          isDisabled,
-        })
-      : children;
-
-  return (
-    <SliderPrimitives.Output ref={ref} style={style} {...restProps}>
-      <HeroText className={outputClassName}>
-        {resolvedChildren ?? defaultContent}
-      </HeroText>
-    </SliderPrimitives.Output>
-  );
-});
-
-// --------------------------------------------------
-
-const SliderTrack = forwardRef<ViewRef, SliderTrackProps>((props, ref) => {
-  const { children, className, style, hitSlop = 8, ...restProps } = props;
-
-  const {
-    minValue,
-    maxValue,
-    orientation,
-    isDisabled,
-    handleTapAtValue,
-    trackSize,
-    thumbSize,
-  } = useSlider();
-
-  const trackClassName = sliderClassNames.track({
-    orientation,
-    className,
-  });
-
-  const handleTapRef = useRef(handleTapAtValue);
-  handleTapRef.current = handleTapAtValue;
-
-  const tapGesture = useMemo(() => {
-    const effectiveTrackSize = trackSize - thumbSize;
-
-    return Gesture.Tap()
-      .runOnJS(true)
-      .enabled(!isDisabled)
-      .onEnd((event) => {
-        if (effectiveTrackSize <= 0) return;
-
-        const pos = orientation === 'horizontal' ? event.x : event.y;
-        const adjustedPos =
-          orientation === 'horizontal'
-            ? pos - thumbSize / 2
-            : trackSize - pos - thumbSize / 2;
-
-        const pct = clamp(adjustedPos / effectiveTrackSize, 0, 1);
-        const rawValue = minValue + pct * (maxValue - minValue);
-        handleTapRef.current(rawValue);
-      });
-  }, [trackSize, thumbSize, isDisabled, orientation, minValue, maxValue]);
-
-  return (
-    <GestureDetector gesture={tapGesture}>
-      <SliderPrimitives.Track
-        ref={ref}
-        className={trackClassName}
-        style={[styleSheet.borderCurve, style]}
-        hitSlop={hitSlop}
-        {...restProps}
-      >
-        {children}
-      </SliderPrimitives.Track>
-    </GestureDetector>
-  );
-});
-
-// --------------------------------------------------
-
-const SliderFill = forwardRef<ViewRef, SliderFillProps>((props, ref) => {
-  const { className, style, ...restProps } = props;
-
-  const { values, orientation, getThumbPercent, trackSize, thumbSize } =
-    useSlider();
-
-  const fillClassName = sliderClassNames.fill({ orientation, className });
-
-  const isSingleThumb = values.length <= 1;
-  const startPercent = isSingleThumb ? 0 : getThumbPercent(0);
-  const endPercent = isSingleThumb
-    ? getThumbPercent(0)
-    : getThumbPercent(values.length - 1);
-
-  const effectiveTrackSize = trackSize - thumbSize;
-
-  const fillStyle = useMemo(() => {
-    if (orientation === 'horizontal') {
-      const left = startPercent * effectiveTrackSize;
-      const width =
-        (endPercent - startPercent) * effectiveTrackSize + thumbSize;
-
-      return {
-        left,
-        width: Math.max(width, thumbSize),
-      };
-    }
-
-    const bottom = startPercent * effectiveTrackSize;
-    const height = (endPercent - startPercent) * effectiveTrackSize + thumbSize;
-
-    return {
-      bottom,
-      height: Math.max(height, thumbSize),
-    };
-  }, [orientation, startPercent, endPercent, effectiveTrackSize, thumbSize]);
-
-  return (
-    <SliderPrimitives.Fill
-      ref={ref}
-      className={fillClassName}
-      style={[styleSheet.borderCurve, fillStyle, style]}
-      {...restProps}
-    />
-  );
-});
-
-// --------------------------------------------------
-
-const SliderThumb = forwardRef<ViewRef, SliderThumbProps>((props, ref) => {
-  const {
-    index = 0,
-    isDisabled: thumbDisabled,
-    animation,
-    className,
-    classNames,
-    styles: stylesProp,
-    style,
-    hitSlop = 12,
-    onTouchEnd,
-    children,
-    ...restProps
-  } = props;
-
-  const {
-    values,
-    minValue,
-    maxValue,
-    step,
-    orientation,
-    isDisabled: sliderDisabled,
-    getThumbPercent,
-    isThumbDragging,
-    updateValue,
-    setThumbDragging,
-    trackSize,
-    thumbSize,
-  } = useSlider();
-
-  const disabled = thumbDisabled ?? sliderDisabled;
-  const isDragging = isThumbDragging(index);
-
-  const { rKnobStyle } = useSliderThumbAnimation({
-    animation,
-    isDragging,
-  });
-
-  const { thumbContainer: containerSlot, thumbKnob: knobSlot } =
-    sliderClassNames.thumb({ orientation });
-
-  const thumbContainerClassName = containerSlot({
-    className: [className, classNames?.thumbContainer],
-  });
-  const thumbKnobClassName = knobSlot({
-    className: classNames?.thumbKnob,
-  });
-
-  const percent = getThumbPercent(index);
-  const startValue = useSharedValue(0);
-
-  const valuesRef = useRef(values);
-  valuesRef.current = values;
-
-  const updateValueRef = useRef(updateValue);
-  updateValueRef.current = updateValue;
-
-  const setThumbDraggingRef = useRef(setThumbDragging);
-  setThumbDraggingRef.current = setThumbDragging;
-
-  const panGesture = useMemo(() => {
-    const effectiveTrackSize = trackSize - thumbSize;
-
-    const gesture = Gesture.Pan()
-      .runOnJS(true)
-      .enabled(!disabled)
-      .onBegin(() => {
-        startValue.set(valuesRef.current[index] ?? minValue);
-        setThumbDraggingRef.current(index, true);
-      })
-      .onUpdate((event) => {
-        const delta =
-          orientation === 'horizontal'
-            ? event.translationX
-            : -event.translationY;
-        const valueDelta =
-          effectiveTrackSize > 0
-            ? (delta / effectiveTrackSize) * (maxValue - minValue)
-            : 0;
-        const newValue = clamp(
-          startValue.get() + valueDelta,
-          minValue,
-          maxValue
-        );
-        const snapped =
-          Math.round((newValue - minValue) / step) * step + minValue;
-        const clampedSnapped = clamp(snapped, minValue, maxValue);
-        updateValueRef.current(index, clampedSnapped);
-      })
-      .onFinalize(() => {
-        setThumbDraggingRef.current(index, false);
-      });
-
-    return gesture;
-  }, [
-    disabled,
-    index,
-    minValue,
-    maxValue,
-    step,
-    orientation,
-    trackSize,
-    thumbSize,
-    startValue,
-  ]);
-
-  const positionStyle = useMemo(() => {
-    const effectiveTrackSize = trackSize - thumbSize;
-    const offset = percent * effectiveTrackSize;
-
-    if (orientation === 'horizontal') {
-      return { left: offset };
-    }
-    return { bottom: offset };
-  }, [percent, trackSize, thumbSize, orientation]);
-
-  const handleTouchEnd = (event: GestureResponderEvent) => {
-    setThumbDraggingRef.current(index, false);
-    onTouchEnd?.(event);
-  };
-
-  return (
-    <GestureDetector gesture={panGesture}>
-      <SliderPrimitives.Thumb
-        ref={ref}
-        index={index}
-        className={thumbContainerClassName}
-        style={[
-          styleSheet.borderCurve,
-          positionStyle,
-          stylesProp?.thumbContainer,
-          style,
-        ]}
-        onTouchEnd={handleTouchEnd}
-        hitSlop={hitSlop}
-        {...restProps}
-      >
-        {children ?? (
-          <AnimatedKnob
-            className={thumbKnobClassName}
-            style={[styleSheet.borderCurve, rKnobStyle, stylesProp?.thumbKnob]}
-          />
-        )}
-      </SliderPrimitives.Thumb>
-    </GestureDetector>
-  );
-});
-
-// --------------------------------------------------
-
-SliderRoot.displayName = DISPLAY_NAME.ROOT;
-SliderOutput.displayName = DISPLAY_NAME.OUTPUT;
-SliderTrack.displayName = DISPLAY_NAME.TRACK;
-SliderFill.displayName = DISPLAY_NAME.FILL;
-SliderThumb.displayName = DISPLAY_NAME.THUMB;
-
-// --------------------------------------------------
-
-/**
- * Compound Slider component with sub-components
- *
- * @component Slider - Main container that manages slider value state, orientation,
- * and provides context to all sub-components. Supports single value and range modes.
- *
- * @component Slider.Output - Optional display of current value(s). Supports render
- * functions for custom formatting. Shows formatted value label by default.
- *
- * @component Slider.Track - Sizing container for Fill and Thumb elements. Sets the
- * cross-axis dimension (h-5 horizontal, w-5 vertical) and centers Thumb via Yoga
- * alignment. Reports its layout size for position calculations. Supports tap-to-position
- * and render functions for dynamic content (e.g. multiple thumbs for range sliders).
- *
- * @component Slider.Fill - Responsive fill bar that stretches full cross-axis of Track
- * (via inset-y-0 / inset-x-0). Only main-axis position (left + width) is computed.
- *
- * @component Slider.Thumb - Draggable thumb element using react-native-gesture-handler.
- * Centered on the cross-axis by Track's Yoga alignment (no manual offset needed).
- * Size is set via className and measured via onLayout into thumbSize context.
- * Animates scale on press via react-native-reanimated. Each thumb gets `role="slider"`
- * with full `accessibilityValue` from the primitive layer.
- *
- * Architecture:
- * All value logic, accessibility, state management, dragging state, track/thumb
- * measurement, and onChangeEnd lifecycle are managed by the primitive context
- * (`useSlider`). The component layer is purely for styling, animations,
- * and gesture handling.
- *
- * @see Full documentation: https://v3.heroui.com/docs/native/components/slider
- */
-const CompoundSlider = Object.assign(SliderRoot, {
-  /** @optional Value display with optional render function */
-  Output: SliderOutput,
-  /** @optional Sizing container for fill and thumbs, supports tap-to-position */
-  Track: SliderTrack,
-  /** @optional Responsive fill bar stretching full cross-axis */
-  Fill: SliderFill,
-  /** @optional Draggable thumb with gesture support, centered by Track alignment */
-  Thumb: SliderThumb,
-});
-
-export { useSlider };
-export default CompoundSlider;

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

@@ -1,120 +0,0 @@
-import type { ViewStyle } from 'react-native';
-import type { WithSpringConfig } from 'react-native-reanimated';
-import type {
-  Animation,
-  AnimationRootDisableAll,
-  AnimationValue,
-} from '../../helpers/internal/types';
-import type { ElementSlots } from '../../helpers/internal/types/theme';
-import type {
-  FillProps as PrimitiveFillProps,
-  OutputProps as PrimitiveOutputProps,
-  RootProps as PrimitiveRootProps,
-  ThumbProps as PrimitiveThumbProps,
-  TrackProps as PrimitiveTrackProps,
-} from '../../primitives/slider/slider.types';
-import type { ThumbSlots } from './slider.styles';
-
-/**
- * Props for the Slider root component.
- * Extends the primitive Root props with visual styling.
- *
- * Value-related props (value, defaultValue, onChange, onChangeEnd, minValue,
- * maxValue, step, formatOptions, orientation, isDisabled, aria-label) are
- * inherited from the primitive and do not need to be redeclared.
- */
-interface SliderProps extends PrimitiveRootProps {
-  /** Additional CSS classes */
-  className?: string;
-
-  /**
-   * Animation configuration for slider
-   * - `"disable-all"`: Disable all animations including children
-   * - `undefined`: Use default animations
-   */
-  animation?: AnimationRootDisableAll;
-}
-
-/**
- * Props for the Slider.Output sub-component.
- * Displays the current slider value as formatted text.
- */
-interface SliderOutputProps extends PrimitiveOutputProps {
-  /** Additional CSS classes */
-  className?: string;
-}
-
-/**
- * Props for the Slider.Track sub-component.
- * Container for Fill and Thumb elements.
- */
-interface SliderTrackProps extends PrimitiveTrackProps {
-  /** Additional CSS classes */
-  className?: string;
-}
-
-/**
- * Props for the Slider.Fill sub-component.
- * Visual representation of the selected range.
- */
-interface SliderFillProps extends PrimitiveFillProps {
-  /** Additional CSS classes */
-  className?: string;
-}
-
-/**
- * Animation configuration for the Slider.Thumb knob scale effect.
- * Animates between idle and dragging states using spring physics.
- */
-type SliderThumbAnimation = Animation<{
-  scale?: AnimationValue<{
-    /**
-     * Scale values [idle, dragging]
-     * @default [1, 0.9]
-     */
-    value?: [number, number];
-    /**
-     * Spring animation configuration
-     * @default { damping: 15, stiffness: 200, mass: 0.5 }
-     */
-    springConfig?: WithSpringConfig;
-  }>;
-}>;
-
-/**
- * Props for the Slider.Thumb sub-component.
- * Two-slot thumb: outer container (positioning + accent bg) wrapping
- * an inner knob (foreground + shadow + scale animation).
- */
-interface SliderThumbProps extends PrimitiveThumbProps {
-  /**
-   * Whether this individual thumb is disabled
-   */
-  isDisabled?: boolean;
-
-  /**
-   * Animation configuration for the thumb knob
-   * - `false` or `"disabled"`: Disable thumb animation
-   * - `object`: Custom scale animation configuration
-   * - `undefined`: Use default animations
-   */
-  animation?: SliderThumbAnimation;
-
-  /** Additional CSS classes for the thumb container */
-  className?: string;
-
-  /** Additional CSS classes for thumb slots (thumbContainer, thumbKnob) */
-  classNames?: ElementSlots<ThumbSlots>;
-
-  /** Inline styles for thumb slots (thumbContainer, thumbKnob) */
-  styles?: Partial<Record<ThumbSlots, ViewStyle>>;
-}
-
-export type {
-  SliderFillProps,
-  SliderOutputProps,
-  SliderProps,
-  SliderThumbAnimation,
-  SliderThumbProps,
-  SliderTrackProps,
-};

package/lib/__templates__/expo/client/heroui/components/spinner/index.ts

@@ -1,10 +0,0 @@
-export { default as Spinner } from './spinner';
-export { spinnerClassNames } from './spinner.styles';
-export type {
-  SpinnerColor,
-  SpinnerContextValue,
-  SpinnerIconProps,
-  SpinnerIndicatorProps,
-  SpinnerProps,
-  SpinnerSize,
-} from './spinner.types';

package/lib/__templates__/expo/client/heroui/components/spinner/spinner-icon.tsx

@@ -1,49 +0,0 @@
-import Svg, { Defs, G, LinearGradient, Path, Stop } from 'react-native-svg';
-import { DISPLAY_NAME } from './spinner.constants';
-import type { SpinnerIconProps } from './spinner.types';
-
-export function SpinnerIcon(props: SpinnerIconProps) {
-  const { width = 24, height = 24, color = 'currentColor' } = props;
-
-  return (
-    <Svg width={width} height={height} viewBox="0 0 24 24">
-      <Defs>
-        <LinearGradient
-          id="mingcuteLoadingFill0"
-          x1="50%"
-          x2="50%"
-          y1="5.271%"
-          y2="91.793%"
-        >
-          <Stop offset="0%" stopColor={color} />
-          <Stop offset="100%" stopColor={color} stopOpacity={0.55} />
-        </LinearGradient>
-        <LinearGradient
-          id="mingcuteLoadingFill1"
-          x1="50%"
-          x2="50%"
-          y1="15.24%"
-          y2="87.15%"
-        >
-          <Stop offset="0%" stopColor={color} stopOpacity={0} />
-          <Stop offset="100%" stopColor={color} stopOpacity={0.55} />
-        </LinearGradient>
-      </Defs>
-      <G fill="none">
-        <Path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
-        <Path
-          d="M8.749.021a1.5 1.5 0 0 1 .497 2.958A7.5 7.5 0 0 0 3 10.375a7.5 7.5 0 0 0 7.5 7.5v3c-5.799 0-10.5-4.7-10.5-10.5C0 5.23 3.726.865 8.749.021"
-          fill="url(#mingcuteLoadingFill0)"
-          transform="translate(1.5 1.625)"
-        />
-        <Path
-          d="M15.392 2.673a1.5 1.5 0 0 1 2.119-.115A10.48 10.48 0 0 1 21 10.375c0 5.8-4.701 10.5-10.5 10.5v-3a7.5 7.5 0 0 0 5.007-13.084a1.5 1.5 0 0 1-.115-2.118"
-          fill="url(#mingcuteLoadingFill1)"
-          transform="translate(1.5 1.625)"
-        />
-      </G>
-    </Svg>
-  );
-}
-
-SpinnerIcon.displayName = DISPLAY_NAME.ICON;