@coze-arch/cli 0.0.10 → 0.0.11

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

@@ -0,0 +1,394 @@
+import type BottomSheet from '@gorhom/bottom-sheet';
+import type { ReactNode } from 'react';
+import type { TextProps } from 'react-native';
+import type { SharedValue, WithTimingConfig } from 'react-native-reanimated';
+import type {
+  Animation,
+  AnimationRootDisableAll,
+  AnimationValue,
+  BaseBottomSheetContentProps,
+  PopupOverlayAnimation,
+  PopupPopoverContentAnimation,
+} from '../../helpers/internal/types';
+import type * as MenuPrimitivesTypes from '../../primitives/menu/menu.types';
+import type { CloseButtonProps } from '../close-button/close-button.types';
+
+/**
+ * Context value for menu animation state
+ */
+export interface MenuAnimationContextValue {
+  /** Animation progress shared value (0=idle, 1=open, 2=close) */
+  progress: SharedValue<number>;
+  /** Dragging state shared value */
+  isDragging: SharedValue<boolean>;
+}
+
+/**
+ * Ref type for the Menu Trigger component
+ */
+export type MenuTriggerRef = MenuPrimitivesTypes.TriggerRef;
+
+/**
+ * Presentation mode for the menu content
+ */
+export type MenuPresentation = 'popover' | 'bottom-sheet';
+
+/**
+ * Menu placement options
+ */
+export type MenuPlacement = 'top' | 'bottom' | 'left' | 'right';
+
+/**
+ * Menu alignment options
+ */
+export type MenuAlign = 'start' | 'center' | 'end';
+
+/**
+ * Menu context value with presentation and placement
+ */
+export interface MenuContentContextValue {
+  /**
+   * Current placement of the menu
+   */
+  placement?: MenuPlacement;
+}
+
+/**
+ * Menu Root component props
+ */
+export interface MenuRootProps extends MenuPrimitivesTypes.RootProps {
+  /**
+   * The content of the menu
+   */
+  children?: ReactNode;
+  /**
+   * Animation configuration for menu root
+   * - `"disable-all"`: Disable all animations including children
+   * - `true` or `undefined`: Use default animations
+   */
+  animation?: AnimationRootDisableAll;
+}
+
+/**
+ * Menu Trigger component props
+ */
+export interface MenuTriggerProps extends MenuPrimitivesTypes.TriggerProps {
+  /**
+   * The trigger element content
+   */
+  children?: ReactNode;
+  /**
+   * Additional CSS class for the trigger
+   */
+  className?: string;
+}
+
+/**
+ * Menu Portal component props
+ */
+export interface MenuPortalProps extends MenuPrimitivesTypes.PortalProps {
+  /**
+   * When true, uses a regular View instead of FullWindowOverlay on iOS.
+   * Enables React Native element inspector but overlay won't appear above native modals.
+   * @default false
+   */
+  disableFullWindowOverlay?: boolean;
+  /**
+   * Additional CSS class for the portal container
+   */
+  className?: string;
+  /**
+   * The portal content
+   */
+  children: ReactNode;
+}
+
+/**
+ * Menu Overlay component props
+ */
+export interface MenuOverlayProps extends MenuPrimitivesTypes.OverlayProps {
+  /**
+   * Additional CSS class for the overlay
+   */
+  className?: string;
+  /**
+   * Animation configuration for overlay
+   * - `false` or `"disabled"`: Disable all animations
+   * - `true` or `undefined`: Use default animations
+   * - `object`: Custom animation configuration
+   */
+  animation?: PopupOverlayAnimation;
+  /**
+   * Whether animated styles (react-native-reanimated) are active
+   * When `false`, the animated style is removed and you can implement custom logic
+   * @default true
+   */
+  isAnimatedStyleActive?: boolean;
+}
+
+/**
+ * Menu Content props for 'popover' presentation
+ */
+export interface MenuContentPopoverProps
+  extends MenuPrimitivesTypes.ContentProps {
+  /**
+   * Presentation mode for the menu content
+   */
+  presentation: 'popover';
+  /**
+   * Additional CSS class for the content container
+   */
+  className?: string;
+  /**
+   * The menu content
+   */
+  children?: ReactNode;
+  /**
+   * Animation configuration for content
+   * - `false` or `"disabled"`: Disable all animations
+   * - `true` or `undefined`: Use default animations
+   * - `object`: Custom animation configuration
+   */
+  animation?: PopupPopoverContentAnimation;
+}
+
+/**
+ * Menu Content props for 'bottom-sheet' presentation
+ */
+export interface MenuContentBottomSheetProps
+  extends Partial<React.ComponentProps<typeof BottomSheet>>,
+    BaseBottomSheetContentProps {
+  /**
+   * Presentation mode for the menu
+   */
+  presentation: 'bottom-sheet';
+}
+
+/**
+ * Menu Content component props
+ */
+export type MenuContentProps =
+  | MenuContentPopoverProps
+  | MenuContentBottomSheetProps;
+
+/**
+ * Menu Close component props
+ *
+ * Extends CloseButtonProps, allowing full override of all close button props.
+ * Automatically handles menu close functionality when pressed.
+ */
+export type MenuCloseProps = CloseButtonProps;
+
+// --------------------------------------------------
+// Group
+// --------------------------------------------------
+
+/**
+ * Menu Group component props
+ */
+export interface MenuGroupProps
+  extends Omit<MenuPrimitivesTypes.GroupProps, 'asChild'> {
+  /**
+   * Additional CSS class for the group container
+   */
+  className?: string;
+  /**
+   * The group content (Menu.Item elements)
+   */
+  children?: ReactNode;
+}
+
+// --------------------------------------------------
+// Label
+// --------------------------------------------------
+
+/**
+ * Menu Label component props
+ */
+export interface MenuLabelProps extends TextProps {
+  /**
+   * Additional CSS class for the label
+   */
+  className?: string;
+}
+
+// --------------------------------------------------
+// Item
+// --------------------------------------------------
+
+/**
+ * Animation configuration for a Menu Item.
+ * Controls scale and background-color transitions on press.
+ *
+ * - `true` or `undefined`: Use default animations
+ * - `false` or `"disabled"`: Disable all item animations
+ * - `object`: Custom animation configuration
+ */
+export type MenuItemAnimation = Animation<{
+  /**
+   * Scale animation when pressed
+   */
+  scale?: AnimationValue<{
+    /**
+     * Scale value when pressed
+     * @default 0.99
+     */
+    value?: number;
+    /**
+     * Animation timing configuration
+     * @default { duration: 200, easing: Easing.out(Easing.ease) }
+     */
+    timingConfig?: WithTimingConfig;
+  }>;
+  /**
+   * Background-color animation when pressed
+   */
+  backgroundColor?: AnimationValue<{
+    /**
+     * Background color shown while pressed.
+     * Resolved from the `default` theme token when omitted.
+     * @default useThemeColor('default')
+     */
+    value?: string;
+    /**
+     * Animation timing configuration
+     * @default { duration: 150 }
+     */
+    timingConfig?: WithTimingConfig;
+  }>;
+}>;
+
+/**
+ * Render function props for MenuItem children
+ */
+export interface MenuItemRenderProps {
+  /** Whether this item is currently selected */
+  isSelected: boolean;
+  /** Whether the item is disabled */
+  isDisabled: boolean;
+  /** Whether the item is currently pressed */
+  isPressed: SharedValue<boolean>;
+  /** Visual variant of the item */
+  variant: MenuPrimitivesTypes.ItemVariant;
+}
+
+/**
+ * Menu Item component props
+ */
+export interface MenuItemProps
+  extends Omit<MenuPrimitivesTypes.ItemProps, 'children'> {
+  /**
+   * Additional CSS class for the item
+   */
+  className?: string;
+  /**
+   * Animation configuration for press feedback (scale + background color).
+   * - `false` or `"disabled"`: Disable all item animations
+   * - `true` or `undefined`: Use default animations
+   * - `object`: Custom animation configuration
+   */
+  animation?: MenuItemAnimation;
+  /**
+   * Whether animated styles (react-native-reanimated) are active.
+   * When `false`, the animated style is removed and you can implement custom logic.
+   * @default true
+   */
+  isAnimatedStyleActive?: boolean;
+  /**
+   * Child elements to render inside the item, or a render function
+   */
+  children?: ReactNode | ((props: MenuItemRenderProps) => ReactNode);
+}
+
+/**
+ * Menu ItemTitle component props
+ */
+export interface MenuItemTitleProps extends TextProps {
+  /**
+   * Additional CSS class for the item title
+   */
+  className?: string;
+}
+
+/**
+ * Menu ItemDescription component props
+ */
+export interface MenuItemDescriptionProps extends TextProps {
+  /**
+   * Additional CSS class for the item description
+   */
+  className?: string;
+}
+
+/**
+ * Visual variant for the item indicator.
+ * - `'checkmark'` – Renders a check icon when selected.
+ * - `'dot'`       – Renders a small filled circle when selected.
+ */
+export type MenuItemIndicatorVariant = 'checkmark' | 'dot';
+
+/**
+ * Menu Item Indicator Icon props (applies to the `'checkmark'` variant)
+ */
+export interface MenuItemIndicatorIconProps {
+  /**
+   * Size of the check icon
+   * @default 16
+   */
+  size?: number;
+  /**
+   * Color of the check icon
+   */
+  color?: string;
+}
+
+/**
+ * Menu ItemIndicator component props
+ */
+export interface MenuItemIndicatorProps
+  extends MenuPrimitivesTypes.ItemIndicatorProps {
+  /**
+   * Additional CSS class for the item indicator
+   */
+  className?: string;
+  /**
+   * Visual variant of the indicator.
+   * - `'checkmark'` renders a check icon
+   * - `'dot'` renders a filled circle
+   * @default 'checkmark'
+   */
+  variant?: MenuItemIndicatorVariant;
+  /**
+   * Check icon props (only used when `variant` is `'checkmark'`)
+   */
+  iconProps?: MenuItemIndicatorIconProps;
+}
+
+// --------------------------------------------------
+// Hook return types
+// --------------------------------------------------
+
+/**
+ * Return type for the useMenu hook
+ */
+export type UseMenuReturn = MenuPrimitivesTypes.IRootContext;
+
+/**
+ * Return type for the useMenuAnimation hook
+ */
+export interface UseMenuAnimationReturn {
+  /** Animation progress shared value (0=idle, 1=open, 2=close) */
+  progress: SharedValue<number>;
+  /** Dragging state shared value */
+  isDragging: SharedValue<boolean>;
+}
+
+// --------------------------------------------------
+// Re-export primitive types used by consumers
+// --------------------------------------------------
+
+export type {
+  GroupSelectionMode as MenuGroupSelectionMode,
+  ItemVariant as MenuItemVariant,
+  MenuKey,
+} from '../../primitives/menu/menu.types';

package/lib/__templates__/expo/client/heroui/components/popover/arrow-svg.tsx

@@ -0,0 +1,180 @@
+import type { ComponentProps } from 'react';
+import type { ViewStyle } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+
+export interface ArrowSvgProps {
+  width: number;
+  height: number;
+  placement: 'top' | 'bottom' | 'left' | 'right';
+  fill: string;
+  stroke?: string;
+  strokeWidth?: number;
+  style?: ViewStyle;
+  svgProps?: ComponentProps<typeof Svg>;
+}
+
+export const ArrowSvg = ({
+  width,
+  height,
+  placement,
+  fill,
+  stroke,
+  strokeWidth = 1,
+  style,
+  svgProps,
+}: ArrowSvgProps) => {
+  const getPaths = () => {
+    const strokePadding = strokeWidth / 2;
+    const cornerRadius = 2;
+    const baselineInset = strokeWidth;
+
+    switch (placement) {
+      case 'top': {
+        const tipX = width / 2;
+        const tipY = height - strokePadding;
+
+        const fillLeftX = strokePadding;
+        const fillLeftY = strokePadding;
+        const fillRightX = width - strokePadding;
+        const fillRightY = strokePadding;
+        const fillPath = `M ${fillLeftX} ${fillLeftY} L ${tipX} ${tipY} L ${fillRightX} ${fillRightY} Z`;
+
+        const strokeLeftX = strokePadding;
+        const strokeLeftY = strokePadding + baselineInset;
+        const strokeRightX = width - strokePadding;
+        const strokeRightY = strokePadding + baselineInset;
+        const leftTipX = tipX - cornerRadius;
+        const leftTipY = tipY - cornerRadius * 0.8;
+        const rightTipX = tipX + cornerRadius;
+        const rightTipY = tipY - cornerRadius * 0.8;
+        const strokePath = `M ${strokeLeftX} ${strokeLeftY} L ${leftTipX} ${leftTipY} Q ${tipX} ${tipY} ${rightTipX} ${rightTipY} L ${strokeRightX} ${strokeRightY}`;
+
+        return {
+          fillPath,
+          strokePath,
+          viewBox: `0 0 ${width} ${height}`,
+          svgWidth: width,
+          svgHeight: height,
+        };
+      }
+
+      case 'bottom': {
+        const tipX = width / 2;
+        const tipY = strokePadding;
+
+        const fillLeftX = strokePadding;
+        const fillLeftY = height - strokePadding;
+        const fillRightX = width - strokePadding;
+        const fillRightY = height - strokePadding;
+        const fillPath = `M ${fillLeftX} ${fillLeftY} L ${tipX} ${tipY} L ${fillRightX} ${fillRightY} Z`;
+
+        const strokeLeftX = strokePadding;
+        const strokeLeftY = height - strokePadding - baselineInset;
+        const strokeRightX = width - strokePadding;
+        const strokeRightY = height - strokePadding - baselineInset;
+        const leftTipX = tipX - cornerRadius;
+        const leftTipY = tipY + cornerRadius * 0.8;
+        const rightTipX = tipX + cornerRadius;
+        const rightTipY = tipY + cornerRadius * 0.8;
+        const strokePath = `M ${strokeLeftX} ${strokeLeftY} L ${leftTipX} ${leftTipY} Q ${tipX} ${tipY} ${rightTipX} ${rightTipY} L ${strokeRightX} ${strokeRightY}`;
+
+        return {
+          fillPath,
+          strokePath,
+          viewBox: `0 0 ${width} ${height}`,
+          svgWidth: width,
+          svgHeight: height,
+        };
+      }
+
+      case 'left': {
+        const tipX = height - strokePadding;
+        const tipY = width / 2;
+
+        const fillTopX = strokePadding;
+        const fillTopY = strokePadding;
+        const fillBottomX = strokePadding;
+        const fillBottomY = width - strokePadding;
+        const fillPath = `M ${fillTopX} ${fillTopY} L ${tipX} ${tipY} L ${fillBottomX} ${fillBottomY} Z`;
+
+        const strokeTopX = strokePadding + baselineInset;
+        const strokeTopY = strokePadding;
+        const strokeBottomX = strokePadding + baselineInset;
+        const strokeBottomY = width - strokePadding;
+        const topTipX = tipX - cornerRadius * 0.8;
+        const topTipY = tipY - cornerRadius;
+        const bottomTipX = tipX - cornerRadius * 0.8;
+        const bottomTipY = tipY + cornerRadius;
+        const strokePath = `M ${strokeTopX} ${strokeTopY} L ${topTipX} ${topTipY} Q ${tipX} ${tipY} ${bottomTipX} ${bottomTipY} L ${strokeBottomX} ${strokeBottomY}`;
+
+        return {
+          fillPath,
+          strokePath,
+          viewBox: `0 0 ${height} ${width}`,
+          svgWidth: height,
+          svgHeight: width,
+        };
+      }
+
+      case 'right': {
+        const tipX = strokePadding;
+        const tipY = width / 2;
+
+        const fillTopX = height - strokePadding;
+        const fillTopY = strokePadding;
+        const fillBottomX = height - strokePadding;
+        const fillBottomY = width - strokePadding;
+        const fillPath = `M ${fillTopX} ${fillTopY} L ${tipX} ${tipY} L ${fillBottomX} ${fillBottomY} Z`;
+
+        const strokeTopX = height - strokePadding - baselineInset;
+        const strokeTopY = strokePadding;
+        const strokeBottomX = height - strokePadding - baselineInset;
+        const strokeBottomY = width - strokePadding;
+        const topTipX = tipX + cornerRadius * 0.8;
+        const topTipY = tipY - cornerRadius;
+        const bottomTipX = tipX + cornerRadius * 0.8;
+        const bottomTipY = tipY + cornerRadius;
+        const strokePath = `M ${strokeTopX} ${strokeTopY} L ${topTipX} ${topTipY} Q ${tipX} ${tipY} ${bottomTipX} ${bottomTipY} L ${strokeBottomX} ${strokeBottomY}`;
+
+        return {
+          fillPath,
+          strokePath,
+          viewBox: `0 0 ${height} ${width}`,
+          svgWidth: height,
+          svgHeight: width,
+        };
+      }
+
+      default:
+        return {
+          fillPath: '',
+          strokePath: '',
+          viewBox: '0 0 0 0',
+          svgWidth: 0,
+          svgHeight: 0,
+        };
+    }
+  };
+
+  const { fillPath, strokePath, viewBox, svgWidth, svgHeight } = getPaths();
+
+  return (
+    <Svg
+      width={svgWidth}
+      height={svgHeight}
+      viewBox={viewBox}
+      style={style}
+      {...svgProps}
+    >
+      <Path d={fillPath} fill={fill} stroke="none" />
+      <Path
+        d={strokePath}
+        fill="none"
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};

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

@@ -0,0 +1,18 @@
+export { default as Popover, usePopover, usePopoverAnimation } from './popover';
+export { popoverClassNames } from './popover.styles';
+export type {
+  PopoverAlign,
+  PopoverArrowProps,
+  PopoverCloseProps,
+  PopoverContentProps,
+  PopoverDescriptionProps,
+  PopoverOverlayProps,
+  PopoverPlacement,
+  PopoverPortalProps,
+  PopoverRootProps,
+  PopoverTitleProps,
+  PopoverTriggerProps,
+  PopoverTriggerRef,
+  UsePopoverAnimationReturn,
+  UsePopoverReturn,
+} from './popover.types';

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

@@ -0,0 +1,9 @@
+import { createContext } from '../../helpers/internal/utils';
+import type { PopoverAnimationContextValue } from './popover.types';
+
+const [PopoverAnimationProvider, usePopoverAnimation] =
+  createContext<PopoverAnimationContextValue>({
+    name: 'PopoverAnimationContext',
+  });
+
+export { PopoverAnimationProvider, usePopoverAnimation };

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

@@ -0,0 +1,34 @@
+/**
+ * Display names for the Popover components
+ */
+export const DISPLAY_NAME = {
+  ROOT: 'HeroUINative.Popover.Root',
+  TRIGGER: 'HeroUINative.Popover.Trigger',
+  PORTAL: 'HeroUINative.Popover.Portal',
+  OVERLAY: 'HeroUINative.Popover.Overlay',
+  CONTENT: 'HeroUINative.Popover.Content',
+  CLOSE: 'HeroUINative.Popover.Close',
+  TITLE: 'HeroUINative.Popover.Title',
+  DESCRIPTION: 'HeroUINative.Popover.Description',
+  ARROW: 'HeroUINative.Popover.Arrow',
+};
+
+/**
+ * Default offset from trigger element
+ */
+export const DEFAULT_OFFSET = 9;
+
+/**
+ * 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,
+};