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

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

@@ -1,325 +0,0 @@
-import { Children, forwardRef, useMemo } from 'react';
-import { type StyleProp, type ViewStyle } from 'react-native';
-import { useThemeColor } from '../../helpers/external/hooks';
-import { HeroText } from '../../helpers/internal/components';
-import { CloseIcon } from '../../helpers/internal/components/close-icon';
-import {
-  AnimationSettingsProvider,
-  FormFieldProvider,
-} from '../../helpers/internal/contexts';
-import type {
-  PressableRef,
-  TextRef,
-  ViewRef,
-} from '../../helpers/internal/types';
-import { childrenToString, createContext } from '../../helpers/internal/utils';
-import * as TagGroupPrimitives from '../../primitives/tag-group';
-import {
-  useItemContext as usePrimitiveItemContext,
-  useRootContext as usePrimitiveRootContext,
-} from '../../primitives/tag-group';
-import { useTagGroupRootAnimation } from './tag-group.animation';
-import { DISPLAY_NAME } from './tag-group.constants';
-import { tagGroupClassNames, tagGroupStyleSheet } from './tag-group.styles';
-import type {
-  TagGroupContextValue,
-  TagGroupItemLabelProps,
-  TagGroupItemProps,
-  TagGroupItemRemoveButtonProps,
-  TagGroupListProps,
-  TagGroupProps,
-  TagRenderProps,
-} from './tag-group.types';
-
-/**
- * Internal context for size and variant. Not exported — consumers use useTagGroup or useTagGroupItem.
- */
-const [TagGroupProvider, useInnerTagGroupContext] =
-  createContext<TagGroupContextValue>({
-    name: 'TagGroupContext',
-  });
-
-/** Re-exports primitive useRootContext */
-const useTagGroup = usePrimitiveRootContext;
-
-/** Re-exports primitive useItemContext */
-const useTagGroupItem = usePrimitiveItemContext;
-
-// --------------------------------------------------
-
-const TagGroupRoot = forwardRef<ViewRef, TagGroupProps>((props, ref) => {
-  const {
-    children,
-    size = 'md',
-    variant = 'default',
-    className,
-    style,
-    animation,
-    isDisabled = false,
-    isInvalid = false,
-    isRequired = false,
-    ...restProps
-  } = props;
-
-  const rootClassName = tagGroupClassNames.root({
-    className,
-  });
-
-  const { isAllAnimationsDisabled } = useTagGroupRootAnimation({
-    animation,
-  });
-
-  const animationSettingsContextValue = useMemo(
-    () => ({
-      isAllAnimationsDisabled,
-    }),
-    [isAllAnimationsDisabled]
-  );
-
-  const formFieldContextValue = useMemo(
-    () => ({
-      isDisabled: isDisabled ?? false,
-      isInvalid: isInvalid ?? false,
-      isRequired: isRequired ?? false,
-      hasFieldPadding: false,
-    }),
-    [isDisabled, isInvalid, isRequired]
-  );
-
-  const contextValue = useMemo(
-    () => ({
-      size,
-      variant,
-    }),
-    [size, variant]
-  );
-
-  return (
-    <AnimationSettingsProvider value={animationSettingsContextValue}>
-      <FormFieldProvider value={formFieldContextValue}>
-        <TagGroupProvider value={contextValue}>
-          <TagGroupPrimitives.Root
-            ref={ref}
-            className={rootClassName}
-            style={style}
-            isDisabled={isDisabled}
-            {...restProps}
-          >
-            {children}
-          </TagGroupPrimitives.Root>
-        </TagGroupProvider>
-      </FormFieldProvider>
-    </AnimationSettingsProvider>
-  );
-});
-
-// --------------------------------------------------
-
-const TagGroupList = forwardRef<ViewRef, TagGroupListProps>((props, ref) => {
-  const { children, className, style, renderEmptyState, ...restProps } = props;
-
-  const listClassName = tagGroupClassNames.list({
-    className,
-  });
-
-  const hasChildren = Children.count(children) > 0;
-
-  return (
-    <TagGroupPrimitives.List
-      ref={ref}
-      className={listClassName}
-      style={style}
-      {...restProps}
-    >
-      {hasChildren ? children : renderEmptyState?.()}
-    </TagGroupPrimitives.List>
-  );
-});
-
-// --------------------------------------------------
-
-const TagGroupItem = forwardRef<PressableRef, TagGroupItemProps>(
-  (props, ref) => {
-    const {
-      children,
-      className,
-      style,
-      id,
-      isDisabled: isDisabledProp,
-      ...restProps
-    } = props;
-
-    const { variant, size } = useInnerTagGroupContext();
-
-    const {
-      selectedKeys,
-      disabledKeys,
-      isDisabled: isRootDisabled,
-    } = usePrimitiveRootContext();
-
-    const isSelected = selectedKeys.has(id);
-    const isDisabled =
-      isRootDisabled || disabledKeys.has(id) || (isDisabledProp ?? false);
-
-    const tagClassName = tagGroupClassNames.tag({
-      variant,
-      size,
-      isSelected,
-      isDisabled,
-      className,
-    });
-
-    if (typeof children === 'function') {
-      const renderProps: TagRenderProps = {
-        isSelected,
-        isDisabled,
-      };
-
-      return (
-        <TagGroupPrimitives.Item
-          ref={ref}
-          id={id}
-          isDisabled={isDisabledProp}
-          className={tagClassName}
-          style={[tagGroupStyleSheet.tag, style] as StyleProp<ViewStyle>}
-          {...restProps}
-        >
-          {children(renderProps)}
-        </TagGroupPrimitives.Item>
-      );
-    }
-
-    const stringifiedChildren = childrenToString(children);
-
-    return (
-      <TagGroupPrimitives.Item
-        ref={ref}
-        id={id}
-        isDisabled={isDisabledProp}
-        className={tagClassName}
-        style={[tagGroupStyleSheet.tag, style] as StyleProp<ViewStyle>}
-        {...restProps}
-      >
-        {stringifiedChildren ? (
-          <TagGroupItemLabel>{stringifiedChildren}</TagGroupItemLabel>
-        ) : (
-          children
-        )}
-      </TagGroupPrimitives.Item>
-    );
-  }
-);
-
-// --------------------------------------------------
-
-const TagGroupItemLabel = forwardRef<TextRef, TagGroupItemLabelProps>(
-  (props, ref) => {
-    const { children, className, ...restProps } = props;
-
-    const { isSelected } = usePrimitiveItemContext();
-    const { size } = useInnerTagGroupContext();
-
-    const tagLabelClassName = tagGroupClassNames.tagLabel({
-      size,
-      isSelected,
-      className,
-    });
-
-    return (
-      <TagGroupPrimitives.ItemLabel asChild>
-        <HeroText ref={ref} className={tagLabelClassName} {...restProps}>
-          {children}
-        </HeroText>
-      </TagGroupPrimitives.ItemLabel>
-    );
-  }
-);
-
-// --------------------------------------------------
-const TagGroupItemRemoveButton = forwardRef<
-  PressableRef,
-  TagGroupItemRemoveButtonProps
->((props, ref) => {
-  const { children, className, iconProps, hitSlop = 8, ...restProps } = props;
-
-  const { isSelected } = usePrimitiveItemContext();
-
-  const [themeColorFieldForeground, themeColorAccentForeground] = useThemeColor(
-    ['field-foreground', 'accent-soft-foreground']
-  );
-
-  const removeButtonClassName = tagGroupClassNames.removeButton({
-    className,
-  });
-
-  const defaultIconColor = isSelected
-    ? themeColorAccentForeground
-    : themeColorFieldForeground;
-
-  const defaultIcon = (
-    <CloseIcon
-      size={iconProps?.size ?? 12}
-      color={iconProps?.color ?? defaultIconColor}
-    />
-  );
-
-  return (
-    <TagGroupPrimitives.RemoveButton
-      ref={ref}
-      className={removeButtonClassName}
-      hitSlop={hitSlop}
-      {...restProps}
-    >
-      {children ?? defaultIcon}
-    </TagGroupPrimitives.RemoveButton>
-  );
-});
-
-// --------------------------------------------------
-
-TagGroupRoot.displayName = DISPLAY_NAME.TAG_GROUP_ROOT;
-TagGroupList.displayName = DISPLAY_NAME.TAG_GROUP_LIST;
-TagGroupItem.displayName = DISPLAY_NAME.TAG_GROUP_ITEM;
-TagGroupItemLabel.displayName = DISPLAY_NAME.TAG_GROUP_ITEM_LABEL;
-TagGroupItemRemoveButton.displayName =
-  DISPLAY_NAME.TAG_GROUP_ITEM_REMOVE_BUTTON;
-
-// --------------------------------------------------
-
-/**
- * Compound TagGroup component with sub-components
- *
- * @component TagGroup - Main container that manages tag selection state,
- * disabled keys, and remove functionality. Provides size and variant
- * context to all child components.
- *
- * @component TagGroup.List - Container for rendering the list of tags
- * with optional empty state rendering.
- *
- * @component TagGroup.Item - Individual tag within the group. Supports string
- * children (auto-wrapped in TagGroup.ItemLabel), render function children,
- * or custom layouts.
- *
- * @component TagGroup.ItemLabel - Text label for the tag. Automatically
- * rendered when string children are provided, or can be used explicitly.
- *
- * @component TagGroup.ItemRemoveButton - Remove button for the tag. Must be
- * placed explicitly by the consumer when removal is needed.
- *
- * Props flow from TagGroup to sub-components via context (size, variant).
- *
- * @see Full documentation: https://v3.heroui.com/docs/native/components/tag-group
- */
-const TagGroup = Object.assign(TagGroupRoot, {
-  /** Container for the list of tags */
-  List: TagGroupList,
-  /** Individual tag item within the group */
-  Item: TagGroupItem,
-  /** Text label for the tag item */
-  ItemLabel: TagGroupItemLabel,
-  /** Remove button for the tag item */
-  ItemRemoveButton: TagGroupItemRemoveButton,
-});
-
-export { TagGroup, useTagGroup, useTagGroupItem };
-export default TagGroup;

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

@@ -1,125 +0,0 @@
-import type { TextProps, ViewProps } from 'react-native';
-import type { AnimationRootDisableAll } from '../../helpers/internal/types';
-import type * as TagGroupPrimitivesTypes from '../../primitives/tag-group/tag-group.types';
-
-/**
- * Size variants for TagGroup tags
- */
-export type TagGroupSize = 'sm' | 'md' | 'lg';
-
-/**
- * Visual variant for TagGroup tags
- */
-export type TagGroupVariant = 'default' | 'surface';
-
-/**
- * Render props passed to TagGroup.Item's render function children
- */
-export interface TagRenderProps {
-  /** Whether the tag is currently selected */
-  isSelected: boolean;
-  /** Whether the tag is disabled (merged from root, disabledKeys, and item prop) */
-  isDisabled: boolean;
-}
-
-/**
- * Props for the TagGroup root component.
- * Wraps the primitive Root with size, variant, and animation support.
- */
-export interface TagGroupProps
-  extends Omit<TagGroupPrimitivesTypes.RootProps, 'asChild'> {
-  /** Size of all tags in the group @default "md" */
-  size?: TagGroupSize;
-
-  /** Visual variant of all tags in the group @default "default" */
-  variant?: TagGroupVariant;
-
-  /** Additional CSS classes for the tag group container */
-  className?: string;
-
-  /**
-   * Animation configuration for tag group
-   * - `"disable-all"`: Disable all animations including children
-   * - `undefined`: Use default animations
-   */
-  animation?: AnimationRootDisableAll;
-}
-
-/**
- * Props for the TagGroup.List component.
- * Container that renders the list of tags with optional empty state.
- */
-export interface TagGroupListProps extends ViewProps {
-  /** Child elements to render inside the list */
-  children?: React.ReactNode;
-
-  /** Additional CSS classes for the list container */
-  className?: string;
-
-  /** Function to render when the list has no tags */
-  renderEmptyState?: () => React.ReactNode;
-}
-
-/**
- * Props for the TagGroup.Item component.
- * Represents an individual tag within a TagGroup.
- */
-export interface TagGroupItemProps
-  extends Omit<TagGroupPrimitivesTypes.ItemProps, 'asChild' | 'children'> {
-  /** Tag content: string, elements, or a render function receiving TagRenderProps */
-  children?:
-    | React.ReactNode
-    | ((renderProps: TagRenderProps) => React.ReactNode);
-
-  /** Additional CSS classes for the tag */
-  className?: string;
-}
-
-/**
- * Props for the TagGroup.ItemLabel component.
- * Renders the text label of a tag.
- */
-export interface TagGroupItemLabelProps extends TextProps {
-  /** Text content to render */
-  children?: React.ReactNode;
-
-  /** Additional CSS classes for the label */
-  className?: string;
-}
-
-/**
- * Props for customizing the default remove icon
- */
-export interface TagRemoveButtonIconProps {
-  /** Size of the icon @default 12 */
-  size?: number;
-  /** Color of the icon */
-  color?: string;
-}
-
-/**
- * Props for the TagGroup.ItemRemoveButton component.
- * Renders a button to remove the tag from the group.
- */
-export interface TagGroupItemRemoveButtonProps
-  extends Omit<TagGroupPrimitivesTypes.RemoveButtonProps, 'asChild'> {
-  /** Custom icon or content for the remove button */
-  children?: React.ReactNode;
-
-  /** Additional CSS classes for the remove button */
-  className?: string;
-
-  /** Props for customizing the default close icon. Only applies when no children are provided */
-  iconProps?: TagRemoveButtonIconProps;
-}
-
-/**
- * Context value shared between TagGroup and its child components
- */
-export interface TagGroupContextValue {
-  /** Size of the tags */
-  size: TagGroupSize;
-
-  /** Visual variant of the tags */
-  variant: TagGroupVariant;
-}

package/lib/__templates__/expo/client/heroui/components/text-area/index.ts

@@ -1,3 +0,0 @@
-export { default as TextArea } from './text-area';
-export { textAreaClassNames } from './text-area.styles';
-export type { TextAreaProps } from './text-area.types';

package/lib/__templates__/expo/client/heroui/components/text-area/text-area.constants.ts

@@ -1,6 +0,0 @@
-/**
- * Display name for TextArea component
- */
-export const DISPLAY_NAME = {
-  TEXT_AREA: 'HeroUINative.TextArea',
-} as const;

package/lib/__templates__/expo/client/heroui/components/text-area/text-area.md

@@ -1,133 +0,0 @@
-# TextArea
-
-A multiline text input component with styled border and background for collecting longer user input.
-
-## Import
-
-```tsx
-import { TextArea } from '@/heroui';
-```
-
-## Usage
-
-### Basic Usage
-
-TextArea can be used standalone or within a TextField component.
-
-```tsx
-import { TextArea } from '@/heroui';
-
-<TextArea placeholder="Enter your message" />;
-```
-
-### Within TextField
-
-TextArea works seamlessly with TextField for complete form structure.
-
-```tsx
-import { Description, Label, TextArea, TextField } from '@/heroui';
-
-<TextField>
-  <Label>Message</Label>
-  <TextArea placeholder="Enter your message here..." />
-  <Description>Please provide as much detail as possible.</Description>
-</TextField>;
-```
-
-### With Validation
-
-Display error state when the text area is invalid.
-
-```tsx
-import { FieldError, Label, TextArea, TextField } from '@/heroui';
-
-<TextField isRequired isInvalid={true}>
-  <Label>Message</Label>
-  <TextArea placeholder="Enter your message" />
-  <FieldError>Please enter a valid message</FieldError>
-</TextField>;
-```
-
-### Disabled State
-
-Disable the text area to prevent interaction.
-
-```tsx
-import { Label, TextArea, TextField } from '@/heroui';
-
-<TextField isDisabled>
-  <Label>Disabled Field</Label>
-  <TextArea placeholder="Cannot edit" value="Read only value" />
-</TextField>;
-```
-
-### With Variant
-
-Use different variants to style the text area based on context.
-
-```tsx
-import { Label, TextArea, TextField } from '@/heroui';
-
-<TextField>
-  <Label>Primary Variant</Label>
-  <TextArea placeholder="Primary style text area" variant="primary" />
-</TextField>
-
-<TextField>
-  <Label>Secondary Variant</Label>
-  <TextArea placeholder="Secondary style text area" variant="secondary" />
-</TextField>
-```
-
-### Custom Styling
-
-Customize the text area appearance using className.
-
-```tsx
-import { Label, TextArea, TextField } from '@/heroui';
-
-<TextField>
-  <Label>Custom Styled</Label>
-  <TextArea
-    placeholder="Custom colors"
-    className="bg-blue-50 border-blue-500 focus:border-blue-700"
-  />
-</TextField>;
-```
-
-## Example
-
-```tsx
-import {
-  Description,
-  FieldError,
-  Label,
-  TextArea,
-  TextField,
-} from '@/heroui';
-import { View } from 'react-native';
-
-export default function TextAreaExample() {
-  return (
-    <View className="gap-8">
-      <TextField>
-        <Label>Primary Variant</Label>
-        <TextArea placeholder="Primary style text area" variant="primary" />
-        <Description>Default variant with primary styling</Description>
-      </TextField>
-
-      <TextField>
-        <Label>Secondary Variant</Label>
-        <TextArea placeholder="Secondary style text area" variant="secondary" />
-        <Description>Secondary variant for surfaces</Description>
-      </TextField>
-    </View>
-  );
-}
-```
-
-You can find more examples in the [GitHub repository](<https://github.com/heroui-inc/heroui-native/blob/rc/example/src/app/(home)/components/text-area.tsx>).
-
-## API Reference
-
-TextArea extends [Input](../input/input.md) component and inherits all its props. The only differences are default values: `multiline` defaults to `true` and `textAlignVertical` defaults to `'top'`.

package/lib/__templates__/expo/client/heroui/components/text-area/text-area.styles.ts

@@ -1,10 +0,0 @@
-import { tv } from 'tailwind-variants';
-import { combineStyles } from '../../helpers/internal/utils';
-
-const root = tv({
-  base: 'h-32',
-});
-
-export const textAreaClassNames = combineStyles({
-  root,
-});

package/lib/__templates__/expo/client/heroui/components/text-area/text-area.tsx

@@ -1,44 +0,0 @@
-import { forwardRef } from 'react';
-import { type TextInput as TextInputType } from 'react-native';
-import Input from '../input/input';
-import { DISPLAY_NAME } from './text-area.constants';
-import { textAreaClassNames } from './text-area.styles';
-import type { TextAreaProps } from './text-area.types';
-
-// --------------------------------------------------
-
-const TextAreaRoot = forwardRef<TextInputType, TextAreaProps>((props, ref) => {
-  const {
-    multiline = true,
-    textAlignVertical = 'top',
-    className,
-    ...restProps
-  } = props;
-
-  const textAreaClassName = textAreaClassNames.root({ className });
-
-  return (
-    <Input
-      ref={ref}
-      className={textAreaClassName}
-      multiline={multiline}
-      textAlignVertical={textAlignVertical}
-      {...restProps}
-    />
-  );
-});
-
-// --------------------------------------------------
-
-TextAreaRoot.displayName = DISPLAY_NAME.TEXT_AREA;
-
-/**
- * TextArea component - A multiline text input component with styled border and background for collecting longer user input.
- * Extends Input component with multiline support, defaulting to 8 lines and top-aligned text.
- * Supports primary and secondary variants, and integrates with form item state context.
- *
- * @see Full documentation: https://v3.heroui.com/docs/native/components/text-area
- */
-const TextArea = TextAreaRoot;
-
-export default TextArea;

package/lib/__templates__/expo/client/heroui/components/text-area/text-area.types.ts

@@ -1,6 +0,0 @@
-import type { InputProps } from '../input/input.types';
-
-/**
- * Props for the TextArea component
- */
-export interface TextAreaProps extends InputProps {}

package/lib/__templates__/expo/client/heroui/components/text-field/index.ts

@@ -1,3 +0,0 @@
-export { default as TextField, useTextField } from './text-field';
-export { textFieldClassNames } from './text-field.styles';
-export type { TextFieldRootProps } from './text-field.types';

package/lib/__templates__/expo/client/heroui/components/text-field/text-field.animation.ts

@@ -1,20 +0,0 @@
-import { useCombinedAnimationDisabledState } from '../../helpers/internal/hooks';
-import type { AnimationRootDisableAll } from '../../helpers/internal/types';
-
-// --------------------------------------------------
-
-/**
- * Animation hook for TextField Root component
- * Handles root-level animation configuration and provides context for child components
- */
-export function useTextFieldRootAnimation(options: {
-  animation: AnimationRootDisableAll | undefined;
-}) {
-  const { animation } = options;
-
-  const isAllAnimationsDisabled = useCombinedAnimationDisabledState(animation);
-
-  return {
-    isAllAnimationsDisabled,
-  };
-}

package/lib/__templates__/expo/client/heroui/components/text-field/text-field.constants.ts

@@ -1,6 +0,0 @@
-/**
- * Display names for TextField components
- */
-export const DISPLAY_NAME = {
-  ROOT: 'HeroUINative.TextField.Root',
-};