@coze-arch/cli 0.0.1-alpha.3002ee → 0.0.1-alpha.3260db

package/lib/__templates__/expo/client/heroui/components/input/input.styles.ts

@@ -0,0 +1,51 @@
+import { StyleSheet } from 'react-native';
+import { tv } from 'tailwind-variants';
+import { combineStyles } from '../../helpers/internal/utils';
+
+const input = tv({
+  base: 'py-3.5 px-3 rounded-2xl text-foreground font-normal border-2 focus:border-accent',
+  variants: {
+    variant: {
+      primary: 'bg-field border-field ios:shadow-field android:shadow-sm',
+      secondary: 'bg-default border-default',
+    },
+    isInvalid: {
+      true: 'border-danger focus:border-danger',
+      false: '',
+    },
+    isDisabled: {
+      true: 'opacity-disabled',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    variant: 'primary',
+    isInvalid: false,
+    isDisabled: false,
+  },
+});
+
+const placeholderTextColor = tv({
+  base: 'accent-field-placeholder',
+});
+
+const inputSelectionColor = tv({
+  base: 'accent-accent',
+  variants: {
+    isInvalid: {
+      true: 'accent-danger',
+    },
+  },
+});
+
+export const inputClassNames = combineStyles({
+  input,
+  inputSelectionColor,
+  placeholderTextColor,
+});
+
+export const inputStyleSheet = StyleSheet.create({
+  borderCurve: {
+    borderCurve: 'continuous',
+  },
+});

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

@@ -0,0 +1,96 @@
+import { forwardRef } from 'react';
+import { TextInput, type TextInput as TextInputType } from 'react-native';
+import { useIsOnSurface } from '../../helpers/external/hooks';
+import { useFormField } from '../../helpers/internal/contexts';
+import { useBottomSheetAwareHandlers } from '../../helpers/internal/hooks';
+import { DISPLAY_NAME } from './input.constants';
+import { inputClassNames, inputStyleSheet } from './input.styles';
+import type { InputProps } from './input.types';
+
+// --------------------------------------------------
+
+const InputRoot = forwardRef<TextInputType, InputProps>((props, ref) => {
+  const {
+    isInvalid: localIsInvalid,
+    isDisabled: localIsDisabled,
+    isBottomSheetAware,
+    variant,
+    className,
+    style,
+    selectionColorClassName: selectionColorClassNameProp,
+    placeholderColorClassName: placeholderColorClassNameProp,
+    onFocus: onFocusProp,
+    onBlur: onBlurProp,
+    ...restProps
+  } = props;
+  const formField = useFormField();
+
+  const isInvalid =
+    localIsInvalid !== undefined
+      ? localIsInvalid
+      : (formField?.isInvalid ?? false);
+
+  const isDisabled =
+    localIsDisabled !== undefined
+      ? localIsDisabled
+      : (formField?.isDisabled ?? false);
+
+  const isOnSurfaceAutoDetected = useIsOnSurface();
+  const finalVariant =
+    variant !== undefined
+      ? variant
+      : isOnSurfaceAutoDetected
+        ? 'secondary'
+        : 'primary';
+
+  /** Merge user-provided onFocus/onBlur with bottom sheet keyboard handlers */
+  const { onFocus, onBlur } = useBottomSheetAwareHandlers({
+    onFocus: onFocusProp,
+    onBlur: onBlurProp,
+    isBottomSheetAware,
+  });
+
+  const inputClassName = inputClassNames.input({
+    variant: finalVariant,
+    isInvalid,
+    isDisabled,
+    className,
+  });
+
+  const placeholderColorClassName = inputClassNames.placeholderTextColor({
+    className: placeholderColorClassNameProp,
+  });
+
+  const selectionColorClassName = inputClassNames.inputSelectionColor({
+    isInvalid,
+    className: selectionColorClassNameProp,
+  });
+
+  return (
+    <TextInput
+      ref={ref}
+      className={inputClassName}
+      style={[inputStyleSheet.borderCurve, style]}
+      placeholderTextColorClassName={placeholderColorClassName}
+      selectionColorClassName={selectionColorClassName}
+      editable={!isDisabled}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      {...restProps}
+    />
+  );
+});
+
+// --------------------------------------------------
+
+InputRoot.displayName = DISPLAY_NAME.INPUT;
+
+/**
+ * Input component - A text input component with styled border and background for collecting user input.
+ * Supports primary and secondary variants, and integrates with form item state context.
+ *
+ * @see Full documentation: https://v3.heroui.com/docs/native/components/input
+ */
+const Input = InputRoot;
+
+export default Input;

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

@@ -0,0 +1,44 @@
+import type { TextInputProps } from 'react-native';
+
+/**
+ * Props for the Input component
+ */
+export interface InputProps extends TextInputProps {
+  /**
+   * Whether the input is in an invalid state (overrides context)
+   * @default undefined
+   */
+  isInvalid?: boolean;
+  /**
+   * Whether the input is disabled (overrides context)
+   * @default undefined
+   */
+  isDisabled?: boolean;
+  /**
+   * Variant style for the input
+   * @default 'primary'
+   */
+  variant?: 'primary' | 'secondary';
+  /**
+   * Whether the input 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;
+  /**
+   * Custom className for the selection color
+   * @default "accent-accent"
+   */
+  selectionColorClassName?: string;
+  /**
+   * Custom className for the placeholder text color
+   * @default "field-placeholder"
+   */
+  placeholderColorClassName?: string;
+}

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

@@ -0,0 +1,9 @@
+export { default as InputGroup } from './input-group';
+export { inputGroupClassNames } from './input-group.styles';
+export type {
+  InputGroupContextType,
+  InputGroupInputProps,
+  InputGroupPrefixProps,
+  InputGroupProps,
+  InputGroupSuffixProps,
+} from './input-group.types';

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

@@ -0,0 +1,14 @@
+import { useCombinedAnimationDisabledState } from '../../helpers/internal/hooks';
+import type { AnimationRootDisableAll } from '../../helpers/internal/types';
+
+export function useInputGroupRootAnimation(options: {
+  animation: AnimationRootDisableAll | undefined;
+}) {
+  const { animation } = options;
+
+  const isAllAnimationsDisabled = useCombinedAnimationDisabledState(animation);
+
+  return {
+    isAllAnimationsDisabled,
+  };
+}

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

@@ -0,0 +1,6 @@
+export const DISPLAY_NAME = {
+  INPUT_GROUP: 'HeroUINative.InputGroup',
+  INPUT_GROUP_PREFIX: 'HeroUINative.InputGroup.Prefix',
+  INPUT_GROUP_SUFFIX: 'HeroUINative.InputGroup.Suffix',
+  INPUT_GROUP_INPUT: 'HeroUINative.InputGroup.Input',
+} as const;

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

@@ -0,0 +1,197 @@
+# InputGroup
+
+A compound layout component that groups an input with optional prefix and suffix decorators.
+
+## Import
+
+```tsx
+import { InputGroup } from '@/heroui';
+```
+
+## Anatomy
+
+```tsx
+<InputGroup>
+  <InputGroup.Prefix>...</InputGroup.Prefix>
+  <InputGroup.Input />
+  <InputGroup.Suffix>...</InputGroup.Suffix>
+</InputGroup>
+```
+
+- **InputGroup**: Layout container that wraps Prefix, Input, and Suffix. Provides animation settings and a measurement context so Prefix/Suffix widths are automatically applied as padding on the Input.
+- **InputGroup.Prefix**: Absolutely positioned View anchored to the left side of the Input. Its measured width is applied as `paddingLeft` on InputGroup.Input automatically.
+- **InputGroup.Suffix**: Absolutely positioned View anchored to the right side of the Input. Its measured width is applied as `paddingRight` on InputGroup.Input automatically.
+- **InputGroup.Input**: Pass-through to the Input component. Accepts all Input props directly. Automatically receives paddingLeft/paddingRight from measured Prefix/Suffix.
+
+## Usage
+
+### Basic Usage
+
+The InputGroup component uses compound parts to attach prefix and suffix content to an input.
+
+```tsx
+<InputGroup>
+  <InputGroup.Prefix>...</InputGroup.Prefix>
+  <InputGroup.Input placeholder="Enter text" />
+  <InputGroup.Suffix>...</InputGroup.Suffix>
+</InputGroup>
+```
+
+### With Prefix Only
+
+Attach leading content such as icons to the input.
+
+```tsx
+<InputGroup>
+  <InputGroup.Prefix isDecorative>
+    <PersonIcon size={16} />
+  </InputGroup.Prefix>
+  <InputGroup.Input placeholder="Username" />
+</InputGroup>
+```
+
+### With Suffix Only
+
+Attach trailing content such as icons to the input.
+
+```tsx
+<InputGroup>
+  <InputGroup.Input placeholder="Search products..." />
+  <InputGroup.Suffix isDecorative>
+    <MagnifierIcon size={16} />
+  </InputGroup.Suffix>
+</InputGroup>
+```
+
+### Decorative vs Interactive
+
+Set `isDecorative` on Prefix or Suffix to make touches pass through to the Input and hide the content from screen readers. Omit it when the decorator contains interactive elements.
+
+```tsx
+<InputGroup>
+  <InputGroup.Prefix isDecorative>
+    <LockIcon size={16} />
+  </InputGroup.Prefix>
+  <InputGroup.Input placeholder="Enter your password" secureTextEntry />
+  <InputGroup.Suffix>
+    <Pressable onPress={togglePasswordVisibility}>
+      <EyeIcon size={16} />
+    </Pressable>
+  </InputGroup.Suffix>
+</InputGroup>
+```
+
+### Disabled State
+
+Disable the entire input group. The disabled state cascades to all child components.
+
+```tsx
+<InputGroup isDisabled>
+  <InputGroup.Prefix isDecorative>
+    <LockIcon size={16} />
+  </InputGroup.Prefix>
+  <InputGroup.Input placeholder="Disabled input" />
+</InputGroup>
+```
+
+### With TextField Integration
+
+Combine with TextField, Label, and Description for full form field support.
+
+```tsx
+<TextField isRequired>
+  <Label>Email</Label>
+  <InputGroup>
+    <InputGroup.Prefix isDecorative>
+      <MailIcon size={16} />
+    </InputGroup.Prefix>
+    <InputGroup.Input placeholder="you@example.com" keyboardType="email-address" />
+  </InputGroup>
+  <Description>We'll never share your email</Description>
+</TextField>
+```
+
+## Example
+
+```tsx
+import { InputGroup } from '@/heroui';
+import { Ionicons } from '@expo/vector-icons';
+import { useState } from 'react';
+import { Pressable, View } from 'react-native';
+
+export default function InputGroupExample() {
+  const [value, setValue] = useState('');
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+
+  return (
+    <View className="px-5">
+      <InputGroup>
+        <InputGroup.Prefix isDecorative>
+          <Ionicons name="lock-closed-outline" size={16} color="#888" />
+        </InputGroup.Prefix>
+        <InputGroup.Input
+          value={value}
+          onChangeText={setValue}
+          placeholder="Enter your password"
+          secureTextEntry={!isPasswordVisible}
+        />
+        <InputGroup.Suffix>
+          <Pressable
+            onPress={() => setIsPasswordVisible(!isPasswordVisible)}
+            hitSlop={20}
+          >
+            <Ionicons
+              name={isPasswordVisible ? 'eye-off-outline' : 'eye-outline'}
+              size={16}
+              color="#888"
+            />
+          </Pressable>
+        </InputGroup.Suffix>
+      </InputGroup>
+    </View>
+  );
+}
+```
+
+You can find more examples in the [GitHub repository](<https://github.com/heroui-inc/heroui-native/blob/rc/example/src/app/(home)/components/input-group.tsx>).
+
+## API Reference
+
+### InputGroup
+
+| prop           | type                     | default | description                                                                  |
+| -------------- | ------------------------ | ------- | ---------------------------------------------------------------------------- |
+| `children`     | `React.ReactNode`        | -       | Children elements to be rendered inside the input group                      |
+| `className`    | `string`                 | -       | Additional CSS classes                                                       |
+| `isDisabled`   | `boolean`                | `false` | Whether the entire input group and its children are disabled                 |
+| `animation`    | `AnimationRootDisableAll`| -       | Animation configuration for input group                                      |
+| `...ViewProps` | `ViewProps`              | -       | All standard React Native View props are supported                           |
+
+#### AnimationRootDisableAll
+
+Animation configuration for the InputGroup root component. Can be:
+
+- `"disable-all"`: Disable all animations including children (cascades down)
+- `undefined`: Use default animations
+
+### InputGroup.Prefix
+
+| prop             | type              | default | description                                                                                  |
+| ---------------- | ----------------- | ------- | -------------------------------------------------------------------------------------------- |
+| `children`       | `React.ReactNode` | -       | Content to render inside the prefix                                                          |
+| `className`      | `string`          | -       | Additional CSS classes                                                                       |
+| `isDecorative`   | `boolean`         | `false` | When true, touches pass through to the Input and content is hidden from screen readers        |
+| `...ViewProps`   | `ViewProps`       | -       | All standard React Native View props are supported                                           |
+
+### InputGroup.Suffix
+
+| prop             | type              | default | description                                                                                  |
+| ---------------- | ----------------- | ------- | -------------------------------------------------------------------------------------------- |
+| `children`       | `React.ReactNode` | -       | Content to render inside the suffix                                                          |
+| `className`      | `string`          | -       | Additional CSS classes                                                                       |
+| `isDecorative`   | `boolean`         | `false` | When true, touches pass through to the Input and content is hidden from screen readers        |
+| `...ViewProps`   | `ViewProps`       | -       | All standard React Native View props are supported                                           |
+
+### InputGroup.Input
+
+Pass-through to the [Input](../input/input.md) component. Accepts all Input props directly.

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

@@ -0,0 +1,31 @@
+import { tv } from 'tailwind-variants';
+import { combineStyles } from '../../helpers/internal/utils';
+
+const prefix = tv({
+  base: 'absolute left-0 top-0 bottom-0 items-center justify-center z-10 px-3 gap-3',
+  variants: {
+    isDisabled: {
+      true: 'opacity-disabled',
+    },
+  },
+  defaultVariants: {
+    isDisabled: false,
+  },
+});
+
+const suffix = tv({
+  base: 'absolute right-0 top-0 bottom-0 items-center justify-center z-10 px-3 gap-3',
+  variants: {
+    isDisabled: {
+      true: 'opacity-disabled',
+    },
+  },
+  defaultVariants: {
+    isDisabled: false,
+  },
+});
+
+export const inputGroupClassNames = combineStyles({
+  prefix,
+  suffix,
+});

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

@@ -0,0 +1,239 @@
+import { forwardRef, useCallback, useMemo, useState } from 'react';
+import {
+  type LayoutChangeEvent,
+  type TextInput as TextInputType,
+  View,
+} from 'react-native';
+import {
+  AnimationSettingsProvider,
+  useFormField,
+} from '../../helpers/internal/contexts';
+import type { ViewRef } from '../../helpers/internal/types';
+import { createContext } from '../../helpers/internal/utils';
+import { Input } from '../input';
+import { useInputGroupRootAnimation } from './input-group.animation';
+import { DISPLAY_NAME } from './input-group.constants';
+import { inputGroupClassNames } from './input-group.styles';
+import type {
+  InputGroupContextType,
+  InputGroupInputProps,
+  InputGroupPrefixProps,
+  InputGroupProps,
+  InputGroupSuffixProps,
+} from './input-group.types';
+
+const [InputGroupProvider, useInputGroup] =
+  createContext<InputGroupContextType>({
+    name: 'InputGroupContext',
+    strict: false,
+  });
+
+// --------------------------------------------------
+
+const InputGroupRoot = forwardRef<ViewRef, InputGroupProps>((props, ref) => {
+  const { children, animation, isDisabled = false, ...restProps } = props;
+
+  const [prefixWidth, setPrefixWidth] = useState(0);
+  const [suffixWidth, setSuffixWidth] = useState(0);
+
+  const { isAllAnimationsDisabled } = useInputGroupRootAnimation({ animation });
+
+  const animationSettingsContextValue = useMemo(
+    () => ({ isAllAnimationsDisabled }),
+    [isAllAnimationsDisabled]
+  );
+
+  const inputGroupContextValue = useMemo<InputGroupContextType>(
+    () => ({
+      isDisabled,
+      prefixWidth,
+      suffixWidth,
+      setPrefixWidth,
+      setSuffixWidth,
+    }),
+    [isDisabled, prefixWidth, suffixWidth]
+  );
+
+  return (
+    <InputGroupProvider value={inputGroupContextValue}>
+      <AnimationSettingsProvider value={animationSettingsContextValue}>
+        <View ref={ref} {...restProps}>
+          {children}
+        </View>
+      </AnimationSettingsProvider>
+    </InputGroupProvider>
+  );
+});
+
+// --------------------------------------------------
+
+const InputGroupPrefix = forwardRef<ViewRef, InputGroupPrefixProps>(
+  (props, ref) => {
+    const {
+      children,
+      className,
+      isDecorative = false,
+      onLayout: onLayoutProp,
+      ...restProps
+    } = props;
+
+    const context = useInputGroup();
+    const formField = useFormField();
+    const isDisabled = context?.isDisabled ?? formField?.isDisabled ?? false;
+
+    const onLayout = useCallback(
+      (event: LayoutChangeEvent) => {
+        context?.setPrefixWidth(event.nativeEvent.layout.width);
+        onLayoutProp?.(event);
+      },
+      [context, onLayoutProp]
+    );
+
+    const prefixClassName = inputGroupClassNames.prefix({
+      className,
+      isDisabled,
+    });
+
+    return (
+      <View
+        ref={ref}
+        className={prefixClassName}
+        onLayout={onLayout}
+        pointerEvents={isDecorative || isDisabled ? 'none' : undefined}
+        accessibilityElementsHidden={isDecorative || undefined}
+        importantForAccessibility={
+          isDecorative ? 'no-hide-descendants' : undefined
+        }
+        {...restProps}
+      >
+        {children}
+      </View>
+    );
+  }
+);
+
+// --------------------------------------------------
+
+const InputGroupSuffix = forwardRef<ViewRef, InputGroupSuffixProps>(
+  (props, ref) => {
+    const {
+      children,
+      className,
+      isDecorative = false,
+      onLayout: onLayoutProp,
+      ...restProps
+    } = props;
+
+    const context = useInputGroup();
+    const formField = useFormField();
+    const isDisabled = context?.isDisabled ?? formField?.isDisabled ?? false;
+
+    const suffixClassName = inputGroupClassNames.suffix({
+      className,
+      isDisabled,
+    });
+
+    const onLayout = useCallback(
+      (event: LayoutChangeEvent) => {
+        context?.setSuffixWidth(event.nativeEvent.layout.width);
+        onLayoutProp?.(event);
+      },
+      [context, onLayoutProp]
+    );
+
+    return (
+      <View
+        ref={ref}
+        className={suffixClassName}
+        onLayout={onLayout}
+        pointerEvents={isDecorative || isDisabled ? 'none' : undefined}
+        accessibilityElementsHidden={isDecorative || undefined}
+        importantForAccessibility={
+          isDecorative ? 'no-hide-descendants' : undefined
+        }
+        {...restProps}
+      >
+        {children}
+      </View>
+    );
+  }
+);
+
+// --------------------------------------------------
+
+const InputGroupInput = forwardRef<TextInputType, InputGroupInputProps>(
+  (props, ref) => {
+    const { style, isDisabled: localIsDisabled, ...restProps } = props;
+
+    const context = useInputGroup();
+    const isDisabled = localIsDisabled ?? context?.isDisabled ?? undefined;
+
+    const autoPaddingStyle = useMemo(() => {
+      const paddingLeft =
+        context?.prefixWidth && context.prefixWidth > 0
+          ? context.prefixWidth
+          : undefined;
+      const paddingRight =
+        context?.suffixWidth && context.suffixWidth > 0
+          ? context.suffixWidth
+          : undefined;
+
+      if (paddingLeft === undefined && paddingRight === undefined) {
+        return undefined;
+      }
+
+      return { paddingLeft, paddingRight };
+    }, [context?.prefixWidth, context?.suffixWidth]);
+
+    return (
+      <Input
+        ref={ref}
+        style={[autoPaddingStyle, style]}
+        isDisabled={isDisabled}
+        {...restProps}
+      />
+    );
+  }
+);
+
+// --------------------------------------------------
+
+InputGroupRoot.displayName = DISPLAY_NAME.INPUT_GROUP;
+InputGroupPrefix.displayName = DISPLAY_NAME.INPUT_GROUP_PREFIX;
+InputGroupSuffix.displayName = DISPLAY_NAME.INPUT_GROUP_SUFFIX;
+InputGroupInput.displayName = DISPLAY_NAME.INPUT_GROUP_INPUT;
+
+/**
+ * Compound InputGroup component with sub-components.
+ *
+ * @component InputGroup - Layout container (plain View) that wraps
+ * Prefix, Input, and Suffix. Provides animation settings and a
+ * measurement context so Prefix/Suffix widths are automatically applied
+ * as padding on the Input.
+ *
+ * @component InputGroup.Prefix - Absolutely positioned View anchored to
+ * the left side of the Input. Its measured width is applied as
+ * `paddingLeft` on InputGroup.Input automatically. Set `isDecorative`
+ * to make touches pass through to the Input and hide from accessibility.
+ *
+ * @component InputGroup.Suffix - Absolutely positioned View anchored to
+ * the right side of the Input. Its measured width is applied as
+ * `paddingRight` on InputGroup.Input automatically. Set `isDecorative`
+ * to make touches pass through to the Input and hide from accessibility.
+ *
+ * @component InputGroup.Input - Pass-through to the Input component.
+ * Accepts all Input props directly (value, onChangeText, isDisabled, etc.).
+ * Automatically receives paddingLeft/paddingRight from measured Prefix/Suffix.
+ *
+ * @see Full documentation: https://v3.heroui.com/docs/native/components/input-group
+ */
+const CompoundInputGroup = Object.assign(InputGroupRoot, {
+  /** Absolutely positioned View for leading prefix content */
+  Prefix: InputGroupPrefix,
+  /** Absolutely positioned View for trailing suffix content */
+  Suffix: InputGroupSuffix,
+  /** Pass-through to Input — accepts all Input props directly */
+  Input: InputGroupInput,
+});
+
+export default CompoundInputGroup;