@xaui/native 0.0.9 → 0.0.10

package/dist/accordion/index.cjs

@@ -97,7 +97,10 @@ function useXUIPalette() {
 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_react7.useMemo)(() => {
@@ -109,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;
@@ -205,6 +208,7 @@ var styles = import_react_native4.StyleSheet.create({
 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 ?? "";
@@ -284,9 +288,9 @@ var useBaseStyles = (variant, isDisabled) => {
     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;
     }
@@ -341,7 +345,7 @@ var useContentContainerStyle = (isCompact, variant) => {
   const theme = useXUITheme();
   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]
@@ -380,14 +384,7 @@ var AccordionItem = ({
   subtitle,
   startContent,
   indicator,
-  baseStyle,
-  headingStyle,
-  triggerStyle,
-  titleStyle,
-  subtitleStyle,
-  contentStyle,
-  startContentStyle,
-  indicatorStyle,
+  customAppearance,
   onSelected
 }) => {
   const {
@@ -410,29 +407,36 @@ var AccordionItem = ({
   const subtitleTextStyle = useSubtitleTextStyle();
   const contentContainerStyle = useContentContainerStyle(isCompact, variant);
   const foregroundColor = useForegroundColor();
-  return /* @__PURE__ */ import_react10.default.createElement(import_react_native6.View, { style: [baseStyles, baseStyle] }, /* @__PURE__ */ import_react10.default.createElement(import_react_native6.View, { style: headingStyle }, /* @__PURE__ */ import_react10.default.createElement(
+  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_react10.default.createElement(import_react_native6.View, { style: [styles.startContent, startContentStyle] }, 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, titleStyle] }, title) : title, subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ import_react10.default.createElement(import_react_native6.Text, { style: [subtitleTextStyle, subtitleStyle] }, subtitle) : subtitle)),
+    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_react10.default.createElement(ChevronRightIcon, { color: foregroundColor })
     )
-  )), /* @__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, contentStyle] }, children)), /* @__PURE__ */ import_react10.default.createElement(
+  )), /* @__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: [
@@ -440,7 +444,7 @@ var AccordionItem = ({
         disableAnimation ? { height: isExpanded ? void 0 : 0 } : { height: heightInterpolation }
       ]
     },
-    /* @__PURE__ */ import_react10.default.createElement(import_react_native6.View, { style: [contentContainerStyle, contentStyle] }, children)
+    /* @__PURE__ */ import_react10.default.createElement(import_react_native6.View, { style: [contentContainerStyle, customAppearance?.content] }, children)
   ));
 };
 AccordionItem.displayName = "AccordionItem";
@@ -493,14 +497,14 @@ var styles2 = import_react_native7.StyleSheet.create({
 
 // src/components/divider/divider.hook.ts
 var import_react12 = require("react");
-var import_core4 = require("@xaui/core");
+var import_core5 = require("@xaui/core");
 var useDividerColor = (themeColor, customColor) => {
   const theme = useXUITheme();
   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;
@@ -547,8 +551,7 @@ var Accordion = (props) => {
     variant = "light",
     showDivider = false,
     fullWidth = true,
-    containerStyle,
-    itemStyle
+    customAppearance
   } = props;
   const { containerStyles, dividerColor } = useAccordionStyles({
     variant,
@@ -557,14 +560,14 @@ var Accordion = (props) => {
   const contextParams = buildAccordionContextParams(props);
   const contextValue = useAccordionContextValue(contextParams);
   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, containerStyle] }, childrenArray.map((child, index) => {
+  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_react14.default.isValidElement(child) ? normalizeElementKey(child.key) : void 0,
       index
     );
-    return /* @__PURE__ */ import_react14.default.createElement(import_react_native9.View, { key: resolvedChildKey, style: itemStyle }, isAccordionItem(child) ? import_react14.default.cloneElement(child, { itemKey: resolvedChildKey }) : child, showBottomDivider && /* @__PURE__ */ import_react14.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>;

package/dist/accordion/index.d.ts

@@ -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>;

package/dist/accordion/index.js

@@ -23,7 +23,10 @@ var useAccordionContext = () => {
 
 // src/components/accordion/accordion.hook.ts
 import { useState, useCallback, useMemo } from "react";
-var useAccordionStyles = ({ variant, fullWidth }) => {
+var useAccordionStyles = ({
+  variant,
+  fullWidth
+}) => {
   const theme = useXUITheme();
   const palette2 = useXUIPalette();
   const containerStyles = useMemo(() => {
@@ -35,7 +38,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;
@@ -134,6 +137,7 @@ import {
   Easing
 } from "react-native";
 import { colors as palette } from "@xaui/core/palette";
+import { addOpacityToColor } from "@xaui/core";
 var useAccordionItemState = (itemKey) => {
   const context = useAccordionContext();
   const resolvedItemKey = itemKey ?? "";
@@ -213,9 +217,9 @@ var useBaseStyles = (variant, isDisabled) => {
     const base = { overflow: "hidden" };
     if (variant === "splitted") {
       base.paddingHorizontal = theme.spacing.md;
-      base.backgroundColor = theme.colors.default.background;
+      base.backgroundColor = 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;
     }
@@ -270,7 +274,7 @@ var useContentContainerStyle = (isCompact, variant) => {
   const theme = useXUITheme();
   const contentContainerStyle = useMemo2(
     () => ({
-      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]
@@ -309,14 +313,7 @@ var AccordionItem = ({
   subtitle,
   startContent,
   indicator,
-  baseStyle,
-  headingStyle,
-  triggerStyle,
-  titleStyle,
-  subtitleStyle,
-  contentStyle,
-  startContentStyle,
-  indicatorStyle,
+  customAppearance,
   onSelected
 }) => {
   const {
@@ -339,29 +336,36 @@ var AccordionItem = ({
   const subtitleTextStyle = useSubtitleTextStyle();
   const contentContainerStyle = useContentContainerStyle(isCompact, variant);
   const foregroundColor = useForegroundColor();
-  return /* @__PURE__ */ React2.createElement(View, { style: [baseStyles, baseStyle] }, /* @__PURE__ */ React2.createElement(View, { style: headingStyle }, /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React2.createElement(View, { style: [baseStyles, customAppearance?.base] }, /* @__PURE__ */ React2.createElement(View, { style: customAppearance?.heading }, /* @__PURE__ */ React2.createElement(
     Pressable,
     {
-      style: [triggerStyles, triggerStyle],
+      style: [triggerStyles, customAppearance?.trigger],
       onPress: handlePress,
       disabled: isDisabled,
       accessibilityRole: "button",
       accessibilityState: { expanded: isExpanded, disabled: isDisabled }
     },
-    startContent && /* @__PURE__ */ React2.createElement(View, { style: [styles.startContent, startContentStyle] }, startContent),
-    /* @__PURE__ */ React2.createElement(View, { style: styles.titleWrapper }, typeof title === "string" ? /* @__PURE__ */ React2.createElement(Text, { style: [titleTextStyle, titleStyle] }, title) : title, subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ React2.createElement(Text, { style: [subtitleTextStyle, subtitleStyle] }, subtitle) : subtitle)),
+    startContent && /* @__PURE__ */ React2.createElement(View, { style: [styles.startContent, customAppearance?.startContent] }, startContent),
+    /* @__PURE__ */ React2.createElement(View, { style: styles.titleWrapper }, typeof title === "string" ? /* @__PURE__ */ React2.createElement(Text, { style: [titleTextStyle, customAppearance?.title] }, title) : title, subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ React2.createElement(Text, { style: [subtitleTextStyle, customAppearance?.subtitle] }, subtitle) : subtitle)),
     !hideIndicator && /* @__PURE__ */ React2.createElement(
       Animated2.View,
       {
         style: [
           styles.indicator,
-          indicatorStyle,
+          customAppearance?.indicator,
           { transform: [{ rotate: rotationInterpolation }] }
         ]
       },
       indicator || /* @__PURE__ */ React2.createElement(ChevronRightIcon, { color: foregroundColor })
     )
-  )), /* @__PURE__ */ React2.createElement(View, { style: styles.hiddenMeasure, pointerEvents: "none" }, /* @__PURE__ */ React2.createElement(View, { onLayout: onContentLayout, style: [contentContainerStyle, contentStyle] }, children)), /* @__PURE__ */ React2.createElement(
+  )), /* @__PURE__ */ React2.createElement(View, { style: styles.hiddenMeasure, pointerEvents: "none" }, /* @__PURE__ */ React2.createElement(
+    View,
+    {
+      onLayout: onContentLayout,
+      style: [contentContainerStyle, customAppearance?.content]
+    },
+    children
+  )), /* @__PURE__ */ React2.createElement(
     Animated2.View,
     {
       style: [
@@ -369,7 +373,7 @@ var AccordionItem = ({
         disableAnimation ? { height: isExpanded ? void 0 : 0 } : { height: heightInterpolation }
       ]
     },
-    /* @__PURE__ */ React2.createElement(View, { style: [contentContainerStyle, contentStyle] }, children)
+    /* @__PURE__ */ React2.createElement(View, { style: [contentContainerStyle, customAppearance?.content] }, children)
   ));
 };
 AccordionItem.displayName = "AccordionItem";
@@ -408,8 +412,7 @@ var Accordion = (props) => {
     variant = "light",
     showDivider = false,
     fullWidth = true,
-    containerStyle,
-    itemStyle
+    customAppearance
   } = props;
   const { containerStyles, dividerColor } = useAccordionStyles({
     variant,
@@ -418,14 +421,14 @@ var Accordion = (props) => {
   const contextParams = buildAccordionContextParams(props);
   const contextValue = useAccordionContextValue(contextParams);
   const childrenArray = React4.Children.toArray(children);
-  return /* @__PURE__ */ React4.createElement(AccordionContext.Provider, { value: contextValue }, /* @__PURE__ */ React4.createElement(View2, { style: [containerStyles, containerStyle] }, childrenArray.map((child, index) => {
+  return /* @__PURE__ */ React4.createElement(AccordionContext.Provider, { value: contextValue }, /* @__PURE__ */ React4.createElement(View2, { 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(
       React4.isValidElement(child) ? normalizeElementKey(child.key) : void 0,
       index
     );
-    return /* @__PURE__ */ React4.createElement(View2, { key: resolvedChildKey, style: itemStyle }, isAccordionItem(child) ? React4.cloneElement(child, { itemKey: resolvedChildKey }) : child, showBottomDivider && /* @__PURE__ */ React4.createElement(Divider, { color: dividerColor, size: 2 }));
+    return /* @__PURE__ */ React4.createElement(View2, { key: resolvedChildKey, style: customAppearance?.item }, isAccordionItem(child) ? React4.cloneElement(child, { itemKey: resolvedChildKey }) : child, showBottomDivider && /* @__PURE__ */ React4.createElement(Divider, { color: dividerColor, size: 2 }));
   })));
 };
 export {