@coze-arch/cli 0.0.10 → 0.0.11

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

@@ -0,0 +1,98 @@
+import type { ViewProps } from 'react-native';
+import type { AnimationRootDisableAll } from '../../helpers/internal/types';
+import type { InputProps } from '../input';
+
+/**
+ * Context value provided by InputGroup root to child components.
+ * Carries measured Prefix/Suffix widths so InputGroup.Input can
+ * automatically apply matching paddingLeft / paddingRight.
+ */
+export interface InputGroupContextType {
+  /** Whether the entire input group is disabled */
+  isDisabled: boolean;
+  /** Measured width of the Prefix element (0 when absent) */
+  prefixWidth: number;
+  /** Measured width of the Suffix element (0 when absent) */
+  suffixWidth: number;
+  /** Called by Prefix after layout to report its width */
+  setPrefixWidth: (width: number) => void;
+  /** Called by Suffix after layout to report its width */
+  setSuffixWidth: (width: number) => void;
+}
+
+/**
+ * Props for the InputGroup root component.
+ * Acts as a layout container for Prefix, Input, and Suffix.
+ */
+export interface InputGroupProps extends ViewProps {
+  /**
+   * Children elements to be rendered inside the input group
+   */
+  children?: React.ReactNode;
+
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+
+  /**
+   * Whether the entire input group and its children are disabled.
+   * Cascades to Prefix, Suffix (opacity + pointer-events), and
+   * Input (editable=false) via context.
+   *
+   * @default false
+   */
+  isDisabled?: boolean;
+
+  /**
+   * Animation configuration for input group
+   * - `"disable-all"`: Disable all animations including children (cascades down)
+   * - `undefined`: Use default animations
+   */
+  animation?: AnimationRootDisableAll;
+}
+
+/**
+ * Shared props for InputGroup.Prefix and InputGroup.Suffix.
+ */
+interface InputGroupDecoratorBaseProps extends ViewProps {
+  /**
+   * Content to render inside the decorator
+   */
+  children?: React.ReactNode;
+
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+
+  /**
+   * When `true` the decorator is non-interactive and hidden from
+   * accessibility: touches pass through to the Input underneath
+   * (focusing it) and the content is excluded from screen readers.
+   *
+   * Applies `pointerEvents="none"`, `accessibilityElementsHidden`,
+   * and `importantForAccessibility="no-hide-descendants"`.
+   *
+   * @default false
+   */
+  isDecorative?: boolean;
+}
+
+/**
+ * Props for the InputGroup.Prefix component.
+ * Absolutely positioned on the left side of the Input.
+ */
+export interface InputGroupPrefixProps extends InputGroupDecoratorBaseProps {}
+
+/**
+ * Props for the InputGroup.Suffix component.
+ * Absolutely positioned on the right side of the Input.
+ */
+export interface InputGroupSuffixProps extends InputGroupDecoratorBaseProps {}
+
+/**
+ * Props for the InputGroup.Input component.
+ * Passes all props directly through to the underlying Input component.
+ */
+export interface InputGroupInputProps extends InputProps {}

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

@@ -0,0 +1,9 @@
+export {
+  default as InputOTP,
+  REGEXP_ONLY_CHARS,
+  REGEXP_ONLY_DIGITS,
+  REGEXP_ONLY_DIGITS_AND_CHARS,
+  useInputOTP,
+} from './input-otp';
+export { inputOTPClassNames } from './input-otp.styles';
+export type * from './input-otp.types';

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

@@ -0,0 +1,199 @@
+import { useEffect } from 'react';
+import {
+  Easing,
+  FadeIn,
+  FadeOut,
+  FlipInXDown,
+  FlipOutXDown,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from 'react-native-reanimated';
+import { useAnimationSettings } from '../../helpers/internal/contexts';
+import { useCombinedAnimationDisabledState } from '../../helpers/internal/hooks';
+import type { AnimationRootDisableAll } from '../../helpers/internal/types';
+import {
+  getAnimationState,
+  getAnimationValueProperty,
+  getIsAnimationDisabledValue,
+} from '../../helpers/internal/utils';
+import type {
+  InputOTPSlotCaretAnimation,
+  InputOTPSlotValueAnimation,
+} from './input-otp.types';
+
+/**
+ * Animation hook for InputOTP root component
+ * Handles root-level animation configuration and provides context for child components
+ */
+export function useInputOTPRootAnimation(options: {
+  animation: AnimationRootDisableAll | undefined;
+}) {
+  const { animation } = options;
+
+  const isAllAnimationsDisabled = useCombinedAnimationDisabledState(animation);
+
+  return {
+    isAllAnimationsDisabled,
+  };
+}
+
+// --------------------------------------------------
+
+/**
+ * Animation hook for InputOTP.SlotCaret component
+ * Handles opacity and height animations for the caret indicator
+ */
+export function useInputOTPSlotCaretAnimation(options: {
+  animation: InputOTPSlotCaretAnimation | undefined;
+}) {
+  const { animation } = options;
+
+  // Read from global animation context (always available in compound parts)
+  const { isAllAnimationsDisabled } = useAnimationSettings();
+
+  const { animationConfig, isAnimationDisabled } = getAnimationState(animation);
+
+  const isAnimationDisabledValue = getIsAnimationDisabledValue({
+    isAnimationDisabled,
+    isAllAnimationsDisabled,
+  });
+
+  // Opacity animation configuration
+  const opacityValue = getAnimationValueProperty({
+    animationValue: animationConfig?.opacity,
+    property: 'value',
+    defaultValue: [0, 1] as [number, number],
+  });
+
+  const opacityDuration = getAnimationValueProperty({
+    animationValue: animationConfig?.opacity,
+    property: 'duration',
+    defaultValue: 500,
+  });
+
+  // Height animation configuration
+  const heightValue = getAnimationValueProperty({
+    animationValue: animationConfig?.height,
+    property: 'value',
+    defaultValue: [16, 18] as [number, number],
+  });
+
+  const heightDuration = getAnimationValueProperty({
+    animationValue: animationConfig?.height,
+    property: 'duration',
+    defaultValue: 500,
+  });
+
+  const opacity = useSharedValue(opacityValue[1]);
+  const height = useSharedValue(heightValue[1]);
+
+  useEffect(() => {
+    if (isAnimationDisabledValue) {
+      opacity.set(opacityValue[1]);
+      height.set(heightValue[1]);
+      return;
+    }
+
+    opacity.set(
+      withRepeat(
+        withSequence(
+          withTiming(opacityValue[0], { duration: opacityDuration }),
+          withTiming(opacityValue[1], { duration: opacityDuration })
+        ),
+        -1,
+        true
+      )
+    );
+
+    height.set(
+      withRepeat(
+        withSequence(
+          withTiming(heightValue[0], { duration: heightDuration }),
+          withTiming(heightValue[1], { duration: heightDuration })
+        ),
+        -1,
+        true
+      )
+    );
+  }, [
+    isAnimationDisabledValue,
+    opacity,
+    height,
+    opacityValue,
+    opacityDuration,
+    heightValue,
+    heightDuration,
+  ]);
+
+  const rContainerStyle = useAnimatedStyle(() => ({
+    opacity: opacity.get(),
+    height: height.get(),
+  }));
+
+  return {
+    rContainerStyle,
+  };
+}
+
+// --------------------------------------------------
+
+/**
+ * Animation hook for InputOTP.SlotValue component
+ * Handles wrapper (fade) and text (flip) animations for entering/exiting
+ */
+export function useInputOTPSlotValueAnimation(options: {
+  animation: InputOTPSlotValueAnimation | undefined;
+}) {
+  const { animation } = options;
+
+  // Read from global animation context (always available in compound parts)
+  const { isAllAnimationsDisabled } = useAnimationSettings();
+
+  const { animationConfig, isAnimationDisabled } = getAnimationState(animation);
+
+  const isAnimationDisabledValue = getIsAnimationDisabledValue({
+    isAnimationDisabled,
+    isAllAnimationsDisabled,
+  });
+
+  // Wrapper animation configuration (fade)
+  const wrapperEntering = getAnimationValueProperty({
+    animationValue: animationConfig?.wrapper,
+    property: 'entering',
+    defaultValue: FadeIn.duration(250),
+  });
+
+  const wrapperExiting = getAnimationValueProperty({
+    animationValue: animationConfig?.wrapper,
+    property: 'exiting',
+    defaultValue: FadeOut.duration(100),
+  });
+
+  // Text animation configuration (flip)
+  const textEntering = getAnimationValueProperty({
+    animationValue: animationConfig?.text,
+    property: 'entering',
+    defaultValue: FlipInXDown.duration(250)
+      .delay(0)
+      .easing(Easing.bezier(0, 0.75, 0.5, 0.9).factory())
+      .build(),
+  });
+
+  const textExiting = getAnimationValueProperty({
+    animationValue: animationConfig?.text,
+    property: 'exiting',
+    defaultValue: FlipOutXDown.duration(250)
+      .easing(Easing.bezier(0.6, 0.1, 0.4, 0.8).factory())
+      .build(),
+  });
+
+  return {
+    wrapperEntering: isAnimationDisabledValue ? undefined : wrapperEntering,
+    wrapperExiting: isAnimationDisabledValue ? undefined : wrapperExiting,
+    textEntering: isAnimationDisabledValue ? undefined : textEntering,
+    textExiting: isAnimationDisabledValue ? undefined : textExiting,
+  };
+}

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

@@ -0,0 +1,12 @@
+/**
+ * Display names for InputOTP components
+ */
+export const DISPLAY_NAME = {
+  ROOT: 'HeroUINative.InputOTP.Root',
+  GROUP: 'HeroUINative.InputOTP.Group',
+  SLOT: 'HeroUINative.InputOTP.Slot',
+  SLOT_PLACEHOLDER: 'HeroUINative.InputOTP.SlotPlaceholder',
+  SLOT_VALUE: 'HeroUINative.InputOTP.SlotValue',
+  SLOT_CARET: 'HeroUINative.InputOTP.SlotCaret',
+  SEPARATOR: 'HeroUINative.InputOTP.Separator',
+};