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

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

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

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

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

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

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

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

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

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

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