@coze-arch/cli 0.0.10 → 0.0.11

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

@@ -0,0 +1,280 @@
+import { forwardRef, useCallback, useMemo } from 'react';
+import type { GestureResponderEvent } from 'react-native';
+import { View, type ViewStyle } from 'react-native';
+import Animated from 'react-native-reanimated';
+import { AnimationSettingsProvider } from '../../helpers/internal/contexts';
+import { createContext } from '../../helpers/internal/utils';
+import * as SwitchPrimitives from '../../primitives/switch';
+import * as SwitchPrimitivesTypes from '../../primitives/switch/switch.types';
+import {
+  SwitchAnimationProvider,
+  useSwitchRootAnimation,
+  useSwitchThumbAnimation,
+} from './switch.animation';
+import { DISPLAY_NAME } from './switch.constants';
+import { switchClassNames, switchStyleSheet } from './switch.styles';
+import type {
+  SwitchContentProps,
+  SwitchContextValue,
+  SwitchProps,
+  SwitchRenderProps,
+  SwitchThumbProps,
+} from './switch.types';
+
+const AnimatedSwitchRoot = Animated.createAnimatedComponent(
+  SwitchPrimitives.Root
+);
+
+const AnimatedSwitchThumb = Animated.createAnimatedComponent(
+  SwitchPrimitives.Thumb
+);
+
+const [SwitchProvider, useSwitch] = createContext<SwitchContextValue>({
+  name: 'SwitchContext',
+});
+
+// --------------------------------------------------
+
+const Switch = forwardRef<SwitchPrimitivesTypes.RootRef, SwitchProps>(
+  (props, ref) => {
+    const {
+      children,
+      isDisabled,
+      isSelected,
+      onSelectedChange,
+      className,
+      style,
+      animation,
+      isAnimatedStyleActive = true,
+      onPressIn,
+      onPressOut,
+      ...restProps
+    } = props;
+
+    const rootClassName = switchClassNames.root({
+      isDisabled,
+      className,
+    });
+
+    const {
+      rContainerStyle,
+      isSwitchPressed,
+      contentContainerWidth,
+      isAllAnimationsDisabled,
+    } = useSwitchRootAnimation({
+      animation,
+      isSelected,
+    });
+
+    const rootStyle = isAnimatedStyleActive
+      ? [switchStyleSheet.borderCurve, rContainerStyle, style]
+      : [switchStyleSheet.borderCurve, style];
+
+    const contextValue = useMemo(
+      () => ({
+        isSelected,
+        isDisabled,
+      }),
+      [isSelected, isDisabled]
+    );
+
+    const animationContextValue = useMemo(
+      () => ({
+        isSwitchPressed,
+        contentContainerWidth,
+      }),
+      [isSwitchPressed, contentContainerWidth]
+    );
+
+    const animationSettingsContextValue = useMemo(
+      () => ({
+        isAllAnimationsDisabled,
+      }),
+      [isAllAnimationsDisabled]
+    );
+
+    const handlePressIn = useCallback(
+      (event: GestureResponderEvent) => {
+        isSwitchPressed.set(true);
+        onPressIn?.(event);
+      },
+      [isSwitchPressed, onPressIn]
+    );
+
+    const handlePressOut = useCallback(
+      (event: GestureResponderEvent) => {
+        isSwitchPressed.set(false);
+        onPressOut?.(event);
+      },
+      [isSwitchPressed, onPressOut]
+    );
+
+    const renderProps: SwitchRenderProps = {
+      isSelected,
+      isDisabled: isDisabled ?? false,
+    };
+
+    const content =
+      typeof children === 'function'
+        ? children(renderProps)
+        : (children ?? <SwitchThumb />);
+
+    return (
+      <SwitchProvider value={contextValue}>
+        <AnimationSettingsProvider value={animationSettingsContextValue}>
+          <SwitchAnimationProvider value={animationContextValue}>
+            <AnimatedSwitchRoot
+              ref={ref}
+              className={rootClassName}
+              style={rootStyle}
+              isSelected={isSelected}
+              onSelectedChange={onSelectedChange}
+              isDisabled={isDisabled}
+              onPressIn={handlePressIn}
+              onPressOut={handlePressOut}
+              onLayout={(e) => {
+                contentContainerWidth.set(e.nativeEvent.layout.width);
+              }}
+              {...restProps}
+            >
+              {content}
+            </AnimatedSwitchRoot>
+          </SwitchAnimationProvider>
+        </AnimationSettingsProvider>
+      </SwitchProvider>
+    );
+  }
+);
+
+// --------------------------------------------------
+
+const SwitchThumb = forwardRef<
+  SwitchPrimitivesTypes.ThumbRef,
+  SwitchThumbProps
+>((props, ref) => {
+  const {
+    children,
+    className,
+    style,
+    animation,
+    isAnimatedStyleActive = true,
+    ...restProps
+  } = props;
+
+  const { isSelected, isDisabled } = useSwitch();
+
+  const thumbClassName = switchClassNames.thumb({
+    className,
+  });
+
+  const { rContainerStyle } = useSwitchThumbAnimation({
+    animation,
+    style: style as ViewStyle | undefined,
+    className: thumbClassName,
+    isSelected,
+  });
+
+  const thumbStyle = isAnimatedStyleActive
+    ? [switchStyleSheet.borderCurve, rContainerStyle, style]
+    : [switchStyleSheet.borderCurve, style];
+
+  const renderProps: SwitchRenderProps = {
+    isSelected,
+    isDisabled: isDisabled ?? false,
+  };
+
+  const content =
+    typeof children === 'function' ? children(renderProps) : children;
+
+  return (
+    <AnimatedSwitchThumb
+      ref={ref}
+      className={thumbClassName}
+      style={thumbStyle}
+      {...restProps}
+    >
+      {content}
+    </AnimatedSwitchThumb>
+  );
+});
+
+// --------------------------------------------------
+
+const SwitchStartContent = forwardRef<View, SwitchContentProps>(
+  (props, ref) => {
+    const { children, className, ...restProps } = props;
+
+    const startContentClassName = switchClassNames.startContent({
+      className,
+    });
+
+    return (
+      <View ref={ref} className={startContentClassName} {...restProps}>
+        {children}
+      </View>
+    );
+  }
+);
+
+// --------------------------------------------------
+
+const SwitchEndContent = forwardRef<View, SwitchContentProps>((props, ref) => {
+  const { children, className, ...restProps } = props;
+
+  const endContentClassName = switchClassNames.endContent({
+    className,
+  });
+
+  return (
+    <View ref={ref} className={endContentClassName} {...restProps}>
+      {children}
+    </View>
+  );
+});
+
+// --------------------------------------------------
+
+Switch.displayName = DISPLAY_NAME.SWITCH_ROOT;
+SwitchThumb.displayName = DISPLAY_NAME.SWITCH_THUMB;
+SwitchStartContent.displayName = DISPLAY_NAME.SWITCH_START_CONTENT;
+SwitchEndContent.displayName = DISPLAY_NAME.SWITCH_END_CONTENT;
+
+/**
+ * Compound Switch component with sub-components
+ *
+ * @component Switch - Main container that handles toggle state and user interaction.
+ * Renders default thumb if no children provided. Animates scale (on press) and background
+ * color based on selection state. Acts as a pressable area for toggling. Supports render
+ * function children for dynamic content.
+ *
+ * @component Switch.Thumb - Optional sliding thumb element that moves between positions.
+ * Uses spring animation for smooth transitions. Can contain custom content like icons
+ * or be customized with different styles and animations. Supports render function children.
+ *
+ * @component Switch.StartContent - Optional content displayed on the left side of the switch.
+ * Typically used for icons or text that appear when switch is off. Positioned absolutely
+ * within the switch container.
+ *
+ * @component Switch.EndContent - Optional content displayed on the right side of the switch.
+ * Typically used for icons or text that appear when switch is on. Positioned absolutely
+ * within the switch container.
+ *
+ * Props flow from Switch to sub-components via context (isSelected, isDisabled).
+ * The switch supports controlled and uncontrolled modes through isSelected/onSelectedChange.
+ * Animations can be customized or disabled at both root and component levels.
+ * Content components provide visual feedback without affecting the toggle functionality.
+ * Integrates with ControlField for press state sharing and larger touch targets.
+ *
+ * @see Full documentation: https://v3.heroui.com/docs/native/components/switch
+ */
+const CompoundSwitch = Object.assign(Switch, {
+  /** @optional Sliding thumb with spring animations */
+  Thumb: SwitchThumb,
+  /** @optional Content shown when switch is off (left side) */
+  StartContent: SwitchStartContent,
+  /** @optional Content shown when switch is on (right side) */
+  EndContent: SwitchEndContent,
+});
+
+export { useSwitch };
+export default CompoundSwitch;

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

@@ -0,0 +1,208 @@
+import type {
+  AnimatedProps,
+  SharedValue,
+  WithSpringConfig,
+  WithTimingConfig,
+} from 'react-native-reanimated';
+import type {
+  Animation,
+  AnimationRoot,
+  AnimationValue,
+} from '../../helpers/internal/types';
+import * as SwitchPrimitivesTypes from '../../primitives/switch/switch.types';
+
+/**
+ * Render function props for switch children
+ */
+export interface SwitchRenderProps {
+  /** Whether the switch is selected */
+  isSelected?: boolean;
+  /** Whether the switch is disabled */
+  isDisabled: boolean;
+}
+
+/**
+ * Animation configuration for switch root component
+ */
+export type SwitchRootAnimation = AnimationRoot<{
+  scale?: AnimationValue<{
+    /**
+     * Scale values [unpressed, pressed]
+     * @default [1, 0.95]
+     */
+    value?: [number, number];
+    /**
+     * Animation timing configuration
+     * @default { duration: 150 }
+     */
+    timingConfig?: WithTimingConfig;
+  }>;
+  backgroundColor?: AnimationValue<{
+    /**
+     * Background color values [unselected, selected]
+     * @default Uses theme colors (default, accent)
+     */
+    value?: [string, string];
+    /**
+     * Animation timing configuration
+     * @default { duration: 175, easing: Easing.bezier(0.25, 0.1, 0.25, 1) }
+     */
+    timingConfig?: WithTimingConfig;
+  }>;
+}>;
+
+/**
+ * Props for the main Switch component
+ */
+export interface SwitchProps
+  extends Omit<SwitchPrimitivesTypes.RootProps, 'children'> {
+  /** Content to render inside the switch, or a render function */
+  children?: React.ReactNode | ((props: SwitchRenderProps) => React.ReactNode);
+
+  /** Whether the switch is disabled @default false */
+  isDisabled?: boolean;
+
+  /** Custom class name for the switch
+   *
+   * @note The following style properties are occupied by animations and cannot be set via className:
+   * - `backgroundColor` - Animated for selection transitions (unselected: default, selected: accent)
+   * - `transform` (specifically `scale`) - Animated for press feedback transitions (unpressed: 1, pressed: 0.96)
+   *
+   * To customize these properties, use the `animation` prop:
+   * ```tsx
+   * <Switch
+   *   animation={{
+   *     backgroundColor: { value: ['#e5e5e5', '#007AFF'], timingConfig: { duration: 175 } },
+   *     scale: { value: [1, 0.96], timingConfig: { duration: 150 } }
+   *   }}
+   * />
+   * ```
+   *
+   * To completely disable animated styles and use your own via className or style prop, set `isAnimatedStyleActive={false}`.
+   */
+  className?: string;
+
+  /**
+   * Animation configuration for switch
+   * - `false` or `"disabled"`: Disable only root animations
+   * - `"disable-all"`: Disable all animations including children
+   * - `true` or `undefined`: Use default animations
+   * - `object`: Custom animation configuration
+   */
+  animation?: SwitchRootAnimation;
+  /**
+   * Whether animated styles (react-native-reanimated) are active
+   * When `false`, the animated style is removed and you can implement custom logic
+   * This prop should only be used when you want to write custom styling logic instead of the default animated styles
+   * @default true
+   */
+  isAnimatedStyleActive?: boolean;
+}
+
+/**
+ * Animation configuration for switch thumb component
+ */
+export type SwitchThumbAnimation = Animation<{
+  /**
+   * Animates the `left` position of the thumb between left and right sides.
+   * The `value` property specifies the offset from the edges (left/right).
+   * When you provide a single value (e.g., `value: 2`), it applies the same offset
+   * to both sides: `2px` from the left when unselected, and `2px` from the right when selected.
+   */
+  left?: AnimationValue<{
+    /**
+     * Offset value from the edges (left when unselected, right when selected)
+     * @default 2
+     * @example value: 4 // 4px offset from both left and right edges
+     */
+    value?: number;
+    /**
+     * Spring animation configuration for thumb position
+     * @default { damping: 120, stiffness: 1600, mass: 2 }
+     */
+    springConfig?: WithSpringConfig;
+  }>;
+  backgroundColor?: AnimationValue<{
+    /**
+     * Background color values [unselected, selected]
+     * @default ['white', theme accent-foreground color]
+     */
+    value?: [string, string];
+    /**
+     * Animation timing configuration
+     * @default { duration: 175, easing: Easing.bezier(0.25, 0.1, 0.25, 1) }
+     */
+    timingConfig?: WithTimingConfig;
+  }>;
+}>;
+
+/**
+ * Props for the SwitchThumb component
+ */
+export interface SwitchThumbProps
+  extends Omit<AnimatedProps<SwitchPrimitivesTypes.ThumbProps>, 'children'> {
+  /** Content to render inside the thumb, or a render function */
+  children?: React.ReactNode | ((props: SwitchRenderProps) => React.ReactNode);
+
+  /** Custom class name for the thumb element
+   *
+   * @note The following style properties are occupied by animations and cannot be set via className:
+   * - `left` - Animated for thumb position transitions (unselected: left edge offset, selected: right edge offset)
+   * - `backgroundColor` - Animated for selection transitions (unselected: white, selected: accent-foreground)
+   *
+   * To customize these properties, use the `animation` prop:
+   * ```tsx
+   * <Switch.Thumb
+   *   animation={{
+   *     left: { value: 2, springConfig: { damping: 120, stiffness: 1600, mass: 2 } },
+   *     backgroundColor: { value: ['white', '#ffffff'], timingConfig: { duration: 175 } }
+   *   }}
+   * />
+   * ```
+   *
+   * To completely disable animated styles and use your own via className or style prop, set `isAnimatedStyleActive={false}`.
+   */
+  className?: string;
+
+  /**
+   * Animation configuration for thumb
+   * - `false` or `"disabled"`: Disable all animations
+   * - `true` or `undefined`: Use default animations
+   * - `object`: Custom animation configuration
+   */
+  animation?: SwitchThumbAnimation;
+  /**
+   * Whether animated styles (react-native-reanimated) are active
+   * When `false`, the animated style is removed and you can implement custom logic
+   * This prop should only be used when you want to write custom styling logic instead of the default animated styles
+   * @default true
+   */
+  isAnimatedStyleActive?: boolean;
+}
+
+/**
+ * Props for the SwitchContent component
+ */
+export interface SwitchContentProps {
+  /** Content to render inside the switch content */
+  children?: React.ReactNode;
+
+  /** Custom class name for the content element */
+  className?: string;
+}
+
+/**
+ * Context value for switch components
+ */
+export interface SwitchContextValue
+  extends Pick<SwitchProps, 'isSelected' | 'isDisabled'> {}
+
+/**
+ * Context value for switch animation state
+ */
+export interface SwitchAnimationContextValue {
+  /** Shared value tracking if the switch is pressed */
+  isSwitchPressed: SharedValue<boolean>;
+  /** Width of the content container */
+  contentContainerWidth: SharedValue<number>;
+}

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

@@ -0,0 +1,8 @@
+export {
+  default as Tabs,
+  useTabs,
+  useTabsMeasurements,
+  useTabsTrigger,
+} from './tabs';
+export { tabsClassNames } from './tabs.styles';
+export type * from './tabs.types';