@coze-arch/cli 0.0.10 → 0.0.11

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

@@ -0,0 +1,125 @@
+import { forwardRef, useMemo } from 'react';
+import { Pressable, Text as RNText, type StyleProp, type ViewStyle } from 'react-native';
+import { HeroText } from '../../helpers/internal/components';
+import { AnimationSettingsProvider } from '../../helpers/internal/contexts';
+import type { PressableRef } from '../../helpers/internal/types';
+import { childrenToString, createContext } from '../../helpers/internal/utils';
+import { useChipRootAnimation } from './chip.animation';
+import { DISPLAY_NAME } from './chip.constants';
+import { chipClassNames, chipStyleSheet } from './chip.styles';
+import type { ChipContextValue, ChipLabelProps, ChipProps } from './chip.types';
+
+const [ChipProvider, useChip] = createContext<ChipContextValue>({
+  name: 'ChipContext',
+});
+
+// --------------------------------------------------
+
+const Chip = forwardRef<PressableRef, ChipProps>((props, ref) => {
+  const {
+    children,
+    variant = 'primary',
+    size = 'md',
+    color = 'accent',
+    className,
+    style,
+    animation,
+    ...restProps
+  } = props;
+
+  const stringifiedChildren = childrenToString(children);
+
+  const rootClassName = chipClassNames.root({
+    size,
+    variant,
+    color,
+    className,
+  });
+
+  const { isAllAnimationsDisabled } = useChipRootAnimation({
+    animation,
+  });
+
+  const animationSettingsContextValue = useMemo(
+    () => ({
+      isAllAnimationsDisabled,
+    }),
+    [isAllAnimationsDisabled]
+  );
+
+  const contextValue = useMemo(
+    () => ({
+      size,
+      variant,
+      color,
+    }),
+    [size, variant, color]
+  );
+
+  return (
+    <AnimationSettingsProvider value={animationSettingsContextValue}>
+      <ChipProvider value={contextValue}>
+        <Pressable
+          ref={ref}
+          className={rootClassName}
+          style={[chipStyleSheet.root, style] as StyleProp<ViewStyle>}
+          {...restProps}
+        >
+          {stringifiedChildren ? (
+            <ChipLabel>{stringifiedChildren}</ChipLabel>
+          ) : (
+            children
+          )}
+        </Pressable>
+      </ChipProvider>
+    </AnimationSettingsProvider>
+  );
+});
+
+// --------------------------------------------------
+
+const ChipLabel = forwardRef<RNText, ChipLabelProps>((props, ref) => {
+  const { children, className, ...restProps } = props;
+
+  const { size, variant, color } = useChip();
+
+  const labelClassName = chipClassNames.label({
+    size,
+    variant,
+    color,
+    className,
+  });
+
+  return (
+    <HeroText ref={ref} className={labelClassName} {...restProps}>
+      {children}
+    </HeroText>
+  );
+});
+
+// --------------------------------------------------
+
+Chip.displayName = DISPLAY_NAME.CHIP_ROOT;
+ChipLabel.displayName = DISPLAY_NAME.CHIP_LABEL_CONTENT;
+
+/**
+ * Compound Chip component with sub-components
+ *
+ * @component Chip - Main container that displays a compact element. Renders with
+ * string children as label or accepts compound components for custom layouts.
+ *
+ * @component Chip.Label - Text content of the chip. When string is provided,
+ * it renders as Text. Otherwise renders children as-is.
+ *
+ * Props flow from Chip to sub-components via context (size, variant, color).
+ * All components use animated views with layout transitions for smooth animations.
+ *
+ * @see Full documentation: https://v3.heroui.com/docs/native/components/chip
+ */
+const CompoundChip = Object.assign(Chip, {
+  /** Chip label - renders text or custom content */
+  Label: ChipLabel,
+});
+
+export { useChip };
+export default CompoundChip;

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

@@ -0,0 +1,69 @@
+import type { PressableProps, TextProps } from 'react-native';
+import type { AnimationRootDisableAll } from '../../helpers/internal/types';
+
+/**
+ * Chip size variants
+ */
+export type ChipSize = 'sm' | 'md' | 'lg';
+
+/**
+ * Chip variant types
+ */
+export type ChipVariant = 'primary' | 'secondary' | 'tertiary' | 'soft';
+
+/**
+ * Chip color variants
+ */
+export type ChipColor = 'accent' | 'default' | 'success' | 'warning' | 'danger';
+
+/**
+ * Props for the main Chip component
+ */
+export interface ChipProps extends PressableProps {
+  /** Child elements to render inside the chip */
+  children?: React.ReactNode;
+
+  /** Visual variant of the chip @default 'primary' */
+  variant?: ChipVariant;
+
+  /** Size of the chip @default 'md' */
+  size?: ChipSize;
+
+  /** Color theme of the chip @default 'accent' */
+  color?: ChipColor;
+
+  /** Custom class name for the chip */
+  className?: string;
+
+  /**
+   * Animation configuration for chip
+   * - `"disable-all"`: Disable all animations including children
+   * - `undefined`: Use default animations
+   */
+  animation?: AnimationRootDisableAll;
+}
+
+/**
+ * Props for the ChipLabel component
+ */
+export interface ChipLabelProps extends TextProps {
+  /** Child elements to render as the label. If string, will be wrapped in Text component */
+  children?: React.ReactNode;
+
+  /** Custom class name for the label */
+  className?: string;
+}
+
+/**
+ * Context value for chip components
+ */
+export interface ChipContextValue {
+  /** Size of the chip */
+  size: ChipSize;
+
+  /** Variant of the chip */
+  variant: ChipVariant;
+
+  /** Color theme of the chip */
+  color: ChipColor;
+}

package/lib/__templates__/expo/client/heroui/components/chip/index.ts

@@ -0,0 +1,3 @@
+export { default as Chip, useChip } from './chip';
+export { chipClassNames } from './chip.styles';
+export type * from './chip.types';

package/lib/__templates__/expo/client/heroui/components/close-button/close-button.constants.ts

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

package/lib/__templates__/expo/client/heroui/components/close-button/close-button.md

@@ -0,0 +1,109 @@
+# CloseButton
+
+Button component for closing dialogs, modals, or dismissing content.
+
+## Import
+
+```tsx
+import { CloseButton } from '@/heroui';
+```
+
+## Usage
+
+### Basic Usage
+
+The CloseButton component renders a close icon button with default styling.
+
+```tsx
+<CloseButton />
+```
+
+### Custom Icon Color
+
+Customize the icon color using the `iconProps` prop.
+
+```tsx
+<CloseButton iconProps={{ color: themeColorDanger }} />
+<CloseButton iconProps={{ color: themeColorAccent }} />
+```
+
+### Custom Icon Size
+
+Adjust the icon size using the `iconProps` prop.
+
+```tsx
+<CloseButton iconProps={{ size: 24 }} />
+```
+
+### Custom Children
+
+Replace the default close icon with custom content.
+
+```tsx
+<CloseButton>
+  <CustomIcon />
+</CloseButton>
+```
+
+### Disabled State
+
+Disable the button to prevent interactions.
+
+```tsx
+<CloseButton isDisabled />
+```
+
+## Example
+
+```tsx
+import { CloseButton, useThemeColor } from '@/heroui';
+import { Ionicons } from '@expo/vector-icons';
+import { View } from 'react-native';
+import { withUniwind } from 'uniwind';
+
+const StyledIonicons = withUniwind(Ionicons);
+
+export default function CloseButtonExample() {
+  const themeColorForeground = useThemeColor('foreground');
+  const themeColorDanger = useThemeColor('danger');
+
+  return (
+    <View className="flex-1 px-5 items-center justify-center">
+      <View className="flex-row items-center gap-4">
+        <CloseButton />
+        <CloseButton iconProps={{ color: themeColorDanger }} />
+        <CloseButton>
+          <StyledIonicons
+            name="close-circle"
+            size={28}
+            color={themeColorForeground}
+          />
+        </CloseButton>
+        <CloseButton isDisabled />
+      </View>
+    </View>
+  );
+}
+```
+
+You can find more examples in the [GitHub repository](<https://github.com/heroui-inc/heroui-native/blob/rc/example/src/app/(home)/components/close-button.tsx>).
+
+## API Reference
+
+### CloseButton
+
+CloseButton extends all props from [Button](../button/button.md) component. It defaults to `variant='tertiary'`, `size='sm'`, and `isIconOnly=true`.
+
+| prop        | type                   | default | description                                      |
+| ----------- | ---------------------- | ------- | ------------------------------------------------ |
+| `iconProps` | `CloseButtonIconProps` | -       | Props for customizing the close icon             |
+| `children`  | `React.ReactNode`      | -       | Custom content to replace the default close icon |
+
+For inherited props including `isDisabled`, `className`, `animation`, `feedbackVariant`, and all Pressable props, see [Button API Reference](../button/button.md#api-reference).
+
+#### CloseButtonIconProps
+
+| prop    | type     | default                | description       |
+| ------- | -------- | ---------------------- | ----------------- |
+| `size`  | `number` | `20`                   | Size of the icon  |
+| `color` | `string` | Uses theme muted color | Color of the icon |

package/lib/__templates__/expo/client/heroui/components/close-button/close-button.styles.ts

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

package/lib/__templates__/expo/client/heroui/components/close-button/close-button.tsx

@@ -0,0 +1,57 @@
+import { forwardRef } from 'react';
+import { useThemeColor } from '../../helpers/external/hooks';
+import { CloseIcon } from '../../helpers/internal/components';
+import type { PressableRef } from '../../helpers/internal/types';
+import { Button } from '../button';
+import { DISPLAY_NAME } from './close-button.constants';
+import closeButtonClassNames from './close-button.styles';
+import type { CloseButtonProps } from './close-button.types';
+
+// --------------------------------------------------
+
+const CloseButtonRoot = forwardRef<PressableRef, CloseButtonProps>(
+  (props, ref) => {
+    const { iconProps, className, children, ...restProps } = props;
+
+    const themeColorMuted = useThemeColor('muted');
+
+    /** Resolved root className from close-button styles */
+    const rootClassName = closeButtonClassNames.root({ className });
+
+    return (
+      <Button
+        ref={ref}
+        variant="tertiary"
+        size="sm"
+        isIconOnly
+        className={rootClassName}
+        hitSlop={12}
+        {...restProps}
+      >
+        {children ?? (
+          <CloseIcon
+            size={iconProps?.size ?? 18}
+            color={iconProps?.color ?? themeColorMuted}
+          />
+        )}
+      </Button>
+    );
+  }
+);
+
+// --------------------------------------------------
+
+CloseButtonRoot.displayName = DISPLAY_NAME.CLOSE_BUTTON_ROOT;
+
+/**
+ * Compound CloseButton component
+ *
+ * @component CloseButton - A specialized button component that renders a close icon by default.
+ * It is a Button with default variant='tertiary', size='sm', and isIconOnly=true.
+ * The close icon can be customized via the iconProps prop, or you can provide custom children.
+ *
+ * @see Full documentation: https://v3.heroui.com/docs/native/components/close-button
+ */
+const CloseButton = CloseButtonRoot;
+
+export default CloseButton;

package/lib/__templates__/expo/client/heroui/components/close-button/close-button.types.ts

@@ -0,0 +1,30 @@
+import type { ButtonRootProps } from '../button/button.types';
+
+/**
+ * Props for customizing the close icon
+ */
+export interface CloseButtonIconProps {
+  /**
+   * Size of the icon
+   * @default 16
+   */
+  size?: number;
+  /**
+   * Color of the icon
+   * @default Uses theme foreground color
+   */
+  color?: string;
+}
+
+/**
+ * Props for the CloseButton component
+ *
+ * Extends ButtonRootProps, allowing full override of all button props.
+ * Defaults to variant='tertiary', size='sm', and isIconOnly=true.
+ */
+export type CloseButtonProps = ButtonRootProps & {
+  /**
+   * Props for customizing the close icon
+   */
+  iconProps?: CloseButtonIconProps;
+};

package/lib/__templates__/expo/client/heroui/components/close-button/index.ts

@@ -0,0 +1,6 @@
+export { default as CloseButton } from './close-button';
+export { closeButtonClassNames } from './close-button.styles';
+export type {
+  CloseButtonIconProps,
+  CloseButtonProps,
+} from './close-button.types';

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

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

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

@@ -0,0 +1,7 @@
+/**
+ * Display names for ControlField components
+ */
+export const DISPLAY_NAME = {
+  CONTROL_FIELD: 'HeroUINative.ControlField',
+  CONTROL_FIELD_INDICATOR: 'HeroUINative.ControlField.Indicator',
+} as const;

package/lib/__templates__/expo/client/heroui/components/control-field/control-field.context.ts

@@ -0,0 +1,14 @@
+import { createContext } from '../../helpers/internal/utils';
+import type { ControlFieldContextValue } from './control-field.types';
+
+/**
+ * ControlField context provider and hook
+ * Extracted to separate file to avoid circular dependencies with Checkbox/Switch animation files
+ */
+const [ControlFieldProvider, useControlField] =
+  createContext<ControlFieldContextValue>({
+    name: 'ControlFieldContext',
+    strict: false,
+  });
+
+export { ControlFieldProvider, useControlField };