@coze-arch/cli 0.0.10-alpha.11b7ea → 0.0.10-alpha.954690

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

@@ -1,437 +0,0 @@
-# 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

@@ -1,95 +0,0 @@
-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>;