@coze-arch/cli 0.0.10 → 0.0.11

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

@@ -0,0 +1,414 @@
+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

@@ -0,0 +1,275 @@
+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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,18 @@
+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

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