@coze-arch/cli 0.0.10 → 0.0.11

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import { useThemeColor } from '../../helpers/external/hooks';
+
+interface SearchIconProps {
+  /** @default 16 */
+  size?: number;
+  /** @default Uses theme muted color */
+  color?: string;
+}
+
+/**
+ * Default search magnifying glass SVG icon used by SearchField.SearchIcon.
+ */
+export const SearchIcon: React.FC<SearchIconProps> = ({ size = 16, color }) => {
+  const themeColorMuted = useThemeColor('muted');
+
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      accessibilityRole="image"
+      accessibilityLabel="Search icon"
+    >
+      <Path
+        clipRule="evenodd"
+        d="M11.5 7a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-.82 4.74a6 6 0 1 1 1.06-1.06l2.79 2.79a.75.75 0 1 1-1.06 1.06z"
+        fill={color ?? themeColorMuted}
+        fillRule="evenodd"
+      />
+    </Svg>
+  );
+};
+
+SearchIcon.displayName = 'HeroUINative.SearchIcon';

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

@@ -0,0 +1,28 @@
+export {
+  default as Select,
+  useSelect,
+  useSelectAnimation,
+  useSelectItem,
+} from './select';
+export { selectClassNames } from './select.styles';
+export type {
+  SelectAlign,
+  SelectCloseProps,
+  SelectContentProps,
+  SelectItemDescriptionProps,
+  SelectItemIndicatorIconProps,
+  SelectItemIndicatorProps,
+  SelectItemLabelProps,
+  SelectItemProps,
+  SelectListLabelProps,
+  SelectOverlayProps,
+  SelectPlacement,
+  SelectPortalProps,
+  SelectRootProps,
+  SelectTriggerIndicatorAnimation,
+  SelectTriggerIndicatorIconProps,
+  SelectTriggerIndicatorProps,
+  SelectTriggerProps,
+  SelectTriggerRef,
+  SelectValueProps,
+} from './select.types';

package/lib/__templates__/expo/client/heroui/components/select/select.animation.ts

@@ -0,0 +1,92 @@
+import { useEffect } from 'react';
+import {
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+import { useAnimationSettings } from '../../helpers/internal/contexts';
+import {
+  createContext,
+  getAnimationState,
+  getAnimationValueMergedConfig,
+  getAnimationValueProperty,
+  getIsAnimationDisabledValue,
+} from '../../helpers/internal/utils';
+import { INDICATOR_SPRING_CONFIG } from './select.constants';
+import type {
+  SelectAnimationContextValue,
+  SelectTriggerIndicatorAnimation,
+} from './select.types';
+
+const [SelectAnimationProvider, useSelectAnimation] =
+  createContext<SelectAnimationContextValue>({
+    name: 'SelectAnimationContext',
+  });
+
+export { SelectAnimationProvider, useSelectAnimation };
+
+// --------------------------------------------------
+
+/**
+ * Animation hook for Select Trigger Indicator component
+ * Handles rotation animation for the chevron icon
+ */
+export function useSelectTriggerIndicatorAnimation(options: {
+  animation: SelectTriggerIndicatorAnimation | undefined;
+  isOpen: boolean;
+}) {
+  const { animation, isOpen } = options;
+
+  // Read from global animation context (always available in compound parts)
+  const { isAllAnimationsDisabled } = useAnimationSettings();
+
+  const { animationConfig, isAnimationDisabled } = getAnimationState(animation);
+
+  const isAnimationDisabledValue = getIsAnimationDisabledValue({
+    isAnimationDisabled,
+    isAllAnimationsDisabled,
+  });
+
+  // Rotation animation values
+  const rotationValue = getAnimationValueProperty({
+    animationValue: animationConfig?.rotation,
+    property: 'value',
+    defaultValue: [0, -180] as [number, number],
+  });
+
+  const rotationSpringConfig = getAnimationValueMergedConfig({
+    animationValue: animationConfig?.rotation,
+    property: 'springConfig',
+    defaultValue: INDICATOR_SPRING_CONFIG,
+  });
+
+  const rotation = useSharedValue(0);
+
+  useEffect(() => {
+    if (isAnimationDisabledValue) {
+      rotation.set(isOpen ? 1 : 0);
+    } else {
+      rotation.set(withSpring(isOpen ? 1 : 0, rotationSpringConfig));
+    }
+  }, [isOpen, isAnimationDisabledValue, rotation, rotationSpringConfig]);
+
+  const rContainerStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          rotate:
+            interpolate(
+              rotation.get(),
+              [0, 1],
+              [rotationValue[0], rotationValue[1]]
+            ) + 'deg',
+        },
+      ],
+    };
+  });
+
+  return {
+    rContainerStyle,
+  };
+}

package/lib/__templates__/expo/client/heroui/components/select/select.constants.ts

@@ -0,0 +1,53 @@
+/**
+ * Display names for the Select components
+ */
+export const DISPLAY_NAME = {
+  ROOT: 'HeroUINative.Select.Root',
+  TRIGGER: 'HeroUINative.Select.Trigger',
+  VALUE: 'HeroUINative.Select.Value',
+  PORTAL: 'HeroUINative.Select.Portal',
+  OVERLAY: 'HeroUINative.Select.Overlay',
+  CONTENT: 'HeroUINative.Select.Content',
+  ITEM: 'HeroUINative.Select.Item',
+  ITEM_LABEL: 'HeroUINative.Select.ItemLabel',
+  ITEM_DESCRIPTION: 'HeroUINative.Select.ItemDescription',
+  ITEM_INDICATOR: 'HeroUINative.Select.ItemIndicator',
+  LIST_LABEL: 'HeroUINative.Select.ListLabel',
+  CLOSE: 'HeroUINative.Select.Close',
+  TRIGGER_INDICATOR: 'HeroUINative.Select.TriggerIndicator',
+  CHEVRON_DOWN_ICON: 'HeroUINative.Select.ChevronDownIcon',
+} as const;
+
+/**
+ * Default icon size for the indicator
+ */
+export const DEFAULT_ICON_SIZE = 16;
+
+/**
+ * Spring configuration for indicator animation
+ */
+export const INDICATOR_SPRING_CONFIG = {
+  damping: 140,
+  stiffness: 1000,
+  mass: 4,
+};
+
+/**
+ * Default offset from trigger element
+ */
+export const DEFAULT_OFFSET = 8;
+
+/**
+ * Default alignment offset
+ */
+export const DEFAULT_ALIGN_OFFSET = 0;
+
+/**
+ * Default screen edge insets
+ */
+export const DEFAULT_INSETS = {
+  top: 12,
+  bottom: 12,
+  left: 12,
+  right: 12,
+};