@coze-arch/cli 0.0.1-alpha.3002ee → 0.0.1-alpha.3260db

package/lib/__templates__/expo/client/heroui/components/avatar/person-icon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+export interface PersonIconProps {
+  size?: number;
+  color?: string;
+}
+
+export const PersonIcon: React.FC<PersonIconProps> = ({
+  size = 16,
+  color = 'currentColor',
+}) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10 4.5C10 5.60457 9.10457 6.5 8 6.5C6.89543 6.5 6 5.60457 6 4.5C6 3.39543 6.89543 2.5 8 2.5C9.10457 2.5 10 3.39543 10 4.5ZM11.5 4.5C11.5 6.433 9.933 8 8 8C6.067 8 4.5 6.433 4.5 4.5C4.5 2.567 6.067 1 8 1C9.933 1 11.5 2.567 11.5 4.5ZM2.5 12.5C2.5 12.2955 2.72027 11.6911 3.81956 11.0413C4.83752 10.4395 6.31979 10 8 10C9.68021 10 11.1625 10.4395 12.1804 11.0413C13.2797 11.6911 13.5 12.2955 13.5 12.5C13.5 13.0523 13.0523 13.5 12.5 13.5H3.5C2.94772 13.5 2.5 13.0523 2.5 12.5ZM8 8.5C4.15 8.5 1 10.5 1 12.5C1 13.8807 2.11929 15 3.5 15H12.5C13.8807 15 15 13.8807 15 12.5C15 10.5 11.85 8.5 8 8.5Z"
+        fill={color}
+      />
+    </Svg>
+  );
+};

package/lib/__templates__/expo/client/heroui/components/bottom-sheet/bottom-sheet.animation.ts

@@ -0,0 +1,42 @@
+import { useAnimationSettings } from '../../helpers/internal/contexts';
+import type { AnimationDisabled } from '../../helpers/internal/types';
+import {
+  createContext,
+  getAnimationState,
+  getIsAnimationDisabledValue,
+} from '../../helpers/internal/utils';
+import type { BottomSheetAnimationContextValue } from './bottom-sheet.types';
+
+const [BottomSheetAnimationProvider, useBottomSheetAnimation] =
+  createContext<BottomSheetAnimationContextValue>({
+    name: 'BottomSheetAnimationContext',
+  });
+
+export { BottomSheetAnimationProvider, useBottomSheetAnimation };
+
+// --------------------------------------------------
+
+/**
+ * Animation hook for BottomSheet Content component
+ * Handles animation disabled state based on local and global animation settings
+ */
+export function useBottomSheetContentAnimation(options: {
+  /** Animation configuration for bottom sheet content */
+  animation: AnimationDisabled | undefined;
+}) {
+  const { animation } = options;
+
+  // Read from global animation context (always available in compound parts)
+  const { isAllAnimationsDisabled } = useAnimationSettings();
+
+  const { isAnimationDisabled } = getAnimationState(animation);
+
+  const isAnimationDisabledValue = getIsAnimationDisabledValue({
+    isAnimationDisabled,
+    isAllAnimationsDisabled,
+  });
+
+  return {
+    isAnimationDisabledValue,
+  };
+}

package/lib/__templates__/expo/client/heroui/components/bottom-sheet/bottom-sheet.constants.ts

@@ -0,0 +1,13 @@
+/**
+ * Display names for BottomSheet components
+ */
+export const DISPLAY_NAME = {
+  ROOT: 'HeroUINative.BottomSheet.Root',
+  TRIGGER: 'HeroUINative.BottomSheet.Trigger',
+  PORTAL: 'HeroUINative.BottomSheet.Portal',
+  OVERLAY: 'HeroUINative.BottomSheet.Overlay',
+  CONTENT: 'HeroUINative.BottomSheet.Content',
+  CLOSE: 'HeroUINative.BottomSheet.Close',
+  TITLE: 'HeroUINative.BottomSheet.Title',
+  DESCRIPTION: 'HeroUINative.BottomSheet.Description',
+};

package/lib/__templates__/expo/client/heroui/components/bottom-sheet/bottom-sheet.md

@@ -0,0 +1,349 @@
+# BottomSheet
+
+Displays a bottom sheet that slides up from the bottom with animated transitions and swipe-to-dismiss gestures.
+
+## Import
+
+```tsx
+import { BottomSheet } from '@/heroui';
+```
+
+## Anatomy
+
+```tsx
+<BottomSheet>
+  <BottomSheet.Trigger>...</BottomSheet.Trigger>
+  <BottomSheet.Portal>
+    <BottomSheet.Overlay>...</BottomSheet.Overlay>
+    <BottomSheet.Content>
+      <BottomSheet.Close />
+      <BottomSheet.Title>...</BottomSheet.Title>
+      <BottomSheet.Description>...</BottomSheet.Description>
+    </BottomSheet.Content>
+  </BottomSheet.Portal>
+</BottomSheet>
+```
+
+- **BottomSheet**: Root component that manages open state and provides context to child components.
+- **BottomSheet.Trigger**: Pressable element that opens the bottom sheet when pressed.
+- **BottomSheet.Portal**: Renders bottom sheet content in a portal with full window overlay.
+- **BottomSheet.Overlay**: Background overlay that covers the screen, typically closes bottom sheet when pressed.
+- **BottomSheet.Content**: Main bottom sheet container using @gorhom/bottom-sheet for rendering with gesture support.
+- **BottomSheet.Close**: Close button for the bottom sheet. Can accept custom children or uses default close icon.
+- **BottomSheet.Title**: Bottom sheet title text with semantic heading role and accessibility linking.
+- **BottomSheet.Description**: Bottom sheet description text that provides additional context with accessibility linking.
+
+## Usage
+
+### Basic Bottom Sheet
+
+Simple bottom sheet with title, description, and close button.
+
+```tsx
+<BottomSheet>
+  <BottomSheet.Trigger asChild>
+    <Button>Open Bottom Sheet</Button>
+  </BottomSheet.Trigger>
+  <BottomSheet.Portal>
+    <BottomSheet.Overlay />
+    <BottomSheet.Content>
+      <BottomSheet.Close />
+      <BottomSheet.Title>...</BottomSheet.Title>
+      <BottomSheet.Description>...</BottomSheet.Description>
+    </BottomSheet.Content>
+  </BottomSheet.Portal>
+</BottomSheet>
+```
+
+### Detached Bottom Sheet
+
+Bottom sheet that appears detached from the bottom edge with custom spacing.
+
+```tsx
+<BottomSheet>
+  <BottomSheet.Trigger>...</BottomSheet.Trigger>
+  <BottomSheet.Portal>
+    <BottomSheet.Overlay />
+    <BottomSheet.Content
+      detached={true}
+      bottomInset={insets.bottom + 12}
+      className="mx-4"
+      backgroundClassName="rounded-[32px]"
+    >
+      ...
+    </BottomSheet.Content>
+  </BottomSheet.Portal>
+</BottomSheet>
+```
+
+### Scrollable with Snap Points
+
+Bottom sheet with multiple snap points and scrollable content.
+
+```tsx
+<BottomSheet>
+  <BottomSheet.Trigger>...</BottomSheet.Trigger>
+  <BottomSheet.Portal>
+    <BottomSheet.Overlay />
+    <BottomSheet.Content snapPoints={['25%', '50%', '90%']}>
+      <ScrollView>...</ScrollView>
+    </BottomSheet.Content>
+  </BottomSheet.Portal>
+</BottomSheet>
+```
+
+### Custom Overlay
+
+Replace the default overlay with custom content like blur effects.
+
+```tsx
+import { useBottomSheet, useBottomSheetAnimation } from '@/heroui';
+import { StyleSheet, Pressable } from 'react-native';
+import { interpolate, useDerivedValue } from 'react-native-reanimated';
+import { AnimatedBlurView } from './animated-blur-view';
+import { useUniwind } from 'uniwind';
+
+export const BottomSheetBlurOverlay = () => {
+  const { theme } = useUniwind();
+  const { onOpenChange } = useBottomSheet();
+  const { progress } = useBottomSheetAnimation();
+
+  const blurIntensity = useDerivedValue(() => {
+    return interpolate(progress.get(), [0, 1, 2], [0, 40, 0]);
+  });
+
+  return (
+    <Pressable
+      style={StyleSheet.absoluteFill}
+      onPress={() => onOpenChange(false)}
+    >
+      <AnimatedBlurView
+        blurIntensity={blurIntensity}
+        tint={theme === 'dark' ? 'dark' : 'systemUltraThinMaterialDark'}
+        style={StyleSheet.absoluteFill}
+      />
+    </Pressable>
+  );
+};
+```
+
+```tsx
+<BottomSheet>
+  <BottomSheet.Trigger>...</BottomSheet.Trigger>
+  <BottomSheet.Portal>
+    <BottomSheetBlurOverlay />
+    <BottomSheet.Content>...</BottomSheet.Content>
+  </BottomSheet.Portal>
+</BottomSheet>
+```
+
+## Example
+
+```tsx
+import { BottomSheet, Button } from '@/heroui';
+import { useState } from 'react';
+import { View } from 'react-native';
+import { withUniwind } from 'uniwind';
+import Ionicons from '@expo/vector-icons/Ionicons';
+
+const StyledIonicons = withUniwind(Ionicons);
+
+export default function BottomSheetExample() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <BottomSheet isOpen={isOpen} onOpenChange={setIsOpen}>
+      <BottomSheet.Trigger asChild>
+        <Button variant="secondary">Open Bottom Sheet</Button>
+      </BottomSheet.Trigger>
+      <BottomSheet.Portal>
+        <BottomSheet.Overlay />
+        <BottomSheet.Content>
+          <View className="items-center mb-5">
+            <View className="size-20 items-center justify-center rounded-full bg-green-500/10">
+              <StyledIonicons
+                name="shield-checkmark"
+                size={40}
+                className="text-green-500"
+              />
+            </View>
+          </View>
+          <View className="mb-8 gap-2 items-center">
+            <BottomSheet.Title className="text-center">
+              Keep yourself safe
+            </BottomSheet.Title>
+            <BottomSheet.Description className="text-center">
+              Update your software to the latest version for better security and
+              performance.
+            </BottomSheet.Description>
+          </View>
+          <View className="gap-3">
+            <Button onPress={() => setIsOpen(false)}>Update Now</Button>
+            <Button variant="tertiary" onPress={() => setIsOpen(false)}>
+              Later
+            </Button>
+          </View>
+        </BottomSheet.Content>
+      </BottomSheet.Portal>
+    </BottomSheet>
+  );
+}
+```
+
+You can find more examples in the [GitHub repository](<https://github.com/heroui-inc/heroui-native/blob/rc/example/src/app/(home)/components/bottom-sheet.tsx>).
+
+## API Reference
+
+### BottomSheet
+
+| prop            | type                       | default | description                                        |
+| --------------- | -------------------------- | ------- | -------------------------------------------------- |
+| `children`      | `React.ReactNode`          | -       | Bottom sheet content and trigger elements          |
+| `isOpen`        | `boolean`                  | -       | Controlled open state of the bottom sheet          |
+| `isDefaultOpen` | `boolean`                  | `false` | Initial open state when uncontrolled               |
+| `animation`     | `AnimationRootDisableAll`  | -       | Animation configuration                            |
+| `onOpenChange`  | `(value: boolean) => void` | -       | Callback when open state changes                   |
+| `...ViewProps`  | `ViewProps`                | -       | All standard React Native View props are supported |
+
+#### Animation Configuration
+
+Animation configuration for bottom sheet root component. Can be:
+
+- `"disable-all"`: Disable all animations including children
+- `undefined`: Use default animations
+
+### BottomSheet.Trigger
+
+| prop                       | type                    | default | description                                                    |
+| -------------------------- | ----------------------- | ------- | -------------------------------------------------------------- |
+| `children`                 | `React.ReactNode`       | -       | Trigger element content                                        |
+| `asChild`                  | `boolean`               | -       | Render as child element without wrapper                        |
+| `...TouchableOpacityProps` | `TouchableOpacityProps` | -       | All standard React Native TouchableOpacity props are supported |
+
+### BottomSheet.Portal
+
+| prop                       | type                   | default | description                                                                                                                   |
+| -------------------------- | ---------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| `children`                 | `React.ReactNode`      | -       | Portal content (overlay and bottom sheet)                                                                                     |
+| `disableFullWindowOverlay` | `boolean`              | `false` | When true on iOS, uses View instead of FullWindowOverlay. Enables element inspector; overlay won't appear above native modals |
+| `className`                | `string`               | -       | Additional CSS classes for portal container                                                                                   |
+| `style`                    | `StyleProp<ViewStyle>` | -       | Additional styles for portal container                                                                                        |
+| `hostName`                 | `string`               | -       | Optional portal host name for specific container                                                                              |
+| `forceMount`               | `boolean`              | -       | Force mount when closed for animation purposes                                                                                |
+
+### BottomSheet.Overlay
+
+| prop                    | type                                                   | default | description                                                  |
+| ----------------------- | ------------------------------------------------------ | ------- | ------------------------------------------------------------ |
+| `children`              | `React.ReactNode`                                      | -       | Custom overlay content                                       |
+| `className`             | `string`                                               | -       | Additional CSS classes for overlay                           |
+| `style`                 | `ViewStyle`                                            | -       | Additional styles for overlay container                      |
+| `animation`             | `Omit<PopupOverlayAnimation, 'entering' \| 'exiting'>` | -       | Animation configuration                                      |
+| `isAnimatedStyleActive` | `boolean`                                              | `true`  | Whether animated styles (react-native-reanimated) are active |
+| `isCloseOnPress`        | `boolean`                                              | `true`  | Whether pressing overlay closes bottom sheet                 |
+| `...PressableProps`     | `PressableProps`                                       | -       | All standard React Native Pressable props are supported      |
+
+#### Animation Configuration
+
+Animation configuration for bottom sheet overlay component. Can be:
+
+- `false` or `"disabled"`: Disable all animations
+- `true` or `undefined`: Use default animations
+- `object`: Custom animation configuration (excluding `entering` and `exiting` properties)
+
+| prop            | type                       | default     | description                                     |
+| --------------- | -------------------------- | ----------- | ----------------------------------------------- |
+| `state`         | `'disabled' \| boolean`    | -           | Disable animations while customizing properties |
+| `opacity.value` | `[number, number, number]` | `[0, 1, 0]` | Opacity values [idle, open, close]              |
+
+### BottomSheet.Content
+
+| prop                        | type                                     | default | description                                                                                        |
+| --------------------------- | ---------------------------------------- | ------- | -------------------------------------------------------------------------------------------------- |
+| `children`                  | `React.ReactNode`                        | -       | Bottom sheet content                                                                               |
+| `className`                 | `string`                                 | -       | Additional CSS classes for bottom sheet container                                                  |
+| `containerClassName`        | `string`                                 | -       | Additional CSS classes for container                                                               |
+| `contentContainerClassName` | `string`                                 | -       | Additional CSS classes for content container                                                       |
+| `backgroundClassName`       | `string`                                 | -       | Additional CSS classes for background                                                              |
+| `handleClassName`           | `string`                                 | -       | Additional CSS classes for handle                                                                  |
+| `handleIndicatorClassName`  | `string`                                 | -       | Additional CSS classes for handle indicator                                                        |
+| `contentContainerProps`     | `Omit<BottomSheetViewProps, 'children'>` | -       | Props for the content container                                                                    |
+| `animation`                 | `AnimationDisabled`                      | -       | Animation configuration                                                                            |
+| `...GorhomBottomSheetProps` | `Partial<GorhomBottomSheetProps>`        | -       | All [@gorhom/bottom-sheet props](https://gorhom.dev/react-native-bottom-sheet/props) are supported |
+
+**Note**: You can use all components from [@gorhom/bottom-sheet](https://gorhom.dev/react-native-bottom-sheet/components/bottomsheetview) inside the content, such as `BottomSheetView`, `BottomSheetScrollView`, `BottomSheetFlatList`, etc.
+
+### BottomSheet.Close
+
+BottomSheet.Close extends [CloseButton](../close-button/close-button.md) and automatically handles bottom sheet dismissal when pressed.
+
+### BottomSheet.Title
+
+| prop           | type              | default | description                                        |
+| -------------- | ----------------- | ------- | -------------------------------------------------- |
+| `children`     | `React.ReactNode` | -       | Title content                                      |
+| `className`    | `string`          | -       | Additional CSS classes for title                   |
+| `...TextProps` | `TextProps`       | -       | All standard React Native Text props are supported |
+
+### BottomSheet.Description
+
+| prop           | type              | default | description                                        |
+| -------------- | ----------------- | ------- | -------------------------------------------------- |
+| `children`     | `React.ReactNode` | -       | Description content                                |
+| `className`    | `string`          | -       | Additional CSS classes for description             |
+| `...TextProps` | `TextProps`       | -       | All standard React Native Text props are supported |
+
+## Hooks
+
+### useBottomSheet
+
+Hook to access bottom sheet primitive context.
+
+```tsx
+const { isOpen, onOpenChange } = useBottomSheet();
+```
+
+| property       | type                       | description                   |
+| -------------- | -------------------------- | ----------------------------- |
+| `isOpen`       | `boolean`                  | Current open state            |
+| `onOpenChange` | `(value: boolean) => void` | Function to change open state |
+
+### useBottomSheetAnimation
+
+Hook to access bottom sheet animation context for advanced customization.
+
+```tsx
+const { progress } = useBottomSheetAnimation();
+```
+
+| property   | type                  | description                                  |
+| ---------- | --------------------- | -------------------------------------------- |
+| `progress` | `SharedValue<number>` | Animation progress (0=idle, 1=open, 2=close) |
+
+## Special Notes
+
+### Element Inspector (iOS)
+
+BottomSheet uses FullWindowOverlay on iOS, which renders in a separate native window. This breaks the React Native element inspector. To enable the inspector during development, set `disableFullWindowOverlay={true}` on `BottomSheet.Portal`. Tradeoff: the bottom sheet will not appear above native modals when disabled.
+
+### Handling Close Callbacks
+
+It's recommended to use `BottomSheet`'s `onOpenChange` prop for handling close callbacks, as it reliably fires for all close scenarios (swiping down, pressing overlay, pressing close button, programmatic close, etc.).
+
+```tsx
+<BottomSheet
+  isOpen={isOpen}
+  onOpenChange={(value) => {
+    setIsOpen(value);
+    if (!value) {
+      // This callback runs whenever the bottom sheet closes
+      // regardless of how it was closed
+      yourCallbackOnClose();
+    }
+  }}
+>
+  ...
+</BottomSheet>
+```
+
+**Note**: `BottomSheet.Content`'s `onClose` prop (from @gorhom/bottom-sheet) has limitations and will only fire when the bottom sheet is closed by swiping down. It won't fire when closing via overlay press, close button, or programmatic close. For reliable close callbacks, always use `BottomSheet`'s `onOpenChange` prop instead.

package/lib/__templates__/expo/client/heroui/components/bottom-sheet/bottom-sheet.styles.ts

@@ -0,0 +1,66 @@
+import { StyleSheet } from 'react-native';
+import { tv } from 'tailwind-variants';
+import { combineStyles } from '../../helpers/internal/utils';
+
+/**
+ * Overlay style definition
+ *
+ * @note ANIMATED PROPERTIES (cannot be set via className):
+ * The following property is animated and cannot be overridden using Tailwind classes:
+ * - `opacity` - Animated for overlay show/hide transitions (idle: 0, open: 1, close: 0)
+ *
+ * To customize this property, use the `animation` prop on `BottomSheet.Overlay`:
+ * ```tsx
+ * <BottomSheet.Overlay
+ *   animation={{
+ *     opacity: { value: [0, 1, 0] }
+ *   }}
+ * />
+ * ```
+ *
+ * To completely disable animated styles and apply your own via className or style prop,
+ * set `isAnimatedStyleActive={false}` on `BottomSheet.Overlay`.
+ */
+const overlay = tv({
+  base: 'absolute inset-0 bg-black/10',
+});
+
+const contentContainer = tv({
+  base: 'flex-1 p-5 pb-safe-offset-3 bg-transparent',
+});
+
+const contentBackground = tv({
+  base: 'bg-overlay rounded-t-4xl shadow-overlay',
+});
+
+const contentHandleIndicator = tv({
+  base: 'bg-separator',
+});
+
+const close = tv({
+  base: '',
+});
+
+const label = tv({
+  base: 'text-lg font-medium text-foreground',
+});
+
+const description = tv({
+  base: 'text-base text-muted',
+});
+
+export const bottomSheetClassNames = combineStyles({
+  overlay,
+  contentContainer,
+  contentBackground,
+  contentHandleIndicator,
+  close,
+  label,
+  description,
+});
+
+export const bottomSheetStyleSheet = StyleSheet.create({
+  contentContainer: {
+    borderCurve: 'continuous',
+  },
+});