@applicaster/zapp-react-native-ui-components 15.1.6-alpha.3988508055 → 15.1.6

package/Components/ModalComponent/AudioPlayer/Components/Action.tsx

@@ -11,14 +11,7 @@
  */
 
 import React from "react";
-import {
-  Image,
-  Platform,
-  Pressable,
-  StyleSheet,
-  Text,
-  View,
-} from "react-native";
+import { Image, Platform, StyleSheet, Text, View } from "react-native";
 
 const styles = StyleSheet.create({
   row: {
@@ -130,11 +123,10 @@ export type ActionData = {
   showTrailingChevron?: boolean;
 };
 
-export type AudioPlayerActionProps = {
+export type ItemProps = {
   configuration: ActionConfiguration;
   data: ActionData;
   focused?: boolean;
-  onPress?: () => void;
 };
 
 // ---------------------------------------------------------------------------
@@ -195,32 +187,28 @@ type ActionContainerProps = {
   configuration: BackgroundConfiguration;
   focused: boolean;
   children: React.ReactNode;
-  onPress?: () => void;
 };
 
 function ActionContainer({
   configuration,
   focused,
   children,
-  onPress,
 }: ActionContainerProps) {
   return (
-    <Pressable
-      onPress={onPress}
-      style={({ pressed }) => ({
-        backgroundColor:
-          pressed || focused
-            ? configuration.focusedColor
-            : configuration.defaultColor,
+    <View
+      style={{
+        backgroundColor: focused
+          ? configuration.focusedColor
+          : configuration.defaultColor,
         borderRadius: configuration.cornerRadius,
         paddingTop: CONTAINER_SPEC.paddingTop,
         paddingRight: CONTAINER_SPEC.paddingRight,
         paddingBottom: CONTAINER_SPEC.paddingBottom,
         paddingLeft: CONTAINER_SPEC.paddingLeft,
-      })}
+      }}
     >
       {children}
-    </Pressable>
+    </View>
   );
 }
 
@@ -291,15 +279,10 @@ function ActionTrailingIcon({ configuration }: ActionTrailingIconProps) {
 }
 
 // ---------------------------------------------------------------------------
-// AudioPlayerAction
+// Item
 // ---------------------------------------------------------------------------
 
-export function AudioPlayerAction({
-  configuration,
-  data,
-  focused = false,
-  onPress,
-}: AudioPlayerActionProps) {
+export function Item({ configuration, data, focused = false }: ItemProps) {
   const { background, title, trailingIcon } = configuration;
   const { title: label, leadingActionType, showTrailingChevron } = data;
 
@@ -307,11 +290,7 @@ export function AudioPlayerAction({
   const showTrailing = shouldShowTrailingIcon(showTrailingChevron);
 
   return (
-    <ActionContainer
-      configuration={background}
-      focused={focused}
-      onPress={onPress}
-    >
+    <ActionContainer configuration={background} focused={focused}>
       <View style={styles.row}>
         {showLeading ? (
           <>
@@ -330,3 +309,60 @@ export function AudioPlayerAction({
     </ActionContainer>
   );
 }
+
+// ---------------------------------------------------------------------------
+// Demo
+// ---------------------------------------------------------------------------
+
+export default function App() {
+  return (
+    <View style={styles.demoScreen}>
+      <Text style={styles.demoHeading}>Modal Action Building Block</Text>
+
+      <Text style={styles.demoLabel}>
+        Leading icon + text — Add To Queue (focused)
+      </Text>
+      <Item
+        configuration={DEFAULT_ACTION_CONFIGURATION}
+        data={{ title: "Add To Queue", leadingActionType: "addToQueue" }}
+        focused
+      />
+
+      <Text style={styles.demoLabel}>
+        Leading icon + text + trailing chevron — Add To Playlist
+      </Text>
+      <Item
+        configuration={DEFAULT_ACTION_CONFIGURATION}
+        data={{
+          title: "Add To Playlist",
+          leadingActionType: "addToPlaylist",
+          showTrailingChevron: true,
+        }}
+      />
+
+      <Text style={styles.demoLabel}>Text only — Go To Playlist</Text>
+      <Item
+        configuration={DEFAULT_ACTION_CONFIGURATION}
+        data={{ title: "Go To Playlist" }}
+      />
+
+      <Text style={styles.demoLabel}>Leading icon + text — Favorite</Text>
+      <Item
+        configuration={DEFAULT_ACTION_CONFIGURATION}
+        data={{ title: "Favorite", leadingActionType: "favorite" }}
+      />
+
+      <Text style={styles.demoLabel}>Leading icon + text — Share</Text>
+      <Item
+        configuration={DEFAULT_ACTION_CONFIGURATION}
+        data={{ title: "Share", leadingActionType: "share" }}
+      />
+
+      <Text style={styles.demoLabel}>Text only — Go To Artist</Text>
+      <Item
+        configuration={DEFAULT_ACTION_CONFIGURATION}
+        data={{ title: "Go To Artist" }}
+      />
+    </View>
+  );
+}

package/Components/ModalComponent/AudioPlayer/Components/Button.tsx

@@ -9,14 +9,7 @@
  */
 
 import React from "react";
-import {
-  Image,
-  Platform,
-  Pressable,
-  StyleSheet,
-  Text,
-  View,
-} from "react-native";
+import { Image, Platform, StyleSheet, Text, View } from "react-native";
 
 const styles = StyleSheet.create({
   container: {
@@ -155,12 +148,11 @@ export type ButtonData = {
   disabled?: boolean;
 };
 
-export type AudioPlayerButtonProps = {
+export type ItemProps = {
   configuration: ButtonConfiguration;
   data: ButtonData;
   disabled?: boolean;
   focused?: boolean;
-  onPress?: () => void;
 };
 
 // ---------------------------------------------------------------------------
@@ -178,7 +170,7 @@ const ACTION_ICON_ASSETS: Record<ButtonActionType, string> = {
   confirm:
     "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAJElEQVR42mNgGAWjYBSQCv4TwKMWDHELho/hNE/3o2AUDDcAAPv0QMAyy1CtAAAAAElFTkSuQmCC",
   cancel:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAASElEQVR42mNgGAWjGvynkVoUTf+pqA6nxv8UqiHbEooNx2cQ1QzHZiDVDcdlCcOQsoCmQUTTSKZpMqV5RqNLUUHTwm4UDBMAALBLQ73LTvoyAAAAAElFTkSuQmCC",
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAASElEQVR42mNgGAUjGvynkVoUTf+pqA6nxv8UqiHbEooNx2cQ1QzHZiDVDcdlCcOQsoCmQUTTSKZpMqV5RqNLUUHTwm4UDBMAALBLQ73LTvoyAAAAAElFTkSuQmCC",
 };
 
 function getTextTransformStyle(
@@ -200,7 +192,6 @@ type ButtonContainerProps = {
   disabled: boolean;
   configuration: BackgroundConfiguration;
   children: React.ReactNode;
-  onPress?: () => void;
 };
 
 function ButtonContainer({
@@ -208,22 +199,19 @@ function ButtonContainer({
   disabled,
   configuration,
   children,
-  onPress,
 }: ButtonContainerProps) {
-  const defaultBgColor = disabled
+  const backgroundColor = disabled
     ? configuration.inactiveColor
     : focused
       ? configuration.focusedColor
       : configuration.defaultColor;
 
   return (
-    <Pressable
-      onPress={disabled ? undefined : onPress}
-      style={({ pressed }) => [
+    <View
+      style={[
         styles.container,
         {
-          backgroundColor:
-            pressed && !disabled ? configuration.focusedColor : defaultBgColor,
+          backgroundColor,
           borderRadius: configuration.cornerRadius,
           paddingTop: configuration.paddingTop,
           paddingRight: configuration.paddingRight,
@@ -233,7 +221,7 @@ function ButtonContainer({
       ]}
     >
       {children}
-    </Pressable>
+    </View>
   );
 }
 
@@ -307,16 +295,15 @@ function ButtonLeadingIcon({
 }
 
 // ---------------------------------------------------------------------------
-// AudioPlayerButton — single building block driven by configuration + data
+// Item — single building block driven by configuration + data
 // ---------------------------------------------------------------------------
 
-export function AudioPlayerButton({
+export function Item({
   configuration,
   data,
   disabled,
   focused = false,
-  onPress,
-}: AudioPlayerButtonProps) {
+}: ItemProps) {
   const {
     background: backgroundConfiguration,
     title: titleConfiguration,
@@ -334,7 +321,6 @@ export function AudioPlayerButton({
       focused={focused}
       disabled={isDisabled}
       configuration={backgroundConfiguration}
-      onPress={onPress}
     >
       <View style={styles.contentRow}>
         {showIcon ? (
@@ -400,3 +386,39 @@ export const VARIANT_LARGE_ICON: ButtonConfiguration = {
     },
   },
 };
+
+export default function App() {
+  return (
+    <View style={styles.demoScreen}>
+      <Text style={styles.demoHeading}>Modal Button Building Block</Text>
+
+      <Text style={styles.demoLabel}>Variant 1 — Text only (confirmation)</Text>
+      <Item configuration={VARIANT_TEXT_ONLY} data={{ title: "Confirm" }} />
+
+      <Text style={styles.demoLabel}>Variant 2 — Leading icon + text</Text>
+      <Item
+        configuration={VARIANT_WITH_ICON}
+        data={{ title: "Add To Playlist" }}
+      />
+
+      <Text style={styles.demoLabel}>Inactive state</Text>
+      <Item
+        configuration={VARIANT_TEXT_ONLY}
+        data={{ title: "Unavailable" }}
+        disabled
+      />
+
+      <Text style={styles.demoLabel}>Custom title config — uppercase</Text>
+      <Item
+        configuration={VARIANT_UPPERCASE_TITLE}
+        data={{ title: "Save Changes" }}
+      />
+
+      <Text style={styles.demoLabel}>Custom icons config — 32×32</Text>
+      <Item
+        configuration={VARIANT_LARGE_ICON}
+        data={{ title: "Add To Queue" }}
+      />
+    </View>
+  );
+}

package/Components/ModalComponent/AudioPlayer/Components/Header.tsx

@@ -9,7 +9,7 @@
  */
 
 import React, { useCallback, useState } from "react";
-import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import { Image, Platform, StyleSheet, Text, View } from "react-native";
 
 const styles = StyleSheet.create({
   row: {
@@ -123,7 +123,6 @@ export type ActionButtonsStyleConfiguration = {
 };
 
 export type HeaderConfiguration = {
-  paddingTop?: number;
   variant: HeaderVariant;
   title: TitleConfiguration;
   closeButton: CloseButtonConfiguration;
@@ -169,17 +168,12 @@ export type HeaderData = {
   title: string;
 };
 
-export type AudioPlayerHeaderProps = {
+export type ItemProps = {
   configuration: HeaderConfiguration;
   data: HeaderData;
   focusedCloseButton?: boolean;
   focusedLeadingAction?: boolean;
   focusedTrailingAction?: boolean;
-  onClose?: () => void;
-  onBack?: () => void;
-  onCancel?: () => void;
-  onDone?: () => void;
-  onClear?: () => void;
 };
 
 // ---------------------------------------------------------------------------
@@ -208,9 +202,9 @@ type ActionButtonsBehaviorSpec = {
 const CONTAINER_SPEC: Record<HeaderVariant, ContainerSpec> = {
   singleLine: {
     horizontalGutter: 16,
-    paddingTop: 24,
-    paddingRight: 20,
-    paddingBottom: 12,
+    paddingTop: 0,
+    paddingRight: 14,
+    paddingBottom: 8,
     paddingLeft: 20,
   },
   headerWithActions: {
@@ -262,6 +256,9 @@ const ACTION_BUTTONS_BEHAVIOR: Record<
   },
 };
 
+const DEFAULT_CLOSE_BUTTON_ASSET =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAl0lEQVR42u2YQQ7AIAgE/f+naQ899dDYyiLT7DyAnRijwBjGGLNEnKCy4qJCNlVYKZ2aETeUshLhTGlZbUVh5UGkB8hlM4PKZDMCy2VXgrfJfhHYLvtGpI3sjFA72SextrKz0m1bUYwsTvhX97f9C4F8g5G/HLKPQHZqyF4YOW0g5znkxCytjV6koFZVqGVg5Yc0jDFmiQNENiwNUMoCZAAAAABJRU5ErkJggg==";
+
 const CLOSE_BUTTON_SPEC = {
   width: 44,
   height: 44,
@@ -301,26 +298,16 @@ function shouldShowActionSlot(slot: ActionSlotSpec, sectionEnabled: boolean) {
 
 type HeaderContainerProps = {
   variant: HeaderVariant;
-  configuration: HeaderConfiguration;
   children: React.ReactNode;
 };
 
-function HeaderContainer({
-  variant,
-  configuration,
-  children,
-}: HeaderContainerProps) {
+function HeaderContainer({ variant, children }: HeaderContainerProps) {
   const container = CONTAINER_SPEC[variant];
 
-  const paddingTop =
-    configuration.paddingTop !== undefined
-      ? configuration.paddingTop
-      : container.paddingTop;
-
   return (
     <View
       style={{
-        paddingTop: paddingTop,
+        paddingTop: container.paddingTop,
         paddingRight: container.paddingRight,
         paddingBottom: container.paddingBottom,
         paddingLeft: container.paddingLeft,
@@ -369,80 +356,21 @@ function HeaderTitle({ title, configuration, centered }: HeaderTitleProps) {
 type HeaderCloseButtonProps = {
   configuration: CloseButtonConfiguration;
   focused?: boolean;
-  onPress?: () => void;
 };
 
 function HeaderCloseButton({
   configuration,
   focused = false,
-  onPress,
 }: HeaderCloseButtonProps) {
   if (!configuration.enabled) {
     return null;
   }
 
-  const buttonSize = 32;
+  const asset = configuration.asset ?? DEFAULT_CLOSE_BUTTON_ASSET;
 
   return (
-    <Pressable
-      onPress={onPress}
-      style={({ pressed }) => [
-        styles.closeButton,
-        {
-          width: buttonSize,
-          height: buttonSize,
-          borderRadius: buttonSize / 2,
-          borderWidth: 1.5,
-          borderColor: "rgba(255, 255, 255, 0.4)",
-          opacity: pressed || focused ? 0.7 : 1,
-          justifyContent: "center",
-          alignItems: "center",
-        },
-      ]}
-    >
-      <View
-        style={{
-          width: 14,
-          height: 14,
-          justifyContent: "center",
-          alignItems: "center",
-        }}
-      >
-        <View
-          style={{
-            position: "absolute",
-            width: 14,
-            height: 1.5,
-            backgroundColor: "#FFFFFF",
-            transform: [{ rotate: "45deg" }],
-            borderRadius: 1,
-          }}
-        />
-        <View
-          style={{
-            position: "absolute",
-            width: 14,
-            height: 1.5,
-            backgroundColor: "#FFFFFF",
-            transform: [{ rotate: "-45deg" }],
-            borderRadius: 1,
-          }}
-        />
-      </View>
-    </Pressable>
-  );
-}
-
-type HeaderBackButtonProps = {
-  focused?: boolean;
-  onPress?: () => void;
-};
-
-function HeaderBackButton({ focused = false, onPress }: HeaderBackButtonProps) {
-  return (
-    <Pressable
-      onPress={onPress}
-      style={({ pressed }) => [
+    <View
+      style={[
         styles.closeButton,
         {
           width: CLOSE_BUTTON_SPEC.width,
@@ -454,14 +382,19 @@ function HeaderBackButton({ focused = false, onPress }: HeaderBackButtonProps) {
           borderRadius: CLOSE_BUTTON_SPEC.width / 2,
           borderWidth: 1,
           borderColor: "#FFFFFF",
-          opacity: pressed || focused ? 0.7 : 1,
+          opacity: focused ? 0.7 : 1,
         },
       ]}
     >
-      <Text style={{ color: "#FFFFFF", fontSize: 20, fontWeight: "bold" }}>
-        ‹
-      </Text>
-    </Pressable>
+      <Image
+        source={{ uri: asset }}
+        style={{
+          width: CLOSE_BUTTON_SPEC.width * 0.55,
+          height: CLOSE_BUTTON_SPEC.height * 0.55,
+        }}
+        resizeMode="contain"
+      />
+    </View>
   );
 }
 
@@ -469,29 +402,25 @@ type HeaderActionButtonProps = {
   actionType: HeaderActionType;
   configuration: ActionButtonsStyleConfiguration;
   focused?: boolean;
-  onPress?: () => void;
 };
 
 function HeaderActionButton({
   actionType,
   configuration,
   focused = false,
-  onPress,
 }: HeaderActionButtonProps) {
   return (
-    <Pressable
-      onPress={onPress}
-      style={({ pressed }) => ({
-        backgroundColor:
-          pressed || focused
-            ? configuration.focusedBackgroundColor
-            : configuration.defaultBackgroundColor,
+    <View
+      style={{
+        backgroundColor: focused
+          ? configuration.focusedBackgroundColor
+          : configuration.defaultBackgroundColor,
         borderRadius: ACTION_BUTTON_LAYOUT_SPEC.cornerRadius,
         paddingTop: ACTION_BUTTON_LAYOUT_SPEC.paddingTop,
         paddingRight: ACTION_BUTTON_LAYOUT_SPEC.paddingRight,
         paddingBottom: ACTION_BUTTON_LAYOUT_SPEC.paddingBottom,
         paddingLeft: ACTION_BUTTON_LAYOUT_SPEC.paddingLeft,
-      })}
+      }}
     >
       <Text
         style={{
@@ -515,7 +444,7 @@ function HeaderActionButton({
       >
         {ACTION_LABELS[actionType]}
       </Text>
-    </Pressable>
+    </View>
   );
 }
 
@@ -607,21 +536,16 @@ function CenterAlignedHeaderLayout({
 }
 
 // ---------------------------------------------------------------------------
-// AudioPlayerHeader
+// Item
 // ---------------------------------------------------------------------------
 
-export function AudioPlayerHeader({
+export function Item({
   configuration,
   data,
   focusedCloseButton = false,
   focusedLeadingAction = false,
   focusedTrailingAction = false,
-  onClose,
-  onBack,
-  onCancel,
-  onDone,
-  onClear,
-}: AudioPlayerHeaderProps) {
+}: ItemProps) {
   const { variant, title, closeButton, actionButtons } = configuration;
   const { title: titleText } = data;
 
@@ -644,10 +568,7 @@ export function AudioPlayerHeader({
       actionType={behavior.leading.actionType}
       configuration={actionButtons}
       focused={focusedLeadingAction}
-      onPress={onCancel}
     />
-  ) : onBack ? (
-    <HeaderBackButton focused={focusedCloseButton} onPress={onBack} />
   ) : null;
 
   const trailingContent = showTrailingAction ? (
@@ -655,19 +576,17 @@ export function AudioPlayerHeader({
       actionType={behavior.trailing.actionType}
       configuration={actionButtons}
       focused={focusedTrailingAction}
-      onPress={behavior.trailing.actionType === "done" ? onDone : onClear}
     />
   ) : closeButton.enabled && !isCenterAligned ? (
     <HeaderCloseButton
       configuration={closeButton}
       focused={focusedCloseButton}
-      onPress={onClose}
     />
   ) : null;
 
   if (isCenterAligned) {
     return (
-      <HeaderContainer variant={variant} configuration={configuration}>
+      <HeaderContainer variant={variant}>
         <CenterAlignedHeaderLayout
           horizontalGutter={container.horizontalGutter}
           title={title}
@@ -680,7 +599,7 @@ export function AudioPlayerHeader({
   }
 
   return (
-    <HeaderContainer variant={variant} configuration={configuration}>
+    <HeaderContainer variant={variant}>
       <View style={styles.row}>
         {leadingContent ? (
           <>
@@ -728,7 +647,6 @@ export const VARIANT_HEADER_WITH_ACTIONS: HeaderConfiguration = {
   },
   closeButton: { enabled: false },
   actionButtons: DEFAULT_ACTION_BUTTONS_STYLE_CONFIGURATION,
-  paddingTop: 16,
 };
 
 /** Variant 2 — single side action (layout rule demo) */
@@ -747,7 +665,6 @@ export const VARIANT_HEADER_WITH_CANCEL_ONLY: HeaderConfiguration = {
   },
   closeButton: { enabled: false },
   actionButtons: DEFAULT_ACTION_BUTTONS_STYLE_CONFIGURATION,
-  paddingTop: 16,
 };
 
 /** Variant 3 — Section Header */
@@ -775,7 +692,7 @@ export default function App() {
 
       <View style={styles.demoBlock}>
         <Text style={styles.demoLabel}>Single Line Header</Text>
-        <AudioPlayerHeader
+        <Item
           configuration={VARIANT_SINGLE_LINE_HEADER}
           data={{ title: "Playback Speed" }}
         />
@@ -783,7 +700,7 @@ export default function App() {
 
       <View style={styles.demoBlock}>
         <Text style={styles.demoLabel}>Header With Actions</Text>
-        <AudioPlayerHeader
+        <Item
           configuration={VARIANT_HEADER_WITH_ACTIONS}
           data={{ title: "Playback Speed" }}
         />
@@ -793,7 +710,7 @@ export default function App() {
         <Text style={styles.demoLabel}>
           Header With Actions — single side action
         </Text>
-        <AudioPlayerHeader
+        <Item
           configuration={VARIANT_HEADER_WITH_CANCEL_ONLY}
           data={{ title: "Playback Speed" }}
         />
@@ -801,7 +718,7 @@ export default function App() {
 
       <View style={styles.demoBlock}>
         <Text style={styles.demoLabel}>Section Header</Text>
-        <AudioPlayerHeader
+        <Item
           configuration={VARIANT_SECTION_HEADER}
           data={{ title: "Next in Queue" }}
         />