@coze-arch/cli 0.0.10 → 0.0.11

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

@@ -0,0 +1,35 @@
+import { tv } from 'tailwind-variants';
+import { combineStyles } from '../../helpers/internal/utils';
+
+const root = tv({
+  base: '',
+});
+
+const header = tv({
+  base: '',
+});
+
+const body = tv({
+  base: '',
+});
+
+const footer = tv({
+  base: '',
+});
+
+const label = tv({
+  base: 'text-lg text-foreground font-medium',
+});
+
+const description = tv({
+  base: 'text-base text-muted',
+});
+
+export const cardClassNames = combineStyles({
+  root,
+  header,
+  body,
+  footer,
+  label,
+  description,
+});

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

@@ -0,0 +1,153 @@
+import { forwardRef } from 'react';
+import { View } from 'react-native';
+import { HeroText } from '../../helpers/internal/components';
+import type { TextRef, ViewRef } from '../../helpers/internal/types';
+import { Surface } from '../surface';
+import { DISPLAY_NAME } from './card.constants';
+import { cardClassNames } from './card.styles';
+import type {
+  CardBodyProps,
+  CardDescriptionProps,
+  CardFooterProps,
+  CardHeaderProps,
+  CardRootProps,
+  CardTitleProps,
+} from './card.types';
+
+// --------------------------------------------------
+
+const CardRoot = forwardRef<ViewRef, CardRootProps>((props, ref) => {
+  const { children, variant = 'default', className, ...restProps } = props;
+
+  const rootClassName = cardClassNames.root({ className });
+
+  return (
+    <Surface
+      ref={ref}
+      variant={variant}
+      className={rootClassName}
+      {...restProps}
+    >
+      {children}
+    </Surface>
+  );
+});
+
+// --------------------------------------------------
+
+const CardHeader = forwardRef<ViewRef, CardHeaderProps>((props, ref) => {
+  const { children, className, ...restProps } = props;
+
+  const headerClassName = cardClassNames.header({ className });
+
+  return (
+    <View ref={ref} className={headerClassName} {...restProps}>
+      {children}
+    </View>
+  );
+});
+
+// --------------------------------------------------
+
+const CardBody = forwardRef<ViewRef, CardBodyProps>((props, ref) => {
+  const { children, className, ...restProps } = props;
+
+  const bodyClassName = cardClassNames.body({ className });
+
+  return (
+    <View ref={ref} className={bodyClassName} {...restProps}>
+      {children}
+    </View>
+  );
+});
+
+// --------------------------------------------------
+
+const CardFooter = forwardRef<ViewRef, CardFooterProps>((props, ref) => {
+  const { children, className, ...restProps } = props;
+
+  const footerClassName = cardClassNames.footer({ className });
+
+  return (
+    <View ref={ref} className={footerClassName} {...restProps}>
+      {children}
+    </View>
+  );
+});
+
+// --------------------------------------------------
+
+const CardTitle = forwardRef<TextRef, CardTitleProps>((props, ref) => {
+  const { children, className, ...restProps } = props;
+
+  const titleClassName = cardClassNames.label({ className });
+
+  return (
+    <HeroText ref={ref} className={titleClassName} {...restProps}>
+      {children}
+    </HeroText>
+  );
+});
+
+// --------------------------------------------------
+
+const CardDescription = forwardRef<TextRef, CardDescriptionProps>(
+  (props, ref) => {
+    const { children, className, ...restProps } = props;
+
+    const descriptionClassName = cardClassNames.description({
+      className,
+    });
+
+    return (
+      <HeroText ref={ref} className={descriptionClassName} {...restProps}>
+        {children}
+      </HeroText>
+    );
+  }
+);
+
+// --------------------------------------------------
+
+CardRoot.displayName = DISPLAY_NAME.ROOT;
+CardHeader.displayName = DISPLAY_NAME.HEADER;
+CardBody.displayName = DISPLAY_NAME.BODY;
+CardFooter.displayName = DISPLAY_NAME.FOOTER;
+CardTitle.displayName = DISPLAY_NAME.TITLE;
+CardDescription.displayName = DISPLAY_NAME.DESCRIPTION;
+
+/**
+ * Compound Card component with sub-components
+ *
+ * @component Card - Main container that extends Surface component. Provides base card structure
+ * with configurable surface variants and handles overall layout.
+ *
+ * @component Card.Header - Header section for top-aligned content like icons or badges.
+ *
+ * @component Card.Body - Main content area with flex-1 that expands to fill all available space
+ * between Card.Header and Card.Footer.
+ *
+ * @component Card.Title - Title text with foreground color and medium font weight.
+ *
+ * @component Card.Description - Description text with muted color and smaller font size.
+ *
+ * @component Card.Footer - Footer section for bottom-aligned actions like buttons.
+ *
+ * All sub-components support asChild pattern for custom element composition.
+ *
+ * @see Full documentation: https://v3.heroui.com/docs/native/components/card
+ */
+const CompoundCard = Object.assign(CardRoot, {
+  /** @optional Top-aligned header section */
+  Header: CardHeader,
+  /** @optional Main content area that expands between header and footer */
+  Body: CardBody,
+  /** @optional Bottom-aligned footer for actions */
+  Footer: CardFooter,
+  /** @optional Title text with styled typography */
+  Title: CardTitle,
+  /** @optional Description text with muted styling */
+  Description: CardDescription,
+});
+
+export default CompoundCard;

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

@@ -0,0 +1,77 @@
+import type { TextProps, ViewProps } from 'react-native';
+import type { SurfaceRootProps } from '../surface/surface.types';
+
+/**
+ * Props for the Card.Root component
+ */
+export interface CardRootProps extends SurfaceRootProps {}
+
+/**
+ * Props for the Card.Header component
+ */
+export interface CardHeaderProps extends ViewProps {
+  /**
+   * Children elements to be rendered inside the header
+   */
+  children?: React.ReactNode;
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
+
+/**
+ * Props for the Card.Body component
+ */
+export interface CardBodyProps extends ViewProps {
+  /**
+   * Children elements to be rendered inside the body
+   */
+  children?: React.ReactNode;
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
+
+/**
+ * Props for the Card.Footer component
+ */
+export interface CardFooterProps extends ViewProps {
+  /**
+   * Children elements to be rendered inside the footer
+   */
+  children?: React.ReactNode;
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
+
+/**
+ * Props for the Card.Title component
+ */
+export interface CardTitleProps extends TextProps {
+  /**
+   * Children elements to be rendered as the title text
+   */
+  children?: React.ReactNode;
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
+
+/**
+ * Props for the Card.Description component
+ */
+export interface CardDescriptionProps extends TextProps {
+  /**
+   * Children elements to be rendered as the description text
+   */
+  children?: React.ReactNode;
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}

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

@@ -0,0 +1,10 @@
+export { default as Card } from './card';
+export { cardClassNames } from './card.styles';
+export type {
+  CardBodyProps,
+  CardDescriptionProps,
+  CardFooterProps,
+  CardHeaderProps,
+  CardRootProps,
+  CardTitleProps,
+} from './card.types';

package/lib/__templates__/expo/client/heroui/components/checkbox/checkbox.animation.ts

@@ -0,0 +1,202 @@
+import {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { useAnimationSettings } from '../../helpers/internal/contexts';
+import { useCombinedAnimationDisabledState } from '../../helpers/internal/hooks';
+import {
+  createContext,
+  getAnimationState,
+  getAnimationValueMergedConfig,
+  getAnimationValueProperty,
+  getIsAnimationDisabledValue,
+  getRootAnimationState,
+} from '../../helpers/internal/utils';
+import { useControlField } from '../control-field/control-field.context';
+import type {
+  CheckboxAnimationContextValue,
+  CheckboxIndicatorAnimation,
+  CheckboxRootAnimation,
+} from './checkbox.types';
+
+const [CheckboxAnimationProvider, useCheckboxAnimation] =
+  createContext<CheckboxAnimationContextValue>({
+    name: 'CheckboxAnimationContext',
+  });
+
+export { CheckboxAnimationProvider, useCheckboxAnimation };
+
+// --------------------------------------------------
+
+export function useCheckboxRootAnimation(options: {
+  animation: CheckboxRootAnimation | undefined;
+}) {
+  const { animation } = options;
+
+  const isCheckboxPressed = useSharedValue(false);
+  const controlFieldContext = useControlField();
+
+  const { animationConfig, isAnimationDisabled } =
+    getRootAnimationState(animation);
+
+  const isAllAnimationsDisabled = useCombinedAnimationDisabledState(animation);
+
+  const isAnimationDisabledValue = getIsAnimationDisabledValue({
+    isAnimationDisabled,
+    isAllAnimationsDisabled,
+  });
+
+  const scaleValue = getAnimationValueProperty({
+    animationValue: animationConfig?.scale,
+    property: 'value',
+    defaultValue: [1, 0.96] as [number, number],
+  });
+
+  const scaleTimingConfig = getAnimationValueMergedConfig({
+    animationValue: animationConfig?.scale,
+    property: 'timingConfig',
+    defaultValue: { duration: 150 },
+  });
+
+  const rContainerStyle = useAnimatedStyle(() => {
+    if (isAnimationDisabledValue) {
+      return {};
+    }
+
+    const pressed =
+      isCheckboxPressed.get() ||
+      (controlFieldContext?.isPressed.get() ?? false);
+
+    return {
+      transform: [
+        {
+          scale: withTiming(
+            pressed ? scaleValue[1] : scaleValue[0],
+            scaleTimingConfig
+          ),
+        },
+      ],
+    };
+  });
+
+  return {
+    rContainerStyle,
+    isCheckboxPressed,
+    isAllAnimationsDisabled,
+  };
+}
+
+// --------------------------------------------------
+
+export function useCheckboxIndicatorAnimation(options: {
+  animation: CheckboxIndicatorAnimation | undefined;
+  isSelected: boolean | undefined;
+}) {
+  const { animation, isSelected } = options;
+
+  // Read from global animation context (always available in compound parts)
+  const { isAllAnimationsDisabled } = useAnimationSettings();
+
+  const { animationConfig, isAnimationDisabled } = getAnimationState(animation);
+
+  const isAnimationDisabledValue = getIsAnimationDisabledValue({
+    isAnimationDisabled,
+    isAllAnimationsDisabled,
+  });
+
+  // Opacity animation
+  const opacityValue = getAnimationValueProperty({
+    animationValue: animationConfig?.opacity,
+    property: 'value',
+    defaultValue: [0, 1] as [number, number],
+  });
+  const opacityTimingConfig = getAnimationValueMergedConfig({
+    animationValue: animationConfig?.opacity,
+    property: 'timingConfig',
+    defaultValue: { duration: 100 },
+  });
+
+  // BorderRadius animation
+  const borderRadiusValue = getAnimationValueProperty({
+    animationValue: animationConfig?.borderRadius,
+    property: 'value',
+    defaultValue: [8, 0] as [number, number],
+  });
+  const borderRadiusTimingConfig = getAnimationValueMergedConfig({
+    animationValue: animationConfig?.borderRadius,
+    property: 'timingConfig',
+    defaultValue: { duration: 50 },
+  });
+
+  // TranslateX animation
+  const translateXValue = getAnimationValueProperty({
+    animationValue: animationConfig?.translateX,
+    property: 'value',
+    defaultValue: [-4, 0] as [number, number],
+  });
+  const translateXTimingConfig = getAnimationValueMergedConfig({
+    animationValue: animationConfig?.translateX,
+    property: 'timingConfig',
+    defaultValue: { duration: 100 },
+  });
+
+  // Scale animation
+  const scaleValue = getAnimationValueProperty({
+    animationValue: animationConfig?.scale,
+    property: 'value',
+    defaultValue: [0.8, 1] as [number, number],
+  });
+  const scaleTimingConfig = getAnimationValueMergedConfig({
+    animationValue: animationConfig?.scale,
+    property: 'timingConfig',
+    defaultValue: { duration: 100 },
+  });
+
+  const rContainerStyle = useAnimatedStyle(() => {
+    if (isAnimationDisabledValue) {
+      return {
+        opacity: isSelected ? opacityValue[1] : opacityValue[0],
+        borderRadius: isSelected ? borderRadiusValue[1] : borderRadiusValue[0],
+        transform: [
+          {
+            translateX: isSelected ? translateXValue[1] : translateXValue[0],
+          },
+          {
+            scale: isSelected ? scaleValue[1] : scaleValue[0],
+          },
+        ],
+      };
+    }
+
+    return {
+      opacity: withTiming(
+        isSelected ? opacityValue[1] : opacityValue[0],
+        opacityTimingConfig
+      ),
+      borderRadius: withTiming(
+        isSelected ? borderRadiusValue[1] : borderRadiusValue[0],
+        borderRadiusTimingConfig
+      ),
+      transform: [
+        {
+          translateX: withTiming(
+            isSelected ? translateXValue[1] : translateXValue[0],
+            translateXTimingConfig
+          ),
+        },
+        {
+          scale: withTiming(
+            isSelected ? scaleValue[1] : scaleValue[0],
+            scaleTimingConfig
+          ),
+        },
+      ],
+    };
+  });
+
+  return {
+    rContainerStyle,
+    isAnimationDisabled: isAnimationDisabled || isAllAnimationsDisabled,
+  };
+}

package/lib/__templates__/expo/client/heroui/components/checkbox/checkbox.constants.ts

@@ -0,0 +1,6 @@
+export const DISPLAY_NAME = {
+  CHECKBOX_ROOT: 'HeroUINative.Checkbox.Root',
+  CHECKBOX_INDICATOR: 'HeroUINative.Checkbox.Indicator',
+} as const;
+
+export const DEFAULT_HIT_SLOP = 6;