@coze-arch/cli 0.0.10 → 0.0.11

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

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

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

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

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

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

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

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

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

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

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

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