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

package/lib/__templates__/expo/client/heroui/components/dialog/dialog.styles.ts

@@ -1,77 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { tv } from 'tailwind-variants';
-import { combineStyles } from '../../helpers/internal/utils';
-
-const portal = tv({
-  base: 'absolute inset-0 justify-center p-5',
-});
-
-/**
- * Overlay style definition
- *
- * @note ANIMATED PROPERTIES (cannot be set via className):
- * The following property is animated and cannot be overridden using Tailwind classes:
- * - `opacity` - Animated for overlay show/hide transitions (idle: 0, open: 1, close: 0)
- *
- * To customize this property, use the `animation` prop on `Dialog.Overlay`:
- * ```tsx
- * <Dialog.Overlay
- *   animation={{
- *     opacity: { value: [0, 1, 0] }
- *   }}
- * />
- * ```
- *
- * To completely disable animated styles and apply your own via className or style prop,
- * set `isAnimatedStyleActive={false}` on `Dialog.Overlay`.
- */
-const overlay = tv({
-  base: 'absolute inset-0 bg-black/10',
-});
-
-/**
- * Content style definition
- *
- * @note ANIMATED PROPERTIES (cannot be set via className):
- * The following properties are animated and cannot be overridden using Tailwind classes:
- * - `opacity` - Animated for content show/hide transitions (idle: 0, open: 1, close: 0)
- * - `transform` (specifically `scale`) - Animated for content show/hide transitions (idle: 0.97, open: 1, close: 0.97)
- *
- * To customize these properties, use the `animation` prop on `Dialog.Content`:
- * ```tsx
- * <Dialog.Content
- *   animation={{
- *     opacity: { value: [0, 1, 0] },
- *     scale: { value: [0.97, 1, 0.97] }
- *   }}
- * />
- * ```
- *
- * To completely disable animated styles and apply your own via className or style prop,
- * set `isAnimatedStyleActive={false}` on `Dialog.Content`.
- */
-const content = tv({
-  base: 'bg-overlay p-5 rounded-3xl shadow-overlay',
-});
-
-const label = tv({
-  base: 'text-lg font-medium text-foreground',
-});
-
-const description = tv({
-  base: 'text-base text-muted',
-});
-
-export const dialogClassNames = combineStyles({
-  portal,
-  overlay,
-  content,
-  label,
-  description,
-});
-
-export const dialogStyleSheet = StyleSheet.create({
-  contentContainer: {
-    borderCurve: 'continuous',
-  },
-});

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

@@ -1,379 +0,0 @@
-import { forwardRef, useLayoutEffect, useMemo, useRef } from 'react';
-import {
-  StyleSheet,
-  type GestureResponderEvent,
-  type Text as RNText,
-  type View,
-} from 'react-native';
-import { GestureDetector } from 'react-native-gesture-handler';
-import Animated from 'react-native-reanimated';
-import { FullWindowOverlay, HeroText } from '../../helpers/internal/components';
-import {
-  AnimationSettingsProvider,
-  useAnimationSettings,
-} from '../../helpers/internal/contexts';
-import {
-  usePopupDialogContentAnimation,
-  usePopupOverlayAnimation,
-  usePopupRootAnimation,
-} from '../../helpers/internal/hooks';
-import type { PressableRef } from '../../helpers/internal/types';
-import * as DialogPrimitives from '../../primitives/dialog';
-import * as DialogPrimitivesTypes from '../../primitives/dialog/dialog.types';
-import { CloseButton } from '../close-button';
-import {
-  DialogAnimationProvider,
-  useDialogAnimation,
-} from './dialog.animation';
-import { DISPLAY_NAME } from './dialog.constants';
-import { dialogClassNames, dialogStyleSheet } from './dialog.styles';
-import type {
-  DialogCloseProps,
-  DialogContentProps,
-  DialogDescriptionProps,
-  DialogOverlayProps,
-  DialogPortalProps,
-  DialogRootProps,
-  DialogTitleProps,
-  DialogTriggerProps,
-} from './dialog.types';
-
-const AnimatedOverlay = Animated.createAnimatedComponent(
-  DialogPrimitives.Overlay
-);
-
-const useDialog = DialogPrimitives.useRootContext;
-
-// --------------------------------------------------
-
-const DialogRoot = forwardRef<DialogPrimitivesTypes.RootRef, DialogRootProps>(
-  (
-    { children, isOpen, isDefaultOpen, onOpenChange, animation, ...props },
-    ref
-  ) => {
-    const {
-      progress,
-      isDragging,
-      isGestureReleaseAnimationRunning,
-      isAllAnimationsDisabled,
-    } = usePopupRootAnimation({
-      animation,
-    });
-
-    const animationContextValue = useMemo(
-      () => ({
-        progress,
-        isDragging,
-        isGestureReleaseAnimationRunning,
-      }),
-      [progress, isDragging, isGestureReleaseAnimationRunning]
-    );
-
-    const animationSettingsContextValue = useMemo(
-      () => ({
-        isAllAnimationsDisabled,
-      }),
-      [isAllAnimationsDisabled]
-    );
-
-    return (
-      <AnimationSettingsProvider value={animationSettingsContextValue}>
-        <DialogAnimationProvider value={animationContextValue}>
-          <DialogPrimitives.Root
-            ref={ref}
-            isOpen={isOpen}
-            isDefaultOpen={isDefaultOpen}
-            onOpenChange={onOpenChange}
-            {...props}
-          >
-            {children}
-          </DialogPrimitives.Root>
-        </DialogAnimationProvider>
-      </AnimationSettingsProvider>
-    );
-  }
-);
-
-// --------------------------------------------------
-
-const DialogTrigger = forwardRef<
-  DialogPrimitivesTypes.TriggerRef,
-  DialogTriggerProps
->((props, ref) => {
-  return <DialogPrimitives.Trigger ref={ref} {...props} />;
-});
-
-// --------------------------------------------------
-
-const DialogPortal = ({
-  className,
-  children,
-  style,
-  disableFullWindowOverlay = false,
-  ...props
-}: DialogPortalProps) => {
-  const animationSettingsContext = useAnimationSettings();
-  const animationContext = useDialogAnimation();
-
-  const portalClassName = dialogClassNames.portal({ className });
-
-  return (
-    <DialogPrimitives.Portal {...props}>
-      <AnimationSettingsProvider value={animationSettingsContext}>
-        <DialogAnimationProvider value={animationContext}>
-          <FullWindowOverlay
-            disableFullWindowOverlay={disableFullWindowOverlay}
-          >
-            <Animated.View
-              className={portalClassName}
-              style={style}
-              pointerEvents="box-none"
-            >
-              {children}
-            </Animated.View>
-          </FullWindowOverlay>
-        </DialogAnimationProvider>
-      </AnimationSettingsProvider>
-    </DialogPrimitives.Portal>
-  );
-};
-
-// --------------------------------------------------
-
-const DialogOverlay = forwardRef<
-  DialogPrimitivesTypes.OverlayRef,
-  DialogOverlayProps
->(
-  (
-    { className, style, animation, isAnimatedStyleActive = true, ...props },
-    ref
-  ) => {
-    const { isOpen } = useDialog();
-
-    const { progress, isDragging, isGestureReleaseAnimationRunning } =
-      useDialogAnimation();
-
-    const overlayClassName = dialogClassNames.overlay({ className });
-
-    const { rContainerStyle, entering, exiting } = usePopupOverlayAnimation({
-      progress,
-      isDragging,
-      isGestureReleaseAnimationRunning,
-      animation,
-    });
-
-    if (!isOpen) {
-      return null;
-    }
-
-    const overlayStyle = isAnimatedStyleActive
-      ? [rContainerStyle, style]
-      : style;
-
-    return (
-      <Animated.View
-        entering={entering}
-        exiting={exiting}
-        style={StyleSheet.absoluteFill}
-      >
-        <AnimatedOverlay
-          ref={ref}
-          className={overlayClassName}
-          style={overlayStyle}
-          {...props}
-        />
-      </Animated.View>
-    );
-  }
-);
-
-// --------------------------------------------------
-
-const DialogContent = forwardRef<
-  DialogPrimitivesTypes.ContentRef,
-  DialogContentProps
->(
-  (
-    { className, style, children, animation, isSwipeable = true, ...props },
-    ref
-  ) => {
-    const { isOpen, onOpenChange } = useDialog();
-
-    const { progress, isDragging, isGestureReleaseAnimationRunning } =
-      useDialogAnimation();
-
-    const contentClassName = dialogClassNames.content({ className });
-
-    const dragContainerRef = useRef<View>(null);
-
-    const {
-      contentY,
-      contentHeight,
-      panGesture,
-      rDragContainerStyle,
-      entering,
-      exiting,
-    } = usePopupDialogContentAnimation({
-      progress,
-      isDragging,
-      isGestureReleaseAnimationRunning,
-      isOpen,
-      onOpenChange,
-      animation,
-      isSwipeable,
-    });
-
-    useLayoutEffect(() => {
-      dragContainerRef.current?.measure(
-        (_x, _y, _width, height, _pageX, pageY) => {
-          contentY.set(pageY);
-          contentHeight.set(height);
-        }
-      );
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    return (
-      <GestureDetector gesture={panGesture}>
-        <Animated.View
-          ref={dragContainerRef}
-          entering={entering}
-          exiting={exiting}
-        >
-          <Animated.View style={rDragContainerStyle} pointerEvents="box-none">
-            <DialogPrimitives.Content
-              ref={ref}
-              className={contentClassName}
-              style={[dialogStyleSheet.contentContainer, style]}
-              {...props}
-            >
-              {children}
-            </DialogPrimitives.Content>
-          </Animated.View>
-        </Animated.View>
-      </GestureDetector>
-    );
-  }
-);
-
-// --------------------------------------------------
-
-const DialogClose = forwardRef<PressableRef, DialogCloseProps>((props, ref) => {
-  const { onPress: onPressProp, ...restProps } = props;
-  const { onOpenChange } = useDialog();
-
-  const onPress = (ev: GestureResponderEvent) => {
-    onOpenChange(false);
-    if (typeof onPressProp === 'function') {
-      onPressProp(ev);
-    }
-  };
-
-  return <CloseButton ref={ref} onPress={onPress} {...restProps} />;
-});
-
-// --------------------------------------------------
-
-const DialogTitle = forwardRef<RNText, DialogTitleProps>(
-  ({ className, children, ...props }, ref) => {
-    const { nativeID } = useDialog();
-    const titleClassName = dialogClassNames.label({ className });
-
-    return (
-      <HeroText
-        ref={ref}
-        role="heading"
-        accessibilityRole="header"
-        nativeID={`${nativeID}_label`}
-        className={titleClassName}
-        {...props}
-      >
-        {children}
-      </HeroText>
-    );
-  }
-);
-
-// --------------------------------------------------
-
-const DialogDescription = forwardRef<RNText, DialogDescriptionProps>(
-  ({ className, children, ...props }, ref) => {
-    const { nativeID } = useDialog();
-
-    const descriptionClassName = dialogClassNames.description({
-      className,
-    });
-
-    return (
-      <HeroText
-        ref={ref}
-        accessibilityRole="text"
-        nativeID={`${nativeID}_desc`}
-        className={descriptionClassName}
-        {...props}
-      >
-        {children}
-      </HeroText>
-    );
-  }
-);
-
-// --------------------------------------------------
-
-DialogRoot.displayName = DISPLAY_NAME.ROOT;
-DialogTrigger.displayName = DISPLAY_NAME.TRIGGER;
-DialogPortal.displayName = DISPLAY_NAME.PORTAL;
-DialogOverlay.displayName = DISPLAY_NAME.OVERLAY;
-DialogContent.displayName = DISPLAY_NAME.CONTENT;
-DialogClose.displayName = DISPLAY_NAME.CLOSE;
-DialogTitle.displayName = DISPLAY_NAME.TITLE;
-DialogDescription.displayName = DISPLAY_NAME.DESCRIPTION;
-
-/**
- * Compound Dialog component with sub-components
- *
- * @component Dialog.Root - Main container that manages open/close state.
- * Provides the dialog context to child components.
- *
- * @component Dialog.Trigger - Button or element that opens the dialog.
- * Accepts any pressable element as children.
- *
- * @component Dialog.Portal - Portal container for dialog overlay and content.
- * Renders children in a portal with centered layout.
- *
- * @component Dialog.Overlay - Background overlay that covers the screen.
- * Typically closes the dialog when clicked.
- *
- * @component Dialog.Content - The dialog content container.
- * Contains the main dialog UI elements.
- *
- * @component Dialog.Close - Close button for the dialog.
- * Can accept custom children or uses default close icon.
- *
- * @component Dialog.Title - The dialog title text.
- * Automatically linked for accessibility.
- *
- * @component Dialog.Description - The dialog description text.
- * Automatically linked for accessibility.
- *
- * @see Full documentation: https://v3.heroui.com/docs/native/components/dialog
- */
-const Dialog = Object.assign(DialogRoot, {
-  /** @optional Trigger element to open the dialog */
-  Trigger: DialogTrigger,
-  /** @optional Portal container for overlay and content */
-  Portal: DialogPortal,
-  /** @optional Background overlay */
-  Overlay: DialogOverlay,
-  /** @optional Main dialog content container */
-  Content: DialogContent,
-  /** @optional Close button for the dialog */
-  Close: DialogClose,
-  /** @optional Dialog title text */
-  Title: DialogTitle,
-  /** @optional Dialog description text */
-  Description: DialogDescription,
-});
-
-export { useDialog, useDialogAnimation };
-export default Dialog;

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

@@ -1,199 +0,0 @@
-import type { ReactNode } from 'react';
-import type { StyleProp, TextProps, ViewStyle } from 'react-native';
-import type { SharedValue } from 'react-native-reanimated';
-import type {
-  AnimationRootDisableAll,
-  PopupDialogContentAnimation,
-  PopupOverlayAnimation,
-} from '../../helpers/internal/types';
-import type * as DialogPrimitivesTypes from '../../primitives/dialog/dialog.types';
-import type { CloseButtonProps } from '../close-button/close-button.types';
-
-/**
- * Dialog internal state for animation coordination
- */
-export type DialogState = 'idle' | 'open' | 'close';
-
-/**
- * Context value for dialog animation state
- */
-export interface DialogAnimationContextValue {
-  /** Animation progress shared value (0=idle, 1=open, 2=close) */
-  progress: SharedValue<number>;
-  /** Dragging state shared value */
-  isDragging: SharedValue<boolean>;
-  /** Gesture release animation running state shared value */
-  isGestureReleaseAnimationRunning: SharedValue<boolean>;
-}
-
-/**
- * Dialog Root component props
- */
-export interface DialogRootProps extends DialogPrimitivesTypes.RootProps {
-  /**
-   * The content of the dialog
-   */
-  children?: ReactNode;
-  /**
-   * Animation configuration for dialog root
-   * - `"disable-all"`: Disable all animations including children
-   * - `false` or `"disabled"`: Disable only root animations
-   * - `true` or `undefined`: Use default animations
-   */
-  animation?: AnimationRootDisableAll;
-}
-
-/**
- * Dialog Trigger component props
- */
-export interface DialogTriggerProps extends DialogPrimitivesTypes.TriggerProps {
-  /**
-   * The trigger element content
-   */
-  children?: ReactNode;
-}
-
-/**
- * Dialog Portal component props
- */
-export interface DialogPortalProps extends DialogPrimitivesTypes.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;
-  /**
-   * Additional style for the portal container
-   */
-  style?: StyleProp<ViewStyle>;
-  /**
-   * The portal content
-   */
-  children: ReactNode;
-}
-
-/**
- * Animation configuration for Dialog Overlay component
- */
-export type DialogOverlayAnimation = PopupOverlayAnimation;
-
-/**
- * Dialog Overlay component props
- */
-export interface DialogOverlayProps
-  extends Omit<DialogPrimitivesTypes.OverlayProps, 'asChild'> {
-  /**
-   * Additional CSS class for the overlay
-   *
-   * @note The following style properties are occupied by animations and cannot be set via className:
-   * - `opacity` - Animated for overlay show/hide transitions (idle: 0, open: 1, close: 0)
-   *
-   * To customize this property, use the `animation` prop:
-   * ```tsx
-   * <Dialog.Overlay
-   *   animation={{
-   *     opacity: { value: [0, 1, 0] }
-   *   }}
-   * />
-   * ```
-   *
-   * To completely disable animated styles and use your own via className or style prop, set `isAnimatedStyleActive={false}`.
-   */
-  className?: string;
-  /**
-   * Animation configuration for overlay
-   * - `false` or `"disabled"`: Disable all animations
-   * - `true` or `undefined`: Use default animations
-   * - `object`: Custom animation configuration
-   */
-  animation?: DialogOverlayAnimation;
-  /**
-   * Whether animated styles (react-native-reanimated) are active
-   * When `false`, the animated style is removed and you can implement custom logic
-   * This prop should only be used when you want to write custom styling logic instead of the default animated styles
-   * @default true
-   */
-  isAnimatedStyleActive?: boolean;
-}
-
-/**
- * Animation configuration for Dialog Content component
- * Reuses PopupDialogContentAnimation since they share the same animation behavior
- */
-export type DialogContentAnimation = PopupDialogContentAnimation;
-
-/**
- * Dialog Content component props
- */
-export interface DialogContentProps
-  extends Omit<DialogPrimitivesTypes.ContentProps, 'asChild'> {
-  /**
-   * Additional CSS class for the content container
-   *
-   * @note The following style properties are occupied by animations and cannot be set via className:
-   * - `opacity` - Animated for content show/hide transitions (idle: 0, open: 1, close: 0)
-   * - `transform` (specifically `scale`) - Animated for content show/hide transitions (idle: 0.97, open: 1, close: 0.97)
-   *
-   * To customize these properties, use the `animation` prop:
-   * ```tsx
-   * <Dialog.Content
-   *   animation={{
-   *     opacity: { value: [0, 1, 0] },
-   *     scale: { value: [0.97, 1, 0.97] }
-   *   }}
-   * />
-   * ```
-   *
-   * To completely disable animated styles and use your own via className or style prop, set `isAnimatedStyleActive={false}`.
-   */
-  className?: string;
-  /**
-   * The dialog content
-   */
-  children?: ReactNode;
-  /**
-   * Animation configuration for content
-   * - `false` or `"disabled"`: Disable all animations
-   * - `true` or `undefined`: Use default animations
-   * - `object`: Custom animation configuration
-   */
-  animation?: DialogContentAnimation;
-  /**
-   * Whether the dialog content can be swiped to dismiss
-   * @default true
-   */
-  isSwipeable?: boolean;
-}
-
-/**
- * Dialog Close component props
- *
- * Extends CloseButtonProps, allowing full override of all close button props.
- * Automatically handles dialog close functionality when pressed.
- */
-export type DialogCloseProps = CloseButtonProps;
-
-/**
- * Dialog Title component props
- */
-export interface DialogTitleProps extends TextProps {
-  /**
-   * Additional CSS class for the title
-   */
-  className?: string;
-}
-
-/**
- * Dialog Description component props
- */
-export interface DialogDescriptionProps extends TextProps {
-  /**
-   * Additional CSS class for the description
-   */
-  className?: string;
-}

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

@@ -1,12 +0,0 @@
-export { default as Dialog, useDialog, useDialogAnimation } from './dialog';
-export { dialogClassNames } from './dialog.styles';
-export type {
-  DialogCloseProps,
-  DialogContentProps,
-  DialogDescriptionProps,
-  DialogOverlayProps,
-  DialogPortalProps,
-  DialogRootProps,
-  DialogTitleProps,
-  DialogTriggerProps,
-} from './dialog.types';