@coze-arch/cli 0.0.10 → 0.0.11

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

@@ -0,0 +1,413 @@
+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

@@ -0,0 +1,120 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,49 @@
+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;