@coze-arch/cli 0.0.10 → 0.0.11

package/lib/__templates__/expo/client/heroui/helpers/external/utils/color-kit/types.ts

@@ -0,0 +1,212 @@
+/**
+ * Color manipulation utilities adapted from reanimated-color-picker
+ *
+ * Original source: https://github.com/alabsi91/reanimated-color-picker
+ * Author: @alabsi91
+ * License: MIT
+ *
+ * This code has been adapted for use in HeroUI Native with modifications
+ * for TypeScript compatibility and integration with the theme system.
+ */
+
+type NAMED_COLORS = {
+  readonly aliceblue: '#f0f8ff';
+  readonly antiquewhite: '#faebd7';
+  readonly aqua: '#00ffff';
+  readonly aquamarine: '#7fffd4';
+  readonly azure: '#f0ffff';
+  readonly beige: '#f5f5dc';
+  readonly bisque: '#ffe4c4';
+  readonly black: '#000000';
+  readonly blanchedalmond: '#ffebcd';
+  readonly blue: '#0000ff';
+  readonly blueviolet: '#8a2be2';
+  readonly brown: '#a52a2a';
+  readonly burlywood: '#deb887';
+  readonly cadetblue: '#5f9ea0';
+  readonly chartreuse: '#7fff00';
+  readonly chocolate: '#d2691e';
+  readonly coral: '#ff7f50';
+  readonly cornflowerblue: '#6495ed';
+  readonly cornsilk: '#fff8dc';
+  readonly crimson: '#dc143c';
+  readonly cyan: '#00ffff';
+  readonly darkblue: '#00008b';
+  readonly darkcyan: '#008b8b';
+  readonly darkgoldenrod: '#b8860b';
+  readonly darkgray: '#a9a9a9';
+  readonly darkgreen: '#006400';
+  readonly darkgrey: '#a9a9a9';
+  readonly darkkhaki: '#bdb76b';
+  readonly darkmagenta: '#8b008b';
+  readonly darkolivegreen: '#556b2f';
+  readonly darkorange: '#ff8c00';
+  readonly darkorchid: '#9932cc';
+  readonly darkred: '#8b0000';
+  readonly darksalmon: '#e9967a';
+  readonly darkseagreen: '#8fbc8f';
+  readonly darkslateblue: '#483d8b';
+  readonly darkslategrey: '#2f4f4f';
+  readonly darkturquoise: '#00ced1';
+  readonly darkviolet: '#9400d3';
+  readonly deeppink: '#ff1493';
+  readonly deepskyblue: '#00bfff';
+  readonly dimgray: '#696969';
+  readonly dimgrey: '#696969';
+  readonly dodgerblue: '#1e90ff';
+  readonly firebrick: '#b22222';
+  readonly floralwhite: '#fffaf0';
+  readonly forestgreen: '#228b22';
+  readonly fuchsia: '#ff00ff';
+  readonly gainsboro: '#dcdcdc';
+  readonly ghostwhite: '#f8f8ff';
+  readonly gold: '#ffd700';
+  readonly goldenrod: '#daa520';
+  readonly gray: '#808080';
+  readonly green: '#008000';
+  readonly greenyellow: '#adff2f';
+  readonly grey: '#808080';
+  readonly honeydew: '#f0fff0';
+  readonly hotpink: '#ff69b4';
+  readonly indianred: '#cd5c5c';
+  readonly indigo: '#4b0082';
+  readonly ivory: '#fffff0';
+  readonly khaki: '#f0e68c';
+  readonly lavender: '#e6e6fa';
+  readonly lavenderblush: '#fff0f5';
+  readonly lawngreen: '#7cfc00';
+  readonly lemonchiffon: '#fffacd';
+  readonly lightblue: '#add8e6';
+  readonly lightcoral: '#f08080';
+  readonly lightcyan: '#e0ffff';
+  readonly lightgoldenrodyellow: '#fafad2';
+  readonly lightgray: '#d3d3d3';
+  readonly lightgreen: '#90ee90';
+  readonly lightgrey: '#d3d3d3';
+  readonly lightpink: '#ffb6c1';
+  readonly lightsalmon: '#ffa07a';
+  readonly lightseagreen: '#20b2aa';
+  readonly lightskyblue: '#87cefa';
+  readonly lightslategrey: '#778899';
+  readonly lightsteelblue: '#b0c4de';
+  readonly lightyellow: '#ffffe0';
+  readonly lime: '#00ff00';
+  readonly limegreen: '#32cd32';
+  readonly linen: '#faf0e6';
+  readonly magenta: '#ff00ff';
+  readonly maroon: '#800000';
+  readonly mediumaquamarine: '#66cdaa';
+  readonly mediumblue: '#0000cd';
+  readonly mediumorchid: '#ba55d3';
+  readonly mediumpurple: '#9370db';
+  readonly mediumseagreen: '#3cb371';
+  readonly mediumslateblue: '#7b68ee';
+  readonly mediumspringgreen: '#00fa9a';
+  readonly mediumturquoise: '#48d1cc';
+  readonly mediumvioletred: '#c71585';
+  readonly midnightblue: '#191970';
+  readonly mintcream: '#f5fffa';
+  readonly mistyrose: '#ffe4e1';
+  readonly moccasin: '#ffe4b5';
+  readonly navajowhite: '#ffdead';
+  readonly navy: '#000080';
+  readonly oldlace: '#fdf5e6';
+  readonly olive: '#808000';
+  readonly olivedrab: '#6b8e23';
+  readonly orange: '#ffa500';
+  readonly orangered: '#ff4500';
+  readonly orchid: '#da70d6';
+  readonly palegoldenrod: '#eee8aa';
+  readonly palegreen: '#98fb98';
+  readonly paleturquoise: '#afeeee';
+  readonly palevioletred: '#db7093';
+  readonly papayawhip: '#ffefd5';
+  readonly peachpuff: '#ffdab9';
+  readonly peru: '#cd853f';
+  readonly pink: '#ffc0cb';
+  readonly plum: '#dda0dd';
+  readonly powderblue: '#b0e0e6';
+  readonly purple: '#800080';
+  readonly rebeccapurple: '#663399';
+  readonly red: '#ff0000';
+  readonly rosybrown: '#bc8f8f';
+  readonly royalblue: '#4169e1';
+  readonly saddlebrown: '#8b4513';
+  readonly salmon: '#fa8072';
+  readonly sandybrown: '#f4a460';
+  readonly seagreen: '#2e8b57';
+  readonly seashell: '#fff5ee';
+  readonly sienna: '#a0522d';
+  readonly silver: '#c0c0c0';
+  readonly skyblue: '#87ceeb';
+  readonly slateblue: '#6a5acd';
+  readonly slategray: '#708090';
+  readonly snow: '#fffafa';
+  readonly springgreen: '#00ff7f';
+  readonly steelblue: '#4682b4';
+  readonly tan: '#d2b48c';
+  readonly teal: '#008080';
+  readonly thistle: '#d8bfd8';
+  readonly tomato: '#ff6347';
+  readonly turquoise: '#40e0d0';
+  readonly violet: '#ee82ee';
+  readonly wheat: '#f5deb3';
+  readonly white: '#ffffff';
+  readonly whitesmoke: '#f5f5f5';
+  readonly yellow: '#ffff00';
+  readonly yellowgreen: '#9acd32';
+};
+
+export type ColorFormats =
+  | 'hex3'
+  | 'hex4'
+  | 'hex6'
+  | 'hex8'
+  | 'hsl'
+  | 'hsla'
+  | 'rgb'
+  | 'rgba'
+  | 'hsva'
+  | 'hsv'
+  | 'hwba'
+  | 'hwb';
+
+export type ColorString = keyof NAMED_COLORS | (string & NonNullable<unknown>);
+
+export type rgbaT = { r: number; g: number; b: number; a: number };
+export type rgbT = Omit<rgbaT, 'a'>;
+
+export type hslaT = { h: number; s: number; l: number; a: number };
+export type hslT = Omit<hslaT, 'a'>;
+
+export type hsvaT = { h: number; s: number; v: number; a: number };
+export type hsvT = Omit<hsvaT, 'a'>;
+
+export type hwbaT = { h: number; w: number; b: number; a: number };
+export type hwbT = Omit<hwbaT, 'a'>;
+
+export type SupportedColorFormats =
+  | ColorString
+  | rgbaT
+  | rgbT
+  | hslaT
+  | hslT
+  | hsvaT
+  | hsvT
+  | hwbaT
+  | hwbT
+  | number;
+
+export type ColorTypes<T extends object> = {
+  object: (roundValues?: boolean) => T;
+  string: (alpha?: boolean) => string;
+  array: (roundValues?: boolean) => number[];
+};
+
+export type ConversionMethods = {
+  hex: () => string;
+  rgb: () => ColorTypes<rgbaT>;
+  hsl: () => ColorTypes<hslaT>;
+  hsv: () => ColorTypes<hsvaT>;
+  hwb: () => ColorTypes<hwbaT>;
+};

package/lib/__templates__/expo/client/heroui/helpers/external/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './cn';
+export { default as colorKit } from './color-kit';

package/lib/__templates__/expo/client/heroui/helpers/internal/components/animated-check-icon.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import Animated, {
+  Easing,
+  useAnimatedProps,
+  useDerivedValue,
+  withDelay,
+  withTiming,
+} from 'react-native-reanimated';
+import Svg, { Path } from 'react-native-svg';
+import { useThemeColor } from '../../external/hooks';
+
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+
+const DEFAULT_SIZE = 18;
+const ENTER_DURATION = 150;
+const EXIT_DURATION = 150;
+
+interface CheckIconProps {
+  isSelected?: boolean;
+  size?: number;
+  strokeWidth?: number;
+  color?: string;
+  enterDuration?: number;
+  exitDuration?: number;
+}
+
+export const AnimatedCheckIcon: React.FC<CheckIconProps> = ({
+  isSelected = false,
+  size = DEFAULT_SIZE,
+  strokeWidth = 2.5,
+  color,
+  enterDuration = ENTER_DURATION,
+  exitDuration = EXIT_DURATION,
+}) => {
+  const themeColorForeground = useThemeColor('foreground');
+
+  const checkProgress = useDerivedValue(() => {
+    if (isSelected) {
+      return withDelay(
+        100,
+        withTiming(1, {
+          duration: enterDuration,
+          easing: Easing.out(Easing.ease),
+        })
+      );
+    } else {
+      return withTiming(0, { duration: exitDuration });
+    }
+  });
+
+  const animatedCheckProps = useAnimatedProps(
+    () => ({
+      strokeDasharray: size,
+      strokeDashoffset: size * (1 - checkProgress.value),
+    }),
+    [checkProgress]
+  );
+
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox={`0 0 ${DEFAULT_SIZE} ${DEFAULT_SIZE}`}
+      fill="none"
+    >
+      <AnimatedPath
+        d="M4 9.5L8 13L14 6"
+        stroke={color ?? themeColorForeground}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        animatedProps={animatedCheckProps}
+      />
+    </Svg>
+  );
+};
+
+AnimatedCheckIcon.displayName = 'HeroUINative.AnimatedCheckIcon';

package/lib/__templates__/expo/client/heroui/helpers/internal/components/bottom-sheet-content-container.tsx

@@ -0,0 +1,97 @@
+import { BottomSheetView, useBottomSheet } from '@gorhom/bottom-sheet';
+import { useEffect, useRef } from 'react';
+import { BackHandler } from 'react-native';
+import { useAnimatedReaction } from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
+import type { BottomSheetContentContainerProps } from '../types/bottom-sheet';
+
+/**
+ * Reusable BottomSheetContentContainer component
+ *
+ * This component handles the content container for bottom sheets used across
+ * BottomSheet, Popover, and Select components. It manages the expand/close
+ * behavior based on the provided state and applies consistent styling.
+ *
+ */
+export function BottomSheetContentContainer({
+  children,
+  isOpen,
+  progress,
+  isDragging,
+  isPanActivated,
+  isClosingOnSwipe,
+  initialIndex,
+  contentContainerClassName,
+  contentContainerProps,
+  onOpenChange,
+}: BottomSheetContentContainerProps) {
+  const { close, snapToIndex } = useBottomSheet();
+  const prevIsOpenRef = useRef(isOpen);
+
+  const closeBottomSheet = () => {
+    onOpenChange(false);
+  };
+
+  useAnimatedReaction(
+    () => progress.get(),
+    (value) => {
+      if (value > 1.5 && !isDragging.get() && !isClosingOnSwipe.get()) {
+        isClosingOnSwipe.set(true);
+        scheduleOnRN(closeBottomSheet);
+      }
+      if (value === 2) {
+        isPanActivated.set(false);
+      }
+    }
+  );
+
+  /**
+   * Dismiss the bottom sheet when the Android hardware back button is pressed.
+   * Only registers the listener while the sheet is open so that closed
+   * instances (Popover, Select, other BottomSheets) don't consume the event.
+   */
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      () => {
+        close();
+        onOpenChange(false);
+        return true;
+      }
+    );
+
+    return () => {
+      backHandler.remove();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
+
+  useEffect(() => {
+    const wasOpen = prevIsOpenRef.current;
+    prevIsOpenRef.current = isOpen;
+
+    if (isOpen && !wasOpen) {
+      // Only snap to initial index when transitioning from closed to open
+      isPanActivated.set(false);
+      snapToIndex(initialIndex);
+    } else if (!isOpen && wasOpen) {
+      // Close when transitioning from open to closed
+      close();
+    }
+    // Note: We intentionally don't include snapToIndex, close, or isPanActivated
+    // in the dependency array to prevent re-snapping when content re-renders.
+    // We only want to snap when isOpen or initialIndex changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen, initialIndex]);
+
+  return (
+    <BottomSheetView
+      className={contentContainerClassName}
+      {...contentContainerProps}
+    >
+      {children}
+    </BottomSheetView>
+  );
+}

package/lib/__templates__/expo/client/heroui/helpers/internal/components/bottom-sheet-content.tsx

@@ -0,0 +1,158 @@
+import BottomSheet from '@gorhom/bottom-sheet';
+import { forwardRef, useMemo } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
+import { ReduceMotion } from 'react-native-reanimated';
+import { withUniwind } from 'uniwind';
+import { useBottomSheetContentAnimation } from '../../../components/bottom-sheet/bottom-sheet.animation';
+import { bottomSheetClassNames } from '../../../components/bottom-sheet/bottom-sheet.styles';
+import { BottomSheetIsDraggingProvider } from '../contexts';
+import { useBottomSheetGestureHandlers } from '../hooks';
+import { usePopupBottomSheetContentAnimation } from '../hooks/use-popup-bottom-sheet-content-animation';
+import type { BaseBottomSheetContentProps } from '../types/bottom-sheet';
+import { BottomSheetContentContainer } from './bottom-sheet-content-container';
+
+const StyledBottomSheet = withUniwind(BottomSheet);
+
+/**
+ * Props for the reusable BottomSheetContent component
+ */
+export interface BottomSheetContentProps
+  extends BaseBottomSheetContentProps,
+    Partial<React.ComponentProps<typeof BottomSheet>> {
+  /**
+   * Whether the bottom sheet is open
+   */
+  isOpen: boolean;
+  /**
+   * Animation progress shared value (0=idle, 1=open, 2=close)
+   */
+  progress: SharedValue<number>;
+  /**
+   * Whether the bottom sheet is dragging
+   */
+  isDragging: SharedValue<boolean>;
+  /**
+   * Callback when the bottom sheet open state changes
+   */
+  onOpenChange: (open: boolean) => void;
+  /**
+   * Initial index of the bottom sheet
+   */
+  index?: number;
+  /**
+   * Additional style for the background
+   */
+  backgroundStyle?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Reusable BottomSheetContent component
+ *
+ * This component provides a reusable bottom sheet content wrapper used across
+ * Popover, Select, and other components when using bottom-sheet presentation.
+ * It handles animation coordination, styling, and gesture handling.
+ *
+ * @example
+ * ```tsx
+ * <BottomSheetContent
+ *   isOpen={isOpen}
+ *   progress={progress}
+ *   isDragging={isDragging}
+ *   onOpenChange={onOpenChange}
+ *   index={0}
+ * >
+ *   {children}
+ * </BottomSheetContent>
+ * ```
+ */
+export const BottomSheetContent = forwardRef<
+  BottomSheet,
+  BottomSheetContentProps
+>(
+  (
+    {
+      children,
+      index: initialIndex,
+      backgroundClassName,
+      handleIndicatorClassName,
+      contentContainerClassName: contentContainerClassNameProp,
+      contentContainerProps,
+      animation,
+      animationConfigs,
+      backgroundStyle,
+      isOpen,
+      progress,
+      isDragging,
+      onOpenChange,
+      ...restProps
+    },
+    ref
+  ) => {
+    const { isAnimationDisabledValue } = useBottomSheetContentAnimation({
+      animation,
+    });
+
+    const { animatedIndex, isClosingOnSwipe, isPanActivated } =
+      usePopupBottomSheetContentAnimation({
+        progress,
+        isDragging,
+      });
+
+    const contentBackgroundClassName = bottomSheetClassNames.contentBackground({
+      className: backgroundClassName,
+    });
+
+    const contentHandleIndicatorClassName =
+      bottomSheetClassNames.contentHandleIndicator({
+        className: handleIndicatorClassName,
+      });
+
+    const contentContainerClassName = bottomSheetClassNames.contentContainer({
+      className: contentContainerClassNameProp,
+    });
+
+    const mergedAnimationConfigs = useMemo(
+      () => ({
+        ...animationConfigs,
+        reduceMotion: isAnimationDisabledValue
+          ? ReduceMotion.Always
+          : animationConfigs?.reduceMotion,
+      }),
+      [animationConfigs, isAnimationDisabledValue]
+    );
+
+    return (
+      <BottomSheetIsDraggingProvider value={{ isDragging }}>
+        <StyledBottomSheet
+          ref={ref}
+          index={-1}
+          backgroundClassName={contentBackgroundClassName}
+          backgroundStyle={backgroundStyle}
+          handleIndicatorClassName={contentHandleIndicatorClassName}
+          enablePanDownToClose={restProps.enablePanDownToClose ?? true}
+          animatedIndex={animatedIndex ?? restProps.animatedIndex}
+          animationConfigs={mergedAnimationConfigs}
+          gestureEventsHandlersHook={useBottomSheetGestureHandlers}
+          {...restProps}
+        >
+          <BottomSheetContentContainer
+            initialIndex={initialIndex ?? 0}
+            isOpen={isOpen}
+            progress={progress}
+            isDragging={isDragging}
+            isPanActivated={isPanActivated}
+            isClosingOnSwipe={isClosingOnSwipe}
+            contentContainerClassName={contentContainerClassName}
+            contentContainerProps={contentContainerProps}
+            onOpenChange={onOpenChange}
+          >
+            {children}
+          </BottomSheetContentContainer>
+        </StyledBottomSheet>
+      </BottomSheetIsDraggingProvider>
+    );
+  }
+);
+
+BottomSheetContent.displayName = 'HeroUINative.BottomSheetContent';

package/lib/__templates__/expo/client/heroui/helpers/internal/components/check-icon.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import { useThemeColor } from '../../external/hooks';
+interface CheckIconProps {
+  size?: number;
+  color?: string;
+}
+
+export const CheckIcon: React.FC<CheckIconProps> = ({ size = 16, color }) => {
+  const themeColorForeground = useThemeColor('foreground');
+
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill={color ?? themeColorForeground}
+    >
+      <Path
+        fillRule="evenodd"
+        d="M20.732 4.645a1.5 1.5 0 0 1 .163 2.116l-9 10.5a1.5 1.5 0 0 1-2.2.084l-5.25-5.25a1.5 1.5 0 0 1 2.121-2.121l3.892 3.891 7.96-9.287a1.5 1.5 0 0 1 2.114-.163"
+        clipRule="evenodd"
+      />
+    </Svg>
+  );
+};
+
+CheckIcon.displayName = 'HeroUINative.CheckIcon';

package/lib/__templates__/expo/client/heroui/helpers/internal/components/chevron-down-icon.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface ChevronDownIconProps {
+  size?: number;
+  color?: string;
+}
+
+/**
+ * Chevron down icon component
+ * Reusable SVG icon used in Select and Accordion components
+ */
+export const ChevronDownIcon: React.FC<ChevronDownIconProps> = ({
+  size = 16,
+  color = 'currentColor',
+}) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
+      <Path
+        fillRule="evenodd"
+        d="M4.455 8.205a1.125 1.125 0 0 1 1.59 0L12 14.16l5.955-5.955a1.125 1.125 0 1 1 1.59 1.59l-6.75 6.75a1.125 1.125 0 0 1-1.59 0l-6.75-6.75a1.125 1.125 0 0 1 0-1.59"
+        clipRule="evenodd"
+      />
+    </Svg>
+  );
+};
+
+ChevronDownIcon.displayName = 'HeroUINative.ChevronDownIcon';

package/lib/__templates__/expo/client/heroui/helpers/internal/components/chevron-right-icon.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface ChevronRightIconProps {
+  size?: number;
+  color?: string;
+}
+
+/**
+ * Chevron right icon component
+ * Reusable SVG icon used in ListGroup and navigation components.
+ * Path derived from chevron-down-icon rotated 90° clockwise.
+ */
+export const ChevronRightIcon: React.FC<ChevronRightIconProps> = ({
+  size = 16,
+  color = 'currentColor',
+}) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
+      <Path
+        fillRule="evenodd"
+        d="M8.205 19.545a1.125 1.125 0 0 1 0-1.59L14.16 12l-5.955-5.955a1.125 1.125 0 1 1 1.59-1.59l6.75 6.75a1.125 1.125 0 0 1 0 1.59l-6.75 6.75a1.125 1.125 0 0 1-1.59 0"
+        clipRule="evenodd"
+      />
+    </Svg>
+  );
+};
+
+ChevronRightIcon.displayName = 'HeroUINative.ChevronRightIcon';

package/lib/__templates__/expo/client/heroui/helpers/internal/components/close-icon.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import { useThemeColor } from '../../external/hooks';
+
+interface CloseIconProps {
+  size?: number;
+  color?: string;
+}
+
+export const CloseIcon: React.FC<CloseIconProps> = ({ size = 16, color }) => {
+  const themeColorForeground = useThemeColor('foreground');
+
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill={color ?? themeColorForeground}
+    >
+      <Path
+        d="M3.47 3.47a.75.75 0 0 1 1.06 0L8 6.94l3.47-3.47a.75.75 0 1 1 1.06 1.06L9.06 8l3.47 3.47a.75.75 0 1 1-1.06 1.06L8 9.06l-3.47 3.47a.75.75 0 0 1-1.06-1.06L6.94 8L3.47 4.53a.75.75 0 0 1 0-1.06"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      />
+    </Svg>
+  );
+};
+
+CloseIcon.displayName = 'HeroUINative.CloseIcon';