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

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

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

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

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