@dryanovski/react-native-components 1.0.7 → 1.0.9

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAGtD,OAAO,KAAK,EACV,eAAe,EAIhB,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAExD;;;GAGG;AACH,eAAO,MAAM,MAAM,yHAoCjB,CAAC;AAIH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,eAAe,EAIhB,MAAM,SAAS,CAAC;AAEjB;;;GAGG;AACH,eAAO,MAAM,MAAM,yHAoCjB,CAAC;AAIH,eAAe,MAAM,CAAC"}

package/lib/typescript/src/components/Button/DangerButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DangerButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/DangerButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C;;;GAGG;AACH,eAAO,MAAM,YAAY,yHAIxB,CAAC;AAIF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"DangerButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/DangerButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAiB,MAAM,SAAS,CAAC;AAE9D;;;GAGG;AACH,eAAO,MAAM,YAAY,yHAIxB,CAAC;AAIF,eAAe,YAAY,CAAC"}

package/lib/typescript/src/components/Button/GhostButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GhostButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/GhostButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,WAAW,yHAIvB,CAAC;AAIF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"GhostButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/GhostButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAiB,MAAM,SAAS,CAAC;AAE9D,eAAO,MAAM,WAAW,yHAIvB,CAAC;AAIF,eAAe,WAAW,CAAC"}

package/lib/typescript/src/components/Button/PrimaryButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/PrimaryButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C;;GAEG;AACH,eAAO,MAAM,aAAa,yHAIzB,CAAC;AAIF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/PrimaryButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAiB,MAAM,SAAS,CAAC;AAE9D;;GAEG;AACH,eAAO,MAAM,aAAa,yHAIzB,CAAC;AAIF,eAAe,aAAa,CAAC"}

package/lib/typescript/src/components/Button/SecondaryButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/SecondaryButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C;;GAEG;AACH,eAAO,MAAM,eAAe,yHAI3B,CAAC;AAIF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/SecondaryButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAiB,MAAM,SAAS,CAAC;AAE9D;;GAEG;AACH,eAAO,MAAM,eAAe,yHAI3B,CAAC;AAIF,eAAe,eAAe,CAAC"}

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

@@ -1,10 +1,21 @@
 import type { ComponentRef } from 'react';
 import type { StyleProp, TextStyle, TouchableOpacity, TouchableOpacityProps, ViewStyle } from 'react-native';
+import type Button from './Button';
 /**
  * Ref type for the Button component
  */
 export type ButtonRef = ComponentRef<typeof TouchableOpacity>;
+/**
+ * The root ref type for the Button component
+ */
+export type ButtonBaseRef = ComponentRef<typeof Button>;
+/**
+ * The variant types for the Button component
+ */
 export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'ghost';
+/**
+ * Button size types
+ */
 export type ButtonSize = 'small' | 'medium' | 'large';
 export interface ButtonBaseProps extends Omit<TouchableOpacityProps, 'style'> {
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EACV,SAAS,EACT,SAAS,EACT,gBAAgB,EAChB,qBAAqB,EACrB,SAAS,EACV,MAAM,cAAc,CAAC;AAEtB;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE9D,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzE,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,qBAAqB,EAAE,OAAO,CAAC;IAC3E;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EACV,SAAS,EACT,SAAS,EACT,gBAAgB,EAChB,qBAAqB,EACrB,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AAEnC;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE9D;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAExD;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzE;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,qBAAqB,EAAE,OAAO,CAAC;IAC3E;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

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/components/Divider/Divider.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAkB,MAAM,cAAc,CAAC;AAEpD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,eAAO,MAAM,OAAO,+FAkBlB,CAAC;AAIH,eAAe,OAAO,CAAC"}

package/lib/typescript/src/components/Divider/styles.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/src/components/Divider/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Divider/styles.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,31 @@
+import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
+export type DividerThickness = 1 | 5 | 10;
+export type DividerOrientation = 'horizontal' | 'vertical';
+export interface DividerProps extends ViewProps {
+    /**
+     * Style for the divider component.
+     * Optional.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * The thickness of the divider.
+     * @default 1
+     */
+    thickness?: DividerThickness;
+    /**
+     * The color of the divider.
+     * @default '#000'
+     */
+    color?: string;
+    /**
+     * The orientation of the divider.
+     * @default 'horizontal'
+     */
+    orientation?: DividerOrientation;
+    /**
+     * The length of the divider.
+     * @default '100%'
+     */
+    length?: number | string;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Divider/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpE,MAAM,MAAM,gBAAgB,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;AAE1C,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE3D,MAAM,WAAW,YAAa,SAAQ,SAAS;IAC7C;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAE7B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;IAEjC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B"}

package/lib/typescript/src/components/Layout/HStack.d.ts

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

package/lib/typescript/src/components/Layout/HStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HStack.d.ts","sourceRoot":"","sources":["../../../../../src/components/Layout/HStack.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,MAAM,8FAIjB,CAAC"}

package/lib/typescript/src/components/Layout/VStack.d.ts

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

package/lib/typescript/src/components/Layout/VStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VStack.d.ts","sourceRoot":"","sources":["../../../../../src/components/Layout/VStack.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,MAAM,8FAIjB,CAAC"}

package/lib/typescript/src/components/Layout/layout.types.d.ts

@@ -0,0 +1,8 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+export type VStackProps = {
+    style?: StyleProp<ViewStyle>;
+};
+export type HStackProps = {
+    style?: StyleProp<ViewStyle>;
+};
+//# sourceMappingURL=layout.types.d.ts.map

package/lib/typescript/src/components/Layout/layout.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Layout/layout.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC"}

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

@@ -1,3 +1,23 @@
+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';
+export * from './components/Button/PrimaryButton';
+export * from './components/Button/SecondaryButton';
 export * from './components/Card/Card';
+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';
+export * from './components/Layout/layout.types';
+export * from './components/Surface/types';
+export * from './types/general.types';
 export * from './providers/ThemeProvider';
 //# sourceMappingURL=index.d.ts.map

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,wBAAwB,CAAC;AAGvC,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.7",
+  "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/Button/Button.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, type ComponentRef } from 'react';
+import { forwardRef } from 'react';
 import { Text, TouchableOpacity } from 'react-native';
 import Styles from './style';
 import type {
@@ -8,8 +8,6 @@ import type {
   ButtonVariant,
 } from './types';
 
-export type ButtonBaseRef = ComponentRef<typeof Button>;
-
 /**
  * A customizable button component that supports different variants and sizes.
  * @return A TouchableOpacity button with text.

package/src/components/Button/DangerButton.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
-import { Button, type ButtonBaseRef } from './Button';
-import type { ButtonBaseProps } from './types';
+import { Button } from './Button';
+import type { ButtonBaseProps, ButtonBaseRef } from './types';
 
 /**
  * A button component styled for dangerous actions, such as deletions.

package/src/components/Button/GhostButton.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
-import { Button, type ButtonBaseRef } from './Button';
-import type { ButtonBaseProps } from './types';
+import { Button } from './Button';
+import type { ButtonBaseProps, ButtonBaseRef } from './types';
 
 export const GhostButton = forwardRef<ButtonBaseRef, ButtonBaseProps>(
   (props, ref) => {

package/src/components/Button/PrimaryButton.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
-import { Button, type ButtonBaseRef } from './Button';
-import type { ButtonBaseProps } from './types';
+import { Button } from './Button';
+import type { ButtonBaseProps, ButtonBaseRef } from './types';
 
 /**
  * A button component styled for primary actions.

package/src/components/Button/SecondaryButton.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
-import { Button, type ButtonBaseRef } from './Button';
-import type { ButtonBaseProps } from './types';
+import { Button } from './Button';
+import type { ButtonBaseProps, ButtonBaseRef } from './types';
 
 /**
  * A button component styled for secondary actions.

package/src/components/Button/types.ts

@@ -6,14 +6,26 @@ import type {
   TouchableOpacityProps,
   ViewStyle,
 } from 'react-native';
+import type Button from './Button';
 
 /**
  * Ref type for the Button component
  */
 export type ButtonRef = ComponentRef<typeof TouchableOpacity>;
 
+/**
+ * The root ref type for the Button component
+ */
+export type ButtonBaseRef = ComponentRef<typeof Button>;
+
+/**
+ * The variant types for the Button component
+ */
 export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'ghost';
 
+/**
+ * Button size types
+ */
 export type ButtonSize = 'small' | 'medium' | 'large';
 
 export interface ButtonBaseProps extends Omit<TouchableOpacityProps, 'style'> {