related-ui-components 1.1.6

package/lib/module/components/Badges/Badge.js

@@ -0,0 +1,59 @@
+"use strict";
+
+import { useTheme } from "../../theme/index.js";
+import React from "react";
+import { View, StyleSheet, Text } from "react-native";
+
+// Badge props
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Simple Badge component
+export const Badge = ({
+  icon,
+  isActive = false,
+  size,
+  style,
+  activeStyle,
+  inactiveStyle,
+  activeIcon,
+  label,
+  labelStyle
+}) => {
+  const theme = useTheme();
+  const styles = StyleSheet.create({
+    badge: {
+      borderRadius: 12,
+      justifyContent: "center",
+      alignItems: "center",
+      backgroundColor: theme.secondary,
+      padding: 8
+    },
+    activeBadge: {
+      backgroundColor: theme.primary
+    },
+    label: {
+      fontSize: 12,
+      color: theme.text,
+      marginTop: 4,
+      textAlign: "center",
+      fontWeight: "500"
+    }
+  });
+  const badgeStyles = [styles.badge, size ? {
+    width: size,
+    height: size
+  } : {}, style, isActive ? [styles.activeBadge, activeStyle] : inactiveStyle];
+  return /*#__PURE__*/_jsxs(View, {
+    style: {
+      alignItems: "center"
+    },
+    children: [/*#__PURE__*/_jsx(View, {
+      style: badgeStyles,
+      children: isActive && activeIcon ? activeIcon : icon
+    }), label && /*#__PURE__*/_jsx(Text, {
+      style: [styles.label, labelStyle],
+      children: label
+    })]
+  });
+};
+export default Badge;
+//# sourceMappingURL=Badge.js.map

package/lib/module/components/Badges/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useTheme","React","View","StyleSheet","Text","jsx","_jsx","jsxs","_jsxs","Badge","icon","isActive","size","style","activeStyle","inactiveStyle","activeIcon","label","labelStyle","theme","styles","create","badge","borderRadius","justifyContent","alignItems","backgroundColor","secondary","padding","activeBadge","primary","fontSize","color","text","marginTop","textAlign","fontWeight","badgeStyles","width","height","children"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Badges/Badge.tsx"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,sBAAa;AACtC,OAAOC,KAAK,MAAM,OAAO;AACzB,SACEC,IAAI,EACJC,UAAU,EAIVC,IAAI,QAEC,cAAc;;AAErB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAiBA;AACA,OAAO,MAAMC,KAA2B,GAAGA,CAAC;EAC1CC,IAAI;EACJC,QAAQ,GAAG,KAAK;EAChBC,IAAI;EACJC,KAAK;EACLC,WAAW;EACXC,aAAa;EACbC,UAAU;EACVC,KAAK;EACLC;AACF,CAAC,KAAK;EACJ,MAAMC,KAAK,GAAGnB,QAAQ,CAAC,CAAC;EAExB,MAAMoB,MAAM,GAAGjB,UAAU,CAACkB,MAAM,CAAC;IAC/BC,KAAK,EAAE;MACLC,YAAY,EAAE,EAAE;MAChBC,cAAc,EAAE,QAAQ;MACxBC,UAAU,EAAE,QAAQ;MACpBC,eAAe,EAAEP,KAAK,CAACQ,SAAS;MAChCC,OAAO,EAAE;IACX,CAAC;IACDC,WAAW,EAAE;MACXH,eAAe,EAAEP,KAAK,CAACW;IACzB,CAAC;IACDb,KAAK,EAAE;MACHc,QAAQ,EAAE,EAAE;MACZC,KAAK,EAAEb,KAAK,CAACc,IAAI;MACjBC,SAAS,EAAE,CAAC;MACZC,SAAS,EAAE,QAAQ;MACnBC,UAAU,EAAE;IACd;EACJ,CAAC,CAAC;EAEF,MAAMC,WAAW,GAAG,CAClBjB,MAAM,CAACE,KAAK,EACZV,IAAI,GAAG;IAAE0B,KAAK,EAAE1B,IAAI;IAAE2B,MAAM,EAAE3B;EAAK,CAAC,GAAG,CAAC,CAAC,EACzCC,KAAK,EACLF,QAAQ,GAAG,CAACS,MAAM,CAACS,WAAW,EAAEf,WAAW,CAAC,GAAGC,aAAa,CAC7D;EAED,oBACEP,KAAA,CAACN,IAAI;IAACW,KAAK,EAAE;MAAEY,UAAU,EAAE;IAAS,CAAE;IAAAe,QAAA,gBACpClC,IAAA,CAACJ,IAAI;MAACW,KAAK,EAAEwB,WAAY;MAAAG,QAAA,EACtB7B,QAAQ,IAAIK,UAAU,GAAGA,UAAU,GAAGN;IAAI,CACvC,CAAC,EACNO,KAAK,iBAAIX,IAAA,CAACF,IAAI;MAACS,KAAK,EAAE,CAACO,MAAM,CAACH,KAAK,EAAEC,UAAU,CAAE;MAAAsB,QAAA,EAAEvB;IAAK,CAAO,CAAC;EAAA,CAC7D,CAAC;AAEX,CAAC;AAED,eAAeR,KAAK","ignoreList":[]}

package/lib/module/components/Badges/README.md

@@ -0,0 +1,98 @@
+# Badge Component
+
+A customizable badge component for React Native applications that displays icons with optional labels, supporting both active and inactive states. Perfect for creating navigation tabs, feature highlights, or status indicators.
+
+## Basic Usage
+
+```jsx
+import React from 'react';
+import { View } from 'react-native';
+import { Badge } from '@your-org/component-library';
+import { StarIcon } from 'your-icon-library';
+
+const MyBadgeExample = () => {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Badge 
+        icon={<StarIcon size={24} color="#FFFFFF" />}
+        label="Favorite"
+        isActive={true}
+      />
+    </View>
+  );
+};
+
+export default MyBadgeExample;
+```
+
+## Props
+
+### Core Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `icon` | `React.ReactNode` | ✅ | - | Icon to display in the badge |
+| `activeIcon` | `React.ReactNode` | ❌ | - | Alternative icon to display when badge is active |
+| `isActive` | `boolean` | ❌ | `false` | Whether the badge is in active state |
+| `label` | `string` | ❌ | - | Text label for the badge |
+
+### Dimension Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `size` | `number` | ❌ | `60` | Size of the badge in pixels |
+
+### Styling Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `style` | `StyleProp<ViewStyle>` | ❌ | - | Custom style for the badge |
+| `activeStyle` | `StyleProp<ViewStyle>` | ❌ | - | Additional style applied when badge is active |
+| `inactiveStyle` | `StyleProp<ViewStyle>` | ❌ | - | Additional style applied when badge is inactive |
+| `labelStyle` | `StyleProp<TextStyle>` | ❌ | - | Custom style for the label text |
+
+## Advanced Examples
+
+### With Active and Inactive Icons
+
+```jsx
+<Badge 
+  icon={<StarOutlineIcon size={24} color="#FFFFFF" />}
+  activeIcon={<StarFilledIcon size={24} color="#FFFFFF" />}
+  isActive={isFavorite}
+  label="Favorite"
+  size={80}
+/>
+```
+
+### Custom Styling
+
+```jsx
+<Badge 
+  icon={<ProfileIcon size={30} color="#333333" />}
+  style={{ backgroundColor: '#F5F5F5', borderWidth: 1, borderColor: '#E0E0E0' }}
+  activeStyle={{ backgroundColor: '#4CAF50', borderColor: '#388E3C' }}
+  labelStyle={{ color: '#333333', fontSize: 14, fontWeight: 'bold' }}
+  label="Profile"
+  size={70}
+/>
+```
+
+### Without Label
+
+```jsx
+<Badge 
+  icon={<NotificationIcon size={24} color="#FFFFFF" />}
+  activeIcon={<NotificationActiveIcon size={24} color="#FFFFFF" />}
+  isActive={hasNotifications}
+  size={50}
+/>
+```
+
+
+### Theme Integration
+
+The Badge component automatically uses your application's theme through the `useTheme()` hook. Default styling includes:
+- Badge background color: Uses `theme.secondary` for inactive state
+- Active badge background color: Uses `theme.primary` for active state
+- Label text color: Uses `theme.text`

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

@@ -0,0 +1,5 @@
+"use strict";
+
+export { default as Badge } from "./Badge.js";
+export * from "./Badge.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["default","Badge"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Badges/index.ts"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,KAAK,QAAQ,YAAS;AAC1C,cAAc,YAAS","ignoreList":[]}

package/lib/module/components/Banner/Banner.js

@@ -0,0 +1,130 @@
+"use strict";
+
+import React from "react";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { Card, CardFooter } from "../Card/index.js";
+import { useTheme } from "../../theme/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A customizable banner component with background image and action button
+ */
+const Banner = ({
+  backgroundImage,
+  buttonText = "Redeem",
+  onButtonPress,
+  onBannerPress,
+  containerStyle,
+  backgroundImageStyle,
+  contentContainerStyle,
+  buttonStyle,
+  buttonTextStyle,
+  height = 300,
+  customButton,
+  contentAlignment = "center",
+  // Icon props with defaults
+  icon,
+  iconPosition = "left",
+  iconStyle,
+  iconSpacing = 8
+}) => {
+  const theme = useTheme();
+  // Handle banner press if provided
+  const handlePress = onBannerPress ? onBannerPress : undefined;
+
+  // Render the button with optional icon
+  const renderButton = () => {
+    if (customButton) {
+      return customButton;
+    }
+    if (!buttonText) {
+      return null;
+    }
+    return /*#__PURE__*/_jsx(TouchableOpacity, {
+      style: [styles.button, buttonStyle, {
+        borderColor: theme.primary
+      }],
+      onPress: onButtonPress,
+      accessibilityRole: "button",
+      accessibilityLabel: buttonText,
+      children: /*#__PURE__*/_jsxs(View, {
+        style: [styles.buttonContent, {
+          flexDirection: iconPosition === "left" ? "row" : "row-reverse"
+        }],
+        children: [icon && /*#__PURE__*/_jsx(View, {
+          style: [styles.iconContainer, {
+            marginRight: iconPosition === "left" ? iconSpacing : 0,
+            marginLeft: iconPosition === "right" ? iconSpacing : 0
+          }, iconStyle],
+          accessible: false,
+          importantForAccessibility: "no-hide-descendants",
+          children: icon
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.buttonText, buttonTextStyle, {
+            color: theme.primary
+          }],
+          children: buttonText
+        })]
+      })
+    });
+  };
+  return /*#__PURE__*/_jsx(Card, {
+    style: [{
+      height
+    }, containerStyle],
+    backgroundImage: {
+      source: backgroundImage,
+      resizeMode: "cover",
+      style: backgroundImageStyle
+    },
+    onPress: handlePress,
+    children: /*#__PURE__*/_jsx(CardFooter, {
+      justifyContent: "center",
+      style: [styles.footer, contentAlignment === "top" ? styles.footerTop : contentAlignment === "center" ? styles.footerCenter : styles.footerBottom, contentContainerStyle],
+      children: renderButton()
+    })
+  });
+};
+const styles = StyleSheet.create({
+  footer: {
+    position: "absolute",
+    left: 0,
+    right: 0
+  },
+  footerTop: {
+    top: 0
+  },
+  footerCenter: {
+    top: "50%",
+    transform: [{
+      translateY: -20
+    }] // Approximate button height offset
+  },
+  footerBottom: {
+    bottom: 0
+  },
+  button: {
+    backgroundColor: "transparent",
+    paddingHorizontal: 24,
+    paddingVertical: 8,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: "#FFFFFF"
+  },
+  buttonContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  iconContainer: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  buttonText: {
+    color: "#FFFFFF",
+    fontSize: 14,
+    fontWeight: "600",
+    letterSpacing: 1
+  }
+});
+export default Banner;
+//# sourceMappingURL=Banner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","Text","TouchableOpacity","View","Card","CardFooter","useTheme","jsx","_jsx","jsxs","_jsxs","Banner","backgroundImage","buttonText","onButtonPress","onBannerPress","containerStyle","backgroundImageStyle","contentContainerStyle","buttonStyle","buttonTextStyle","height","customButton","contentAlignment","icon","iconPosition","iconStyle","iconSpacing","theme","handlePress","undefined","renderButton","style","styles","button","borderColor","primary","onPress","accessibilityRole","accessibilityLabel","children","buttonContent","flexDirection","iconContainer","marginRight","marginLeft","accessible","importantForAccessibility","color","source","resizeMode","justifyContent","footer","footerTop","footerCenter","footerBottom","create","position","left","right","top","transform","translateY","bottom","backgroundColor","paddingHorizontal","paddingVertical","borderRadius","borderWidth","alignItems","fontSize","fontWeight","letterSpacing"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Banner/Banner.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Banner/BannerWithDetails.js

@@ -0,0 +1,111 @@
+"use strict";
+
+import React from "react";
+import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
+import { Card, CardContent } from "../Card/index.js";
+import { useTheme } from "../../theme/index.js"; // Import ThemeType
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const BannerWithDetails = ({
+  backgroundImage,
+  logoImage,
+  detailText,
+  onPress,
+  containerStyle,
+  imageStyle,
+  logoContainerStyle,
+  logoStyle,
+  textContainerStyle,
+  textStyle,
+  customDetailContent
+}) => {
+  const theme = useTheme();
+  const styles = createStyles(theme); // Create styles using theme
+
+  const content = /*#__PURE__*/_jsx(View, {
+    style: {
+      width: "100%",
+      paddingBottom: 50
+    },
+    children: /*#__PURE__*/_jsx(Card, {
+      style: [styles.container, containerStyle],
+      backgroundImage: {
+        source: backgroundImage,
+        style: [styles.backgroundImage, imageStyle]
+      },
+      borderRadius: 15,
+      children: /*#__PURE__*/_jsxs(CardContent, {
+        style: styles.cardContent,
+        children: [/*#__PURE__*/_jsx(Card, {
+          style: [styles.logoContainer, logoContainerStyle],
+          backgroundImage: {
+            source: logoImage,
+            style: [styles.backgroundImage],
+            imageStyle: logoStyle
+          }
+        }), /*#__PURE__*/_jsx(Card, {
+          variant: "elevated",
+          style: [styles.textContainer, textContainerStyle],
+          children: customDetailContent || /*#__PURE__*/_jsx(Text, {
+            style: [styles.detailText, textStyle],
+            children: detailText
+          })
+        })]
+      })
+    })
+  });
+  if (onPress) {
+    return /*#__PURE__*/_jsx(TouchableOpacity, {
+      onPress: onPress,
+      children: content
+    });
+  }
+  return content;
+};
+
+// Function to create themed styles
+const createStyles = theme => StyleSheet.create({
+  container: {
+    position: "relative",
+    borderRadius: 12,
+    padding: 0,
+    height: 300
+  },
+  backgroundImage: {
+    width: "100%",
+    height: "100%",
+    resizeMode: "cover"
+  },
+  cardContent: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    padding: 0,
+    alignItems: "center",
+    transform: [{
+      translateY: "30%"
+    }]
+  },
+  logoContainer: {
+    marginVertical: 0,
+    bottom: -15,
+    width: 90,
+    height: 80,
+    zIndex: 50
+    // Background is image
+  },
+  textContainer: {
+    marginVertical: 0,
+    padding: 20,
+    height: 80,
+    width: "90%",
+    justifyContent: "center"
+  },
+  detailText: {
+    textAlign: "center",
+    fontSize: 14,
+    color: theme.onSurface // Use standard text color
+  }
+});
+export default BannerWithDetails;
+//# sourceMappingURL=BannerWithDetails.js.map

package/lib/module/components/Banner/BannerWithDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Text","StyleSheet","TouchableOpacity","Card","CardContent","useTheme","jsx","_jsx","jsxs","_jsxs","BannerWithDetails","backgroundImage","logoImage","detailText","onPress","containerStyle","imageStyle","logoContainerStyle","logoStyle","textContainerStyle","textStyle","customDetailContent","theme","styles","createStyles","content","style","width","paddingBottom","children","container","source","borderRadius","cardContent","logoContainer","variant","textContainer","create","position","padding","height","resizeMode","bottom","left","right","alignItems","transform","translateY","marginVertical","zIndex","justifyContent","textAlign","fontSize","color","onSurface"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Banner/BannerWithDetails.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Banner/README.md

@@ -0,0 +1,101 @@
+# Banner
+
+![Banner Component](../../assets/components/SimpleBanner.png)
+
+## Banner Documentation
+
+The `Banner` is a customizable banner component with a background image and an optional action button. It supports different vertical alignments, custom styling, and an optional icon that can be positioned on either side of the button text.
+
+### Usage
+
+```tsx
+import Banner from "@/components/Card/templates/Banner";
+import { Ionicons } from "@expo/vector-icons";
+
+const MyComponent = () => {
+  return (
+    <Banner
+      backgroundImage={require("@/assets/images/banner-bg.jpg")}
+      buttonText="Redeem Now"
+      onButtonPress={() => Alert.alert("Button pressed")}
+      onBannerPress={() => Alert.alert("Banner pressed")}
+      height={200}
+      contentAlignment="bottom"
+      icon={<Ionicons name="gift-outline" size={20} color="#FFFFFF" />}
+      iconPosition="left"
+    />
+  );
+};
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `backgroundImage` | `ImageRequireSource` | Required | The background image to display in the banner |
+| `buttonText` | `string` | `"Redeem"` | Text to display on the action button |
+| `onButtonPress` | `() => void` | `undefined` | Function to execute when the button is pressed |
+| `onBannerPress` | `() => void` | `undefined` | Function to execute when the banner (outside the button) is pressed |
+| `containerStyle` | `ViewStyle` | `undefined` | Additional styles to apply to the banner container |
+| `backgroundImageStyle` | `ViewStyle` | `undefined` | Additional styles to apply to the background image |
+| `contentContainerStyle` | `ViewStyle` | `undefined` | Additional styles to apply to the content container |
+| `buttonStyle` | `ViewStyle` | `undefined` | Additional styles to apply to the button |
+| `buttonTextStyle` | `TextStyle` | `undefined` | Additional styles to apply to the button text |
+| `height` | `DimensionValue` | `300` | Height of the banner |
+| `customButton` | `React.ReactNode` | `undefined` | Custom button component to replace the default button |
+| `contentAlignment` | `"top" \| "center" \| "bottom"` | `"center"` | Vertical alignment of the content within the banner |
+| `icon` | `React.ReactNode` | `undefined` | Optional icon to display alongside the button text |
+| `iconPosition` | `"left" \| "right"` | `"left"` | Position of the icon relative to the button text |
+| `iconStyle` | `ViewStyle` | `undefined` | Additional styles to apply to the icon container |
+| `iconSpacing` | `number` | `8` | Spacing between the icon and button text |
+
+### Related Components
+
+- `Card`: The base component used for the overall container
+- `CardFooter`: Contains the button and manages content positioning
+
+# BannerWithDetails
+
+![BannerWithDetails Component](../../assets/components/BannerWithDetails.png)
+
+## BannerWithDetails Documentation
+
+The `BannerWithDetails` is a visually appealing banner component that combines a background image with a prominently featured logo and a card containing detail text. It's designed for showcasing brand information or promotional content with a clean, elevated appearance.
+
+### Usage
+
+```tsx
+import BannerWithDetails from "@/components/Card/templates/BannerWithDetails";
+
+const MyComponent = () => {
+  return (
+    <BannerWithDetails
+      backgroundImage={require("@/assets/images/banner-bg.jpg")}
+      logoImage={require("@/assets/images/company-logo.png")}
+      detailText="Limited time offer: 25% off on all premium items!"
+      onPress={() => Alert.alert("Banner pressed")}
+    />
+  );
+};
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `backgroundImage` | `ImageRequireSource` | Required | The background image for the banner |
+| `logoImage` | `ImageRequireSource` | Required | The logo image to display in the centered card |
+| `detailText` | `string` | Required | Text description to display in the details card |
+| `onPress` | `() => void` | `undefined` | Function to execute when the banner is pressed |
+| `containerStyle` | `ViewStyle` | `undefined` | Additional styles for the main container |
+| `imageStyle` | `ViewStyle` | `undefined` | Additional styles for the background image |
+| `logoContainerStyle` | `ViewStyle` | `undefined` | Additional styles for the logo container |
+| `logoStyle` | `ImageStyle` | `undefined` | Additional styles for the logo image |
+| `textContainerStyle` | `ViewStyle` | `undefined` | Additional styles for the text container |
+| `textStyle` | `TextStyle` | `undefined` | Additional styles for the detail text |
+| `customDetailContent` | `React.ReactNode` | `undefined` | Custom content to replace the default detail text |
+
+### Related Components
+
+- `Card`: Used for the main container, logo container, and text container
+- `CardContent`: Manages the positioning of the logo and text containers

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

@@ -0,0 +1,7 @@
+"use strict";
+
+export { default as Banner } from "./Banner.js";
+export { default as BannerWithDetails } from "./BannerWithDetails.js";
+export * from "./Banner.js";
+export * from "./BannerWithDetails.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["default","Banner","BannerWithDetails"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Banner/index.ts"],"mappings":";;AAAA,SAAQA,OAAO,IAAIC,MAAM,QAAO,aAAU;AAC1C,SAAQD,OAAO,IAAIE,iBAAiB,QAAO,wBAAqB;AAEhE,cAAc,aAAU;AACxB,cAAc,wBAAqB","ignoreList":[]}

package/lib/module/components/BrandIcon/BrandIcon.js

@@ -0,0 +1,98 @@
+"use strict";
+
+import { useTheme } from "../../theme/index.js";
+import React from 'react';
+import { View, Image, TouchableOpacity, StyleSheet } from 'react-native';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const BrandIcon = ({
+  brand,
+  size = 66,
+  selected = false,
+  onPress,
+  disabled = false,
+  containerStyle,
+  imageStyle,
+  selectionIndicatorStyle,
+  selectionIndicatorIcon
+}) => {
+  const theme = useTheme();
+  const styles = createStyles(theme); // Create styles using theme
+
+  const iconSize = {
+    width: size,
+    height: size,
+    borderRadius: size / 2
+  };
+  const imageSize = {
+    width: size,
+    height: size,
+    borderRadius: size / 2
+  };
+  const indicatorSize = {
+    width: size * 0.3,
+    height: size * 0.3,
+    borderRadius: size * 0.3 / 2
+  };
+  const indicatorPosition = {
+    top: -5,
+    right: 0
+  };
+  return /*#__PURE__*/_jsxs(TouchableOpacity, {
+    style: [styles.container, iconSize, selected && styles.selectedContainer, containerStyle],
+    onPress: onPress,
+    disabled: disabled || !onPress,
+    activeOpacity: 0.8,
+    children: [/*#__PURE__*/_jsx(Image, {
+      source: brand.logo,
+      style: [styles.logo, imageSize, imageStyle],
+      resizeMode: "contain"
+    }), selected && /*#__PURE__*/_jsx(View, {
+      style: [styles.selectionIndicator, indicatorSize, indicatorPosition, selectionIndicatorStyle],
+      children: selectionIndicatorIcon
+    })]
+  });
+};
+
+// Function to create themed styles
+const createStyles = theme => StyleSheet.create({
+  container: {
+    backgroundColor: theme.surface,
+    // Use surface for background
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: theme.border,
+    // Use border color
+    shadowColor: '#000000',
+    // Keep shadow black for now
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 2,
+    elevation: 2
+  },
+  selectedContainer: {
+    borderColor: theme.primary,
+    // Use primary for selected border
+    borderWidth: 2 // Keep border width for selected state
+  },
+  logo: {},
+  selectionIndicator: {
+    position: 'absolute',
+    backgroundColor: theme.primary,
+    // Use primary for indicator background
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 2
+  },
+  checkmark: {
+    // Style is unused in current code, but if used:
+    width: '60%',
+    height: '60%'
+    // tintColor: theme.onPrimary, // Use onPrimary if checkmark is an icon/image
+  }
+});
+export default BrandIcon;
+//# sourceMappingURL=BrandIcon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useTheme","React","View","Image","TouchableOpacity","StyleSheet","jsx","_jsx","jsxs","_jsxs","BrandIcon","brand","size","selected","onPress","disabled","containerStyle","imageStyle","selectionIndicatorStyle","selectionIndicatorIcon","theme","styles","createStyles","iconSize","width","height","borderRadius","imageSize","indicatorSize","indicatorPosition","top","right","style","container","selectedContainer","activeOpacity","children","source","logo","resizeMode","selectionIndicator","create","backgroundColor","surface","justifyContent","alignItems","borderWidth","borderColor","border","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","primary","position","zIndex","checkmark"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/BrandIcon/BrandIcon.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,5 @@
+"use strict";
+
+export { default as BrandIcon } from "./BrandIcon.js";
+export * from "./BrandIcon.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["default","BrandIcon"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/BrandIcon/index.ts"],"mappings":";;AAAA,SAAQA,OAAO,IAAIC,SAAS,QAAO,gBAAa;AAChD,cAAc,gBAAa","ignoreList":[]}