@xaui/native 0.0.8 → 0.0.10

package/dist/accordion/index.cjs

@@ -36,8 +36,8 @@ __export(accordion_exports, {
 module.exports = __toCommonJS(accordion_exports);
 
 // src/components/accordion/accordion.tsx
-var import_react11 = __toESM(require("react"), 1);
-var import_react_native8 = require("react-native");
+var import_react14 = __toESM(require("react"), 1);
+var import_react_native9 = require("react-native");
 
 // src/components/accordion/accordion-context.ts
 var import_react = require("react");
@@ -51,20 +51,38 @@ var useAccordionContext = () => {
 };
 
 // src/components/accordion/accordion.hook.ts
-var import_react4 = require("react");
+var import_react7 = require("react");
 
 // src/core/theme-context.tsx
-var import_react2 = __toESM(require("react"), 1);
-var import_react_native = require("react-native");
+var import_react5 = __toESM(require("react"), 1);
+var import_react_native2 = require("react-native");
 var import_theme = require("@xaui/core/theme");
 var import_palette = require("@xaui/core/palette");
-var XUIThemeContext = (0, import_react2.createContext)(null);
 
-// src/core/theme-hooks.ts
+// src/core/portal/portal.tsx
 var import_react3 = require("react");
-var import_react_native2 = require("react-native");
+
+// src/core/portal/portal-context.ts
+var import_react2 = require("react");
+var PortalContext = (0, import_react2.createContext)(null);
+
+// src/core/portal/portal-host.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_react_native = require("react-native");
+var hostStyles = import_react_native.StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+
+// src/core/theme-context.tsx
+var XUIThemeContext = (0, import_react5.createContext)(null);
+
+// src/core/theme-hooks.ts
+var import_react6 = require("react");
+var import_react_native3 = require("react-native");
 function useXUITheme() {
-  const theme = (0, import_react3.useContext)(XUIThemeContext);
+  const theme = (0, import_react6.useContext)(XUIThemeContext);
   if (!theme) {
     throw new Error("useXUITheme must be used within XUIProvider");
   }
@@ -72,17 +90,20 @@ function useXUITheme() {
 }
 function useXUIPalette() {
   const theme = useXUITheme();
-  return (0, import_react3.useMemo)(() => theme.palette, [theme]);
+  return (0, import_react6.useMemo)(() => theme.palette, [theme]);
 }
 
 // src/core/index.ts
 var import_theme2 = require("@xaui/core/theme");
 
 // src/components/accordion/accordion.hook.ts
-var useAccordionStyles = ({ variant, fullWidth }) => {
+var useAccordionStyles = ({
+  variant,
+  fullWidth
+}) => {
   const theme = useXUITheme();
   const palette2 = useXUIPalette();
-  const containerStyles = (0, import_react4.useMemo)(() => {
+  const containerStyles = (0, import_react7.useMemo)(() => {
     const base = {};
     if (fullWidth) {
       base.width = "100%";
@@ -91,7 +112,7 @@ var useAccordionStyles = ({ variant, fullWidth }) => {
       base.borderWidth = theme.borderWidth.md;
       base.borderColor = theme.mode === "dark" ? palette2.gray[800] : theme.palette.gray[200];
       base.borderRadius = theme.borderRadius.md;
-      base.marginHorizontal = theme.spacing.sm;
+      base.paddingHorizontal = theme.spacing.sm;
       base.overflow = "hidden";
     } else if (variant === "light") {
       base.paddingHorizontal = theme.spacing.sm;
@@ -108,10 +129,10 @@ var useAccordionSelection = ({
   defaultExpandedKeys,
   onSelectionChange
 }) => {
-  const [internalExpandedKeys, setInternalExpandedKeys] = (0, import_react4.useState)(defaultExpandedKeys);
+  const [internalExpandedKeys, setInternalExpandedKeys] = (0, import_react7.useState)(defaultExpandedKeys);
   const isControlled = expandedKeys !== void 0;
   const currentExpandedKeys = isControlled ? expandedKeys : internalExpandedKeys;
-  const toggleItem = (0, import_react4.useCallback)(
+  const toggleItem = (0, import_react7.useCallback)(
     (key) => {
       const isExpanded = currentExpandedKeys.includes(key);
       const newExpandedKeys = selectionMode === "toggle" ? isExpanded ? [] : [key] : isExpanded ? currentExpandedKeys.filter((k) => k !== key) : [...currentExpandedKeys, key];
@@ -131,7 +152,7 @@ var useAccordionContextValue = (config) => {
     defaultExpandedKeys: config.defaultExpandedKeys,
     onSelectionChange: config.onSelectionChange
   });
-  return (0, import_react4.useMemo)(
+  return (0, import_react7.useMemo)(
     () => ({
       variant: config.variant,
       hideIndicator: config.hideIndicator,
@@ -156,12 +177,12 @@ var useAccordionContextValue = (config) => {
 };
 
 // src/components/accordion/accordion-item.tsx
-var import_react7 = __toESM(require("react"), 1);
-var import_react_native5 = require("react-native");
+var import_react10 = __toESM(require("react"), 1);
+var import_react_native6 = require("react-native");
 
 // src/components/accordion/accordion-item.style.ts
-var import_react_native3 = require("react-native");
-var styles = import_react_native3.StyleSheet.create({
+var import_react_native4 = require("react-native");
+var styles = import_react_native4.StyleSheet.create({
   startContent: {
     flexShrink: 0
   },
@@ -184,61 +205,62 @@ var styles = import_react_native3.StyleSheet.create({
 });
 
 // src/components/accordion/accordion-item.hook.ts
-var import_react5 = require("react");
-var import_react_native4 = require("react-native");
+var import_react8 = require("react");
+var import_react_native5 = require("react-native");
 var import_palette2 = require("@xaui/core/palette");
+var import_core3 = require("@xaui/core");
 var useAccordionItemState = (itemKey) => {
   const context = useAccordionContext();
   const resolvedItemKey = itemKey ?? "";
   const isExpanded = resolvedItemKey ? context.expandedKeys.includes(resolvedItemKey) : false;
   const isDisabled = resolvedItemKey ? context.disabledKeys.includes(resolvedItemKey) : false;
-  const handlePress = (0, import_react5.useCallback)(() => {
+  const handlePress = (0, import_react8.useCallback)(() => {
     if (isDisabled || !resolvedItemKey) return;
     context.toggleItem(resolvedItemKey);
   }, [isDisabled, resolvedItemKey, context]);
   return { ...context, resolvedItemKey, isExpanded, isDisabled, handlePress };
 };
 var useAccordionItemAnimation = (isExpanded, disableAnimation) => {
-  const [contentHeight, setContentHeight] = (0, import_react5.useState)(0);
-  const [isMeasured, setIsMeasured] = (0, import_react5.useState)(false);
-  const animatedHeight = (0, import_react5.useRef)(new import_react_native4.Animated.Value(isExpanded ? 1 : 0)).current;
-  const animatedRotation = (0, import_react5.useRef)(new import_react_native4.Animated.Value(isExpanded ? 1 : 0)).current;
-  const prevContentHeight = (0, import_react5.useRef)(contentHeight);
-  (0, import_react5.useEffect)(() => {
+  const [contentHeight, setContentHeight] = (0, import_react8.useState)(0);
+  const [isMeasured, setIsMeasured] = (0, import_react8.useState)(false);
+  const animatedHeight = (0, import_react8.useRef)(new import_react_native5.Animated.Value(isExpanded ? 1 : 0)).current;
+  const animatedRotation = (0, import_react8.useRef)(new import_react_native5.Animated.Value(isExpanded ? 1 : 0)).current;
+  const prevContentHeight = (0, import_react8.useRef)(contentHeight);
+  (0, import_react8.useEffect)(() => {
     if (disableAnimation) {
       animatedHeight.setValue(isExpanded ? 1 : 0);
       animatedRotation.setValue(isExpanded ? 1 : 0);
       return;
     }
-    import_react_native4.Animated.parallel([
-      import_react_native4.Animated.timing(animatedHeight, {
+    import_react_native5.Animated.parallel([
+      import_react_native5.Animated.timing(animatedHeight, {
         toValue: isExpanded ? 1 : 0,
         duration: 300,
-        easing: import_react_native4.Easing.bezier(0.4, 0, 0.2, 1),
+        easing: import_react_native5.Easing.bezier(0.4, 0, 0.2, 1),
         useNativeDriver: false
       }),
-      import_react_native4.Animated.timing(animatedRotation, {
+      import_react_native5.Animated.timing(animatedRotation, {
         toValue: isExpanded ? 1 : 0,
         duration: 300,
-        easing: import_react_native4.Easing.bezier(0.4, 0, 0.2, 1),
+        easing: import_react_native5.Easing.bezier(0.4, 0, 0.2, 1),
         useNativeDriver: true
       })
     ]).start();
   }, [isExpanded, disableAnimation, animatedHeight, animatedRotation]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (contentHeight <= 0 || contentHeight === prevContentHeight.current || !isExpanded)
       return;
     prevContentHeight.current = contentHeight;
     if (!disableAnimation && isMeasured) {
-      import_react_native4.Animated.timing(animatedHeight, {
+      import_react_native5.Animated.timing(animatedHeight, {
         toValue: 1,
         duration: 200,
-        easing: import_react_native4.Easing.out(import_react_native4.Easing.ease),
+        easing: import_react_native5.Easing.out(import_react_native5.Easing.ease),
         useNativeDriver: false
       }).start();
     }
   }, [contentHeight, isExpanded, disableAnimation, isMeasured, animatedHeight]);
-  const onContentLayout = (0, import_react5.useCallback)((event) => {
+  const onContentLayout = (0, import_react8.useCallback)((event) => {
     const height = event.nativeEvent.layout.height;
     if (height > 0) {
       setContentHeight(height);
@@ -262,13 +284,13 @@ var useAccordionItemAnimation = (isExpanded, disableAnimation) => {
 };
 var useBaseStyles = (variant, isDisabled) => {
   const theme = useXUITheme();
-  const baseStyles = (0, import_react5.useMemo)(() => {
+  const baseStyles = (0, import_react8.useMemo)(() => {
     const base = { overflow: "hidden" };
     if (variant === "splitted") {
       base.paddingHorizontal = theme.spacing.md;
-      base.backgroundColor = theme.colors.default.background;
+      base.backgroundColor = (0, import_core3.addOpacityToColor)(theme.colors.default.background, 0.5);
       base.borderRadius = theme.borderRadius.md;
-      base.marginBottom = theme.spacing.sm;
+      base.marginBottom = theme.spacing.xs;
     } else if (variant === "bordered") {
       base.paddingHorizontal = theme.spacing.md;
     }
@@ -281,7 +303,7 @@ var useBaseStyles = (variant, isDisabled) => {
 };
 var useTriggerStyles = (variant, isCompact) => {
   const theme = useXUITheme();
-  const triggerStyles = (0, import_react5.useMemo)(() => {
+  const triggerStyles = (0, import_react8.useMemo)(() => {
     const trigger = {
       flexDirection: "row",
       alignItems: "center",
@@ -297,7 +319,7 @@ var useTriggerStyles = (variant, isCompact) => {
 };
 var useTitleTextStyle = (isCompact) => {
   const theme = useXUITheme();
-  const titleTextStyle = (0, import_react5.useMemo)(
+  const titleTextStyle = (0, import_react8.useMemo)(
     () => ({
       fontSize: isCompact ? theme.fontSizes.md : theme.fontSizes.lg,
       fontWeight: theme.fontWeights.medium,
@@ -309,7 +331,7 @@ var useTitleTextStyle = (isCompact) => {
 };
 var useSubtitleTextStyle = () => {
   const theme = useXUITheme();
-  const subtitleTextStyle = (0, import_react5.useMemo)(
+  const subtitleTextStyle = (0, import_react8.useMemo)(
     () => ({
       fontSize: theme.fontSizes.sm,
       color: import_palette2.colors.gray[500],
@@ -321,9 +343,9 @@ var useSubtitleTextStyle = () => {
 };
 var useContentContainerStyle = (isCompact, variant) => {
   const theme = useXUITheme();
-  const contentContainerStyle = (0, import_react5.useMemo)(
+  const contentContainerStyle = (0, import_react8.useMemo)(
     () => ({
-      paddingBottom: isCompact ? theme.spacing.sm : theme.spacing.md,
+      paddingBottom: isCompact ? theme.spacing.xs : theme.spacing.sm,
       paddingHorizontal: variant === "light" ? theme.spacing.sm : 0
     }),
     [isCompact, variant, theme]
@@ -336,13 +358,13 @@ var useForegroundColor = () => {
 };
 
 // src/components/accordion/chevron-right-icon.tsx
-var import_react6 = __toESM(require("react"), 1);
+var import_react9 = __toESM(require("react"), 1);
 var import_react_native_svg = __toESM(require("react-native-svg"), 1);
 var ChevronRightIcon = ({
   color = "#000",
   size = 20
 }) => {
-  return /* @__PURE__ */ import_react6.default.createElement(import_react_native_svg.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ import_react6.default.createElement(
+  return /* @__PURE__ */ import_react9.default.createElement(import_react_native_svg.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ import_react9.default.createElement(
     import_react_native_svg.Path,
     {
       d: "M9 18l6-6-6-6",
@@ -362,14 +384,7 @@ var AccordionItem = ({
   subtitle,
   startContent,
   indicator,
-  baseStyle,
-  headingStyle,
-  triggerStyle,
-  titleStyle,
-  subtitleStyle,
-  contentStyle,
-  startContentStyle,
-  indicatorStyle,
+  customAppearance,
   onSelected
 }) => {
   const {
@@ -392,43 +407,50 @@ var AccordionItem = ({
   const subtitleTextStyle = useSubtitleTextStyle();
   const contentContainerStyle = useContentContainerStyle(isCompact, variant);
   const foregroundColor = useForegroundColor();
-  return /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: [baseStyles, baseStyle] }, /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: headingStyle }, /* @__PURE__ */ import_react7.default.createElement(
-    import_react_native5.Pressable,
+  return /* @__PURE__ */ import_react10.default.createElement(import_react_native6.View, { style: [baseStyles, customAppearance?.base] }, /* @__PURE__ */ import_react10.default.createElement(import_react_native6.View, { style: customAppearance?.heading }, /* @__PURE__ */ import_react10.default.createElement(
+    import_react_native6.Pressable,
     {
-      style: [triggerStyles, triggerStyle],
+      style: [triggerStyles, customAppearance?.trigger],
       onPress: handlePress,
       disabled: isDisabled,
       accessibilityRole: "button",
       accessibilityState: { expanded: isExpanded, disabled: isDisabled }
     },
-    startContent && /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: [styles.startContent, startContentStyle] }, startContent),
-    /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: styles.titleWrapper }, typeof title === "string" ? /* @__PURE__ */ import_react7.default.createElement(import_react_native5.Text, { style: [titleTextStyle, titleStyle] }, title) : title, subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ import_react7.default.createElement(import_react_native5.Text, { style: [subtitleTextStyle, subtitleStyle] }, subtitle) : subtitle)),
-    !hideIndicator && /* @__PURE__ */ import_react7.default.createElement(
-      import_react_native5.Animated.View,
+    startContent && /* @__PURE__ */ import_react10.default.createElement(import_react_native6.View, { style: [styles.startContent, customAppearance?.startContent] }, startContent),
+    /* @__PURE__ */ import_react10.default.createElement(import_react_native6.View, { style: styles.titleWrapper }, typeof title === "string" ? /* @__PURE__ */ import_react10.default.createElement(import_react_native6.Text, { style: [titleTextStyle, customAppearance?.title] }, title) : title, subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ import_react10.default.createElement(import_react_native6.Text, { style: [subtitleTextStyle, customAppearance?.subtitle] }, subtitle) : subtitle)),
+    !hideIndicator && /* @__PURE__ */ import_react10.default.createElement(
+      import_react_native6.Animated.View,
       {
         style: [
           styles.indicator,
-          indicatorStyle,
+          customAppearance?.indicator,
           { transform: [{ rotate: rotationInterpolation }] }
         ]
       },
-      indicator || /* @__PURE__ */ import_react7.default.createElement(ChevronRightIcon, { color: foregroundColor })
+      indicator || /* @__PURE__ */ import_react10.default.createElement(ChevronRightIcon, { color: foregroundColor })
     )
-  )), /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: styles.hiddenMeasure, pointerEvents: "none" }, /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { onLayout: onContentLayout, style: [contentContainerStyle, contentStyle] }, children)), /* @__PURE__ */ import_react7.default.createElement(
-    import_react_native5.Animated.View,
+  )), /* @__PURE__ */ import_react10.default.createElement(import_react_native6.View, { style: styles.hiddenMeasure, pointerEvents: "none" }, /* @__PURE__ */ import_react10.default.createElement(
+    import_react_native6.View,
+    {
+      onLayout: onContentLayout,
+      style: [contentContainerStyle, customAppearance?.content]
+    },
+    children
+  )), /* @__PURE__ */ import_react10.default.createElement(
+    import_react_native6.Animated.View,
     {
       style: [
         styles.contentOverflow,
         disableAnimation ? { height: isExpanded ? void 0 : 0 } : { height: heightInterpolation }
       ]
     },
-    /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: [contentContainerStyle, contentStyle] }, children)
+    /* @__PURE__ */ import_react10.default.createElement(import_react_native6.View, { style: [contentContainerStyle, customAppearance?.content] }, children)
   ));
 };
 AccordionItem.displayName = "AccordionItem";
 
 // src/components/accordion/accordion.utils.ts
-var import_react8 = __toESM(require("react"), 1);
+var import_react11 = __toESM(require("react"), 1);
 var getItemKey = (value, fallback) => {
   if (value === null || value === void 0) return String(fallback);
   if (typeof value === "string" || typeof value === "number") return String(value);
@@ -438,7 +460,7 @@ var normalizeElementKey = (value) => {
   if (typeof value !== "string") return value;
   return value.startsWith(".$") ? value.slice(2) : value.startsWith(".") ? value.slice(1) : value;
 };
-var isAccordionItem = (value) => import_react8.default.isValidElement(value) && (value.type === AccordionItem || typeof value.type === "function" && value.type.displayName === "AccordionItem");
+var isAccordionItem = (value) => import_react11.default.isValidElement(value) && (value.type === AccordionItem || typeof value.type === "function" && value.type.displayName === "AccordionItem");
 var buildAccordionContextParams = (props) => {
   return {
     variant: props.variant || "light",
@@ -455,12 +477,12 @@ var buildAccordionContextParams = (props) => {
 };
 
 // src/components/divider/divider.tsx
-var import_react10 = __toESM(require("react"), 1);
-var import_react_native7 = require("react-native");
+var import_react13 = __toESM(require("react"), 1);
+var import_react_native8 = require("react-native");
 
 // src/components/divider/divider.style.ts
-var import_react_native6 = require("react-native");
-var styles2 = import_react_native6.StyleSheet.create({
+var import_react_native7 = require("react-native");
+var styles2 = import_react_native7.StyleSheet.create({
   horizontal: {
     height: 1,
     flexShrink: 1,
@@ -474,21 +496,21 @@ var styles2 = import_react_native6.StyleSheet.create({
 });
 
 // src/components/divider/divider.hook.ts
-var import_react9 = require("react");
-var import_core4 = require("@xaui/core");
+var import_react12 = require("react");
+var import_core5 = require("@xaui/core");
 var useDividerColor = (themeColor, customColor) => {
   const theme = useXUITheme();
-  const dividerColor = (0, import_react9.useMemo)(() => {
+  const dividerColor = (0, import_react12.useMemo)(() => {
     if (customColor) {
       return customColor;
     }
-    const safeThemeColor = (0, import_core4.getSafeThemeColor)(themeColor);
+    const safeThemeColor = (0, import_core5.getSafeThemeColor)(themeColor);
     return theme.colors[safeThemeColor].main;
   }, [customColor, themeColor, theme]);
   return dividerColor;
 };
 var useDividerSize = (size, orientation) => {
-  const sizeStyles = (0, import_react9.useMemo)(() => {
+  const sizeStyles = (0, import_react12.useMemo)(() => {
     if (orientation === "horizontal") {
       return {
         height: size
@@ -510,8 +532,8 @@ var Divider = ({
 }) => {
   const dividerColor = useDividerColor(themeColor, color);
   const sizeStyles = useDividerSize(size, orientation);
-  return /* @__PURE__ */ import_react10.default.createElement(
-    import_react_native7.View,
+  return /* @__PURE__ */ import_react13.default.createElement(
+    import_react_native8.View,
     {
       style: [
         orientation === "horizontal" ? styles2.horizontal : styles2.vertical,
@@ -529,8 +551,7 @@ var Accordion = (props) => {
     variant = "light",
     showDivider = false,
     fullWidth = true,
-    containerStyle,
-    itemStyle
+    customAppearance
   } = props;
   const { containerStyles, dividerColor } = useAccordionStyles({
     variant,
@@ -538,15 +559,15 @@ var Accordion = (props) => {
   });
   const contextParams = buildAccordionContextParams(props);
   const contextValue = useAccordionContextValue(contextParams);
-  const childrenArray = import_react11.default.Children.toArray(children);
-  return /* @__PURE__ */ import_react11.default.createElement(AccordionContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react11.default.createElement(import_react_native8.View, { style: [containerStyles, containerStyle] }, childrenArray.map((child, index) => {
+  const childrenArray = import_react14.default.Children.toArray(children);
+  return /* @__PURE__ */ import_react14.default.createElement(AccordionContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react14.default.createElement(import_react_native9.View, { style: [containerStyles, customAppearance?.container] }, childrenArray.map((child, index) => {
     const isLast = index === childrenArray.length - 1;
     const showBottomDivider = (showDivider || variant === "bordered") && !isLast && variant !== "splitted";
     const resolvedChildKey = isAccordionItem(child) ? getItemKey(child.props.itemKey ?? normalizeElementKey(child.key), index) : getItemKey(
-      import_react11.default.isValidElement(child) ? normalizeElementKey(child.key) : void 0,
+      import_react14.default.isValidElement(child) ? normalizeElementKey(child.key) : void 0,
       index
     );
-    return /* @__PURE__ */ import_react11.default.createElement(import_react_native8.View, { key: resolvedChildKey, style: itemStyle }, isAccordionItem(child) ? import_react11.default.cloneElement(child, { itemKey: resolvedChildKey }) : child, showBottomDivider && /* @__PURE__ */ import_react11.default.createElement(Divider, { color: dividerColor, size: 2 }));
+    return /* @__PURE__ */ import_react14.default.createElement(import_react_native9.View, { key: resolvedChildKey, style: customAppearance?.item }, isAccordionItem(child) ? import_react14.default.cloneElement(child, { itemKey: resolvedChildKey }) : child, showBottomDivider && /* @__PURE__ */ import_react14.default.createElement(Divider, { color: dividerColor, size: 2 }));
   })));
 };
 // Annotate the CommonJS export names for ESM import in node:

package/dist/accordion/index.d.cts

@@ -6,6 +6,16 @@ type AccordionSelectionMode = 'toggle' | 'multiple';
 type AccordionEvents = {
     onSelectionChange?: (selectedKeys: string[]) => void;
 };
+type AccordionCustomAppearance = {
+    /**
+     * Custom styles for the container
+     */
+    container?: ViewStyle;
+    /**
+     * Custom styles for individual items
+     */
+    item?: ViewStyle;
+};
 type AccordionProps = {
     /**
      * List of AccordionItem components
@@ -62,13 +72,9 @@ type AccordionProps = {
      */
     isCompact?: boolean;
     /**
-     * Custom styles for the container
+     * Custom appearance styles for all accordion parts
      */
-    containerStyle?: ViewStyle;
-    /**
-     * Custom styles for individual items
-     */
-    itemStyle?: ViewStyle;
+    customAppearance?: AccordionCustomAppearance;
 } & AccordionEvents;
 
 declare const Accordion: React.FC<AccordionProps>;
@@ -76,64 +82,70 @@ declare const Accordion: React.FC<AccordionProps>;
 type AccordionItemEvents = {
     onSelected?: (isSelected: boolean) => void;
 };
-type AccordionItemProps = {
+type AccordionItemCustomAppearance = {
     /**
-     * Unique key for the accordion item
+     * Custom styles for the base container
      */
-    itemKey?: string;
+    base?: ViewStyle;
     /**
-     * Content to display when accordion item is expanded
+     * Custom styles for the header container
      */
-    children: ReactNode;
+    heading?: ViewStyle;
     /**
-     * Title displayed in the accordion header
+     * Custom styles for the trigger button
      */
-    title: ReactNode;
+    trigger?: ViewStyle;
     /**
-     * Optional subtitle displayed below the title
+     * Custom styles for the title text
      */
-    subtitle?: ReactNode;
+    title?: TextStyle;
     /**
-     * Content displayed at the start of the header (left side)
+     * Custom styles for the subtitle text
      */
-    startContent?: ReactNode;
+    subtitle?: TextStyle;
     /**
-     * Custom indicator for the expanded/collapsed state
-     * @default ChevronRight icon
+     * Custom styles for the content container
      */
-    indicator?: ReactNode;
+    content?: ViewStyle;
     /**
-     * Custom styles for the base container
+     * Custom styles for the start content container
      */
-    baseStyle?: ViewStyle;
+    startContent?: ViewStyle;
     /**
-     * Custom styles for the header container
+     * Custom styles for the indicator
      */
-    headingStyle?: ViewStyle;
+    indicator?: ViewStyle;
+};
+type AccordionItemProps = {
     /**
-     * Custom styles for the trigger button
+     * Unique key for the accordion item
      */
-    triggerStyle?: ViewStyle;
+    itemKey?: string;
     /**
-     * Custom styles for the title text
+     * Content to display when accordion item is expanded
      */
-    titleStyle?: TextStyle;
+    children: ReactNode;
     /**
-     * Custom styles for the subtitle text
+     * Title displayed in the accordion header
      */
-    subtitleStyle?: TextStyle;
+    title: ReactNode;
     /**
-     * Custom styles for the content container
+     * Optional subtitle displayed below the title
      */
-    contentStyle?: ViewStyle;
+    subtitle?: ReactNode;
     /**
-     * Custom styles for the start content container
+     * Content displayed at the start of the header (left side)
      */
-    startContentStyle?: ViewStyle;
+    startContent?: ReactNode;
     /**
-     * Custom styles for the indicator
+     * Custom indicator for the expanded/collapsed state
+     * @default ChevronRight icon
+     */
+    indicator?: ReactNode;
+    /**
+     * Custom appearance styles for all accordion item parts
      */
-    indicatorStyle?: ViewStyle;
+    customAppearance?: AccordionItemCustomAppearance;
 } & AccordionItemEvents;
 
 declare const AccordionItem: React.FC<AccordionItemProps>;