@erquhart/heroui-native 1.0.0-beta.10.1

package/lib/module/components/accordion/accordion.md

@@ -0,0 +1,406 @@
+# Accordion
+
+A collapsible component that allows users to expand and collapse content sections with animated transitions.
+
+## Imports
+
+Note: Before importing this component, ensure you have completed the setup as per the [Quick Start guide](../../../README.md).
+
+```tsx
+import { Accordion } from 'heroui-native';
+```
+
+## 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 Dividers
+
+Hide the dividers between accordion items.
+
+```tsx
+<Accordion selectionMode="single" isDividerVisible={false}>
+  <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>
+```
+
+### 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-native';
+import { View } from 'react-native';
+
+<Accordion>
+  <Accordion.Item value="1">
+    <Accordion.Trigger asChild>
+      <PressableFeedback>
+        <View className="flex-row items-center flex-1 gap-3">
+          <Text>Item Title</Text>
+        </View>
+        <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-native';
+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>
+  );
+}
+```
+
+## 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.
+
+## 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                                   |
+| `isDividerVisible`      | `boolean`                                          | `true`      | Whether to display a divider at the bottom of each accordion item |
+| `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                              |
+| `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   |
+| `divider`   | `string` | Custom class name for the divider 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-native';
+
+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-native';
+
+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 Note
+
+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-native';
+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/module/components/accordion/accordion.styles.js

@@ -0,0 +1,90 @@
+"use strict";
+
+import { StyleSheet } from 'react-native';
+import { tv } from 'tailwind-variants';
+import { combineStyles } from "../../helpers/theme/utils/combine-styles.js";
+const root = tv({
+  slots: {
+    container: 'flex-col overflow-hidden',
+    divider: 'h-hairline bg-divider'
+  },
+  variants: {
+    variant: {
+      default: {
+        container: '',
+        divider: ''
+      },
+      surface: {
+        container: 'bg-surface border border-surface rounded-3xl',
+        divider: 'mx-3 bg-divider/75'
+      }
+    }
+  },
+  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 styleSheet = StyleSheet.create({
+  root: {
+    borderCurve: 'continuous'
+  }
+});
+const accordionStyles = combineStyles({
+  root,
+  item,
+  trigger,
+  indicator,
+  content
+});
+export default accordionStyles;
+//# sourceMappingURL=accordion.styles.js.map

package/lib/module/components/accordion/accordion.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","tv","combineStyles","root","slots","container","divider","variants","variant","default","surface","defaultVariants","item","base","trigger","indicator","content","styleSheet","create","borderCurve","accordionStyles"],"sourceRoot":"../../../../src","sources":["components/accordion/accordion.styles.ts"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,EAAE,QAAQ,mBAAmB;AACtC,SAASC,aAAa,QAAQ,6CAA0C;AAExE,MAAMC,IAAI,GAAGF,EAAE,CAAC;EACdG,KAAK,EAAE;IACLC,SAAS,EAAE,0BAA0B;IACrCC,OAAO,EAAE;EACX,CAAC;EACDC,QAAQ,EAAE;IACRC,OAAO,EAAE;MACPC,OAAO,EAAE;QACPJ,SAAS,EAAE,EAAE;QACbC,OAAO,EAAE;MACX,CAAC;MACDI,OAAO,EAAE;QACPL,SAAS,EAAE,8CAA8C;QACzDC,OAAO,EAAE;MACX;IACF;EACF,CAAC;EACDK,eAAe,EAAE;IACfH,OAAO,EAAE;EACX;AACF,CAAC,CAAC;AAEF,MAAMI,IAAI,GAAGX,EAAE,CAAC;EACdY,IAAI,EAAE;AACR,CAAC,CAAC;AAEF,MAAMC,OAAO,GAAGb,EAAE,CAAC;EACjBY,IAAI,EAAE,2EAA2E;EACjFN,QAAQ,EAAE;IACRC,OAAO,EAAE;MACPC,OAAO,EAAE,EAAE;MACXC,OAAO,EAAE;IACX;EACF,CAAC;EACDC,eAAe,EAAE;IACfH,OAAO,EAAE;EACX;AACF,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMO,SAAS,GAAGd,EAAE,CAAC;EACnBY,IAAI,EAAE;AACR,CAAC,CAAC;AAEF,MAAMG,OAAO,GAAGf,EAAE,CAAC;EACjBY,IAAI,EAAE,0BAA0B;EAChCN,QAAQ,EAAE;IACRC,OAAO,EAAE;MACPC,OAAO,EAAE,EAAE;MACXC,OAAO,EAAE;IACX;EACF,CAAC;EACDC,eAAe,EAAE;IACfH,OAAO,EAAE;EACX;AACF,CAAC,CAAC;AAEF,OAAO,MAAMS,UAAU,GAAGjB,UAAU,CAACkB,MAAM,CAAC;EAC1Cf,IAAI,EAAE;IACJgB,WAAW,EAAE;EACf;AACF,CAAC,CAAC;AAEF,MAAMC,eAAe,GAAGlB,aAAa,CAAC;EACpCC,IAAI;EACJS,IAAI;EACJE,OAAO;EACPC,SAAS;EACTC;AACF,CAAC,CAAC;AAGF,eAAeI,eAAe","ignoreList":[]}

package/lib/module/components/accordion/accordion.types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=accordion.types.js.map

package/lib/module/components/accordion/accordion.types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/accordion/accordion.types.ts"],"mappings":"","ignoreList":[]}

package/lib/module/components/accordion/chevron-down-icon.js

@@ -0,0 +1,24 @@
+"use strict";
+
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import { DISPLAY_NAME } from "./accordion.constants.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ChevronDownIcon = ({
+  size = 16,
+  color = 'currentColor'
+}) => {
+  return /*#__PURE__*/_jsx(Svg, {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: color,
+    children: /*#__PURE__*/_jsx(Path, {
+      fillRule: "evenodd",
+      d: "M4.455 8.205a1.125 1.125 0 0 1 1.59 0L12 14.16l5.955-5.955a1.125 1.125 0 1 1 1.59 1.59l-6.75 6.75a1.125 1.125 0 0 1-1.59 0l-6.75-6.75a1.125 1.125 0 0 1 0-1.59",
+      clipRule: "evenodd"
+    })
+  });
+};
+ChevronDownIcon.displayName = DISPLAY_NAME.CHEVRON_DOWN_ICON;
+//# sourceMappingURL=chevron-down-icon.js.map

package/lib/module/components/accordion/chevron-down-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Svg","Path","DISPLAY_NAME","jsx","_jsx","ChevronDownIcon","size","color","width","height","viewBox","fill","children","fillRule","d","clipRule","displayName","CHEVRON_DOWN_ICON"],"sourceRoot":"../../../../src","sources":["components/accordion/chevron-down-icon.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,GAAG,IAAIC,IAAI,QAAQ,kBAAkB;AAC5C,SAASC,YAAY,QAAQ,0BAAuB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAOrD,OAAO,MAAMC,eAA+C,GAAGA,CAAC;EAC9DC,IAAI,GAAG,EAAE;EACTC,KAAK,GAAG;AACV,CAAC,KAAK;EACJ,oBACEH,IAAA,CAACJ,GAAG;IAACQ,KAAK,EAAEF,IAAK;IAACG,MAAM,EAAEH,IAAK;IAACI,OAAO,EAAC,WAAW;IAACC,IAAI,EAAEJ,KAAM;IAAAK,QAAA,eAC9DR,IAAA,CAACH,IAAI;MACHY,QAAQ,EAAC,SAAS;MAClBC,CAAC,EAAC,gKAAgK;MAClKC,QAAQ,EAAC;IAAS,CACnB;EAAC,CACC,CAAC;AAEV,CAAC;AAEDV,eAAe,CAACW,WAAW,GAAGd,YAAY,CAACe,iBAAiB","ignoreList":[]}

package/lib/module/components/accordion/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export { default as Accordion, useAccordion, useAccordionItem } from "./accordion.js";
+export { ACCORDION_LAYOUT_TRANSITION as AccordionLayoutTransition } from "./accordion.constants.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/accordion/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["default","Accordion","useAccordion","useAccordionItem","ACCORDION_LAYOUT_TRANSITION","AccordionLayoutTransition"],"sourceRoot":"../../../../src","sources":["components/accordion/index.ts"],"mappings":";;AAAA,SACEA,OAAO,IAAIC,SAAS,EACpBC,YAAY,EACZC,gBAAgB,QACX,gBAAa;AACpB,SAASC,2BAA2B,IAAIC,yBAAyB,QAAQ,0BAAuB","ignoreList":[]}

package/lib/module/components/avatar/avatar.animation.js

@@ -0,0 +1,111 @@
+"use strict";
+
+import { Easing, FadeIn, useAnimatedStyle, withTiming } from 'react-native-reanimated';
+import { useAnimationSettings } from "../../helpers/contexts/animation-settings-context.js";
+import { useCombinedAnimationDisabledState } from "../../helpers/hooks/index.js";
+import { getAnimationState, getAnimationValueMergedConfig, getAnimationValueProperty, getIsAnimationDisabledValue } from "../../helpers/utils/animation.js";
+import * as AvatarPrimitives from "../../primitives/avatar/index.js";
+/**
+ * Animation hook for Avatar root component
+ * Handles root-level animation configuration and provides context for child components
+ */
+export function useAvatarRootAnimation(options) {
+  const {
+    animation
+  } = options;
+  const isAllAnimationsDisabled = useCombinedAnimationDisabledState(animation);
+  return {
+    isAllAnimationsDisabled
+  };
+}
+
+/**
+ * Animation hook for Avatar Image component
+ * Handles opacity animation for the avatar image based on loading status
+ */
+export function useAvatarImageAnimation(options) {
+  const {
+    animation
+  } = options;
+
+  // Read from global animation context (always available in compound parts)
+  const {
+    isAllAnimationsDisabled
+  } = useAnimationSettings();
+  const {
+    status
+  } = AvatarPrimitives.useRootContext();
+  const {
+    animationConfig,
+    isAnimationDisabled
+  } = getAnimationState(animation);
+  const isAnimationDisabledValue = getIsAnimationDisabledValue({
+    isAnimationDisabled,
+    isAllAnimationsDisabled
+  });
+
+  // Opacity animation
+  const opacityValue = getAnimationValueProperty({
+    animationValue: animationConfig?.opacity,
+    property: 'value',
+    defaultValue: [0, 1]
+  });
+  const opacityTimingConfig = getAnimationValueMergedConfig({
+    animationValue: animationConfig?.opacity,
+    property: 'timingConfig',
+    defaultValue: {
+      duration: 200,
+      easing: Easing.in(Easing.ease)
+    }
+  });
+  const rImageStyle = useAnimatedStyle(() => {
+    const isLoaded = status === 'loaded';
+    const targetOpacity = isLoaded ? opacityValue[1] : opacityValue[0];
+    if (isAnimationDisabledValue) {
+      return {
+        opacity: targetOpacity
+      };
+    }
+    return {
+      opacity: withTiming(targetOpacity, opacityTimingConfig)
+    };
+  });
+  return {
+    rImageStyle
+  };
+}
+
+/**
+ * Animation hook for Avatar Fallback component
+ * Handles entering animation for the avatar fallback
+ */
+export function useAvatarFallbackAnimation(options) {
+  const {
+    animation,
+    delayMs
+  } = options;
+
+  // Read from global animation context (always available in compound parts)
+  const {
+    isAllAnimationsDisabled
+  } = useAnimationSettings();
+  const {
+    animationConfig,
+    isAnimationDisabled
+  } = getAnimationState(animation);
+  const isAnimationDisabledValue = getIsAnimationDisabledValue({
+    isAnimationDisabled,
+    isAllAnimationsDisabled
+  });
+
+  // Entering animation
+  const enteringValue = getAnimationValueProperty({
+    animationValue: animationConfig?.entering,
+    property: 'value',
+    defaultValue: FadeIn.duration(200).easing(Easing.in(Easing.ease)).delay(delayMs ?? 0)
+  });
+  return {
+    entering: isAnimationDisabledValue ? undefined : enteringValue
+  };
+}
+//# sourceMappingURL=avatar.animation.js.map

package/lib/module/components/avatar/avatar.animation.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Easing","FadeIn","useAnimatedStyle","withTiming","useAnimationSettings","useCombinedAnimationDisabledState","getAnimationState","getAnimationValueMergedConfig","getAnimationValueProperty","getIsAnimationDisabledValue","AvatarPrimitives","useAvatarRootAnimation","options","animation","isAllAnimationsDisabled","useAvatarImageAnimation","status","useRootContext","animationConfig","isAnimationDisabled","isAnimationDisabledValue","opacityValue","animationValue","opacity","property","defaultValue","opacityTimingConfig","duration","easing","in","ease","rImageStyle","isLoaded","targetOpacity","useAvatarFallbackAnimation","delayMs","enteringValue","entering","delay","undefined"],"sourceRoot":"../../../../src","sources":["components/avatar/avatar.animation.ts"],"mappings":"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","ignoreList":[]}