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

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

@@ -1,431 +0,0 @@
-/**
- * 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

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

@@ -1,31 +0,0 @@
-/**
- * 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

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

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

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

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

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