@coze-arch/cli 0.0.10 → 0.0.11

package/lib/__templates__/expo/client/heroui/primitives/slider/slider.utils.ts

@@ -0,0 +1,93 @@
+/**
+ * Clamps a number between min and max bounds
+ * @param value - The value to clamp
+ * @param min - Minimum bound
+ * @param max - Maximum bound
+ * @returns The clamped value
+ */
+export function clamp(value: number, min: number, max: number): number {
+  'worklet';
+  return Math.min(Math.max(value, min), max);
+}
+
+/**
+ * Snaps a value to the nearest step increment
+ * @param value - The raw value
+ * @param min - Minimum value of the range
+ * @param max - Maximum value of the range
+ * @param step - Step increment
+ * @returns The snapped value
+ */
+export function snapToStep(
+  value: number,
+  min: number,
+  max: number,
+  step: number
+): number {
+  'worklet';
+  const snapped = Math.round((value - min) / step) * step + min;
+  return clamp(snapped, min, max);
+}
+
+/**
+ * Converts a slider value to a ratio (0 to 1)
+ * @param value - The slider value
+ * @param min - Minimum slider value
+ * @param max - Maximum slider value
+ * @returns The ratio (0 to 1)
+ */
+export function valueToPercent(
+  value: number,
+  min: number,
+  max: number
+): number {
+  'worklet';
+  if (max === min) {
+    return 0;
+  }
+  return (value - min) / (max - min);
+}
+
+/**
+ * Formats a slider value using Intl.NumberFormat.
+ * Values are passed directly to the formatter — consumers are responsible
+ * for providing values in the scale the formatter expects (e.g. 0–1 for
+ * `style: 'percent'`).
+ * @param value - The numeric value
+ * @param formatOptions - Intl.NumberFormat options
+ * @returns The formatted string
+ */
+export function formatValue(
+  value: number,
+  formatOptions?: Intl.NumberFormatOptions
+): string {
+  if (formatOptions) {
+    return new Intl.NumberFormat(undefined, formatOptions).format(value);
+  }
+  return String(value);
+}
+
+/**
+ * Normalizes a SliderValue to always be an array of numbers
+ * @param value - Single number or array
+ * @returns Array of numbers
+ */
+export function normalizeValue(value: number | number[]): number[] {
+  return Array.isArray(value) ? value : [value];
+}
+
+/**
+ * Denormalizes an array back to a SliderValue
+ * @param values - Array of numbers
+ * @param wasArray - Whether the original value was an array
+ * @returns Single number or array
+ */
+export function denormalizeValue(
+  values: number[],
+  wasArray: boolean
+): number | number[] {
+  if (wasArray) {
+    return values;
+  }
+  return values[0] ?? 0;
+}

package/lib/__templates__/expo/client/heroui/primitives/slot/index.ts

@@ -0,0 +1 @@
+export * from './slot';

package/lib/__templates__/expo/client/heroui/primitives/slot/slot.tsx

@@ -0,0 +1,122 @@
+/* eslint-disable react-hooks/refs */
+import {
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  type ComponentPropsWithoutRef,
+  type ComponentRef,
+} from 'react';
+import {
+  Image as RNImage,
+  Pressable as RNPressable,
+  Text as RNText,
+  View as RNView,
+  type PressableProps as RNPressableProps,
+  type TextProps as RNTextProps,
+  type ViewProps as RNViewProps,
+} from 'react-native';
+import type { AnyProps, ImageSlotProps } from './types';
+import { composeRefs, isTextChildren, mergeProps } from './utils';
+
+// --------------------------------------------------
+
+const Pressable = forwardRef<
+  React.ComponentRef<typeof RNPressable>,
+  RNPressableProps
+>((props, forwardedRef) => {
+  const { children, ...pressableSlotProps } = props;
+
+  if (!isValidElement(children)) {
+    console.log('Slot.Pressable - Invalid asChild element', children);
+    return null;
+  }
+
+  return cloneElement<
+    React.ComponentPropsWithoutRef<typeof RNPressable>,
+    React.ComponentRef<typeof RNPressable>
+  >(isTextChildren(children) ? <></> : children, {
+    ...mergeProps(pressableSlotProps, children.props as AnyProps),
+    ref: forwardedRef
+      ? composeRefs(forwardedRef, (children as any).ref)
+      : (children as any).ref,
+  });
+});
+
+Pressable.displayName = 'HeroUINative.Primitive.Slot.Pressable';
+
+// --------------------------------------------------
+
+const View = forwardRef<React.ComponentRef<typeof RNView>, RNViewProps>(
+  (props, forwardedRef) => {
+    const { children, ...viewSlotProps } = props;
+
+    if (!isValidElement(children)) {
+      console.log('Slot.View - Invalid asChild element', children);
+      return null;
+    }
+
+    return cloneElement<
+      ComponentPropsWithoutRef<typeof RNView>,
+      ComponentRef<typeof RNView>
+    >(isTextChildren(children) ? <></> : children, {
+      ...mergeProps(viewSlotProps, children.props as AnyProps),
+      ref: forwardedRef
+        ? composeRefs(forwardedRef, (children as any).ref)
+        : (children as any).ref,
+    });
+  }
+);
+
+View.displayName = 'HeroUINative.Primitive.Slot.View';
+
+// --------------------------------------------------
+
+const Text = forwardRef<ComponentRef<typeof RNText>, RNTextProps>(
+  (props, forwardedRef) => {
+    const { children, ...textSlotProps } = props;
+
+    if (!isValidElement(children)) {
+      console.log('Slot.Text - Invalid asChild element', children);
+      return null;
+    }
+
+    return cloneElement<
+      React.ComponentPropsWithoutRef<typeof RNText>,
+      React.ComponentRef<typeof RNText>
+    >(isTextChildren(children) ? <></> : children, {
+      ...mergeProps(textSlotProps, children.props as AnyProps),
+      ref: forwardedRef
+        ? composeRefs(forwardedRef, (children as any).ref)
+        : (children as any).ref,
+    });
+  }
+);
+
+Text.displayName = 'HeroUINative.Primitive.Slot.Text';
+
+// --------------------------------------------------
+
+const Image = forwardRef<ComponentRef<typeof RNImage>, ImageSlotProps>(
+  (props, forwardedRef) => {
+    const { children, ...imageSlotProps } = props;
+
+    if (!isValidElement(children)) {
+      console.log('Slot.Image - Invalid asChild element', children);
+      return null;
+    }
+
+    return cloneElement<
+      ComponentPropsWithoutRef<typeof RNImage>,
+      ComponentRef<typeof RNImage>
+    >(isTextChildren(children) ? <></> : children, {
+      ...mergeProps(imageSlotProps, children.props as AnyProps),
+      ref: forwardedRef
+        ? composeRefs(forwardedRef, (children as any).ref)
+        : (children as any).ref,
+    });
+  }
+);
+
+Image.displayName = 'HeroUINative.Primitive.Slot.Image';
+
+export { Image, Pressable, Text, View };

package/lib/__templates__/expo/client/heroui/primitives/slot/types.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import {
+  type ImageProps as RNImageProps,
+  type ImageStyle as RNImageStyle,
+  type PressableProps as RNPressableProps,
+  type StyleProp,
+} from 'react-native';
+
+type AnyProps = Record<string, any>;
+
+type ImageSlotProps = RNImageProps & {
+  children?: React.ReactNode;
+};
+
+type PressableStyle = RNPressableProps['style'];
+type ImageStyle = StyleProp<RNImageStyle>;
+type Style = PressableStyle | ImageStyle;
+
+export type { AnyProps, ImageSlotProps, ImageStyle, PressableStyle, Style };

package/lib/__templates__/expo/client/heroui/primitives/slot/utils.ts

@@ -0,0 +1,96 @@
+import { type PressableStateCallbackType } from 'react-native';
+import type { AnyProps, Style } from './types';
+
+// --------------------------------------------------
+
+export function isTextChildren(
+  children:
+    | React.ReactNode
+    | ((state: PressableStateCallbackType) => React.ReactNode)
+) {
+  return Array.isArray(children)
+    ? children.every((child) => typeof child === 'string')
+    : typeof children === 'string';
+}
+
+// --------------------------------------------------
+
+export function composeRefs<T>(...refs: (React.Ref<T> | undefined)[]) {
+  return (node: T) =>
+    refs.forEach((ref) => {
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref != null) {
+        (ref as React.MutableRefObject<T>).current = node;
+      }
+    });
+}
+
+// --------------------------------------------------
+
+export function mergeProps(slotProps: AnyProps, childProps: AnyProps) {
+  // all child props should override
+  const overrideProps = { ...childProps };
+
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      // if the handler exists on both, we compose them
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args: unknown[]) => {
+          childPropValue(...args);
+          slotPropValue(...args);
+        };
+      }
+      // but if it exists only on the slot, we use only this one
+      else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
+      }
+    }
+    // if it's `style`, we merge them
+    else if (propName === 'style') {
+      overrideProps[propName] = combineStyles(slotPropValue, childPropValue);
+    } else if (propName === 'className') {
+      overrideProps[propName] = [slotPropValue, childPropValue]
+        .filter(Boolean)
+        .join(' ');
+    }
+  }
+
+  return { ...slotProps, ...overrideProps };
+}
+
+// --------------------------------------------------
+
+/**
+ * Combines slot and child styles into a style array.
+ *
+ * Returns a style array instead of flattening via StyleSheet.flatten,
+ * because flatten deep-copies style objects into plain objects, which
+ * destroys Reanimated animated style bindings (useAnimatedStyle / SharedValues).
+ * React Native natively handles nested style arrays, so an array is safe here.
+ */
+function combineStyles(slotStyle?: Style, childValue?: Style) {
+  if (typeof slotStyle === 'function' && typeof childValue === 'function') {
+    return (state: PressableStateCallbackType) => {
+      return [slotStyle(state), childValue(state)];
+    };
+  }
+  if (typeof slotStyle === 'function') {
+    return (state: PressableStateCallbackType) => {
+      return childValue ? [slotStyle(state), childValue] : slotStyle(state);
+    };
+  }
+  if (typeof childValue === 'function') {
+    return (state: PressableStateCallbackType) => {
+      return slotStyle ? [slotStyle, childValue(state)] : childValue(state);
+    };
+  }
+
+  if (!slotStyle) return childValue;
+  if (!childValue) return slotStyle;
+  return [slotStyle, childValue];
+}

package/lib/__templates__/expo/client/heroui/primitives/switch/index.ts

@@ -0,0 +1,2 @@
+export * from './switch';
+export * from './switch.types';

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

@@ -0,0 +1,61 @@
+import { forwardRef } from 'react';
+import { Pressable, View, type GestureResponderEvent } from 'react-native';
+import * as Slot from '../slot';
+import type { RootProps, RootRef, ThumbProps, ThumbRef } from './switch.types';
+
+// --------------------------------------------------
+
+const Root = forwardRef<RootRef, RootProps>(
+  (
+    {
+      asChild,
+      isSelected,
+      onSelectedChange,
+      isDisabled,
+      'onPress': onPressProp,
+      'aria-valuetext': ariaValueText,
+      ...props
+    },
+    ref
+  ) => {
+    function onPress(ev: GestureResponderEvent) {
+      if (isDisabled) return;
+      const newValue = !isSelected;
+      onSelectedChange?.(newValue);
+      onPressProp?.(ev);
+    }
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+
+    return (
+      <Component
+        ref={ref}
+        aria-disabled={isDisabled}
+        role="switch"
+        aria-checked={isSelected}
+        aria-valuetext={(ariaValueText ?? isSelected) ? 'on' : 'off'}
+        onPress={onPress}
+        accessibilityState={{
+          checked: isSelected,
+          disabled: isDisabled,
+        }}
+        disabled={isDisabled}
+        {...props}
+      />
+    );
+  }
+);
+
+Root.displayName = 'HeroUINative.Primitive.Switch.Root';
+
+// --------------------------------------------------
+
+const Thumb = forwardRef<ThumbRef, ThumbProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot.View : View;
+
+  return <Component ref={ref} role="presentation" {...props} />;
+});
+
+Thumb.displayName = 'HeroUINative.Primitive.Switch.Thumb';
+
+export { Root, Thumb };

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

@@ -0,0 +1,55 @@
+import type {
+  PressableRef,
+  SlottablePressableProps,
+  SlottableViewProps,
+  ViewRef,
+} from '../../helpers/internal/types';
+
+/**
+ * Props for the primitive Root Switch component
+ * Extends SlottablePressableProps to support slot-based styling and pressable behavior
+ */
+interface RootProps extends Omit<SlottablePressableProps, 'disabled'> {
+  /**
+   * Whether the switch is currently selected/checked
+   * @type {boolean}
+   */
+  isSelected?: boolean;
+
+  /**
+   * Callback function fired when the switch selection state changes
+   * @param {boolean} isSelected - The new selection state
+   * @type {(isSelected: boolean) => void}
+   */
+  onSelectedChange?: (isSelected: boolean) => void;
+
+  /**
+   * Whether the switch is disabled and cannot be interacted with
+   * @type {boolean | undefined}
+   * @default false
+   */
+  isDisabled?: boolean;
+}
+
+/**
+ * Props for the primitive Switch Thumb component
+ * Extends SlottableViewProps to support slot-based styling for the thumb element
+ * @type {SlottableViewProps}
+ */
+type ThumbProps = SlottableViewProps;
+
+/**
+ * Ref type for the primitive Root Switch component
+ * Uses PressableRef since the root element is a Pressable component
+ * @type {PressableRef}
+ */
+type RootRef = PressableRef;
+
+/**
+ * Ref type for the primitive Switch Thumb component
+ * Uses ViewRef since the thumb element is a View component
+ * @type {ViewRef}
+ */
+type ThumbRef = ViewRef;
+
+export type { RootProps, RootRef, ThumbProps, ThumbRef };

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

@@ -0,0 +1,2 @@
+export * from './tabs';
+export * from './tabs.types';

package/lib/__templates__/expo/client/heroui/primitives/tabs/tabs.tsx

@@ -0,0 +1,202 @@
+import { createContext, forwardRef, useContext, useId } from 'react';
+import {
+  Pressable,
+  Text,
+  View,
+  type GestureResponderEvent,
+} from 'react-native';
+import * as Slot from '../slot';
+import type {
+  ContentProps,
+  ContentRef,
+  IndicatorProps,
+  IndicatorRef,
+  LabelProps,
+  LabelRef,
+  ListProps,
+  ListRef,
+  RootProps,
+  RootRef,
+  TriggerProps,
+  TriggerRef,
+} from './tabs.types';
+
+type RootContext = RootProps & {
+  nativeID: string;
+};
+
+const TabsContext = createContext<RootContext | null>(null);
+
+const Root = forwardRef<RootRef, RootProps>(
+  ({ asChild, value, onValueChange, ...viewProps }, ref) => {
+    const nativeID = useId();
+    const Component = asChild ? Slot.View : View;
+
+    return (
+      <TabsContext.Provider
+        value={{
+          value,
+          onValueChange,
+          nativeID,
+        }}
+      >
+        <Component ref={ref} {...viewProps} />
+      </TabsContext.Provider>
+    );
+  }
+);
+
+Root.displayName = 'HeroUINative.Primitive.Tabs.Root';
+
+function useRootContext() {
+  const context = useContext(TabsContext);
+
+  if (!context) {
+    throw new Error(
+      'Tabs compound components cannot be rendered outside the Tabs component'
+    );
+  }
+
+  return context;
+}
+
+// --------------------------------------------------
+
+const List = forwardRef<ListRef, ListProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return <Component ref={ref} role="tablist" {...props} />;
+});
+
+List.displayName = 'HeroUINative.Primitive.Tabs.List';
+
+// --------------------------------------------------
+
+const Indicator = forwardRef<IndicatorRef, IndicatorProps>(
+  ({ asChild, ...props }, ref) => {
+    const Component = asChild ? Slot.View : View;
+    return (
+      <Component ref={ref} role="presentation" aria-hidden={true} {...props} />
+    );
+  }
+);
+
+Indicator.displayName = 'HeroUINative.Primitive.Tabs.Indicator';
+
+// --------------------------------------------------
+
+type TriggerContext = {
+  value: string;
+  nativeID: string;
+  isSelected: boolean;
+};
+
+const TriggerContext = createContext<TriggerContext | null>(null);
+
+const Trigger = forwardRef<TriggerRef, TriggerProps>(
+  (
+    { asChild, onPress: onPressProp, disabled, value: tabValue, ...props },
+    ref
+  ) => {
+    const { onValueChange, value: rootValue, nativeID } = useRootContext();
+
+    function onPress(ev: GestureResponderEvent) {
+      if (disabled) return;
+      onValueChange(tabValue);
+      onPressProp?.(ev);
+    }
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+    const tabNativeID = `${nativeID}-tab-${tabValue}`;
+    const isSelected = rootValue === tabValue;
+
+    return (
+      <TriggerContext.Provider
+        value={{ value: tabValue, nativeID: tabNativeID, isSelected }}
+      >
+        <Component
+          ref={ref}
+          nativeID={tabNativeID}
+          aria-disabled={!!disabled}
+          aria-selected={isSelected}
+          role="tab"
+          onPress={onPress}
+          accessibilityState={{
+            selected: isSelected,
+            disabled: !!disabled,
+          }}
+          disabled={!!disabled}
+          {...props}
+        />
+      </TriggerContext.Provider>
+    );
+  }
+);
+
+Trigger.displayName = 'HeroUINative.Primitive.Tabs.Trigger';
+
+function useTriggerContext() {
+  const context = useContext(TriggerContext);
+
+  if (!context) {
+    throw new Error(
+      'Tabs.Trigger compound components cannot be rendered outside the Tabs.Trigger component'
+    );
+  }
+
+  return context;
+}
+
+// --------------------------------------------------
+
+const Label = forwardRef<LabelRef, LabelProps>(({ asChild, ...props }, ref) => {
+  const { nativeID } = useTriggerContext();
+  const Component = asChild ? Slot.Text : Text;
+  return (
+    <Component
+      ref={ref}
+      nativeID={`${nativeID}-label`}
+      aria-labelledby={nativeID}
+      {...props}
+    />
+  );
+});
+
+Label.displayName = 'HeroUINative.Primitive.Tabs.Label';
+
+// --------------------------------------------------
+
+const Content = forwardRef<ContentRef, ContentProps>(
+  ({ asChild, forceMount, value: tabValue, ...props }, ref) => {
+    const { value: rootValue, nativeID } = useRootContext();
+
+    if (!forceMount) {
+      if (rootValue !== tabValue) {
+        return null;
+      }
+    }
+
+    const Component = asChild ? Slot.View : View;
+    return (
+      <Component
+        ref={ref}
+        aria-hidden={!(forceMount || rootValue === tabValue)}
+        aria-labelledby={`${nativeID}-tab-${tabValue}`}
+        role="tabpanel"
+        {...props}
+      />
+    );
+  }
+);
+
+Content.displayName = 'HeroUINative.Primitive.Tabs.Content';
+
+export {
+  Content,
+  Indicator,
+  Label,
+  List,
+  Root,
+  Trigger,
+  useRootContext,
+  useTriggerContext,
+};