@coze-arch/cli 0.0.10 → 0.0.11

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

@@ -0,0 +1,431 @@
+/**
+ * Big thank you to https://github.com/yjose/input-otp-native for logic and inspiration
+ */
+
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Platform,
+  Pressable,
+  StyleSheet,
+  TextInput,
+  View,
+  type BlurEvent,
+  type FocusEvent,
+} from 'react-native';
+import { useControllableState } from '../../helpers/internal/hooks';
+import * as SlotPrimitive from '../slot';
+import type {
+  GroupProps,
+  GroupRef,
+  InputOTPContext,
+  RootProps,
+  RootRef,
+  SeparatorProps,
+  SeparatorRef,
+  SlotData,
+  SlotProps,
+  SlotRef,
+} from './input-otp.types';
+import { defaultPasteTransformer } from './input-otp.utils';
+
+const InputOTPContext = createContext<InputOTPContext | null>(null);
+
+/**
+ * Hook to access InputOTP context
+ * @throws Error if used outside InputOTP component
+ */
+function useInputOTPContext(): InputOTPContext {
+  const context = useContext(InputOTPContext);
+
+  if (!context) {
+    throw new Error(
+      'InputOTP compound components cannot be rendered outside the InputOTP component'
+    );
+  }
+
+  return context;
+}
+
+// --------------------------------------------------
+
+const Root = forwardRef<RootRef, RootProps>(
+  (
+    {
+      maxLength,
+      onComplete,
+      isDisabled = false,
+      isInvalid = false,
+      variant,
+      pattern,
+      inputMode = 'numeric',
+      pasteTransformer,
+      value: valueProp,
+      defaultValue,
+      onChange,
+      placeholder,
+      placeholderTextColor,
+      placeholderTextClassName,
+      children,
+      onFocus: onFocusProp,
+      onBlur: onBlurProp,
+      textInputProps,
+      style,
+      className,
+    },
+    ref
+  ) => {
+    const [value = '', setValue] = useControllableState<string>({
+      prop: valueProp,
+      defaultProp: defaultValue,
+      onChange,
+    });
+    const [isFocused, setIsFocused] = useState(false);
+
+    const inputRef = useRef<TextInput>(null);
+
+    const slots = useMemo<SlotData[]>(() => {
+      return Array.from({ length: maxLength }).map((_, slotIdx) => {
+        const isActive = isFocused && slotIdx === value.length;
+        const char = value[slotIdx] !== undefined ? value[slotIdx] : null;
+        const placeholderChar = isActive
+          ? null
+          : value[slotIdx] !== undefined
+            ? null
+            : (placeholder?.[slotIdx] ?? null);
+
+        return {
+          index: slotIdx,
+          char,
+          placeholderChar,
+          isActive,
+          isCaretVisible: isActive && char === null,
+        };
+      });
+    }, [isFocused, maxLength, value, placeholder]);
+
+    // --------------------------------------------------
+    // TextInput onChangeText handler
+    // --------------------------------------------------
+
+    // Convert pattern string to RegExp if provided
+    const regexp = useMemo(() => {
+      if (!pattern) return null;
+      return typeof pattern === 'string' ? new RegExp(pattern) : pattern;
+    }, [pattern]);
+
+    // Get paste transformer function
+    const pasteTransformFn = useMemo(() => {
+      return pasteTransformer ?? defaultPasteTransformer(maxLength);
+    }, [pasteTransformer, maxLength]);
+
+    // Handle text change
+    const onChangeText = useCallback(
+      (text: string) => {
+        // Detect paste operation: if text length increases by more than 1 character
+        // it's likely a paste operation rather than normal typing
+        const isPaste = text.length > value.length + 1;
+        const transformedText =
+          isPaste && pasteTransformFn ? pasteTransformFn(text) : text;
+        // Slice the text to the maxLength as we're not limiting the input length to handle paste properly
+        const newValue = transformedText.slice(0, maxLength);
+        // Validate against pattern if provided
+        if (newValue.length > 0 && regexp && !regexp.test(newValue)) {
+          return;
+        }
+
+        setValue(newValue);
+
+        if (newValue.length === maxLength) {
+          onComplete?.(newValue);
+        }
+      },
+      [maxLength, regexp, setValue, onComplete, pasteTransformFn, value.length]
+    );
+
+    // --------------------------------------------------
+    // TextInput event handlers
+    // --------------------------------------------------
+
+    const onFocus = useCallback(
+      (e: FocusEvent) => {
+        setIsFocused(true);
+        onFocusProp?.(e);
+      },
+      [onFocusProp]
+    );
+
+    const onBlur = useCallback(
+      (e: BlurEvent) => {
+        setIsFocused(false);
+        onBlurProp?.(e);
+      },
+      [onBlurProp]
+    );
+
+    // --------------------------------------------------
+    // Imperative actions
+    // --------------------------------------------------
+
+    const focus = useCallback(() => {
+      inputRef.current?.focus();
+    }, []);
+
+    const blur = useCallback(() => {
+      inputRef.current?.blur();
+    }, []);
+
+    const clear = useCallback(() => {
+      inputRef.current?.clear();
+      setValue('');
+    }, [setValue]);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        setValue: (newValue: string) => {
+          onChangeText(newValue);
+        },
+        focus,
+        blur,
+        clear,
+      }),
+      [focus, blur, clear, onChangeText]
+    );
+
+    // --------------------------------------------------
+    // Context value
+    // --------------------------------------------------
+
+    const contextValue = useMemo<InputOTPContext>(
+      () => ({
+        value,
+        maxLength,
+        isFocused,
+        isDisabled,
+        isInvalid,
+        variant,
+        slots,
+        placeholderTextColor,
+        placeholderTextClassName,
+        handlers: {
+          onChangeText,
+          onFocus,
+          onBlur,
+        },
+        actions: {
+          focus,
+          clear,
+        },
+        inputRef,
+      }),
+      [
+        value,
+        maxLength,
+        isFocused,
+        isDisabled,
+        isInvalid,
+        variant,
+        slots,
+        placeholderTextColor,
+        placeholderTextClassName,
+        onChangeText,
+        onFocus,
+        onBlur,
+        focus,
+        clear,
+      ]
+    );
+
+    // --------------------------------------------------
+    // Accessibility
+    // --------------------------------------------------
+
+    const accessibilityState = useMemo(
+      () => ({
+        disabled: isDisabled,
+      }),
+      [isDisabled]
+    );
+
+    const accessibilityValue = useMemo(
+      () => ({
+        text:
+          value.length > 0
+            ? `${value.length} of ${maxLength} digits entered`
+            : `0 of ${maxLength} digits entered`,
+      }),
+      [value, maxLength]
+    );
+
+    // --------------------------------------------------
+    // Render
+    // --------------------------------------------------
+
+    return (
+      <InputOTPContext.Provider value={contextValue}>
+        <Pressable
+          onPress={focus}
+          disabled={isDisabled}
+          accessible={false}
+          accessibilityRole="none"
+          style={style}
+          className={className}
+        >
+          {children}
+          <TextInput
+            ref={inputRef}
+            style={[
+              StyleSheet.absoluteFillObject,
+              /**
+               * On iOS if the input has an opacity of 0, we can't paste text into it.
+               * This is a workaround to allow pasting text into the input.
+               */
+              Platform.select({
+                ios: {
+                  opacity: 0.02,
+                  color: 'transparent',
+                },
+                android: {
+                  opacity: 0,
+                },
+              }),
+            ]}
+            value={value}
+            onChangeText={onChangeText}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            maxLength={maxLength}
+            inputMode={inputMode}
+            /**
+             * On iOS if the input has an opacity of 0, we can't paste text into it.
+             * As we're setting the opacity to 0.02, we need to hide the caret.
+             */
+            caretHidden={Platform.OS === 'ios'}
+            autoComplete={
+              Platform.OS === 'android' ? 'sms-otp' : 'one-time-code'
+            }
+            autoCorrect={false}
+            autoCapitalize="none"
+            textContentType="oneTimeCode"
+            accessible
+            accessibilityRole="text"
+            accessibilityLabel={`One-time passcode input, ${maxLength} digits`}
+            accessibilityHint={`Enter ${maxLength} digit verification code`}
+            accessibilityState={accessibilityState}
+            accessibilityValue={accessibilityValue}
+            editable={!isDisabled}
+            {...textInputProps}
+          />
+        </Pressable>
+      </InputOTPContext.Provider>
+    );
+  }
+);
+
+Root.displayName = 'HeroUINative.Primitive.InputOTP.Root';
+
+// --------------------------------------------------
+
+const Group = forwardRef<GroupRef, GroupProps>(
+  (
+    { asChild, accessible = false, accessibilityRole = 'none', ...props },
+    ref
+  ) => {
+    useInputOTPContext(); // Ensure we're inside InputOTP
+
+    const Component = asChild ? SlotPrimitive.View : View;
+
+    return (
+      <Component
+        ref={ref}
+        accessible={accessible}
+        accessibilityRole={accessibilityRole}
+        {...props}
+      />
+    );
+  }
+);
+
+Group.displayName = 'HeroUINative.Primitive.InputOTP.Group';
+
+// --------------------------------------------------
+
+const Slot = forwardRef<SlotRef, SlotProps>(
+  (
+    {
+      asChild,
+      index,
+      accessible = false,
+      accessibilityRole = 'none',
+      accessibilityLabel,
+      ...props
+    },
+    ref
+  ) => {
+    const { slots, maxLength } = useInputOTPContext();
+
+    if (index < 0 || index >= slots.length) {
+      throw new Error(
+        `InputOTP.Slot index ${index} is out of range. Must be between 0 and ${slots.length - 1}.`
+      );
+    }
+
+    const slot = slots[index];
+    const computedAccessibilityLabel =
+      accessibilityLabel ??
+      (accessible && slot
+        ? `Digit ${index + 1} of ${maxLength}${slot.char ? `, value ${slot.char}` : ', empty'}`
+        : undefined);
+
+    const Component = asChild ? SlotPrimitive.View : View;
+
+    return (
+      <Component
+        ref={ref}
+        accessible={accessible}
+        accessibilityRole={accessibilityRole}
+        accessibilityLabel={computedAccessibilityLabel}
+        {...props}
+      />
+    );
+  }
+);
+
+Slot.displayName = 'HeroUINative.Primitive.InputOTP.Slot';
+
+// --------------------------------------------------
+
+const Separator = forwardRef<SeparatorRef, SeparatorProps>(
+  (
+    { asChild, accessible = false, accessibilityRole = 'none', ...props },
+    ref
+  ) => {
+    useInputOTPContext(); // Ensure we're inside InputOTP
+
+    const Component = asChild ? SlotPrimitive.View : View;
+
+    return (
+      <Component
+        ref={ref}
+        accessible={accessible}
+        accessibilityRole={accessibilityRole}
+        {...props}
+      />
+    );
+  }
+);
+
+Separator.displayName = 'HeroUINative.Primitive.InputOTP.Separator';
+
+// --------------------------------------------------
+
+export { Group, Root, Separator, Slot, useInputOTPContext };

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

@@ -0,0 +1,169 @@
+import type {
+  BlurEvent,
+  FocusEvent,
+  PressableProps,
+  TextInput,
+  TextInputProps,
+} from 'react-native';
+import type { SlottableViewProps, ViewRef } from '../../helpers/internal/types';
+
+/**
+ * Slot data structure for each OTP slot
+ */
+export type SlotData = {
+  /** Zero-based index of the slot */
+  index: number;
+  /** The character at this slot index, or null if empty */
+  char: string | null;
+  /** Placeholder character for this slot, or null if not applicable */
+  placeholderChar: string | null;
+  /** Whether this slot is currently active (where cursor is) */
+  isActive: boolean;
+  /** Whether to show fake caret (when active but empty) */
+  isCaretVisible: boolean;
+};
+
+/**
+ * Internal context type for the InputOTP root component
+ */
+export type InputOTPContext = {
+  /** Current OTP value */
+  value: string;
+  /** Maximum length of the OTP */
+  maxLength: number;
+  /** 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;
+  /** Variant style for the input OTP */
+  variant?: 'primary' | 'secondary';
+  /** Array of slot data for each position */
+  slots: SlotData[];
+  /** Placeholder text color for all slots */
+  placeholderTextColor?: TextInputProps['placeholderTextColor'];
+  /** Placeholder text class name for all slots */
+  placeholderTextClassName?: string | undefined;
+  /** Event handlers */
+  handlers: {
+    /** Handler for text changes */
+    onChangeText: (text: string) => void;
+    /** Handler for focus events */
+    onFocus: (e: FocusEvent) => void;
+    /** Handler for blur events */
+    onBlur: (e: BlurEvent) => void;
+  };
+  /** Imperative actions */
+  actions: {
+    /** Focus the input */
+    focus: () => void;
+    /** Clear the input value */
+    clear: () => void;
+  };
+  /** Ref to the underlying TextInput */
+  inputRef: React.RefObject<TextInput | null>;
+};
+
+/**
+ * Props for the InputOTP root component
+ */
+export type RootProps = {
+  /** Children elements */
+  children?: React.ReactNode;
+  /** Maximum length of the OTP (required) */
+  maxLength: number;
+  /** Whether the input is disabled @default false */
+  isDisabled?: boolean;
+  /** Whether the input is in an invalid state @default false */
+  isInvalid?: boolean;
+  /** Variant style for the input OTP */
+  variant?: 'primary' | 'secondary';
+  /** Regex pattern for allowed characters (e.g., REGEXP_ONLY_DIGITS) */
+  pattern?: string;
+  /** Input mode for the input */
+  inputMode?: TextInputProps['inputMode'];
+  /** Transform pasted text (e.g., remove hyphens) */
+  pasteTransformer?: (text: string) => string;
+  /** Placeholder text for the input */
+  placeholder?: TextInputProps['placeholder'];
+  /** Placeholder text color for the input */
+  placeholderTextColor?: TextInputProps['placeholderTextColor'];
+  /** Placeholder text class name for the input */
+  placeholderTextClassName?: string | undefined;
+  /** Controlled value */
+  value?: TextInputProps['value'];
+  /** Default value for uncontrolled usage */
+  defaultValue?: TextInputProps['defaultValue'];
+  /** Callback when value changes */
+  onChange?: TextInputProps['onChangeText'];
+  /** Handler for focus events */
+  onFocus?: TextInputProps['onFocus'];
+  /** Handler for blur events */
+  onBlur?: TextInputProps['onBlur'];
+  /** Handler called when all slots are filled */
+  onComplete?: (value: string) => void;
+  /** Rest props to pass to the underlying TextInput component */
+  textInputProps?: Omit<
+    TextInputProps,
+    | 'value'
+    | 'onChangeText'
+    | 'maxLength'
+    | 'placeholder'
+    | 'placeholderTextColor'
+    | 'placeholderTextClassName'
+    | 'style'
+    | 'className'
+    | 'inputMode'
+    | 'onFocus'
+    | 'onBlur'
+  >;
+  /** Style to pass to the container Pressable component */
+  style?: PressableProps['style'];
+  /** Additional CSS classes for the container Pressable component */
+  className?: string;
+};
+
+/**
+ * Ref type for InputOTP root component
+ * Provides imperative methods to control the input
+ */
+export type RootRef = {
+  /** Set the OTP value programmatically */
+  setValue: (value: string) => void;
+  /** Focus the input */
+  focus: () => void;
+  /** Blur the input */
+  blur: () => void;
+  /** Clear the input value */
+  clear: () => void;
+};
+
+/**
+ * Props for the InputOTP.Group component
+ */
+export type GroupProps = SlottableViewProps;
+
+/** Ref type for InputOTP.Group */
+export type GroupRef = ViewRef;
+
+/**
+ * Props for the InputOTP.Slot component
+ */
+export type SlotProps = SlottableViewProps & {
+  /** Zero-based index of the slot (required) */
+  index: number;
+  /** Additional CSS classes for the slot */
+  className?: string;
+};
+
+/** Ref type for InputOTP.Slot */
+export type SlotRef = ViewRef;
+
+/**
+ * Props for the InputOTP.Separator component
+ */
+export type SeparatorProps = SlottableViewProps;
+
+/** Ref type for InputOTP.Separator */
+export type SeparatorRef = ViewRef;

package/lib/__templates__/expo/client/heroui/primitives/input-otp/input-otp.utils.ts

@@ -0,0 +1,31 @@
+/**
+ * Regex pattern for digits only
+ */
+export const REGEXP_ONLY_DIGITS = '^\\d+$';
+
+/**
+ * Regex pattern for letters only
+ */
+export const REGEXP_ONLY_CHARS = '^[a-zA-Z]+$';
+
+/**
+ * Regex pattern for digits and letters
+ */
+export const REGEXP_ONLY_DIGITS_AND_CHARS = '^[a-zA-Z0-9]+$';
+
+/**
+ * Default paste transformer that extracts OTP from pasted text
+ * Matches exactly maxLength digits, not preceded or followed by another digit
+ *
+ * @param maxLength - Maximum length of the OTP
+ * @returns Function that transforms pasted text to extract OTP
+ */
+export function defaultPasteTransformer(maxLength: number) {
+  return (pasted: string): string => {
+    // Match exactly maxLength digits, not preceded or followed by another digit
+    const otpRegex = new RegExp(`(?<!\\d)(\\d{${maxLength}})(?!\\d)`);
+    const match = pasted.match(otpRegex);
+
+    return match?.[1] ?? '';
+  };
+}

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

@@ -0,0 +1,2 @@
+export * from './label';
+export * from './label.types';

package/lib/__templates__/expo/client/heroui/primitives/label/label.tsx

@@ -0,0 +1,24 @@
+import { forwardRef } from 'react';
+import { Pressable, Text as RNText } from 'react-native';
+import * as Slot from '../slot';
+import type { RootProps, RootRef, TextProps, TextRef } from './label.types';
+
+const Root = forwardRef<RootRef, RootProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot.Pressable : Pressable;
+
+  return <Component ref={ref} {...props} />;
+});
+
+Root.displayName = 'HeroUINative.Primitive.Label.Root';
+
+// --------------------------------------------------
+
+const Text = forwardRef<TextRef, TextProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot.Text : RNText;
+
+  return <Component ref={ref} {...props} />;
+});
+
+Text.displayName = 'HeroUINative.Primitive.Label.Text';
+
+export { Root, Text };

package/lib/__templates__/expo/client/heroui/primitives/label/label.types.ts

@@ -0,0 +1,39 @@
+import type { ViewStyle } from 'react-native';
+import type {
+  PressableRef,
+  SlottablePressableProps,
+  SlottableTextProps,
+  TextRef,
+} from '../../helpers/internal/types';
+
+/**
+ * Props for the label root component.
+ *
+ * @extends SlottablePressableProps Inherits pressable props except 'children', 'hitSlop', and 'style'
+ */
+type RootProps = Omit<
+  SlottablePressableProps,
+  'children' | 'hitSlop' | 'disabled' | 'style'
+> & {
+  /** The content to be rendered inside the label */
+  children: React.ReactNode;
+  /** Whether the label is disabled */
+  isDisabled?: boolean;
+  /** Style properties for the label container */
+  style?: ViewStyle;
+};
+
+/**
+ * Props for the label text component.
+ *
+ * @extends SlottableTextProps Inherits text props for slot-based styling
+ */
+type TextProps = SlottableTextProps & {
+  /** Equivalent to `id` so that the same value can be passed as `aria-labelledby` to the input element */
+  nativeID?: string;
+};
+
+/** Reference type for the label root component */
+type RootRef = PressableRef;
+
+export type { RootProps, RootRef, TextProps, TextRef };

package/lib/__templates__/expo/client/heroui/primitives/menu/index.ts

@@ -0,0 +1,2 @@
+export * from './menu';
+export * from './menu.types';