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

package/lib/__templates__/expo/client/heroui/components/input-otp/input-otp.tsx

@@ -1,414 +0,0 @@
-import { forwardRef, useMemo } from 'react';
-import Animated from 'react-native-reanimated';
-import { useIsOnSurface } from '../../helpers/external/hooks';
-import { HeroText } from '../../helpers/internal/components';
-import { AnimationSettingsProvider } from '../../helpers/internal/contexts';
-import { useBottomSheetAwareHandlers } from '../../helpers/internal/hooks';
-import { createContext } from '../../helpers/internal/utils';
-import * as InputOTPPrimitives from '../../primitives/input-otp';
-import {
-  useInputOTPRootAnimation,
-  useInputOTPSlotCaretAnimation,
-  useInputOTPSlotValueAnimation,
-} from './input-otp.animation';
-import { DISPLAY_NAME } from './input-otp.constants';
-import { inputOTPClassNames, inputOTPStyleSheet } from './input-otp.styles';
-import type {
-  InputOTPGroupProps,
-  InputOTPGroupRef,
-  InputOTPGroupRenderProps,
-  InputOTPRef,
-  InputOTPRootProps,
-  InputOTPSeparatorProps,
-  InputOTPSeparatorRef,
-  InputOTPSlotCaretProps,
-  InputOTPSlotCaretRef,
-  InputOTPSlotContextValue,
-  InputOTPSlotPlaceholderProps,
-  InputOTPSlotPlaceholderRef,
-  InputOTPSlotProps,
-  InputOTPSlotRef,
-  InputOTPSlotValueProps,
-  InputOTPSlotValueRef,
-} from './input-otp.types';
-
-const AnimatedText = Animated.createAnimatedComponent(HeroText);
-
-const [InputOTPSlotProvider, useInputOTPSlot] =
-  createContext<InputOTPSlotContextValue>({
-    name: 'InputOTPSlotContext',
-  });
-
-const useInputOTP = InputOTPPrimitives.useInputOTPContext;
-
-const REGEXP_ONLY_CHARS = InputOTPPrimitives.REGEXP_ONLY_CHARS;
-const REGEXP_ONLY_DIGITS = InputOTPPrimitives.REGEXP_ONLY_DIGITS;
-const REGEXP_ONLY_DIGITS_AND_CHARS =
-  InputOTPPrimitives.REGEXP_ONLY_DIGITS_AND_CHARS;
-
-// --------------------------------------------------
-
-const InputOTPRoot = forwardRef<InputOTPRef, InputOTPRootProps>(
-  (props, ref) => {
-    const {
-      className,
-      animation,
-      isBottomSheetAware,
-      onFocus: onFocusProp,
-      onBlur: onBlurProp,
-      ...restProps
-    } = props;
-
-    const rootClassName = inputOTPClassNames.root({ className });
-
-    const { isAllAnimationsDisabled } = useInputOTPRootAnimation({
-      animation,
-    });
-
-    /** Merge user-provided onFocus/onBlur with bottom sheet keyboard handlers */
-    const { onFocus, onBlur } = useBottomSheetAwareHandlers({
-      onFocus: onFocusProp,
-      onBlur: onBlurProp,
-      isBottomSheetAware,
-    });
-
-    const animationSettingsContextValue = useMemo(
-      () => ({
-        isAllAnimationsDisabled,
-      }),
-      [isAllAnimationsDisabled]
-    );
-
-    return (
-      <AnimationSettingsProvider value={animationSettingsContextValue}>
-        <InputOTPPrimitives.Root
-          ref={ref}
-          className={rootClassName}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          {...restProps}
-        />
-      </AnimationSettingsProvider>
-    );
-  }
-);
-
-// --------------------------------------------------
-
-const InputOTPGroup = forwardRef<InputOTPGroupRef, InputOTPGroupProps>(
-  (props, ref) => {
-    const { className, children, ...restProps } = props;
-
-    const { slots, maxLength, value, isFocused, isDisabled, isInvalid } =
-      useInputOTP();
-
-    const groupClassName = inputOTPClassNames.group({ className });
-
-    const renderProps: InputOTPGroupRenderProps = {
-      slots,
-      maxLength,
-      value,
-      isFocused,
-      isDisabled,
-      isInvalid,
-    };
-
-    const content =
-      typeof children === 'function' ? children(renderProps) : children;
-
-    return (
-      <InputOTPPrimitives.Group
-        ref={ref}
-        className={groupClassName}
-        {...restProps}
-      >
-        {content}
-      </InputOTPPrimitives.Group>
-    );
-  }
-);
-
-// --------------------------------------------------
-
-const InputOTPSlot = forwardRef<InputOTPSlotRef, InputOTPSlotProps>(
-  (props, ref) => {
-    const { className, style, index, variant, children, ...restProps } = props;
-
-    const {
-      slots,
-      isDisabled,
-      isInvalid,
-      variant: groupVariant,
-    } = useInputOTP();
-
-    const slot = slots[index];
-    const isActive = slot?.isActive ?? false;
-    const isCaretVisible = slot?.isCaretVisible ?? false;
-
-    const isOnSurfaceAutoDetected = useIsOnSurface();
-    const finalVariant =
-      variant !== undefined
-        ? variant
-        : groupVariant !== undefined
-          ? groupVariant
-          : isOnSurfaceAutoDetected
-            ? 'secondary'
-            : 'primary';
-
-    const slotClassName = inputOTPClassNames.slot({
-      variant: finalVariant,
-      isActive,
-      isInvalid,
-      isDisabled,
-      className,
-    });
-
-    const slotContextValue = useMemo<InputOTPSlotContextValue>(
-      () => ({
-        slot,
-        isActive,
-        isCaretVisible,
-        variant: finalVariant,
-      }),
-      [slot, isActive, isCaretVisible, finalVariant]
-    );
-
-    return (
-      <InputOTPSlotProvider value={slotContextValue}>
-        <InputOTPPrimitives.Slot
-          ref={ref}
-          index={index}
-          className={slotClassName}
-          style={[inputOTPStyleSheet.slotRoot, style]}
-          {...restProps}
-        >
-          {children !== undefined ? (
-            children
-          ) : (
-            <>
-              <InputOTPSlotPlaceholder />
-              <InputOTPSlotValue />
-              <InputOTPSlotCaret />
-            </>
-          )}
-        </InputOTPPrimitives.Slot>
-      </InputOTPSlotProvider>
-    );
-  }
-);
-
-// --------------------------------------------------
-
-/**
- * Component that displays the placeholder character for an InputOTP slot
- * Used when the slot is empty and should show a placeholder
- */
-const InputOTPSlotPlaceholder = forwardRef<
-  InputOTPSlotPlaceholderRef,
-  InputOTPSlotPlaceholderProps
->((props, ref) => {
-  const { className, style, children, ...restProps } = props;
-
-  const { slot, isActive } = useInputOTPSlot();
-  const { placeholderTextColor, placeholderTextClassName } = useInputOTP();
-
-  const displayChar = children ?? slot?.placeholderChar ?? '';
-
-  if (slot?.char || isActive || !displayChar) {
-    return null;
-  }
-
-  const slotPlaceholderTextStyle = placeholderTextColor
-    ? { color: placeholderTextColor }
-    : undefined;
-
-  const slotPlaceholderTextClassName = placeholderTextClassName
-    ? placeholderTextClassName
-    : undefined;
-
-  const slotPlaceholderClassName = inputOTPClassNames.slotPlaceholder({
-    className: [slotPlaceholderTextClassName, className],
-  });
-
-  return (
-    <HeroText
-      ref={ref}
-      className={slotPlaceholderClassName}
-      style={[slotPlaceholderTextStyle, style]}
-      {...restProps}
-    >
-      {displayChar}
-    </HeroText>
-  );
-});
-
-// --------------------------------------------------
-
-/**
- * Component that displays the actual character value for an InputOTP slot
- * Used when the slot has a value and should display it with animations
- */
-const InputOTPSlotValue = forwardRef<
-  InputOTPSlotValueRef,
-  InputOTPSlotValueProps
->((props, ref) => {
-  const { className, children, animation, ...restProps } = props;
-
-  const { slot } = useInputOTPSlot();
-
-  const displayChar = children ?? slot?.char ?? '';
-
-  const { wrapperEntering, wrapperExiting, textEntering, textExiting } =
-    useInputOTPSlotValueAnimation({
-      animation,
-    });
-
-  const slotValueClassName = inputOTPClassNames.slotValue({
-    className,
-  });
-
-  if (!displayChar) {
-    return null;
-  }
-
-  return (
-    <Animated.View entering={wrapperEntering} exiting={wrapperExiting}>
-      <AnimatedText
-        ref={ref}
-        entering={textEntering}
-        exiting={textExiting}
-        className={slotValueClassName}
-        {...restProps}
-      >
-        {displayChar}
-      </AnimatedText>
-    </Animated.View>
-  );
-});
-
-// --------------------------------------------------
-
-const InputOTPSlotCaret = forwardRef<
-  InputOTPSlotCaretRef,
-  InputOTPSlotCaretProps
->((props, ref) => {
-  const {
-    className,
-    animation,
-    isAnimatedStyleActive = true,
-    pointerEvents = 'none',
-    style,
-    ...restProps
-  } = props;
-  const { isCaretVisible } = useInputOTPSlot();
-
-  const { rContainerStyle } = useInputOTPSlotCaretAnimation({
-    animation,
-  });
-
-  const slotCaretClassName = inputOTPClassNames.slotCaret({ className });
-
-  const containerStyle = isAnimatedStyleActive
-    ? [rContainerStyle, style]
-    : style;
-
-  if (!isCaretVisible) return null;
-
-  return (
-    <Animated.View
-      ref={ref}
-      className={slotCaretClassName}
-      style={containerStyle}
-      pointerEvents={pointerEvents}
-      {...restProps}
-    />
-  );
-});
-
-// --------------------------------------------------
-
-const InputOTPSeparator = forwardRef<
-  InputOTPSeparatorRef,
-  InputOTPSeparatorProps
->((props, ref) => {
-  const { className, ...restProps } = props;
-
-  const separatorClassName = inputOTPClassNames.separator({ className });
-
-  return (
-    <InputOTPPrimitives.Separator
-      ref={ref}
-      className={separatorClassName}
-      {...restProps}
-    />
-  );
-});
-
-// --------------------------------------------------
-
-// Display names
-InputOTPRoot.displayName = DISPLAY_NAME.ROOT;
-InputOTPGroup.displayName = DISPLAY_NAME.GROUP;
-InputOTPSlot.displayName = DISPLAY_NAME.SLOT;
-InputOTPSlotPlaceholder.displayName = DISPLAY_NAME.SLOT_PLACEHOLDER;
-InputOTPSlotValue.displayName = DISPLAY_NAME.SLOT_VALUE;
-InputOTPSlotCaret.displayName = DISPLAY_NAME.SLOT_CARET;
-InputOTPSeparator.displayName = DISPLAY_NAME.SEPARATOR;
-
-/**
- * Compound InputOTP component with sub-components
- *
- * @component InputOTP - Main container for OTP input. Manages the input state,
- * handles text changes, and provides context to child components.
- *
- * @component InputOTP.Group - Container for grouping multiple slots together.
- * Use this to visually group related slots (e.g., groups of 3 digits).
- *
- * @component InputOTP.Slot - Individual slot that displays a single character
- * or placeholder. Each slot must have a unique index matching its position
- * in the OTP sequence.
- *
- * @component InputOTP.SlotPlaceholder - Text component that displays the
- * placeholder character for a slot when it's empty. Used by default in Slot
- * if no children provided.
- *
- * @component InputOTP.SlotValue - Text component that displays the actual
- * character value for a slot with animations. Used by default in Slot
- * if no children provided.
- *
- * @component InputOTP.SlotCaret - Animated caret indicator that shows the
- * current input position. Place this inside a Slot to show where the user
- * is currently typing.
- *
- * @component InputOTP.Separator - Visual separator between groups of slots.
- * Use this to visually separate different groups of OTP digits.
- *
- * Props flow from InputOTP to sub-components via context (value, isDisabled,
- * isInvalid, slots). The component handles focus management, text input,
- * and validation automatically.
- *
- * @see Full documentation: https://v3.heroui.com/docs/native/components/input-otp
- */
-const InputOTP = Object.assign(InputOTPRoot, {
-  /** @optional Container for grouping multiple slots together */
-  Group: InputOTPGroup,
-  /** @optional Individual slot that displays a single character or placeholder */
-  Slot: InputOTPSlot,
-  /** @optional Text component that displays the placeholder character for a slot */
-  SlotPlaceholder: InputOTPSlotPlaceholder,
-  /** @optional Text component that displays the actual character value for a slot */
-  SlotValue: InputOTPSlotValue,
-  /** @optional Animated caret indicator for the current input position */
-  SlotCaret: InputOTPSlotCaret,
-  /** @optional Visual separator between groups of slots */
-  Separator: InputOTPSeparator,
-});
-
-export default InputOTP;
-export {
-  REGEXP_ONLY_CHARS,
-  REGEXP_ONLY_DIGITS,
-  REGEXP_ONLY_DIGITS_AND_CHARS,
-  useInputOTP,
-  useInputOTPSlot,
-};

package/lib/__templates__/expo/client/heroui/components/input-otp/input-otp.types.ts

@@ -1,275 +0,0 @@
-import type { TextProps, ViewProps } from 'react-native';
-import type { EntryOrExitLayoutType } from 'react-native-reanimated';
-import type {
-  Animation,
-  AnimationRootDisableAll,
-  AnimationValue,
-  TextRef,
-  ViewRef,
-} from '../../helpers/internal/types';
-import type * as InputOTPPrimitivesTypes from '../../primitives/input-otp/input-otp.types';
-
-/**
- * Render function props for InputOTP.Group children
- */
-export interface InputOTPGroupRenderProps {
-  /** Array of slot data for each position */
-  slots: InputOTPPrimitivesTypes.SlotData[];
-  /** Maximum length of the OTP */
-  maxLength: number;
-  /** Current OTP value */
-  value: string;
-  /** Whether the input is currently focused */
-  isFocused: boolean;
-  /** Whether the input is disabled */
-  isDisabled: boolean;
-  /** Whether the input is in an invalid state */
-  isInvalid: boolean;
-}
-
-/**
- * Props for the InputOTP.Root component
- * Extends the primitive RootProps
- */
-export interface InputOTPRootProps extends InputOTPPrimitivesTypes.RootProps {
-  /**
-   * Whether the InputOTP automatically handles keyboard state when rendered
-   * inside a BottomSheet. When `true` (default), onFocus/onBlur handlers
-   * are automatically wired to the bottom sheet's keyboard avoidance system.
-   * Set to `false` to disable this automatic behavior.
-   * @default true
-   */
-  isBottomSheetAware?: boolean;
-  /**
-   * Additional CSS classes
-   */
-  className?: string;
-  /**
-   * Animation configuration for InputOTP
-   * - `"disable-all"`: Disable all animations including children
-   * - `undefined`: Use default animations
-   */
-  animation?: AnimationRootDisableAll;
-}
-
-/**
- * Ref type for InputOTP.Root component
- */
-export type InputOTPRef = InputOTPPrimitivesTypes.RootRef;
-
-/**
- * Props for the InputOTP.Group component
- * Extends the primitive GroupProps
- */
-export interface InputOTPGroupProps
-  extends Omit<InputOTPPrimitivesTypes.GroupProps, 'children'> {
-  /**
-   * Additional CSS classes
-   */
-  className?: string;
-  /**
-   * Children elements to be rendered inside the group, or a render function
-   * that receives slot data and other context values
-   */
-  children?:
-    | React.ReactNode
-    | ((props: InputOTPGroupRenderProps) => React.ReactNode);
-}
-
-/**
- * Ref type for InputOTP.Group component
- */
-export type InputOTPGroupRef = InputOTPPrimitivesTypes.GroupRef;
-
-/**
- * Props for the InputOTP.Slot component
- * Extends the primitive SlotProps
- */
-export interface InputOTPSlotProps extends InputOTPPrimitivesTypes.SlotProps {
-  /**
-   * Variant style for the slot
-   * @default 'primary'
-   */
-  variant?: 'primary' | 'secondary';
-  /**
-   * Additional CSS classes
-   */
-  className?: string;
-}
-
-/**
- * Ref type for InputOTP.Slot component
- */
-export type InputOTPSlotRef = InputOTPPrimitivesTypes.SlotRef;
-
-/**
- * Context value for InputOTP.Slot component
- */
-export interface InputOTPSlotContextValue {
-  /** Slot data for the current slot */
-  slot: InputOTPPrimitivesTypes.SlotData | undefined;
-  /** Whether this slot is currently active (where cursor is) */
-  isActive: boolean;
-  /** Whether to show fake caret (when active but empty) */
-  isCaretVisible: boolean;
-  /** Variant style for the slot */
-  variant?: 'primary' | 'secondary';
-}
-
-/**
- * Props for the InputOTP.SlotPlaceholder component
- */
-export interface InputOTPSlotPlaceholderProps extends TextProps {
-  /**
-   * Text content to display (optional, defaults to slot.placeholderChar)
-   */
-  children?: string;
-  /**
-   * Additional CSS classes
-   */
-  className?: string;
-}
-
-/**
- * Ref type for InputOTP.SlotPlaceholder component
- */
-export type InputOTPSlotPlaceholderRef = TextRef;
-
-/**
- * Animation configuration for InputOTP.SlotValue component
- */
-export type InputOTPSlotValueAnimation = Animation<{
-  /**
-   * Wrapper animation configuration (fade in/out for the container)
-   */
-  wrapper?: AnimationValue<{
-    /**
-     * Entering animation for wrapper
-     * @default FadeIn.duration(250)
-     */
-    entering?: EntryOrExitLayoutType;
-    /**
-     * Exiting animation for wrapper
-     * @default FadeOut.duration(100)
-     */
-    exiting?: EntryOrExitLayoutType;
-  }>;
-  /**
-   * Text animation configuration (flip animations for the text)
-   */
-  text?: AnimationValue<{
-    /**
-     * Entering animation for text
-     * @default FlipInXDown.duration(250).easing(...)
-     */
-    entering?: EntryOrExitLayoutType;
-    /**
-     * Exiting animation for text
-     * @default FlipOutXDown.duration(250).easing(...)
-     */
-    exiting?: EntryOrExitLayoutType;
-  }>;
-}>;
-
-/**
- * Props for the InputOTP.SlotValue component
- */
-export interface InputOTPSlotValueProps extends TextProps {
-  /**
-   * Text content to display (optional, defaults to slot.char)
-   */
-  children?: string;
-  /**
-   * Additional CSS classes
-   */
-  className?: string;
-  /**
-   * Animation configuration for SlotValue
-   * Controls both wrapper (fade) and text (flip) animations
-   */
-  animation?: InputOTPSlotValueAnimation;
-}
-
-/**
- * Ref type for InputOTP.SlotValue component
- */
-export type InputOTPSlotValueRef = TextRef;
-
-/**
- * Animation configuration for InputOTP.SlotCaret component
- */
-export type InputOTPSlotCaretAnimation = Animation<{
-  /**
-   * Opacity animation configuration
-   */
-  opacity?: AnimationValue<{
-    /**
-     * Opacity values [min, max]
-     * @default [0, 1]
-     */
-    value?: [number, number];
-    /**
-     * Animation duration in milliseconds
-     * @default 500
-     */
-    duration?: number;
-  }>;
-  /**
-   * Height animation configuration
-   */
-  height?: AnimationValue<{
-    /**
-     * Height values [min, max]
-     * @default [16, 18]
-     */
-    value?: [number, number];
-    /**
-     * Animation duration in milliseconds
-     * @default 500
-     */
-    duration?: number;
-  }>;
-}>;
-
-/**
- * Props for the InputOTP.SlotCaret component
- */
-export interface InputOTPSlotCaretProps extends ViewProps {
-  /**
-   * Additional CSS classes
-   */
-  className?: string;
-  /**
-   * Animation configuration for SlotCaret
-   */
-  animation?: InputOTPSlotCaretAnimation;
-  /**
-   * 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;
-}
-
-/**
- * Ref type for InputOTP.SlotCaret component
- */
-export type InputOTPSlotCaretRef = ViewRef;
-
-/**
- * Props for the InputOTP.Separator component
- * Extends the primitive SeparatorProps
- */
-export interface InputOTPSeparatorProps
-  extends InputOTPPrimitivesTypes.SeparatorProps {
-  /**
-   * Additional CSS classes
-   */
-  className?: string;
-}
-
-/**
- * Ref type for InputOTP.Separator component
- */
-export type InputOTPSeparatorRef = InputOTPPrimitivesTypes.SeparatorRef;

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

@@ -1,3 +0,0 @@
-export { default as Label, useLabel } from './label';
-export { labelClassNames } from './label.styles';
-export type * from './label.types';

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

@@ -1,18 +0,0 @@
-import { useCombinedAnimationDisabledState } from '../../helpers/internal/hooks';
-import type { AnimationRootDisableAll } from '../../helpers/internal/types';
-
-/**
- * Animation hook for Label root component
- * Handles root-level animation configuration and provides context for child components
- */
-export function useLabelRootAnimation(options: {
-  animation: AnimationRootDisableAll | undefined;
-}) {
-  const { animation } = options;
-
-  const isAllAnimationsDisabled = useCombinedAnimationDisabledState(animation);
-
-  return {
-    isAllAnimationsDisabled,
-  };
-}

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

@@ -1,7 +0,0 @@
-/**
- * Display names for Label components
- */
-export const DISPLAY_NAME = {
-  LABEL_ROOT: 'HeroUINative.Label.Root',
-  LABEL_TEXT: 'HeroUINative.Label.Text',
-} as const;