@dryanovski/react-native-components 1.0.8 → 1.0.9

package/lib/module/components/Accordion/Accordion.js

@@ -0,0 +1,58 @@
+"use strict";
+
+import { forwardRef, useCallback, useMemo, useState } from 'react';
+import { View } from 'react-native';
+import { AccordionCtx } from "./AccordionContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Accordion = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    style,
+    singleExpand = true,
+    defaultExpandedIndices = [],
+    animation
+  } = props;
+  const [expandedIndices, setExpandedIndices] = useState(new Set(defaultExpandedIndices));
+  const toggleItem = useCallback(index => {
+    setExpandedIndices(prev => {
+      const newSet = new Set(prev);
+      if (singleExpand) {
+        // Single expand mode: only one item can be open at a time
+        if (newSet.has(index)) {
+          // If clicking the currently open item, close it
+          newSet.delete(index);
+        } else {
+          // Close all others and open this one
+          newSet.clear();
+          newSet.add(index);
+        }
+      } else {
+        // Multiple expand mode: toggle the clicked item
+        if (newSet.has(index)) {
+          newSet.delete(index);
+        } else {
+          newSet.add(index);
+        }
+      }
+      return newSet;
+    });
+  }, [singleExpand]);
+  const isItemExpanded = useCallback(index => expandedIndices.has(index), [expandedIndices]);
+  const contextValue = useMemo(() => ({
+    expandedIndices,
+    toggleItem,
+    isItemExpanded,
+    singleExpand,
+    animationConfig: animation
+  }), [expandedIndices, toggleItem, isItemExpanded, singleExpand, animation]);
+  return /*#__PURE__*/_jsx(AccordionCtx.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx(View, {
+      ref: ref,
+      style: style,
+      children: children
+    })
+  });
+});
+Accordion.displayName = 'Accordion';
+//# sourceMappingURL=Accordion.js.map

package/lib/module/components/Accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","useCallback","useMemo","useState","View","AccordionCtx","jsx","_jsx","Accordion","props","ref","children","style","singleExpand","defaultExpandedIndices","animation","expandedIndices","setExpandedIndices","Set","toggleItem","index","prev","newSet","has","delete","clear","add","isItemExpanded","contextValue","animationConfig","Provider","value","displayName"],"sourceRoot":"../../../../src","sources":["components/Accordion/Accordion.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAClE,SAASC,IAAI,QAAQ,cAAc;AAEnC,SAASC,YAAY,QAAoC,uBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAG9E,OAAO,MAAMC,SAAS,gBAAGR,UAAU,CAA0B,CAACS,KAAK,EAAEC,GAAG,KAAK;EAC3E,MAAM;IACJC,QAAQ;IACRC,KAAK;IACLC,YAAY,GAAG,IAAI;IACnBC,sBAAsB,GAAG,EAAE;IAC3BC;EACF,CAAC,GAAGN,KAAK;EAET,MAAM,CAACO,eAAe,EAAEC,kBAAkB,CAAC,GAAGd,QAAQ,CACpD,IAAIe,GAAG,CAACJ,sBAAsB,CAChC,CAAC;EAED,MAAMK,UAAU,GAAGlB,WAAW,CAC3BmB,KAAa,IAAK;IACjBH,kBAAkB,CAAEI,IAAI,IAAK;MAC3B,MAAMC,MAAM,GAAG,IAAIJ,GAAG,CAACG,IAAI,CAAC;MAE5B,IAAIR,YAAY,EAAE;QAChB;QACA,IAAIS,MAAM,CAACC,GAAG,CAACH,KAAK,CAAC,EAAE;UACrB;UACAE,MAAM,CAACE,MAAM,CAACJ,KAAK,CAAC;QACtB,CAAC,MAAM;UACL;UACAE,MAAM,CAACG,KAAK,CAAC,CAAC;UACdH,MAAM,CAACI,GAAG,CAACN,KAAK,CAAC;QACnB;MACF,CAAC,MAAM;QACL;QACA,IAAIE,MAAM,CAACC,GAAG,CAACH,KAAK,CAAC,EAAE;UACrBE,MAAM,CAACE,MAAM,CAACJ,KAAK,CAAC;QACtB,CAAC,MAAM;UACLE,MAAM,CAACI,GAAG,CAACN,KAAK,CAAC;QACnB;MACF;MAEA,OAAOE,MAAM;IACf,CAAC,CAAC;EACJ,CAAC,EACD,CAACT,YAAY,CACf,CAAC;EAED,MAAMc,cAAc,GAAG1B,WAAW,CAC/BmB,KAAa,IAAKJ,eAAe,CAACO,GAAG,CAACH,KAAK,CAAC,EAC7C,CAACJ,eAAe,CAClB,CAAC;EAED,MAAMY,YAAY,GAAG1B,OAAO,CAC1B,OAAO;IACLc,eAAe;IACfG,UAAU;IACVQ,cAAc;IACdd,YAAY;IACZgB,eAAe,EAAEd;EACnB,CAAC,CAAC,EACF,CAACC,eAAe,EAAEG,UAAU,EAAEQ,cAAc,EAAEd,YAAY,EAAEE,SAAS,CACvE,CAAC;EAED,oBACER,IAAA,CAACF,YAAY,CAACyB,QAAQ;IAACC,KAAK,EAAEH,YAAa;IAAAjB,QAAA,eACzCJ,IAAA,CAACH,IAAI;MAACM,GAAG,EAAEA,GAAI;MAACE,KAAK,EAAEA,KAAM;MAAAD,QAAA,EAC1BA;IAAQ,CACL;EAAC,CACc,CAAC;AAE5B,CAAC,CAAC;AAEFH,SAAS,CAACwB,WAAW,GAAG,WAAW","ignoreList":[]}

package/lib/module/components/Accordion/AccordionContext.js

@@ -0,0 +1,12 @@
+"use strict";
+
+import React from 'react';
+export const AccordionCtx = /*#__PURE__*/React.createContext(undefined);
+export const useAccordionContext = () => {
+  const context = React.useContext(AccordionCtx);
+  if (!context) {
+    throw new Error('AccordionItem must be used within an Accordion component');
+  }
+  return context;
+};
+//# sourceMappingURL=AccordionContext.js.map

package/lib/module/components/Accordion/AccordionContext.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","AccordionCtx","createContext","undefined","useAccordionContext","context","useContext","Error"],"sourceRoot":"../../../../src","sources":["components/Accordion/AccordionContext.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAWzB,OAAO,MAAMC,YAAY,gBAAGD,KAAK,CAACE,aAAa,CAE7CC,SAAS,CAAC;AAEZ,OAAO,MAAMC,mBAAmB,GAAGA,CAAA,KAAM;EACvC,MAAMC,OAAO,GAAGL,KAAK,CAACM,UAAU,CAACL,YAAY,CAAC;EAC9C,IAAI,CAACI,OAAO,EAAE;IACZ,MAAM,IAAIE,KAAK,CAAC,0DAA0D,CAAC;EAC7E;EACA,OAAOF,OAAO;AAChB,CAAC","ignoreList":[]}

package/lib/module/components/Accordion/AccordionItem.js

@@ -0,0 +1,50 @@
+"use strict";
+
+import { forwardRef, useCallback, useMemo } from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+import { Collapse } from "../Collapse/index.js";
+import { useAccordionContext } from "./AccordionContext.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export let itemIndexCounter = 0;
+export const AccordionItem = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    title,
+    onPress,
+    isExpanded: externalIsExpanded,
+    style
+  } = props;
+  const {
+    toggleItem,
+    isItemExpanded,
+    animationConfig
+  } = useAccordionContext();
+
+  // Assign a unique index to this item
+  const itemIndex = useMemo(() => itemIndexCounter++, []);
+
+  // Use external isExpanded if provided, otherwise use context state
+  const isExpanded = externalIsExpanded !== undefined ? externalIsExpanded : isItemExpanded(itemIndex);
+  const handlePress = useCallback(event => {
+    if (onPress) {
+      onPress(event);
+    }
+    toggleItem(itemIndex);
+  }, [onPress, toggleItem, itemIndex]);
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    style: style,
+    children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+      onPress: handlePress,
+      children: /*#__PURE__*/_jsx(Text, {
+        children: title
+      })
+    }), /*#__PURE__*/_jsx(Collapse, {
+      isExpanded: isExpanded,
+      animationConfig: animationConfig,
+      children: children
+    })]
+  });
+});
+AccordionItem.displayName = 'AccordionItem';
+//# sourceMappingURL=AccordionItem.js.map

package/lib/module/components/Accordion/AccordionItem.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","useCallback","useMemo","Text","TouchableOpacity","View","Collapse","useAccordionContext","jsx","_jsx","jsxs","_jsxs","itemIndexCounter","AccordionItem","props","ref","children","title","onPress","isExpanded","externalIsExpanded","style","toggleItem","isItemExpanded","animationConfig","itemIndex","undefined","handlePress","event","displayName"],"sourceRoot":"../../../../src","sources":["components/Accordion/AccordionItem.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACxD,SACEC,IAAI,EACJC,gBAAgB,EAChBC,IAAI,QAEC,cAAc;AAErB,SAASC,QAAQ,QAAQ,sBAAa;AACtC,SAASC,mBAAmB,QAAQ,uBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGzD,OAAO,IAAIC,gBAAgB,GAAG,CAAC;AAE/B,OAAO,MAAMC,aAAa,gBAAGb,UAAU,CACrC,CAACc,KAAK,EAAEC,GAAG,KAAK;EACd,MAAM;IACJC,QAAQ;IACRC,KAAK;IACLC,OAAO;IACPC,UAAU,EAAEC,kBAAkB;IAC9BC;EACF,CAAC,GAAGP,KAAK;EAET,MAAM;IAAEQ,UAAU;IAAEC,cAAc;IAAEC;EAAgB,CAAC,GACnDjB,mBAAmB,CAAC,CAAC;;EAEvB;EACA,MAAMkB,SAAS,GAAGvB,OAAO,CAAC,MAAMU,gBAAgB,EAAE,EAAE,EAAE,CAAC;;EAEvD;EACA,MAAMO,UAAU,GACdC,kBAAkB,KAAKM,SAAS,GAC5BN,kBAAkB,GAClBG,cAAc,CAACE,SAAS,CAAC;EAE/B,MAAME,WAAW,GAAG1B,WAAW,CAC5B2B,KAA4B,IAAK;IAChC,IAAIV,OAAO,EAAE;MACXA,OAAO,CAACU,KAAK,CAAC;IAChB;IACAN,UAAU,CAACG,SAAS,CAAC;EACvB,CAAC,EACD,CAACP,OAAO,EAAEI,UAAU,EAAEG,SAAS,CACjC,CAAC;EAED,oBACEd,KAAA,CAACN,IAAI;IAACU,GAAG,EAAEA,GAAI;IAACM,KAAK,EAAEA,KAAM;IAAAL,QAAA,gBAC3BP,IAAA,CAACL,gBAAgB;MAACc,OAAO,EAAES,WAAY;MAAAX,QAAA,eACrCP,IAAA,CAACN,IAAI;QAAAa,QAAA,EAAEC;MAAK,CAAO;IAAC,CACJ,CAAC,eACnBR,IAAA,CAACH,QAAQ;MAACa,UAAU,EAAEA,UAAW;MAACK,eAAe,EAAEA,eAAgB;MAAAR,QAAA,EAChEA;IAAQ,CACD,CAAC;EAAA,CACP,CAAC;AAEX,CACF,CAAC;AAEDH,aAAa,CAACgB,WAAW,GAAG,eAAe","ignoreList":[]}

package/lib/module/components/Accordion/style.js

@@ -0,0 +1,11 @@
+"use strict";
+
+import { StyleSheet } from 'react-native';
+export const accordionStyles = StyleSheet.create({
+  measurementView: {
+    position: 'absolute',
+    opacity: 0,
+    zIndex: -1
+  }
+});
+//# sourceMappingURL=style.js.map

package/lib/module/components/Accordion/style.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","accordionStyles","create","measurementView","position","opacity","zIndex"],"sourceRoot":"../../../../src","sources":["components/Accordion/style.ts"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,cAAc;AAEzC,OAAO,MAAMC,eAAe,GAAGD,UAAU,CAACE,MAAM,CAAC;EAC/CC,eAAe,EAAE;IACfC,QAAQ,EAAE,UAAU;IACpBC,OAAO,EAAE,CAAC;IACVC,MAAM,EAAE,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/Accordion/type.js

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

package/lib/module/components/Accordion/type.js.map

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

package/lib/module/components/Collapse/Collapse.js

@@ -0,0 +1,114 @@
+"use strict";
+
+import { useCallback, useEffect, useState } from 'react';
+import { View } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DEFAULT_ANIMATION = {
+  type: 'timing',
+  duration: 100
+};
+const DEFAULT_SPRING = {
+  damping: 20,
+  stiffness: 300
+};
+
+/**
+ * Collapse - A reusable component for smooth expand/collapse animations
+ *
+ * @example
+ * ```tsx
+ * <Collapse isExpanded={isOpen}>
+ *   <Text>Your content here</Text>
+ * </Collapse>
+ * ```
+ */
+export const Collapse = ({
+  isExpanded,
+  children,
+  animationConfig,
+  style,
+  contentStyle,
+  onMeasured
+}) => {
+  const [contentHeight, setContentHeight] = useState(null);
+  const [shouldRender, setShouldRender] = useState(isExpanded);
+  const heightValue = useSharedValue(isExpanded ? 'auto' : 0);
+  const opacityValue = useSharedValue(isExpanded ? 1 : 0);
+  const config = animationConfig || DEFAULT_ANIMATION;
+  const isSpring = config.type === 'spring';
+  const duration = config.duration || 100;
+
+  // Measure content height
+  const onLayout = useCallback(event => {
+    const {
+      height
+    } = event.nativeEvent.layout;
+    if (height > 0 && contentHeight !== height) {
+      setContentHeight(height);
+      onMeasured?.(height);
+    }
+  }, [contentHeight, onMeasured]);
+
+  // Animate on expand/collapse
+  useEffect(() => {
+    // Show component when expanding
+    if (isExpanded) {
+      setShouldRender(true);
+    }
+
+    // Wait for measurement before animating
+    if (!contentHeight) {
+      heightValue.value = isExpanded ? 'auto' : 0;
+      opacityValue.value = isExpanded ? 1 : 0;
+      if (!isExpanded) setShouldRender(false);
+      return;
+    }
+
+    // Run animation
+    const targetHeight = isExpanded ? contentHeight : 0;
+    const targetOpacity = isExpanded ? 1 : 0;
+    if (isSpring) {
+      const springConfig = config.springConfig || DEFAULT_SPRING;
+      heightValue.value = withSpring(targetHeight, springConfig);
+      opacityValue.value = withSpring(targetOpacity, springConfig);
+
+      // Remove from DOM after collapse animation
+      if (!isExpanded) {
+        const stiffness = springConfig.stiffness || 300;
+        const damping = springConfig.damping || 20;
+        const settleTime = 1000 / stiffness * damping * 10;
+        setTimeout(() => setShouldRender(false), settleTime);
+      }
+    } else {
+      const timingConfig = 'timingConfig' in config && config.timingConfig ? config.timingConfig : {
+        duration
+      };
+      heightValue.value = withTiming(targetHeight, timingConfig);
+      opacityValue.value = withTiming(targetOpacity, timingConfig);
+
+      // Remove from DOM after collapse animation
+      if (!isExpanded) {
+        setTimeout(() => setShouldRender(false), duration);
+      }
+    }
+  }, [isExpanded, contentHeight, isSpring, duration, config, heightValue, opacityValue]);
+  const animatedStyle = useAnimatedStyle(() => ({
+    height: heightValue.value,
+    opacity: opacityValue.value,
+    overflow: 'hidden'
+  }));
+  if (!shouldRender) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [animatedStyle, style],
+    children: /*#__PURE__*/_jsx(View, {
+      onLayout: onLayout,
+      style: contentStyle,
+      children: children
+    })
+  });
+};
+Collapse.displayName = 'Collapse';
+//# sourceMappingURL=Collapse.js.map

package/lib/module/components/Collapse/Collapse.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useEffect","useState","View","Animated","useAnimatedStyle","useSharedValue","withSpring","withTiming","jsx","_jsx","DEFAULT_ANIMATION","type","duration","DEFAULT_SPRING","damping","stiffness","Collapse","isExpanded","children","animationConfig","style","contentStyle","onMeasured","contentHeight","setContentHeight","shouldRender","setShouldRender","heightValue","opacityValue","config","isSpring","onLayout","event","height","nativeEvent","layout","value","targetHeight","targetOpacity","springConfig","settleTime","setTimeout","timingConfig","animatedStyle","opacity","overflow","displayName"],"sourceRoot":"../../../../src","sources":["components/Collapse/Collapse.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,5 @@
+"use strict";
+
+export * from "./Collapse.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/Collapse/index.ts"],"mappings":";;AAAA,cAAc,eAAY;AAC1B,cAAc,YAAS","ignoreList":[]}

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

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

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

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

package/lib/module/index.js

@@ -1,6 +1,9 @@
 "use strict";
 
 // Export Components
+export * from "./components/Accordion/Accordion.js";
+export * from "./components/Accordion/AccordionItem.js";
+export * from "./components/Collapse/index.js";
 export * from "./components/Button/Button.js";
 export * from "./components/Button/DangerButton.js";
 export * from "./components/Button/GhostButton.js";
@@ -13,6 +16,8 @@ export * from "./components/Layout/VStack.js";
 export * from "./components/Surface/Surface.js";
 
 // types
+export * from "./components/Accordion/type.js";
+export * from "./components/Collapse/types.js";
 export * from "./components/Button/types.js";
 export * from "./components/Card/types.js";
 export * from "./components/Divider/types.js";

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA;AACA,cAAc,+BAA4B;AAC1C,cAAc,qCAAkC;AAChD,cAAc,oCAAiC;AAC/C,cAAc,sCAAmC;AACjD,cAAc,wCAAqC;AACnD,cAAc,2BAAwB;AACtC,cAAc,iCAA8B;AAC5C,cAAc,+BAA4B;AAC1C,cAAc,+BAA4B;AAC1C,cAAc,iCAA8B;;AAE5C;AACA,cAAc,8BAA2B;AACzC,cAAc,4BAAyB;AACvC,cAAc,+BAA4B;AAC1C,cAAc,qCAAkC;AAChD,cAAc,+BAA4B;AAC1C,cAAc,0BAAuB;;AAErC;AACA,cAAc,8BAA2B","ignoreList":[]}
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA;AACA,cAAc,qCAAkC;AAChD,cAAc,yCAAsC;AACpD,cAAc,gCAAuB;AACrC,cAAc,+BAA4B;AAC1C,cAAc,qCAAkC;AAChD,cAAc,oCAAiC;AAC/C,cAAc,sCAAmC;AACjD,cAAc,wCAAqC;AACnD,cAAc,2BAAwB;AACtC,cAAc,iCAA8B;AAC5C,cAAc,+BAA4B;AAC1C,cAAc,+BAA4B;AAC1C,cAAc,iCAA8B;;AAE5C;AACA,cAAc,gCAA6B;AAC3C,cAAc,gCAA6B;AAC3C,cAAc,8BAA2B;AACzC,cAAc,4BAAyB;AACvC,cAAc,+BAA4B;AAC1C,cAAc,qCAAkC;AAChD,cAAc,+BAA4B;AAC1C,cAAc,0BAAuB;;AAErC;AACA,cAAc,8BAA2B","ignoreList":[]}

package/lib/typescript/src/components/Accordion/Accordion.d.ts

@@ -0,0 +1,4 @@
+import { View } from 'react-native';
+import type { AccordionProps } from './type';
+export declare const Accordion: import("react").ForwardRefExoticComponent<AccordionProps & import("react").RefAttributes<View>>;
+//# sourceMappingURL=Accordion.d.ts.map

package/lib/typescript/src/components/Accordion/Accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAE7C,eAAO,MAAM,SAAS,iGAkEpB,CAAC"}

package/lib/typescript/src/components/Accordion/AccordionContext.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { AnimationConfig } from '../Collapse/types';
+export type AccordionContextValue = {
+    expandedIndices: Set<number>;
+    toggleItem: (index: number) => void;
+    isItemExpanded: (index: number) => boolean;
+    singleExpand: boolean;
+    animationConfig?: AnimationConfig;
+};
+export declare const AccordionCtx: React.Context<AccordionContextValue | undefined>;
+export declare const useAccordionContext: () => AccordionContextValue;
+//# sourceMappingURL=AccordionContext.d.ts.map

package/lib/typescript/src/components/Accordion/AccordionContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionContext.d.ts","sourceRoot":"","sources":["../../../../../src/components/Accordion/AccordionContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzD,MAAM,MAAM,qBAAqB,GAAG;IAClC,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAC3C,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,eAAe,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,YAAY,kDAEb,CAAC;AAEb,eAAO,MAAM,mBAAmB,6BAM/B,CAAC"}

package/lib/typescript/src/components/Accordion/AccordionItem.d.ts

@@ -0,0 +1,5 @@
+import { View } from 'react-native';
+import type { AccordionItemProps } from './type';
+export declare let itemIndexCounter: number;
+export declare const AccordionItem: import("react").ForwardRefExoticComponent<AccordionItemProps & import("react").RefAttributes<View>>;
+//# sourceMappingURL=AccordionItem.d.ts.map

package/lib/typescript/src/components/Accordion/AccordionItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/Accordion/AccordionItem.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,IAAI,EAEL,MAAM,cAAc,CAAC;AAItB,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAEjD,eAAO,IAAI,gBAAgB,QAAI,CAAC;AAEhC,eAAO,MAAM,aAAa,qGA2CzB,CAAC"}

package/lib/typescript/src/components/Accordion/style.d.ts

@@ -0,0 +1,8 @@
+export declare const accordionStyles: {
+    measurementView: {
+        position: "absolute";
+        opacity: number;
+        zIndex: number;
+    };
+};
+//# sourceMappingURL=style.d.ts.map

package/lib/typescript/src/components/Accordion/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../../src/components/Accordion/style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe;;;;;;CAM1B,CAAC"}

package/lib/typescript/src/components/Accordion/type.d.ts

@@ -0,0 +1,56 @@
+import type { StyleProp, TouchableOpacityProps, ViewStyle } from 'react-native';
+import type { AnimationConfig } from '../Collapse/types';
+export type AccordionProps = {
+    /**
+     * Style for the accordion component.
+     * Optional.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Content of the accordion (AccordionItems).
+     */
+    children?: React.ReactNode;
+    /**
+     * Whether only one item can be expanded at a time.
+     * If true, expanding one item will collapse all others.
+     * If false, multiple items can be expanded simultaneously.
+     * @default true
+     */
+    singleExpand?: boolean;
+    /**
+     * Initially expanded item indices.
+     * Optional.
+     */
+    defaultExpandedIndices?: number[];
+    /**
+     * Animation configuration for expanding/collapsing items.
+     * @default { type: 'timing', duration: 100 }
+     */
+    animation?: AnimationConfig;
+};
+export type AccordionItemProps = {
+    /**
+     * Style for the accordion item component.
+     * Optional.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Content of the accordion item.
+     */
+    children?: React.ReactNode;
+    /**
+     * Title of the accordion item.
+     */
+    title: string;
+    /**
+     * Function to be called when the accordion item is pressed.
+     */
+    onPress?: TouchableOpacityProps['onPress'];
+    /**
+     * Whether the accordion item is expanded.
+     * This is controlled internally by the Accordion context.
+     * Optional - for external control.
+     */
+    isExpanded?: boolean;
+};
+//# sourceMappingURL=type.d.ts.map

package/lib/typescript/src/components/Accordion/type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../../../src/components/Accordion/type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAChF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzD,MAAM,MAAM,cAAc,GAAG;IAC3B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,MAAM,EAAE,CAAC;IAElC;;;OAGG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,OAAO,CAAC,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAC;IAE3C;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC"}

package/lib/typescript/src/components/Collapse/Collapse.d.ts

@@ -0,0 +1,14 @@
+import { type FC } from 'react';
+import type { CollapseProps } from './types';
+/**
+ * Collapse - A reusable component for smooth expand/collapse animations
+ *
+ * @example
+ * ```tsx
+ * <Collapse isExpanded={isOpen}>
+ *   <Text>Your content here</Text>
+ * </Collapse>
+ * ```
+ */
+export declare const Collapse: FC<CollapseProps>;
+//# sourceMappingURL=Collapse.d.ts.map

package/lib/typescript/src/components/Collapse/Collapse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapse.d.ts","sourceRoot":"","sources":["../../../../../src/components/Collapse/Collapse.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoC,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAQlE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAK7C;;;;;;;;;GASG;AACH,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAoGtC,CAAC"}

package/lib/typescript/src/components/Collapse/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Collapse';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/Collapse/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Collapse/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC"}

package/lib/typescript/src/components/Collapse/types.d.ts

@@ -0,0 +1,51 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { WithSpringConfig, WithTimingConfig } from 'react-native-reanimated';
+export type AnimationType = 'timing' | 'spring';
+export type AnimationConfig = {
+    /**
+     * Type of animation to use.
+     * @default 'timing'
+     */
+    type?: AnimationType;
+    /**
+     * Duration of the animation in milliseconds (for timing animation).
+     * @default 100
+     */
+    duration?: number;
+    /**
+     * Timing animation configuration.
+     */
+    timingConfig?: WithTimingConfig;
+    /**
+     * Spring animation configuration.
+     */
+    springConfig?: WithSpringConfig;
+};
+export type CollapseProps = {
+    /**
+     * Whether the content is expanded or collapsed.
+     */
+    isExpanded: boolean;
+    /**
+     * Content to animate.
+     */
+    children: React.ReactNode;
+    /**
+     * Animation configuration.
+     * @default { type: 'timing', duration: 100 }
+     */
+    animationConfig?: AnimationConfig;
+    /**
+     * Style for the animated container.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Style for the content wrapper.
+     */
+    contentStyle?: StyleProp<ViewStyle>;
+    /**
+     * Callback when measurement is complete.
+     */
+    onMeasured?: (height: number) => void;
+};
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/components/Collapse/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Collapse/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAElF,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEhD,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAEhC;;OAEG;IACH,YAAY,CAAC,EAAE,gBAAgB,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;OAGG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;IAElC;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAEpC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC"}

package/lib/typescript/src/index.d.ts

@@ -1,3 +1,6 @@
+export * from './components/Accordion/Accordion';
+export * from './components/Accordion/AccordionItem';
+export * from './components/Collapse';
 export * from './components/Button/Button';
 export * from './components/Button/DangerButton';
 export * from './components/Button/GhostButton';
@@ -8,6 +11,8 @@ export * from './components/Divider/Divider';
 export * from './components/Layout/HStack';
 export * from './components/Layout/VStack';
 export * from './components/Surface/Surface';
+export * from './components/Accordion/type';
+export * from './components/Collapse/types';
 export * from './components/Button/types';
 export * from './components/Card/types';
 export * from './components/Divider/types';

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AACA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,8BAA8B,CAAC;AAG7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AAGtC,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AACA,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,8BAA8B,CAAC;AAG7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AAGtC,cAAc,2BAA2B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dryanovski/react-native-components",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Collection of reusable React Native components for building mobile applications.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,75 @@
+import { forwardRef, useCallback, useMemo, useState } from 'react';
+import { View } from 'react-native';
+import type { ViewRef } from '../../types/general.types';
+import { AccordionCtx, type AccordionContextValue } from './AccordionContext';
+import type { AccordionProps } from './type';
+
+export const Accordion = forwardRef<ViewRef, AccordionProps>((props, ref) => {
+  const {
+    children,
+    style,
+    singleExpand = true,
+    defaultExpandedIndices = [],
+    animation,
+  } = props;
+
+  const [expandedIndices, setExpandedIndices] = useState<Set<number>>(
+    new Set(defaultExpandedIndices)
+  );
+
+  const toggleItem = useCallback(
+    (index: number) => {
+      setExpandedIndices((prev) => {
+        const newSet = new Set(prev);
+
+        if (singleExpand) {
+          // Single expand mode: only one item can be open at a time
+          if (newSet.has(index)) {
+            // If clicking the currently open item, close it
+            newSet.delete(index);
+          } else {
+            // Close all others and open this one
+            newSet.clear();
+            newSet.add(index);
+          }
+        } else {
+          // Multiple expand mode: toggle the clicked item
+          if (newSet.has(index)) {
+            newSet.delete(index);
+          } else {
+            newSet.add(index);
+          }
+        }
+
+        return newSet;
+      });
+    },
+    [singleExpand]
+  );
+
+  const isItemExpanded = useCallback(
+    (index: number) => expandedIndices.has(index),
+    [expandedIndices]
+  );
+
+  const contextValue = useMemo<AccordionContextValue>(
+    () => ({
+      expandedIndices,
+      toggleItem,
+      isItemExpanded,
+      singleExpand,
+      animationConfig: animation,
+    }),
+    [expandedIndices, toggleItem, isItemExpanded, singleExpand, animation]
+  );
+
+  return (
+    <AccordionCtx.Provider value={contextValue}>
+      <View ref={ref} style={style}>
+        {children}
+      </View>
+    </AccordionCtx.Provider>
+  );
+});
+
+Accordion.displayName = 'Accordion';

package/src/components/Accordion/AccordionContext.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { AnimationConfig } from '../Collapse/types';
+
+export type AccordionContextValue = {
+  expandedIndices: Set<number>;
+  toggleItem: (index: number) => void;
+  isItemExpanded: (index: number) => boolean;
+  singleExpand: boolean;
+  animationConfig?: AnimationConfig;
+};
+
+export const AccordionCtx = React.createContext<
+  AccordionContextValue | undefined
+>(undefined);
+
+export const useAccordionContext = () => {
+  const context = React.useContext(AccordionCtx);
+  if (!context) {
+    throw new Error('AccordionItem must be used within an Accordion component');
+  }
+  return context;
+};

package/src/components/Accordion/AccordionItem.tsx

@@ -0,0 +1,60 @@
+import { forwardRef, useCallback, useMemo } from 'react';
+import {
+  Text,
+  TouchableOpacity,
+  View,
+  type GestureResponderEvent,
+} from 'react-native';
+import type { ViewRef } from '../../types/general.types';
+import { Collapse } from '../Collapse';
+import { useAccordionContext } from './AccordionContext';
+import type { AccordionItemProps } from './type';
+
+export let itemIndexCounter = 0;
+
+export const AccordionItem = forwardRef<ViewRef, AccordionItemProps>(
+  (props, ref) => {
+    const {
+      children,
+      title,
+      onPress,
+      isExpanded: externalIsExpanded,
+      style,
+    } = props;
+
+    const { toggleItem, isItemExpanded, animationConfig } =
+      useAccordionContext();
+
+    // Assign a unique index to this item
+    const itemIndex = useMemo(() => itemIndexCounter++, []);
+
+    // Use external isExpanded if provided, otherwise use context state
+    const isExpanded =
+      externalIsExpanded !== undefined
+        ? externalIsExpanded
+        : isItemExpanded(itemIndex);
+
+    const handlePress = useCallback(
+      (event: GestureResponderEvent) => {
+        if (onPress) {
+          onPress(event);
+        }
+        toggleItem(itemIndex);
+      },
+      [onPress, toggleItem, itemIndex]
+    );
+
+    return (
+      <View ref={ref} style={style}>
+        <TouchableOpacity onPress={handlePress}>
+          <Text>{title}</Text>
+        </TouchableOpacity>
+        <Collapse isExpanded={isExpanded} animationConfig={animationConfig}>
+          {children}
+        </Collapse>
+      </View>
+    );
+  }
+);
+
+AccordionItem.displayName = 'AccordionItem';

package/src/components/Accordion/style.ts

@@ -0,0 +1,10 @@
+import { StyleSheet } from 'react-native';
+
+export const accordionStyles = StyleSheet.create({
+  measurementView: {
+    position: 'absolute',
+    opacity: 0,
+    zIndex: -1,
+  },
+});
+

package/src/components/Accordion/type.ts

@@ -0,0 +1,65 @@
+import type { StyleProp, TouchableOpacityProps, ViewStyle } from 'react-native';
+import type { AnimationConfig } from '../Collapse/types';
+
+export type AccordionProps = {
+  /**
+   * Style for the accordion component.
+   * Optional.
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * Content of the accordion (AccordionItems).
+   */
+  children?: React.ReactNode;
+
+  /**
+   * Whether only one item can be expanded at a time.
+   * If true, expanding one item will collapse all others.
+   * If false, multiple items can be expanded simultaneously.
+   * @default true
+   */
+  singleExpand?: boolean;
+
+  /**
+   * Initially expanded item indices.
+   * Optional.
+   */
+  defaultExpandedIndices?: number[];
+
+  /**
+   * Animation configuration for expanding/collapsing items.
+   * @default { type: 'timing', duration: 100 }
+   */
+  animation?: AnimationConfig;
+};
+
+export type AccordionItemProps = {
+  /**
+   * Style for the accordion item component.
+   * Optional.
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * Content of the accordion item.
+   */
+  children?: React.ReactNode;
+
+  /**
+   * Title of the accordion item.
+   */
+  title: string;
+
+  /**
+   * Function to be called when the accordion item is pressed.
+   */
+  onPress?: TouchableOpacityProps['onPress'];
+
+  /**
+   * Whether the accordion item is expanded.
+   * This is controlled internally by the Accordion context.
+   * Optional - for external control.
+   */
+  isExpanded?: boolean;
+};

package/src/components/Collapse/Collapse.tsx

@@ -0,0 +1,126 @@
+import { useCallback, useEffect, useState, type FC } from 'react';
+import { View, type LayoutChangeEvent } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+import type { CollapseProps } from './types';
+
+const DEFAULT_ANIMATION = { type: 'timing' as const, duration: 100 };
+const DEFAULT_SPRING = { damping: 20, stiffness: 300 };
+
+/**
+ * Collapse - A reusable component for smooth expand/collapse animations
+ *
+ * @example
+ * ```tsx
+ * <Collapse isExpanded={isOpen}>
+ *   <Text>Your content here</Text>
+ * </Collapse>
+ * ```
+ */
+export const Collapse: FC<CollapseProps> = ({
+  isExpanded,
+  children,
+  animationConfig,
+  style,
+  contentStyle,
+  onMeasured,
+}) => {
+  const [contentHeight, setContentHeight] = useState<number | null>(null);
+  const [shouldRender, setShouldRender] = useState(isExpanded);
+  const heightValue = useSharedValue<number | 'auto'>(isExpanded ? 'auto' : 0);
+  const opacityValue = useSharedValue(isExpanded ? 1 : 0);
+
+  const config = animationConfig || DEFAULT_ANIMATION;
+  const isSpring = config.type === 'spring';
+  const duration = config.duration || 100;
+
+  // Measure content height
+  const onLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      const { height } = event.nativeEvent.layout;
+      if (height > 0 && contentHeight !== height) {
+        setContentHeight(height);
+        onMeasured?.(height);
+      }
+    },
+    [contentHeight, onMeasured]
+  );
+
+  // Animate on expand/collapse
+  useEffect(() => {
+    // Show component when expanding
+    if (isExpanded) {
+      setShouldRender(true);
+    }
+
+    // Wait for measurement before animating
+    if (!contentHeight) {
+      heightValue.value = isExpanded ? 'auto' : 0;
+      opacityValue.value = isExpanded ? 1 : 0;
+      if (!isExpanded) setShouldRender(false);
+      return;
+    }
+
+    // Run animation
+    const targetHeight = isExpanded ? contentHeight : 0;
+    const targetOpacity = isExpanded ? 1 : 0;
+
+    if (isSpring) {
+      const springConfig = config.springConfig || DEFAULT_SPRING;
+      heightValue.value = withSpring(targetHeight, springConfig);
+      opacityValue.value = withSpring(targetOpacity, springConfig);
+
+      // Remove from DOM after collapse animation
+      if (!isExpanded) {
+        const stiffness = springConfig.stiffness || 300;
+        const damping = springConfig.damping || 20;
+        const settleTime = (1000 / stiffness) * damping * 10;
+        setTimeout(() => setShouldRender(false), settleTime);
+      }
+    } else {
+      const timingConfig =
+        'timingConfig' in config && config.timingConfig
+          ? config.timingConfig
+          : { duration };
+      heightValue.value = withTiming(targetHeight, timingConfig);
+      opacityValue.value = withTiming(targetOpacity, timingConfig);
+
+      // Remove from DOM after collapse animation
+      if (!isExpanded) {
+        setTimeout(() => setShouldRender(false), duration);
+      }
+    }
+  }, [
+    isExpanded,
+    contentHeight,
+    isSpring,
+    duration,
+    config,
+    heightValue,
+    opacityValue,
+  ]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    height: heightValue.value,
+    opacity: opacityValue.value,
+    overflow: 'hidden',
+  }));
+
+  if (!shouldRender) {
+    return null;
+  }
+
+  return (
+    <Animated.View style={[animatedStyle, style]}>
+      <View onLayout={onLayout} style={contentStyle}>
+        {children}
+      </View>
+    </Animated.View>
+  );
+};
+
+Collapse.displayName = 'Collapse';

package/src/components/Collapse/index.ts

@@ -0,0 +1,3 @@
+export * from './Collapse';
+export * from './types';
+

package/src/components/Collapse/types.ts

@@ -0,0 +1,62 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { WithSpringConfig, WithTimingConfig } from 'react-native-reanimated';
+
+export type AnimationType = 'timing' | 'spring';
+
+export type AnimationConfig = {
+  /**
+   * Type of animation to use.
+   * @default 'timing'
+   */
+  type?: AnimationType;
+
+  /**
+   * Duration of the animation in milliseconds (for timing animation).
+   * @default 100
+   */
+  duration?: number;
+
+  /**
+   * Timing animation configuration.
+   */
+  timingConfig?: WithTimingConfig;
+
+  /**
+   * Spring animation configuration.
+   */
+  springConfig?: WithSpringConfig;
+};
+
+export type CollapseProps = {
+  /**
+   * Whether the content is expanded or collapsed.
+   */
+  isExpanded: boolean;
+
+  /**
+   * Content to animate.
+   */
+  children: React.ReactNode;
+
+  /**
+   * Animation configuration.
+   * @default { type: 'timing', duration: 100 }
+   */
+  animationConfig?: AnimationConfig;
+
+  /**
+   * Style for the animated container.
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * Style for the content wrapper.
+   */
+  contentStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * Callback when measurement is complete.
+   */
+  onMeasured?: (height: number) => void;
+};
+

package/src/index.tsx

@@ -1,4 +1,7 @@
 // Export Components
+export * from './components/Accordion/Accordion';
+export * from './components/Accordion/AccordionItem';
+export * from './components/Collapse';
 export * from './components/Button/Button';
 export * from './components/Button/DangerButton';
 export * from './components/Button/GhostButton';
@@ -11,6 +14,8 @@ export * from './components/Layout/VStack';
 export * from './components/Surface/Surface';
 
 // types
+export * from './components/Accordion/type';
+export * from './components/Collapse/types';
 export * from './components/Button/types';
 export * from './components/Card/types';
 export * from './components/Divider/types';