@coze-arch/cli 0.0.10 → 0.0.11

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

@@ -0,0 +1,438 @@
+import type BottomSheet from '@gorhom/bottom-sheet';
+import type { ReactNode } from 'react';
+import type { TextProps, ViewStyle } from 'react-native';
+import type {
+  AnimatedProps,
+  SharedValue,
+  WithSpringConfig,
+} from 'react-native-reanimated';
+import type {
+  Animation,
+  AnimationRootDisableAll,
+  AnimationValue,
+  BaseBottomSheetContentProps,
+  ElementSlots,
+  PopupDialogContentAnimation,
+  PopupOverlayAnimation,
+  PopupPopoverContentAnimation,
+} from '../../helpers/internal/types';
+import type * as SelectPrimitivesTypes from '../../primitives/select/select.types';
+import type { CloseButtonProps } from '../close-button/close-button.types';
+import type { DialogContentFallbackSlots } from './select.styles';
+
+/**
+ * Select internal state for animation coordination
+ */
+export type SelectState = 'idle' | 'open' | 'close';
+
+/**
+ * Context value for select animation state
+ */
+export interface SelectAnimationContextValue {
+  /** Animation progress shared value (0=idle, 1=open, 2=close) */
+  progress: SharedValue<number>;
+  /** Dragging state shared value */
+  isDragging: SharedValue<boolean>;
+  /** Gesture release animation running state shared value */
+  isGestureReleaseAnimationRunning: SharedValue<boolean>;
+}
+
+/**
+ * Ref type for the Select Trigger component
+ */
+export type SelectTriggerRef = SelectPrimitivesTypes.TriggerRef;
+
+/**
+ * Select placement options
+ */
+export type SelectPlacement = 'top' | 'bottom' | 'left' | 'right';
+
+/**
+ * Select alignment options
+ */
+export type SelectAlign = 'start' | 'center' | 'end';
+
+/**
+ * Select Root component props.
+ * Generic on `M extends SelectionMode` — inherits value/onChange typing from the primitive.
+ */
+export type SelectRootProps<
+  M extends SelectPrimitivesTypes.SelectionMode = 'single',
+> = SelectPrimitivesTypes.RootProps<M> & {
+  /**
+   * The content of the select
+   */
+  children?: ReactNode;
+  /**
+   * Additional CSS classes for the select root
+   */
+  className?: string;
+  /**
+   * The controlled open state of the select
+   */
+  isOpen?: boolean;
+  /**
+   * The open state of the select when initially rendered (uncontrolled)
+   */
+  isDefaultOpen?: boolean;
+  /**
+   * Animation configuration for select root
+   * - `"disable-all"`: Disable all animations including children
+   * - `false` or `"disabled"`: Disable only root animations
+   * - `true` or `undefined`: Use default animations
+   */
+  animation?: AnimationRootDisableAll;
+};
+
+/**
+ * Select Trigger component props
+ */
+export interface SelectTriggerProps extends SelectPrimitivesTypes.TriggerProps {
+  /**
+   * The variant of the trigger
+   * @default 'default'
+   */
+  variant?: 'default' | 'unstyled';
+  /**
+   * The trigger element content
+   */
+  children?: ReactNode;
+  /**
+   * Additional CSS class for the trigger
+   */
+  className?: string;
+}
+
+/**
+ * Icon props for the Select.TriggerIndicator component
+ */
+export interface SelectTriggerIndicatorIconProps {
+  /**
+   * Size of the icon
+   * @default 16
+   */
+  size?: number;
+  /**
+   * Color of the icon
+   * @default foreground
+   */
+  color?: string;
+}
+
+/**
+ * Animation configuration for select trigger indicator component
+ */
+export type SelectTriggerIndicatorAnimation = Animation<{
+  rotation?: AnimationValue<{
+    /**
+     * Rotation values [closed, open] in degrees
+     * @default [0, -180]
+     */
+    value?: [number, number];
+    /**
+     * Spring animation configuration for rotation
+     * @default { damping: 140, stiffness: 1000, mass: 4 }
+     */
+    springConfig?: WithSpringConfig;
+  }>;
+}>;
+
+/**
+ * Props for the Select.TriggerIndicator component
+ */
+export interface SelectTriggerIndicatorProps
+  extends AnimatedProps<SelectPrimitivesTypes.TriggerIndicatorProps> {
+  /**
+   * Custom trigger indicator content, if not provided defaults to animated chevron
+   */
+  children?: ReactNode;
+  /**
+   * Additional CSS classes
+   *
+   * @note The following style properties are occupied by animations and cannot be set via className:
+   * - `transform` (specifically `rotate`) - Animated for open/close rotation transitions
+   *
+   * To customize this property, use the `animation` prop:
+   * ```tsx
+   * <Select.TriggerIndicator
+   *   animation={{
+   *     rotation: { value: [0, -180], springConfig: { damping: 140, stiffness: 1000, mass: 4 } }
+   *   }}
+   * />
+   * ```
+   *
+   * To completely disable animated styles and use your own via className or style prop, set `isAnimatedStyleActive={false}`.
+   */
+  className?: string;
+  /**
+   * Custom styles for the trigger indicator
+   */
+  style?: ViewStyle;
+  /**
+   * Icon configuration
+   */
+  iconProps?: SelectTriggerIndicatorIconProps;
+  /**
+   * Animation configuration for trigger indicator
+   * - `false` or `"disabled"`: Disable all animations
+   * - `true` or `undefined`: Use default animations
+   * - `object`: Custom animation configuration
+   */
+  animation?: SelectTriggerIndicatorAnimation;
+  /**
+   * 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;
+}
+
+/**
+ * Select Portal component props
+ */
+export interface SelectPortalProps extends SelectPrimitivesTypes.PortalProps {
+  /**
+   * When true, uses a regular View instead of FullWindowOverlay on iOS.
+   * Enables React Native element inspector but overlay won't appear above native modals.
+   * @default false
+   */
+  disableFullWindowOverlay?: boolean;
+  /**
+   * Additional CSS class for the portal container
+   */
+  className?: string;
+  /**
+   * The portal content
+   */
+  children: ReactNode;
+}
+
+/**
+ * Animation configuration for Select Overlay component
+ */
+export type SelectOverlayAnimation = PopupOverlayAnimation;
+
+/**
+ * Select Overlay component props
+ */
+export interface SelectOverlayProps extends SelectPrimitivesTypes.OverlayProps {
+  /**
+   * Additional CSS class for the overlay
+   */
+  className?: string;
+  /**
+   * Animation configuration for overlay
+   * - `false` or `"disabled"`: Disable all animations
+   * - `true` or `undefined`: Use default animations (progress-based opacity for bottom-sheet/dialog, Keyframe animations for popover)
+   * - `object`: Custom animation configuration
+   *   - For bottom-sheet/dialog: `opacity` with progress-based values
+   *   - For popover: `entering` and/or `exiting` Keyframe animations
+   */
+  animation?: SelectOverlayAnimation;
+  /**
+   * 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 Select Content Popover component
+ * Reuses PopupPopoverContentAnimation since they share the same animation behavior
+ */
+export type SelectContentPopoverAnimation = PopupPopoverContentAnimation;
+
+/**
+ * Select Content props for 'popover' presentation
+ */
+export interface SelectContentPopoverProps
+  extends SelectPrimitivesTypes.PopoverContentProps {
+  /**
+   * Additional CSS class for the content container
+   */
+  className?: string;
+  /**
+   * The select content
+   */
+  children?: ReactNode;
+  /**
+   * Presentation mode for the select
+   */
+  presentation: 'popover';
+  /**
+   * Animation configuration for content
+   * - `false` or `"disabled"`: Disable all animations
+   * - `true` or `undefined`: Use default Keyframe animations (translateY/translateX, scale, opacity based on placement)
+   * - `object`: Custom animation configuration with `entering` and/or `exiting` Keyframe animations
+   */
+  animation?: SelectContentPopoverAnimation;
+}
+
+/**
+ * Select Content props for 'bottom-sheet' presentation
+ */
+export interface SelectContentBottomSheetProps
+  extends Partial<React.ComponentProps<typeof BottomSheet>>,
+    BaseBottomSheetContentProps {
+  /**
+   * Presentation mode for the select
+   */
+  presentation: 'bottom-sheet';
+}
+
+/**
+ * Animation configuration for Select Content component (dialog presentation)
+ * Reuses PopupDialogContentAnimation since they share the same animation behavior
+ */
+export type SelectContentAnimation = PopupDialogContentAnimation;
+
+/**
+ * Select Content props for 'dialog' presentation
+ */
+export interface SelectContentDialogProps
+  extends SelectPrimitivesTypes.DialogContentProps {
+  /**
+   * Additional CSS classes for the content container
+   */
+  classNames?: ElementSlots<DialogContentFallbackSlots>;
+  /**
+   * Styles for different parts of the dialog content
+   */
+  styles?: Partial<Record<DialogContentFallbackSlots, ViewStyle>>;
+  /**
+   * The select content
+   */
+  children?: ReactNode;
+  /**
+   * Presentation mode for the select
+   */
+  presentation: 'dialog';
+  /**
+   * Animation configuration for content
+   * - `false` or `"disabled"`: Disable all animations
+   * - `true` or `undefined`: Use default Keyframe animations (scale and opacity transitions)
+   * - `object`: Custom animation configuration with `entering` and/or `exiting` Keyframe animations
+   */
+  animation?: SelectContentAnimation;
+  /**
+   * Whether the dialog content can be swiped to dismiss
+   * @default true
+   */
+  isSwipeable?: boolean;
+}
+
+/**
+ * Select Content component props
+ */
+export type SelectContentProps =
+  | SelectContentPopoverProps
+  | SelectContentBottomSheetProps
+  | SelectContentDialogProps;
+
+/**
+ * Select Close component props
+ *
+ * Extends CloseButtonProps, allowing full override of all close button props.
+ * Automatically handles select close functionality when pressed.
+ */
+export type SelectCloseProps = CloseButtonProps;
+
+/**
+ * Select Value component props
+ */
+export interface SelectValueProps extends SelectPrimitivesTypes.ValueProps {
+  /**
+   * Additional CSS class for the value
+   */
+  className?: string;
+}
+
+/**
+ * Select List Label component props
+ */
+export interface SelectListLabelProps extends TextProps {
+  /**
+   * Additional CSS class for the list label
+   */
+  className?: string;
+}
+
+/**
+ * Render function props for SelectItem children
+ */
+export interface SelectItemRenderProps {
+  /** Whether this item is currently selected */
+  isSelected: boolean;
+  /** The value of the item */
+  value: string;
+  /** Whether the item is disabled */
+  isDisabled: boolean;
+}
+
+/**
+ * Select Item component props
+ */
+export interface SelectItemProps
+  extends Omit<SelectPrimitivesTypes.ItemProps, 'children'> {
+  /**
+   * Additional CSS class for the item
+   */
+  className?: string;
+  /**
+   * Child elements to render inside the item, or a render function
+   */
+  children?: ReactNode | ((props: SelectItemRenderProps) => ReactNode);
+}
+
+/**
+ * Select Item Label component props
+ */
+export interface SelectItemLabelProps extends Omit<TextProps, 'children'> {
+  /**
+   * Additional CSS class for the item label
+   */
+  className?: string;
+}
+
+/**
+ * Select Item Description component props
+ */
+export interface SelectItemDescriptionProps extends TextProps {
+  /**
+   * Additional CSS class for the item description
+   */
+  className?: string;
+}
+
+/**
+ * Select Item Indicator Icon props
+ */
+export interface SelectItemIndicatorIconProps {
+  /**
+   * Size of the check icon
+   * @default 16
+   */
+  size?: number;
+  /**
+   * Color of the check icon
+   */
+  color?: string;
+}
+
+/**
+ * Select Item Indicator component props
+ */
+export interface SelectItemIndicatorProps
+  extends SelectPrimitivesTypes.ItemIndicatorProps {
+  /**
+   * Additional CSS class for the item indicator
+   */
+  className?: string;
+  /**
+   * Check icon props
+   */
+  iconProps?: SelectItemIndicatorIconProps;
+}

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

@@ -0,0 +1,7 @@
+export { default as Separator } from './separator';
+export { separatorClassNames } from './separator.styles';
+export type {
+  SeparatorOrientation,
+  SeparatorProps,
+  SeparatorVariant,
+} from './separator.types';

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

@@ -0,0 +1,6 @@
+/**
+ * Display name for the Separator component
+ */
+export const DISPLAY_NAME = {
+  ROOT: 'HeroUINative.Separator.Root',
+} as const;

package/lib/__templates__/expo/client/heroui/components/separator/separator.md

@@ -0,0 +1,106 @@
+# Separator
+
+A simple line to separate content visually.
+
+## Import
+
+```tsx
+import { Separator } from '@/heroui';
+```
+
+## Anatomy
+
+```tsx
+<Separator />
+```
+
+- **Separator**: A simple line component that separates content visually. Can be oriented horizontally or vertically, with customizable thickness and variant styles.
+
+## Usage
+
+### Basic Usage
+
+The Separator component creates a visual separation between content sections.
+
+```tsx
+<Separator />
+```
+
+### Orientation
+
+Control the direction of the separator with the `orientation` prop.
+
+```tsx
+<View>
+  <Text>Horizontal separator</Text>
+  <Separator orientation="horizontal" />
+  <Text>Content below</Text>
+</View>
+
+<View className="h-24 flex-row">
+  <Text>Left</Text>
+  <Separator orientation="vertical" />
+  <Text>Right</Text>
+</View>
+```
+
+### Variants
+
+Choose between thin and thick variants for different visual emphasis.
+
+```tsx
+<Separator variant="thin" />
+<Separator variant="thick" />
+```
+
+### Custom Thickness
+
+Set a specific thickness value for precise control.
+
+```tsx
+<Separator thickness={1} />
+<Separator thickness={5} />
+<Separator thickness={10} />
+```
+
+## Example
+
+```tsx
+import { Separator, Surface } from '@/heroui';
+import { Text, View } from 'react-native';
+
+export default function SeparatorExample() {
+  return (
+    <Surface variant="secondary" className="px-6 py-7">
+      <Text className="text-base font-medium text-foreground">
+        HeroUI Native
+      </Text>
+      <Text className="text-sm text-muted">
+        A modern React Native component library.
+      </Text>
+      <Separator className="my-4" />
+      <View className="flex-row items-center h-5">
+        <Text className="text-sm text-foreground">Components</Text>
+        <Separator orientation="vertical" className="mx-3" />
+        <Text className="text-sm text-foreground">Themes</Text>
+        <Separator orientation="vertical" className="mx-3" />
+        <Text className="text-sm text-foreground">Examples</Text>
+      </View>
+    </Surface>
+  );
+}
+```
+
+You can find more examples in the [GitHub repository](<https://github.com/heroui-inc/heroui-native/blob/rc/example/src/app/(home)/components/separator.tsx>).
+
+## API Reference
+
+### Separator
+
+| prop           | type                         | default        | description                                                                                  |
+| -------------- | ---------------------------- | -------------- | -------------------------------------------------------------------------------------------- |
+| `variant`      | `'thin' \| 'thick'`          | `'thin'`       | Variant style of the separator                                                               |
+| `orientation`  | `'horizontal' \| 'vertical'` | `'horizontal'` | Orientation of the separator                                                                 |
+| `thickness`    | `number`                     | `undefined`    | Custom thickness in pixels. Controls height for horizontal or width for vertical orientation |
+| `className`    | `string`                     | `undefined`    | Additional CSS classes to apply                                                              |
+| `...ViewProps` | `ViewProps`                  | -              | All standard React Native View props are supported                                           |

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

@@ -0,0 +1,50 @@
+import { tv } from 'tailwind-variants';
+import { combineStyles } from '../../helpers/internal/utils';
+
+const root = tv({
+  base: 'bg-separator',
+  variants: {
+    variant: {
+      thin: '',
+      thick: '',
+    },
+    orientation: {
+      horizontal: '',
+      vertical: 'h-full',
+    },
+  },
+  compoundVariants: [
+    // Thin variant - horizontal orientation
+    {
+      variant: 'thin',
+      orientation: 'horizontal',
+      className: 'h-hairline',
+    },
+    // Thin variant - vertical orientation
+    {
+      variant: 'thin',
+      orientation: 'vertical',
+      className: 'w-hairline',
+    },
+    // Thick variant - horizontal orientation
+    {
+      variant: 'thick',
+      orientation: 'horizontal',
+      className: `h-[6px]`,
+    },
+    // Thick variant - vertical orientation
+    {
+      variant: 'thick',
+      orientation: 'vertical',
+      className: `w-[6px]`,
+    },
+  ],
+  defaultVariants: {
+    variant: 'thin',
+    orientation: 'horizontal',
+  },
+});
+
+export const separatorClassNames = combineStyles({
+  root,
+});

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

@@ -0,0 +1,62 @@
+import { forwardRef } from 'react';
+import { View } from 'react-native';
+import { DISPLAY_NAME } from './separator.constants';
+import { separatorClassNames } from './separator.styles';
+import type { SeparatorProps } from './separator.types';
+
+// --------------------------------------------------
+
+const SeparatorRoot = forwardRef<View, SeparatorProps>((props, ref) => {
+  const {
+    variant = 'thin',
+    orientation = 'horizontal',
+    thickness,
+    className,
+    style,
+    ...restProps
+  } = props;
+
+  const rootClassName = separatorClassNames.root({
+    variant,
+    orientation,
+    className,
+  });
+
+  /**
+   * Custom thickness handling: when thickness prop is provided,
+   * override the variant-based thickness with inline styles
+   */
+  const customThicknessStyle =
+    thickness !== undefined
+      ? orientation === 'horizontal'
+        ? { height: thickness }
+        : { width: thickness }
+      : undefined;
+
+  return (
+    <View
+      ref={ref}
+      className={rootClassName}
+      style={customThicknessStyle ? [customThicknessStyle, style] : style}
+      {...restProps}
+    />
+  );
+});
+
+// --------------------------------------------------
+
+SeparatorRoot.displayName = DISPLAY_NAME.ROOT;
+
+/**
+ * Separator component for visual separation
+ *
+ * @component Separator - A simple line to separate content visually.
+ * Supports horizontal and vertical orientations with thin and thick variants.
+ * Uses hairline width utility classes for the thin variant by default.
+ * Custom thickness can be provided via the thickness prop to override variant-based sizing.
+ *
+ * @see Full documentation: https://v3.heroui.com/docs/native/components/separator
+ */
+const Separator = SeparatorRoot;
+
+export default Separator;

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

@@ -0,0 +1,40 @@
+import type { ViewProps } from 'react-native';
+
+/**
+ * Orientation of the separator
+ * @default 'horizontal'
+ */
+export type SeparatorOrientation = 'horizontal' | 'vertical';
+
+/**
+ * Variant style of the separator
+ * @default 'thin'
+ */
+export type SeparatorVariant = 'thin' | 'thick';
+
+/**
+ * Props for the Separator component
+ */
+export interface SeparatorProps extends ViewProps {
+  /**
+   * Variant style of the separator
+   * @default 'thin'
+   */
+  variant?: SeparatorVariant;
+
+  /**
+   * Orientation of the separator
+   * @default 'horizontal'
+   */
+  orientation?: SeparatorOrientation;
+
+  /**
+   * Custom thickness of the separator. This controls the height (for horizontal) or width (for vertical) of the separator.
+   */
+  thickness?: number;
+
+  /**
+   * Additional CSS classes to apply to the separator
+   */
+  className?: string;
+}