@coze-arch/cli 0.0.10 → 0.0.11

package/lib/__templates__/expo/client/heroui/helpers/internal/utils/ease-gradient/index.ts

@@ -0,0 +1,97 @@
+/**
+ * Easing gradient utilities for React Native
+ *
+ * Original source: https://github.com/phamfoo/react-native-easing-gradient
+ * Author: @phamfoo
+ * License: MIT
+ *
+ * This code has been adapted for use in HeroUI Native with modifications
+ * for TypeScript compatibility and integration with the animation system.
+ */
+
+import { Easing, type EasingFunction } from 'react-native';
+import { createInterpolation } from './create-interpolation';
+
+interface ColorStops {
+  [location: number]: {
+    color: string;
+    easing?: EasingFunction;
+  };
+}
+
+interface GradientParams {
+  colorStops: ColorStops;
+  extraColorStopsPerTransition?: number;
+  easing?: EasingFunction;
+}
+
+const easeInOut = Easing.bezier(0.42, 0, 0.58, 1);
+
+function easeGradient({
+  colorStops,
+  easing = easeInOut,
+  extraColorStopsPerTransition = 12,
+}: GradientParams): {
+  colors: [string, string, ...string[]];
+  locations: [number, number, ...number[]];
+} {
+  const colors: string[] = [];
+  const locations: number[] = [];
+
+  const initialLocations = Object.keys(colorStops)
+    .map((key) => Number(key))
+    .sort();
+
+  const totalColorStops = initialLocations.length;
+
+  for (
+    let currentStopIndex = 0;
+    currentStopIndex < totalColorStops - 1;
+    currentStopIndex++
+  ) {
+    const startLocation = initialLocations[currentStopIndex];
+    const endLocation = initialLocations[currentStopIndex + 1];
+
+    if (startLocation === undefined || endLocation === undefined) {
+      continue;
+    }
+
+    const startStop = colorStops[startLocation];
+    const endStop = colorStops[endLocation];
+
+    if (!startStop || !endStop) {
+      continue;
+    }
+
+    const startColor = startStop.color;
+    const endColor = endStop.color;
+    const currentEasing = startStop.easing ?? easing;
+
+    const colorScale = createInterpolation({
+      inputRange: [0, 1],
+      outputRange: [startColor, endColor],
+      easing: currentEasing,
+    });
+
+    const currentTransitionLength = endLocation - startLocation;
+    const stepSize = 1 / (extraColorStopsPerTransition + 1);
+
+    for (
+      let stepIndex = 0;
+      stepIndex <= extraColorStopsPerTransition + 1;
+      stepIndex++
+    ) {
+      const progress = stepIndex * stepSize;
+      const color = colorScale(progress);
+      colors.push(color);
+      locations.push(startLocation + currentTransitionLength * progress);
+    }
+  }
+
+  return {
+    colors: colors as [string, string, ...string[]],
+    locations: locations as [number, number, ...number[]],
+  };
+}
+
+export { easeGradient };

package/lib/__templates__/expo/client/heroui/helpers/internal/utils/get-element-by-display-name.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { ReactChild } from '../types';
+
+export const getElementByDisplayName = (
+  children: React.ReactNode,
+  displayName: string
+): ReactChild | undefined => {
+  const element = React.Children.toArray(children).find(
+    (child) =>
+      React.isValidElement(child) &&
+      (child.type as any)?.displayName === displayName
+  );
+
+  return element;
+};

package/lib/__templates__/expo/client/heroui/helpers/internal/utils/get-element-with-default.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { ReactChild } from '../types';
+import { getElementByDisplayName } from './get-element-by-display-name';
+
+export const getElementWithDefault = (
+  children: React.ReactNode,
+  displayName: string,
+  defaultElement: React.ReactElement
+): ReactChild => {
+  const element = getElementByDisplayName(children, displayName);
+
+  if (!element) {
+    return defaultElement;
+  }
+
+  return element;
+};

package/lib/__templates__/expo/client/heroui/helpers/internal/utils/has-prop.ts

@@ -0,0 +1,18 @@
+import type { ReactElement } from 'react';
+
+/**
+ * Checks if a React element has a specific prop defined
+ * @param element - The React element to check
+ * @param propName - The name of the prop to check for
+ * @returns true if the element has the prop, false otherwise
+ */
+export function hasProp(
+  element: ReactElement | null | undefined,
+  propName: string
+): boolean {
+  if (!element || !element.props || typeof element.props !== 'object') {
+    return false;
+  }
+
+  return propName in element.props;
+}

package/lib/__templates__/expo/client/heroui/helpers/internal/utils/index.ts

@@ -0,0 +1,8 @@
+export * from './/animation';
+export * from './children-to-string';
+export * from './combine-styles';
+export * from './create-context';
+export * from './ease-gradient';
+export * from './get-element-by-display-name';
+export * from './get-element-with-default';
+export * from './has-prop';

package/lib/__templates__/expo/client/heroui/index.tsx

@@ -0,0 +1,51 @@
+// Components
+export * from './components/accordion';
+export * from './components/alert';
+export * from './components/avatar';
+export * from './components/bottom-sheet';
+export * from './components/button';
+export * from './components/card';
+export * from './components/checkbox';
+export * from './components/chip';
+export * from './components/close-button';
+export * from './components/control-field';
+export * from './components/description';
+export * from './components/dialog';
+export * from './components/field-error';
+export * from './components/input';
+export * from './components/input-group';
+export * from './components/input-otp';
+export * from './components/label';
+export * from './components/list-group';
+export * from './components/menu';
+export * from './components/popover';
+export * from './components/pressable-feedback';
+export * from './components/radio';
+export * from './components/radio-group';
+export * from './components/scroll-shadow';
+export * from './components/search-field';
+export * from './components/select';
+export * from './components/separator';
+export * from './components/skeleton';
+export * from './components/skeleton-group';
+export * from './components/slider';
+export * from './components/spinner';
+export * from './components/surface';
+export * from './components/switch';
+export * from './components/tabs';
+export * from './components/tag-group';
+export * from './components/text-area';
+export * from './components/text-field';
+export * from './components/toast';
+
+// Portal
+export * from './primitives/portal';
+
+// Hooks
+export * from './helpers/external/hooks';
+
+// Utils
+export * from './helpers/external/utils';
+
+// Provider
+export * from './providers/hero-ui-native';

package/lib/__templates__/expo/client/heroui/primitives/README.md

@@ -0,0 +1,27 @@
+# Primitives
+
+## Attribution
+
+The primitive components in this directory are adapted from **rn-primitives** library.
+
+**Original source:** https://github.com/roninoss/rn-primitives  
+**Author:** @roninoss  
+**License:** MIT
+
+These primitives have been adapted for use in HeroUI Native with modifications for:
+
+- TypeScript compatibility and stricter typing
+- Integration with HeroUI Native's theme system
+- Enhanced accessibility features
+- Custom styling patterns aligned with HeroUI design principles
+
+## Usage
+
+These primitives serve as the foundation for HeroUI Native's component library. They provide:
+
+- Unstyled, accessible base components
+- Flexible composition patterns
+- Controlled and uncontrolled component behavior
+- React Native compatibility
+
+For detailed usage of each primitive, refer to the individual component documentation.

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

@@ -0,0 +1,270 @@
+import { createContext, forwardRef, useContext, useId } from 'react';
+import { Pressable, View, type GestureResponderEvent } from 'react-native';
+import { useControllableState } from '../../helpers/internal/hooks';
+import * as Slot from '../slot';
+import type {
+  ContentProps,
+  ContentRef,
+  HeaderProps,
+  HeaderRef,
+  IndicatorProps,
+  IndicatorRef,
+  ItemProps,
+  ItemRef,
+  RootContext,
+  RootProps,
+  RootRef,
+  TriggerProps,
+  TriggerRef,
+} from './accordion.types';
+import { isItemSelected, toStringArray } from './accordion.utils';
+
+const AccordionContext = createContext<RootContext | null>(null);
+
+const Root = forwardRef<RootRef, RootProps>(
+  (
+    {
+      asChild,
+      selectionMode = 'single',
+      isDisabled,
+      isCollapsible = true,
+      value: valueProp,
+      onValueChange: onValueChangeProps,
+      defaultValue,
+      ...viewProps
+    },
+    ref
+  ) => {
+    const [
+      value = selectionMode === 'multiple' ? [] : undefined,
+      onValueChange,
+    ] = useControllableState<(string | undefined) | string[]>({
+      prop: valueProp,
+      defaultProp: defaultValue,
+      onChange: onValueChangeProps as (
+        state: string | string[] | undefined
+      ) => void,
+    });
+
+    const Component = asChild ? Slot.View : View;
+
+    return (
+      <AccordionContext.Provider
+        value={{
+          selectionMode,
+          isDisabled,
+          isCollapsible,
+          value,
+          onValueChange,
+        }}
+      >
+        <Component ref={ref} {...viewProps} />
+      </AccordionContext.Provider>
+    );
+  }
+);
+
+Root.displayName = 'HeroUINative.Primitive.Accordion.Root';
+
+function useRootContext() {
+  const context = useContext(AccordionContext);
+
+  if (!context) {
+    throw new Error(
+      'Accordion compound components cannot be rendered outside the Accordion component'
+    );
+  }
+
+  return context;
+}
+
+// --------------------------------------------------
+
+type AccordionItemContext = ItemProps & {
+  nativeID: string;
+  isExpanded: boolean;
+};
+
+const AccordionItemContext = createContext<AccordionItemContext | null>(null);
+
+const Item = forwardRef<ItemRef, ItemProps>(
+  ({ asChild, value, isDisabled, ...viewProps }, ref) => {
+    const { value: rootValue } = useRootContext();
+    const nativeID = useId();
+
+    const Component = asChild ? Slot.View : View;
+
+    return (
+      <AccordionItemContext.Provider
+        value={{
+          value,
+          isDisabled,
+          nativeID,
+          isExpanded: isItemSelected(rootValue, value),
+        }}
+      >
+        <Component ref={ref} {...viewProps} />
+      </AccordionItemContext.Provider>
+    );
+  }
+);
+
+Item.displayName = 'HeroUINative.Primitive.Accordion.Item';
+
+function useItemContext() {
+  const context = useContext(AccordionItemContext);
+
+  if (!context) {
+    throw new Error(
+      'AccordionItem compound components cannot be rendered outside the AccordionItem component'
+    );
+  }
+
+  return context;
+}
+
+// --------------------------------------------------
+
+const Header = forwardRef<HeaderRef, HeaderProps>(
+  ({ asChild, ...props }, ref) => {
+    const { isDisabled: rootDisabled } = useRootContext();
+    const { isDisabled: itemDisabled, isExpanded } = useItemContext();
+
+    const Component = asChild ? Slot.View : View;
+    return (
+      <Component
+        ref={ref}
+        role="heading"
+        aria-expanded={isExpanded}
+        aria-disabled={rootDisabled ?? itemDisabled}
+        {...props}
+      />
+    );
+  }
+);
+
+Header.displayName = 'HeroUINative.Primitive.Accordion.Header';
+
+// --------------------------------------------------
+
+const Trigger = forwardRef<TriggerRef, TriggerProps>(
+  (
+    { asChild, onPress: onPressProp, isDisabled: disabledProp, ...props },
+    ref
+  ) => {
+    const {
+      isDisabled: rootDisabled,
+      selectionMode,
+      onValueChange,
+      value: rootValue,
+      isCollapsible,
+    } = useRootContext();
+
+    const {
+      nativeID,
+      isDisabled: itemDisabled,
+      value,
+      isExpanded,
+    } = useItemContext();
+
+    function onPress(ev: GestureResponderEvent) {
+      if (rootDisabled || itemDisabled) return;
+
+      if (selectionMode === 'single') {
+        const newValue = isCollapsible
+          ? value === rootValue
+            ? undefined
+            : value
+          : value;
+        onValueChange(newValue);
+      }
+
+      if (selectionMode === 'multiple') {
+        const rootToArray = toStringArray(rootValue);
+        const newValue = isCollapsible
+          ? rootToArray.includes(value)
+            ? rootToArray.filter((val) => val !== value)
+            : rootToArray.concat(value)
+          : [...new Set(rootToArray.concat(value))];
+        // @ts-ignore - `newValue` is of type `string[]` which is OK
+        onValueChange(newValue);
+      }
+
+      onPressProp?.(ev);
+    }
+
+    const isTriggerDisabled = disabledProp || rootDisabled || itemDisabled;
+    const Component = asChild ? Slot.Pressable : Pressable;
+
+    return (
+      <Component
+        ref={ref}
+        nativeID={nativeID}
+        aria-disabled={isTriggerDisabled}
+        role="button"
+        onPress={onPress}
+        accessibilityState={{
+          expanded: isExpanded,
+          disabled: isTriggerDisabled,
+        }}
+        disabled={isTriggerDisabled}
+        {...props}
+      />
+    );
+  }
+);
+
+Trigger.displayName = 'HeroUINative.Primitive.Accordion.Trigger';
+
+// --------------------------------------------------
+
+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.Accordion.Indicator';
+
+// --------------------------------------------------
+
+const Content = forwardRef<ContentRef, ContentProps>(
+  ({ asChild, forceMount, ...props }, ref) => {
+    const { selectionMode } = useRootContext();
+    const { nativeID, isExpanded } = useItemContext();
+
+    if (!forceMount) {
+      if (!isExpanded) {
+        return null;
+      }
+    }
+
+    const Component = asChild ? Slot.View : View;
+    return (
+      <Component
+        ref={ref}
+        aria-hidden={!(forceMount || isExpanded)}
+        aria-labelledby={nativeID}
+        role={selectionMode === 'single' ? 'region' : 'summary'}
+        {...props}
+      />
+    );
+  }
+);
+
+Content.displayName = 'HeroUINative.Primitive.Accordion.Content';
+
+export {
+  Content,
+  Header,
+  Indicator,
+  Item,
+  Root,
+  Trigger,
+  useItemContext,
+  useRootContext,
+};

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

@@ -0,0 +1,117 @@
+import type {
+  ForceMountable,
+  PressableRef,
+  SlottablePressableProps,
+  SlottableViewProps,
+  ViewRef,
+} from '../../helpers/internal/types';
+
+/**
+ * Internal context type for the Accordion root component
+ */
+type RootContext = {
+  /** Whether the accordion allows single or multiple expanded items */
+  selectionMode?: 'single' | 'multiple';
+  /** Currently expanded item(s) - string for single, array for multiple */
+  value: (string | undefined) | string[];
+  /** Callback when expanded items change */
+  onValueChange: (
+    value: string | undefined
+  ) => void | ((value: string[]) => void);
+  /** Whether expanded items can be collapsed */
+  isCollapsible: boolean;
+  /** Whether all accordion items are disabled */
+  isDisabled?: boolean;
+};
+
+/**
+ * Props for single-selection accordion
+ */
+type SingleRootProps = {
+  /** Single selection mode */
+  selectionMode?: 'single';
+  /** Default expanded item in uncontrolled mode */
+  defaultValue?: string | undefined;
+  /** Controlled expanded item */
+  value?: string | undefined;
+  /** Callback when the expanded item changes */
+  onValueChange?: (value: string | undefined) => void;
+};
+
+/**
+ * Props for multiple-selection accordion
+ */
+type MultipleRootProps = {
+  /** Multiple selection mode */
+  selectionMode?: 'multiple';
+  /** Default expanded items in uncontrolled mode */
+  defaultValue?: string[];
+  /** Controlled expanded items */
+  value?: string[];
+  /** Callback when expanded items change */
+  onValueChange?: (value: string[]) => void;
+};
+
+/**
+ * Props for the Accordion root component
+ */
+type RootProps = (SingleRootProps | MultipleRootProps) & {
+  /** Default expanded item(s) - type depends on single/multiple mode */
+  defaultValue?: string | string[];
+  /** Whether all accordion items are disabled */
+  isDisabled?: boolean;
+  /** Whether expanded items can be collapsed (defaults to true) */
+  isCollapsible?: boolean;
+} & SlottableViewProps;
+
+type RootRef = ViewRef;
+
+/**
+ * Props for individual accordion items
+ */
+type ItemProps = {
+  /** Unique value to identify this item */
+  value: string;
+  /** Whether this specific item is disabled */
+  isDisabled?: boolean;
+} & SlottableViewProps;
+
+type ItemRef = ViewRef;
+
+/** Props for accordion item content */
+type ContentProps = ForceMountable & SlottableViewProps;
+/** Ref type for accordion content */
+type ContentRef = ViewRef;
+
+/** Props for accordion item header */
+type HeaderProps = SlottableViewProps;
+/** Ref type for accordion header */
+type HeaderRef = ViewRef;
+
+/** Props for accordion item trigger */
+type TriggerProps = Omit<SlottablePressableProps, 'disabled'> & {
+  isDisabled?: boolean;
+};
+/** Ref type for accordion trigger */
+type TriggerRef = PressableRef;
+
+/** Props for accordion item indicator */
+type IndicatorProps = SlottableViewProps;
+/** Ref type for accordion indicator */
+type IndicatorRef = ViewRef;
+
+export type {
+  ContentProps,
+  ContentRef,
+  HeaderProps,
+  HeaderRef,
+  IndicatorProps,
+  IndicatorRef,
+  ItemProps,
+  ItemRef,
+  RootContext,
+  RootProps,
+  RootRef,
+  TriggerProps,
+  TriggerRef,
+};

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

@@ -0,0 +1,12 @@
+export function toStringArray(value?: string | string[]) {
+  return Array.isArray(value) ? value : value ? [value] : [];
+}
+
+export function isItemSelected(
+  rootValue: string | string[] | undefined,
+  value: string
+) {
+  return Array.isArray(rootValue)
+    ? rootValue.includes(value)
+    : rootValue === value;
+}

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

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

package/lib/__templates__/expo/client/heroui/primitives/activity-indicator/activity-indicator.tsx

@@ -0,0 +1,50 @@
+import { forwardRef } from 'react';
+import { View } from 'react-native';
+import * as Slot from '../slot';
+import type {
+  IndicatorProps,
+  IndicatorRef,
+  RootProps,
+  RootRef,
+} from './activity-indicator.types';
+
+// --------------------------------------------------
+
+const Root = forwardRef<RootRef, RootProps>(
+  ({ asChild, isLoading = true, ...props }, ref) => {
+    const Component = asChild ? Slot.View : View;
+
+    return (
+      <Component
+        ref={ref}
+        accessible
+        accessibilityRole="progressbar"
+        accessibilityState={{ busy: isLoading }}
+        {...props}
+      />
+    );
+  }
+);
+
+Root.displayName = 'HeroUINative.Primitive.ActivityIndicator.Root';
+
+// --------------------------------------------------
+
+const Indicator = forwardRef<IndicatorRef, IndicatorProps>(
+  ({ asChild, ...props }, ref) => {
+    const Component = asChild ? Slot.View : View;
+
+    return (
+      <Component
+        ref={ref}
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+        {...props}
+      />
+    );
+  }
+);
+
+Indicator.displayName = 'HeroUINative.Primitive.ActivityIndicator.Indicator';
+
+export { Indicator, Root };