@coze-arch/cli 0.0.10 → 0.0.11

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

@@ -0,0 +1,437 @@
+# Accordion
+
+A collapsible content panel for organizing information in a compact space.
+
+## Import
+
+```tsx
+import { Accordion } from '@/heroui';
+```
+
+## Anatomy
+
+```tsx
+<Accordion>
+  <Accordion.Item>
+    <Accordion.Trigger>
+      ...
+      <Accordion.Indicator>...</Accordion.Indicator>
+    </Accordion.Trigger>
+    <Accordion.Content>...</Accordion.Content>
+  </Accordion.Item>
+</Accordion>
+```
+
+- **Accordion**: Main container that manages the accordion state and behavior. Controls expansion/collapse of items, supports single or multiple selection modes, and provides variant styling (default or surface).
+- **Accordion.Item**: Container for individual accordion items. Wraps the trigger and content, managing the expanded state for each item.
+- **Accordion.Trigger**: Interactive element that toggles item expansion. Built on Header and Trigger primitives.
+- **Accordion.Indicator**: Optional visual indicator showing expansion state. Defaults to an animated chevron icon that rotates based on item state.
+- **Accordion.Content**: Container for expandable content. Animated with layout transitions for smooth expand/collapse effects.
+
+## Usage
+
+### Basic Usage
+
+The Accordion component uses compound parts to create expandable content sections.
+
+```tsx
+<Accordion selectionMode="single">
+  <Accordion.Item value="1">
+    <Accordion.Trigger>
+      ...
+      <Accordion.Indicator />
+    </Accordion.Trigger>
+    <Accordion.Content>...</Accordion.Content>
+  </Accordion.Item>
+</Accordion>
+```
+
+### Single Selection Mode
+
+Allow only one item to be expanded at a time.
+
+```tsx
+<Accordion selectionMode="single" defaultValue="2">
+  <Accordion.Item value="1">
+    <Accordion.Trigger>...</Accordion.Trigger>
+    <Accordion.Content>...</Accordion.Content>
+  </Accordion.Item>
+  <Accordion.Item value="2">
+    <Accordion.Trigger>...</Accordion.Trigger>
+    <Accordion.Content>...</Accordion.Content>
+  </Accordion.Item>
+</Accordion>
+```
+
+### Multiple Selection Mode
+
+Allow multiple items to be expanded simultaneously.
+
+```tsx
+<Accordion selectionMode="multiple" defaultValue={['1', '3']}>
+  <Accordion.Item value="1">
+    <Accordion.Trigger>...</Accordion.Trigger>
+    <Accordion.Content>...</Accordion.Content>
+  </Accordion.Item>
+  <Accordion.Item value="2">
+    <Accordion.Trigger>...</Accordion.Trigger>
+    <Accordion.Content>...</Accordion.Content>
+  </Accordion.Item>
+  <Accordion.Item value="3">
+    <Accordion.Trigger>...</Accordion.Trigger>
+    <Accordion.Content>...</Accordion.Content>
+  </Accordion.Item>
+</Accordion>
+```
+
+### Surface Variant
+
+Apply a surface container style to the accordion.
+
+```tsx
+<Accordion selectionMode="single" variant="surface">
+  <Accordion.Item value="1">
+    <Accordion.Trigger>
+      ...
+      <Accordion.Indicator />
+    </Accordion.Trigger>
+    <Accordion.Content>...</Accordion.Content>
+  </Accordion.Item>
+</Accordion>
+```
+
+### Custom Indicator
+
+Replace the default chevron indicator with custom content.
+
+```tsx
+<Accordion selectionMode="single">
+  <Accordion.Item value="1">
+    <Accordion.Trigger>
+      ...
+      <Accordion.Indicator>
+        <CustomIndicator />
+      </Accordion.Indicator>
+    </Accordion.Trigger>
+    <Accordion.Content>...</Accordion.Content>
+  </Accordion.Item>
+</Accordion>
+```
+
+### Without Separators
+
+Hide the separators between accordion items.
+
+```tsx
+<Accordion selectionMode="single" hideSeparator>
+  <Accordion.Item value="1">
+    <Accordion.Trigger>...</Accordion.Trigger>
+    <Accordion.Content>...</Accordion.Content>
+  </Accordion.Item>
+  <Accordion.Item value="2">
+    <Accordion.Trigger>...</Accordion.Trigger>
+    <Accordion.Content>...</Accordion.Content>
+  </Accordion.Item>
+</Accordion>
+```
+
+### Custom Styling
+
+Apply custom styles using className, classNames, or styles props.
+
+```tsx
+<Accordion
+  className="rounded-lg"
+  classNames={{
+    container: 'bg-surface',
+    separator: 'bg-separator/50',
+  }}
+  styles={{
+    container: { padding: 16 },
+    separator: { height: 2 },
+  }}
+>
+  <Accordion.Item value="1">
+    <Accordion.Trigger>...</Accordion.Trigger>
+    <Accordion.Content>...</Accordion.Content>
+  </Accordion.Item>
+</Accordion>
+```
+
+### With PressableFeedback
+
+Use `Accordion.Trigger` with `asChild` prop and wrap content with `PressableFeedback` to add custom press feedback animations.
+
+```tsx
+import { Accordion, PressableFeedback } from '@/heroui';
+import { View } from 'react-native';
+
+<Accordion>
+  <Accordion.Item value="1">
+    <Accordion.Trigger asChild>
+      <PressableFeedback animation={{ scale: false }}>
+        <PressableFeedback.Scale className="flex-row items-center flex-1 gap-3">
+          <Text>Item Title</Text>
+        </PressableFeedback.Scale>
+        <Accordion.Indicator />
+        <PressableFeedback.Highlight
+          animation={{ opacity: { value: [0, 0.05] } }}
+        />
+      </PressableFeedback>
+    </Accordion.Trigger>
+    <Accordion.Content>...</Accordion.Content>
+  </Accordion.Item>
+</Accordion>;
+```
+
+## Example
+
+```tsx
+import { Accordion, useThemeColor } from '@/heroui';
+import { Ionicons } from '@expo/vector-icons';
+import { View, Text } from 'react-native';
+
+export default function AccordionExample() {
+  const themeColorMuted = useThemeColor('muted');
+
+  const accordionData = [
+    {
+      id: '1',
+      title: 'How do I place an order?',
+      icon: <Ionicons name="bag-outline" size={16} color={themeColorMuted} />,
+      content:
+        'Lorem ipsum dolor sit amet consectetur. Netus nunc mauris risus consequat. Libero placerat dignissim consectetur nisl.',
+    },
+    {
+      id: '2',
+      title: 'What payment methods do you accept?',
+      icon: <Ionicons name="card-outline" size={16} color={themeColorMuted} />,
+      content:
+        'Lorem ipsum dolor sit amet consectetur. Netus nunc mauris risus consequat. Libero placerat dignissim consectetur nisl.',
+    },
+    {
+      id: '3',
+      title: 'How much does shipping cost?',
+      icon: <Ionicons name="cube-outline" size={16} color={themeColorMuted} />,
+      content:
+        'Lorem ipsum dolor sit amet consectetur. Netus nunc mauris risus consequat. Libero placerat dignissim consectetur nisl.',
+    },
+  ];
+
+  return (
+    <Accordion selectionMode="single" variant="surface" defaultValue="2">
+      {accordionData.map((item) => (
+        <Accordion.Item key={item.id} value={item.id}>
+          <Accordion.Trigger>
+            <View className="flex-row items-center flex-1 gap-3">
+              {item.icon}
+              <Text className="text-foreground text-base flex-1">
+                {item.title}
+              </Text>
+            </View>
+            <Accordion.Indicator />
+          </Accordion.Trigger>
+          <Accordion.Content>
+            <Text className="text-muted text-base/relaxed px-[25px]">
+              {item.content}
+            </Text>
+          </Accordion.Content>
+        </Accordion.Item>
+      ))}
+    </Accordion>
+  );
+}
+```
+
+You can find more examples in the [GitHub repository](<https://github.com/heroui-inc/heroui-native/blob/rc/example/src/app/(home)/components/accordion.tsx>).
+
+## API Reference
+
+### Accordion
+
+| prop                    | type                                               | default     | description                                                    |
+| ----------------------- | -------------------------------------------------- | ----------- | -------------------------------------------------------------- |
+| `children`              | `React.ReactNode`                                  | -           | Children elements to be rendered inside the accordion          |
+| `selectionMode`         | `'single' \| 'multiple'`                           | -           | Whether the accordion allows single or multiple expanded items |
+| `variant`               | `'default' \| 'surface'`                           | `'default'` | Visual variant of the accordion                                |
+| `hideSeparator`         | `boolean`                                          | `false`     | Whether to hide the separator between accordion items          |
+| `defaultValue`          | `string \| string[] \| undefined`                  | -           | Default expanded item(s) in uncontrolled mode                  |
+| `value`                 | `string \| string[] \| undefined`                  | -           | Controlled expanded item(s)                                    |
+| `isDisabled`            | `boolean`                                          | -           | Whether all accordion items are disabled                       |
+| `isCollapsible`         | `boolean`                                          | `true`      | Whether expanded items can be collapsed                        |
+| `animation`             | `AccordionRootAnimation`                           | -           | Animation configuration for accordion                          |
+| `className`             | `string`                                           | -           | Additional CSS classes for the container                       |
+| `classNames`            | `ElementSlots<RootSlots>`                          | -           | Additional CSS classes for the slots                           |
+| `styles`                | `Partial<Record<RootSlots, ViewStyle>>`            | -           | Styles for different parts of the accordion root               |
+| `onValueChange`         | `(value: string \| string[] \| undefined) => void` | -           | Callback when expanded items change                            |
+| `...Animated.ViewProps` | `Animated.ViewProps`                               | -           | All Reanimated Animated.View props are supported               |
+
+#### `ElementSlots<RootSlots>`
+
+| prop        | type     | description                                       |
+| ----------- | -------- | ------------------------------------------------- |
+| `container` | `string` | Custom class name for the accordion container     |
+| `separator` | `string` | Custom class name for the separator between items |
+
+#### `styles`
+
+| prop        | type        | description                            |
+| ----------- | ----------- | -------------------------------------- |
+| `container` | `ViewStyle` | Styles for the accordion container     |
+| `separator` | `ViewStyle` | Styles for the separator between items |
+
+#### AccordionRootAnimation
+
+Animation configuration for accordion root component. Can be:
+
+- `false` or `"disabled"`: Disable only root animations
+- `"disable-all"`: Disable all animations including children
+- `true` or `undefined`: Use default animations
+- `object`: Custom animation configuration
+
+| prop           | type                                     | default                                                                                         | description                                       |
+| -------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------- | ------------------------------------------------- |
+| `state`        | `'disabled' \| 'disable-all' \| boolean` | -                                                                                               | Disable animations while customizing properties   |
+| `layout.value` | `LayoutTransition`                       | `LinearTransition`<br/>`.springify()`<br/>`.damping(140)`<br/>`.stiffness(1600)`<br/>`.mass(4)` | Custom layout animation for accordion transitions |
+
+### Accordion.Item
+
+| prop                    | type                                                                        | default | description                                                                      |
+| ----------------------- | --------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------- |
+| `children`              | `React.ReactNode \| ((props: AccordionItemRenderProps) => React.ReactNode)` | -       | Children elements to be rendered inside the accordion item, or a render function |
+| `value`                 | `string`                                                                    | -       | Unique value to identify this item                                               |
+| `isDisabled`            | `boolean`                                                                   | -       | Whether this specific item is disabled                                           |
+| `className`             | `string`                                                                    | -       | Additional CSS classes                                                           |
+| `...Animated.ViewProps` | `Animated.ViewProps`                                                        | -       | All Reanimated Animated.View props are supported                                 |
+
+#### AccordionItemRenderProps
+
+| prop         | type      | description                                      |
+| ------------ | --------- | ------------------------------------------------ |
+| `isExpanded` | `boolean` | Whether the accordion item is currently expanded |
+| `value`      | `string`  | Unique value identifier for this accordion item  |
+
+### Accordion.Trigger
+
+| prop                | type              | default | description                                             |
+| ------------------- | ----------------- | ------- | ------------------------------------------------------- |
+| `children`          | `React.ReactNode` | -       | Children elements to be rendered inside the trigger     |
+| `className`         | `string`          | -       | Additional CSS classes                                  |
+| `isDisabled`        | `boolean`         | -       | Whether the trigger is disabled                         |
+| `...PressableProps` | `PressableProps`  | -       | All standard React Native Pressable props are supported |
+
+### Accordion.Indicator
+
+| prop                    | type                          | default | description                                                            |
+| ----------------------- | ----------------------------- | ------- | ---------------------------------------------------------------------- |
+| `children`              | `React.ReactNode`             | -       | Custom indicator content, if not provided defaults to animated chevron |
+| `className`             | `string`                      | -       | Additional CSS classes                                                 |
+| `iconProps`             | `AccordionIndicatorIconProps` | -       | Icon configuration                                                     |
+| `animation`             | `AccordionIndicatorAnimation` | -       | Animation configuration for indicator                                  |
+| `isAnimatedStyleActive` | `boolean`                     | `true`  | Whether animated styles (react-native-reanimated) are active           |
+| `...Animated.ViewProps` | `Animated.ViewProps`          | -       | All Reanimated Animated.View props are supported                       |
+
+#### AccordionIndicatorIconProps
+
+| prop    | type     | default      | description       |
+| ------- | -------- | ------------ | ----------------- |
+| `size`  | `number` | `16`         | Size of the icon  |
+| `color` | `string` | `foreground` | Color of the icon |
+
+#### AccordionIndicatorAnimation
+
+Animation configuration for accordion indicator component. Can be:
+
+- `false` or `"disabled"`: Disable all animations
+- `true` or `undefined`: Use default animations
+- `object`: Custom animation configuration
+
+| prop                    | type                    | default                                      | description                                      |
+| ----------------------- | ----------------------- | -------------------------------------------- | ------------------------------------------------ |
+| `state`                 | `'disabled' \| boolean` | -                                            | Disable animations while customizing properties  |
+| `rotation.value`        | `[number, number]`      | `[0, -180]`                                  | Rotation values [collapsed, expanded] in degrees |
+| `rotation.springConfig` | `WithSpringConfig`      | `{ damping: 140, stiffness: 1000, mass: 4 }` | Spring animation configuration for rotation      |
+
+### Accordion.Content
+
+| prop           | type                        | default | description                                         |
+| -------------- | --------------------------- | ------- | --------------------------------------------------- |
+| `children`     | `React.ReactNode`           | -       | Children elements to be rendered inside the content |
+| `className`    | `string`                    | -       | Additional CSS classes                              |
+| `animation`    | `AccordionContentAnimation` | -       | Animation configuration for content                 |
+| `...ViewProps` | `ViewProps`                 | -       | All standard React Native View props are supported  |
+
+#### AccordionContentAnimation
+
+Animation configuration for accordion content component. Can be:
+
+- `false` or `"disabled"`: Disable all animations
+- `true` or `undefined`: Use default animations
+- `object`: Custom animation configuration
+
+| prop             | type                    | default                                                              | description                                     |
+| ---------------- | ----------------------- | -------------------------------------------------------------------- | ----------------------------------------------- |
+| `state`          | `'disabled' \| boolean` | -                                                                    | Disable animations while customizing properties |
+| `entering.value` | `EntryOrExitLayoutType` | `FadeIn`<br/>`.duration(200)`<br/>`.easing(Easing.out(Easing.ease))` | Custom entering animation for content           |
+| `exiting.value`  | `EntryOrExitLayoutType` | `FadeOut`<br/>`.duration(200)`<br/>`.easing(Easing.in(Easing.ease))` | Custom exiting animation for content            |
+
+## Hooks
+
+### useAccordion
+
+Hook to access the accordion root context. Must be used within an `Accordion` component.
+
+```tsx
+import { useAccordion } from '@/heroui';
+
+const { value, onValueChange, selectionMode, isCollapsible, isDisabled } =
+  useAccordion();
+```
+
+#### Returns
+
+| property        | type                                                                  | description                                                                  |
+| --------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
+| `selectionMode` | `'single' \| 'multiple' \| undefined`                                 | Whether the accordion allows single or multiple expanded items               |
+| `value`         | `(string \| undefined) \| string[]`                                   | Currently expanded item(s) - string for single mode, array for multiple mode |
+| `onValueChange` | `(value: string \| undefined) => void \| ((value: string[]) => void)` | Callback function to update expanded items                                   |
+| `isCollapsible` | `boolean`                                                             | Whether expanded items can be collapsed                                      |
+| `isDisabled`    | `boolean \| undefined`                                                | Whether all accordion items are disabled                                     |
+
+### useAccordionItem
+
+Hook to access the accordion item context. Must be used within an `Accordion.Item` component.
+
+```tsx
+import { useAccordionItem } from '@/heroui';
+
+const { value, isExpanded, isDisabled, nativeID } = useAccordionItem();
+```
+
+#### Returns
+
+| property     | type                   | description                                          |
+| ------------ | ---------------------- | ---------------------------------------------------- |
+| `value`      | `string`               | Unique value identifier for this accordion item      |
+| `isExpanded` | `boolean`              | Whether the accordion item is currently expanded     |
+| `isDisabled` | `boolean \| undefined` | Whether this specific item is disabled               |
+| `nativeID`   | `string`               | Native ID used for accessibility and ARIA attributes |
+
+## Special Notes
+
+When using the Accordion component alongside other components in the same view, you should import and apply `AccordionLayoutTransition` to those components to ensure smooth and consistent layout animations across the entire screen.
+
+```jsx
+import { Accordion, AccordionLayoutTransition } from '@/heroui';
+import Animated from 'react-native-reanimated';
+
+<Animated.ScrollView layout={AccordionLayoutTransition}>
+  <Animated.View layout={AccordionLayoutTransition}>
+    {/* Other content */}
+  </Animated.View>
+
+  <Accordion>{/* Accordion items */}</Accordion>
+</Animated.ScrollView>;
+```
+
+This ensures that when the accordion expands or collapses, all components on the screen animate with the same timing and easing, creating a cohesive user experience.

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

@@ -0,0 +1,95 @@
+import { StyleSheet } from 'react-native';
+import { tv } from 'tailwind-variants';
+import { combineStyles } from '../../helpers/internal/utils';
+
+const root = tv({
+  slots: {
+    container: 'flex-col overflow-hidden',
+    separator: 'h-hairline bg-separator',
+  },
+  variants: {
+    variant: {
+      default: {
+        container: '',
+        separator: '',
+      },
+      surface: {
+        container:
+          'bg-surface rounded-3xl border border-surface shadow-surface',
+        separator: 'mx-3',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+const item = tv({
+  base: 'flex-col overflow-hidden',
+});
+
+const trigger = tv({
+  base: 'flex-row items-center justify-between py-4 px-3 gap-4 bg-transparent z-10',
+  variants: {
+    variant: {
+      default: '',
+      surface: 'px-5',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+/**
+ * Indicator style definition
+ *
+ * @note ANIMATED PROPERTIES (cannot be set via className):
+ * The following property is animated and cannot be overridden using Tailwind classes:
+ * - `transform` (specifically `rotate`) - Animated for expand/collapse rotation transitions
+ *
+ * To customize this property, use the `animation` prop on `Accordion.Indicator`:
+ * ```tsx
+ * <Accordion.Indicator
+ *   animation={{
+ *     rotation: { value: [0, -180], springConfig: { damping: 140, stiffness: 1000, mass: 4 } }
+ *   }}
+ * />
+ * ```
+ *
+ * To completely disable animated styles and apply your own via className or style prop,
+ * set `isAnimatedStyleActive={false}` on `Accordion.Indicator`.
+ */
+const indicator = tv({
+  base: 'items-center justify-center',
+});
+
+const content = tv({
+  base: 'px-3 pb-4 bg-transparent',
+  variants: {
+    variant: {
+      default: '',
+      surface: 'px-5',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+export const accordionClassNames = combineStyles({
+  root,
+  item,
+  trigger,
+  indicator,
+  content,
+});
+
+export const accordionStyleSheet = StyleSheet.create({
+  root: {
+    borderCurve: 'continuous',
+  },
+});
+
+export type RootSlots = keyof ReturnType<typeof root>;