@planningcenter/chat-react-native 2.2.0-rc.1 → 2.2.0-rc.3

package/build/components/conversations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"conversations.d.ts","sourceRoot":"","sources":["../../src/components/conversations.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,eAAO,MAAM,aAAa,yBAkEzB,CAAA"}
+{"version":3,"file":"conversations.d.ts","sourceRoot":"","sources":["../../src/components/conversations.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,eAAO,MAAM,aAAa,yBAoEzB,CAAA"}

package/build/components/conversations.js

@@ -1,6 +1,7 @@
 import { useNavigation } from '@react-navigation/native';
+import { FlashList } from '@shopify/flash-list';
 import React from 'react';
-import { FlatList, Pressable, StyleSheet, View } from 'react-native';
+import { Pressable, StyleSheet, View } from 'react-native';
 import { useTheme } from '../hooks';
 import { useConversationsJoltEvents } from '../hooks/use_conversation_jolt_events';
 import { useConversations } from '../hooks/use_conversations';
@@ -13,32 +14,34 @@ export const Conversations = () => {
     const nonEmptyConversations = conversations.filter(c => c.lastMessageTextPreview) || [];
     const navigation = useNavigation();
     useConversationsJoltEvents();
-    return (<FlatList data={nonEmptyConversations} contentContainerStyle={styles.container} style={styles.scrollView} onRefresh={refetch} refreshing={isRefetching} ListHeaderComponent={<View style={styles.header}>
-          <Heading numberOfLines={1} variant="h2">
-            Conversations
-          </Heading>
-          <TextButton>Mark all read</TextButton>
-        </View>} ListEmptyComponent={<Text>No conversations found</Text>} renderItem={({ item }) => (<Pressable style={styles.conversation} onPress={() => navigation.navigate('Conversation', {
+    return (<View style={styles.container}>
+      <FlashList data={nonEmptyConversations} estimatedItemSize={97} contentContainerStyle={styles.contentContainer} onRefresh={refetch} refreshing={isRefetching} ListHeaderComponent={<View style={styles.header}>
+            <Heading numberOfLines={1} variant="h2">
+              Conversations
+            </Heading>
+            <TextButton>Mark all read</TextButton>
+          </View>} ListEmptyComponent={<Text>No conversations found</Text>} renderItem={({ item }) => (<Pressable style={styles.conversation} onPress={() => navigation.navigate('Conversation', {
                 conversation_id: item.id,
                 chat_group_graph_id: item.id,
             })}>
-          <AvatarGroup size="lg" sourceUris={item.previewAvatarUrls || []}/>
-          <View style={styles.conversationBody}>
-            <Heading numberOfLines={1} variant="h3" style={styles.conversationTitle}>
-              {item.title}
-            </Heading>
-            <Text style={styles.listItem} numberOfLines={2}>
-              {item.lastMessageAuthorName}: {item.lastMessageTextPreview}
-            </Text>
-            <View style={styles.conversationBadges}>
-              {item.badges?.map(badge => (<Badge key={badge.text} variant="meta" productLogoName={badge.appName} label={badge.pcoResourceType} metaLabel={badge.text || ''}/>))}
+            <AvatarGroup size="lg" sourceUris={item.previewAvatarUrls || []}/>
+            <View style={styles.conversationBody}>
+              <Heading numberOfLines={1} variant="h3" style={styles.conversationTitle}>
+                {item.title}
+              </Heading>
+              <Text style={styles.listItem} numberOfLines={2}>
+                {item.lastMessageAuthorName}: {item.lastMessageTextPreview}
+              </Text>
+              <View style={styles.conversationBadges}>
+                {item.badges?.map(badge => (<Badge key={badge.text} variant="meta" productLogoName={badge.appName} label={badge.pcoResourceType} metaLabel={badge.text || ''}/>))}
+              </View>
+            </View>
+            <View style={styles.conversationExtra}>
+              <Text variant="secondary">{formatDatePreview(item.lastMessageCreatedAt)}</Text>
+              <UnreadCountBadge count={item.unreadCount}/>
             </View>
-          </View>
-          <View style={styles.conversationExtra}>
-            <Text variant="secondary">{formatDatePreview(item.lastMessageCreatedAt)}</Text>
-            <UnreadCountBadge count={item.unreadCount}/>
-          </View>
-        </Pressable>)} onEndReached={() => fetchNextPage()}/>);
+          </Pressable>)} onEndReached={() => fetchNextPage()}/>
+    </View>);
 };
 const UnreadCountBadge = ({ count }) => {
     const styles = useStyles();
@@ -59,8 +62,8 @@ const useStyles = () => {
             paddingBottom: 8,
             paddingHorizontal: 16,
         },
-        scrollView: { flex: 1 },
-        container: { gap: 8, paddingVertical: 16 },
+        container: { flex: 1 },
+        contentContainer: { paddingVertical: 16 },
         listItem: { color: colors.fillColorNeutral020 },
         conversation: {
             flexDirection: 'row',

package/build/components/conversations.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversations.js","sourceRoot":"","sources":["../../src/components/conversations.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useNavigation } from '@react-navigation/native'\nimport React from 'react'\nimport { FlatList, Pressable, StyleSheet, View } from 'react-native'\nimport { useTheme } from '../hooks'\nimport { useConversationsJoltEvents } from '../hooks/use_conversation_jolt_events'\nimport { useConversations } from '../hooks/use_conversations'\nimport { formatDatePreview } from '../utils/date'\nimport { AvatarGroup, Badge, Heading, Text, TextButton } from './display'\n\nexport const Conversations = () => {\n  const styles = useStyles()\n\n  const { conversations, fetchNextPage, refetch, isRefetching } = useConversations()\n\n  // TODO: Filter using the API\n  const nonEmptyConversations = conversations.filter(c => c.lastMessageTextPreview) || []\n  const navigation = useNavigation()\n\n  useConversationsJoltEvents()\n\n  return (\n    <FlatList\n      data={nonEmptyConversations}\n      contentContainerStyle={styles.container}\n      style={styles.scrollView}\n      onRefresh={refetch}\n      refreshing={isRefetching}\n      ListHeaderComponent={\n        <View style={styles.header}>\n          <Heading numberOfLines={1} variant=\"h2\">\n            Conversations\n          </Heading>\n          <TextButton>Mark all read</TextButton>\n        </View>\n      }\n      ListEmptyComponent={<Text>No conversations found</Text>}\n      renderItem={({ item }) => (\n        <Pressable\n          style={styles.conversation}\n          onPress={() =>\n            navigation.navigate('Conversation', {\n              conversation_id: item.id,\n              chat_group_graph_id: item.id,\n            })\n          }\n        >\n          <AvatarGroup size=\"lg\" sourceUris={item.previewAvatarUrls || []} />\n          <View style={styles.conversationBody}>\n            <Heading numberOfLines={1} variant=\"h3\" style={styles.conversationTitle}>\n              {item.title}\n            </Heading>\n            <Text style={styles.listItem} numberOfLines={2}>\n              {item.lastMessageAuthorName}: {item.lastMessageTextPreview}\n            </Text>\n            <View style={styles.conversationBadges}>\n              {item.badges?.map(badge => (\n                <Badge\n                  key={badge.text}\n                  variant=\"meta\"\n                  productLogoName={badge.appName}\n                  label={badge.pcoResourceType}\n                  metaLabel={badge.text || ''}\n                />\n              ))}\n            </View>\n          </View>\n          <View style={styles.conversationExtra}>\n            <Text variant=\"secondary\">{formatDatePreview(item.lastMessageCreatedAt)}</Text>\n            <UnreadCountBadge count={item.unreadCount} />\n          </View>\n        </Pressable>\n      )}\n      onEndReached={() => fetchNextPage()}\n    />\n  )\n}\n\nconst UnreadCountBadge = ({ count }: { count: number }) => {\n  const styles = useStyles()\n  const displayCount = count > 99 ? '99+' : count\n\n  if (count === 0) return null\n\n  return (\n    <Text variant=\"tertiary\" style={styles.unreadCountBadge}>\n      {displayCount}\n    </Text>\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    header: {\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n      paddingTop: 8,\n      paddingBottom: 8,\n      paddingHorizontal: 16,\n    },\n    scrollView: { flex: 1 },\n    container: { gap: 8, paddingVertical: 16 },\n    listItem: { color: colors.fillColorNeutral020 },\n    conversation: {\n      flexDirection: 'row',\n      gap: 8,\n      borderBottomWidth: 1,\n      borderBottomColor: colors.fillColorNeutral060,\n      paddingTop: 4,\n      paddingBottom: 12,\n      paddingHorizontal: 16,\n    },\n    conversationTitle: {},\n    conversationBody: {\n      flex: 1,\n      rowGap: 2,\n    },\n    conversationExtra: {\n      rowGap: 2,\n    },\n    conversationBadges: {\n      marginTop: 4,\n      alignItems: 'flex-start',\n    },\n    unreadCountBadge: {\n      alignSelf: 'flex-end',\n      backgroundColor: colors.interaction,\n      paddingVertical: 0,\n      paddingHorizontal: 10,\n      borderRadius: 24,\n      color: 'white',\n    },\n  })\n}\n"]}
+{"version":3,"file":"conversations.js","sourceRoot":"","sources":["../../src/components/conversations.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useNavigation } from '@react-navigation/native'\nimport { FlashList } from '@shopify/flash-list'\nimport React from 'react'\nimport { Pressable, StyleSheet, View } from 'react-native'\nimport { useTheme } from '../hooks'\nimport { useConversationsJoltEvents } from '../hooks/use_conversation_jolt_events'\nimport { useConversations } from '../hooks/use_conversations'\nimport { formatDatePreview } from '../utils/date'\nimport { AvatarGroup, Badge, Heading, Text, TextButton } from './display'\n\nexport const Conversations = () => {\n  const styles = useStyles()\n\n  const { conversations, fetchNextPage, refetch, isRefetching } = useConversations()\n\n  // TODO: Filter using the API\n  const nonEmptyConversations = conversations.filter(c => c.lastMessageTextPreview) || []\n  const navigation = useNavigation()\n\n  useConversationsJoltEvents()\n\n  return (\n    <View style={styles.container}>\n      <FlashList\n        data={nonEmptyConversations}\n        estimatedItemSize={97}\n        contentContainerStyle={styles.contentContainer}\n        onRefresh={refetch}\n        refreshing={isRefetching}\n        ListHeaderComponent={\n          <View style={styles.header}>\n            <Heading numberOfLines={1} variant=\"h2\">\n              Conversations\n            </Heading>\n            <TextButton>Mark all read</TextButton>\n          </View>\n        }\n        ListEmptyComponent={<Text>No conversations found</Text>}\n        renderItem={({ item }) => (\n          <Pressable\n            style={styles.conversation}\n            onPress={() =>\n              navigation.navigate('Conversation', {\n                conversation_id: item.id,\n                chat_group_graph_id: item.id,\n              })\n            }\n          >\n            <AvatarGroup size=\"lg\" sourceUris={item.previewAvatarUrls || []} />\n            <View style={styles.conversationBody}>\n              <Heading numberOfLines={1} variant=\"h3\" style={styles.conversationTitle}>\n                {item.title}\n              </Heading>\n              <Text style={styles.listItem} numberOfLines={2}>\n                {item.lastMessageAuthorName}: {item.lastMessageTextPreview}\n              </Text>\n              <View style={styles.conversationBadges}>\n                {item.badges?.map(badge => (\n                  <Badge\n                    key={badge.text}\n                    variant=\"meta\"\n                    productLogoName={badge.appName}\n                    label={badge.pcoResourceType}\n                    metaLabel={badge.text || ''}\n                  />\n                ))}\n              </View>\n            </View>\n            <View style={styles.conversationExtra}>\n              <Text variant=\"secondary\">{formatDatePreview(item.lastMessageCreatedAt)}</Text>\n              <UnreadCountBadge count={item.unreadCount} />\n            </View>\n          </Pressable>\n        )}\n        onEndReached={() => fetchNextPage()}\n      />\n    </View>\n  )\n}\n\nconst UnreadCountBadge = ({ count }: { count: number }) => {\n  const styles = useStyles()\n  const displayCount = count > 99 ? '99+' : count\n\n  if (count === 0) return null\n\n  return (\n    <Text variant=\"tertiary\" style={styles.unreadCountBadge}>\n      {displayCount}\n    </Text>\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    header: {\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n      paddingTop: 8,\n      paddingBottom: 8,\n      paddingHorizontal: 16,\n    },\n    container: { flex: 1 },\n    contentContainer: { paddingVertical: 16 },\n    listItem: { color: colors.fillColorNeutral020 },\n    conversation: {\n      flexDirection: 'row',\n      gap: 8,\n      borderBottomWidth: 1,\n      borderBottomColor: colors.fillColorNeutral060,\n      paddingTop: 4,\n      paddingBottom: 12,\n      paddingHorizontal: 16,\n    },\n    conversationTitle: {},\n    conversationBody: {\n      flex: 1,\n      rowGap: 2,\n    },\n    conversationExtra: {\n      rowGap: 2,\n    },\n    conversationBadges: {\n      marginTop: 4,\n      alignItems: 'flex-start',\n    },\n    unreadCountBadge: {\n      alignSelf: 'flex-end',\n      backgroundColor: colors.interaction,\n      paddingVertical: 0,\n      paddingHorizontal: 10,\n      borderRadius: 24,\n      color: 'white',\n    },\n  })\n}\n"]}

package/build/components/display/banner.d.ts

@@ -1,6 +1,7 @@
 import React, { ReactElement } from 'react';
 import { type BannerStatusIconProps, type BannerRootProps } from '../primitive/banner_primitive';
-interface BannerProps {
+type descriptionUnion = string | ReactElement | undefined;
+export interface BannerProps {
     /**
      * Changes the status color for the background, text, and icon.
      * Sets a preset status icon.
@@ -10,7 +11,7 @@ interface BannerProps {
      * Renders the banner's main text.
      * If some of the text is interactive it can also take `BannerPrimitive.Link` wrapped in `BannerPrimitive.Text`.
      */
-    description: string | ReactElement;
+    description?: descriptionUnion;
     /**
      * Renders the banner's heading text.
      */
@@ -25,5 +26,8 @@ interface BannerProps {
     showIcon?: boolean;
 }
 export declare function Banner({ appearance, description, heading, iconName, showIcon, }: BannerProps): React.JSX.Element | null;
+export declare function ConditionalDescription({ description }: {
+    description: descriptionUnion;
+}): React.JSX.Element | null;
 export {};
 //# sourceMappingURL=banner.d.ts.map

package/build/components/display/banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../../src/components/display/banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAkB,YAAY,EAAE,MAAM,OAAO,CAAA;AAC3D,OAAwB,EACtB,KAAK,qBAAqB,EAC1B,KAAK,eAAe,EACrB,MAAM,+BAA+B,CAAA;AAEtC,UAAU,WAAW;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAA;IAC1C;;;OAGG;IACH,WAAW,EAAE,MAAM,GAAG,YAAY,CAAA;IAClC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,qBAAqB,CAAC,UAAU,CAAC,CAAA;IAC5C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,wBAAgB,MAAM,CAAC,EACrB,UAAU,EACV,WAAW,EACX,OAAO,EACP,QAAQ,EACR,QAAe,GAChB,EAAE,WAAW,4BAkBb"}
+{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../../src/components/display/banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAkB,YAAY,EAAE,MAAM,OAAO,CAAA;AAC3D,OAAwB,EACtB,KAAK,qBAAqB,EAC1B,KAAK,eAAe,EACrB,MAAM,+BAA+B,CAAA;AAEtC,KAAK,gBAAgB,GAAG,MAAM,GAAG,YAAY,GAAG,SAAS,CAAA;AAEzD,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAA;IAC1C;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAA;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,qBAAqB,CAAC,UAAU,CAAC,CAAA;IAC5C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,wBAAgB,MAAM,CAAC,EACrB,UAAU,EACV,WAAW,EACX,OAAO,EACP,QAAQ,EACR,QAAe,GAChB,EAAE,WAAW,4BAcb;AAED,wBAAgB,sBAAsB,CAAC,EAAE,WAAW,EAAE,EAAE;IAAE,WAAW,EAAE,gBAAgB,CAAA;CAAE,4BASxF"}

package/build/components/display/banner.js

@@ -8,9 +8,19 @@ export function Banner({ appearance, description, heading, iconName, showIcon =
         {showIcon && <BannerPrimitive.StatusIcon iconName={iconName}/>}
         <BannerPrimitive.Content>
           {Boolean(heading) && <BannerPrimitive.Heading>{heading}</BannerPrimitive.Heading>}
-          {isValidElement(description) ? (description) : (<BannerPrimitive.Text>{description}</BannerPrimitive.Text>)}
+          <ConditionalDescription description={description}/>
         </BannerPrimitive.Content>
       </BannerPrimitive.StaticLayout>
     </BannerPrimitive.Root>);
 }
+export function ConditionalDescription({ description }) {
+    switch (true) {
+        case description === undefined:
+            return null;
+        case isValidElement(description):
+            return description;
+        default:
+            return <BannerPrimitive.Text>{description}</BannerPrimitive.Text>;
+    }
+}
 //# sourceMappingURL=banner.js.map

package/build/components/display/banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.js","sourceRoot":"","sources":["../../../src/components/display/banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAgB,MAAM,OAAO,CAAA;AAC3D,OAAO,eAGN,MAAM,+BAA+B,CAAA;AA2BtC,MAAM,UAAU,MAAM,CAAC,EACrB,UAAU,EACV,WAAW,EACX,OAAO,EACP,QAAQ,EACR,QAAQ,GAAG,IAAI,GACH;IACZ,IAAI,CAAC,WAAW,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAA;IAEzC,OAAO,CACL,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,CAC3C;MAAA,CAAC,eAAe,CAAC,YAAY,CAC3B;QAAA,CAAC,QAAQ,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAAG,CAC/D;QAAA,CAAC,eAAe,CAAC,OAAO,CACtB;UAAA,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CACjF;UAAA,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAC7B,WAAW,CACZ,CAAC,CAAC,CAAC,CACF,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,EAAE,eAAe,CAAC,IAAI,CAAC,CAC3D,CACH;QAAA,EAAE,eAAe,CAAC,OAAO,CAC3B;MAAA,EAAE,eAAe,CAAC,YAAY,CAChC;IAAA,EAAE,eAAe,CAAC,IAAI,CAAC,CACxB,CAAA;AACH,CAAC","sourcesContent":["import React, { isValidElement, ReactElement } from 'react'\nimport BannerPrimitive, {\n  type BannerStatusIconProps,\n  type BannerRootProps,\n} from '../primitive/banner_primitive'\n\ninterface BannerProps {\n  /**\n   * Changes the status color for the background, text, and icon.\n   * Sets a preset status icon.\n   */\n  appearance?: BannerRootProps['appearance']\n  /**\n   * Renders the banner's main text.\n   * If some of the text is interactive it can also take `BannerPrimitive.Link` wrapped in `BannerPrimitive.Text`.\n   */\n  description: string | ReactElement\n  /**\n   * Renders the banner's heading text.\n   */\n  heading?: string\n  /**\n   * Overrides the preset status icon.\n   */\n  iconName?: BannerStatusIconProps['iconName']\n  /**\n   * Hides the status icon. By default, the status icon is shown.\n   */\n  showIcon?: boolean\n}\n\nexport function Banner({\n  appearance,\n  description,\n  heading,\n  iconName,\n  showIcon = true,\n}: BannerProps) {\n  if (!description && !heading) return null\n\n  return (\n    <BannerPrimitive.Root appearance={appearance}>\n      <BannerPrimitive.StaticLayout>\n        {showIcon && <BannerPrimitive.StatusIcon iconName={iconName} />}\n        <BannerPrimitive.Content>\n          {Boolean(heading) && <BannerPrimitive.Heading>{heading}</BannerPrimitive.Heading>}\n          {isValidElement(description) ? (\n            description\n          ) : (\n            <BannerPrimitive.Text>{description}</BannerPrimitive.Text>\n          )}\n        </BannerPrimitive.Content>\n      </BannerPrimitive.StaticLayout>\n    </BannerPrimitive.Root>\n  )\n}\n"]}
+{"version":3,"file":"banner.js","sourceRoot":"","sources":["../../../src/components/display/banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAgB,MAAM,OAAO,CAAA;AAC3D,OAAO,eAGN,MAAM,+BAA+B,CAAA;AA6BtC,MAAM,UAAU,MAAM,CAAC,EACrB,UAAU,EACV,WAAW,EACX,OAAO,EACP,QAAQ,EACR,QAAQ,GAAG,IAAI,GACH;IACZ,IAAI,CAAC,WAAW,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAA;IAEzC,OAAO,CACL,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,CAC3C;MAAA,CAAC,eAAe,CAAC,YAAY,CAC3B;QAAA,CAAC,QAAQ,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAAG,CAC/D;QAAA,CAAC,eAAe,CAAC,OAAO,CACtB;UAAA,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CACjF;UAAA,CAAC,sBAAsB,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,EACnD;QAAA,EAAE,eAAe,CAAC,OAAO,CAC3B;MAAA,EAAE,eAAe,CAAC,YAAY,CAChC;IAAA,EAAE,eAAe,CAAC,IAAI,CAAC,CACxB,CAAA;AACH,CAAC;AAED,MAAM,UAAU,sBAAsB,CAAC,EAAE,WAAW,EAAqC;IACvF,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,WAAW,KAAK,SAAS;YAC5B,OAAO,IAAI,CAAA;QACb,KAAK,cAAc,CAAC,WAAW,CAAC;YAC9B,OAAO,WAAW,CAAA;QACpB;YACE,OAAO,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,EAAE,eAAe,CAAC,IAAI,CAAC,CAAA;IACrE,CAAC;AACH,CAAC","sourcesContent":["import React, { isValidElement, ReactElement } from 'react'\nimport BannerPrimitive, {\n  type BannerStatusIconProps,\n  type BannerRootProps,\n} from '../primitive/banner_primitive'\n\ntype descriptionUnion = string | ReactElement | undefined\n\nexport interface BannerProps {\n  /**\n   * Changes the status color for the background, text, and icon.\n   * Sets a preset status icon.\n   */\n  appearance?: BannerRootProps['appearance']\n  /**\n   * Renders the banner's main text.\n   * If some of the text is interactive it can also take `BannerPrimitive.Link` wrapped in `BannerPrimitive.Text`.\n   */\n  description?: descriptionUnion\n  /**\n   * Renders the banner's heading text.\n   */\n  heading?: string\n  /**\n   * Overrides the preset status icon.\n   */\n  iconName?: BannerStatusIconProps['iconName']\n  /**\n   * Hides the status icon. By default, the status icon is shown.\n   */\n  showIcon?: boolean\n}\n\nexport function Banner({\n  appearance,\n  description,\n  heading,\n  iconName,\n  showIcon = true,\n}: BannerProps) {\n  if (!description && !heading) return null\n\n  return (\n    <BannerPrimitive.Root appearance={appearance}>\n      <BannerPrimitive.StaticLayout>\n        {showIcon && <BannerPrimitive.StatusIcon iconName={iconName} />}\n        <BannerPrimitive.Content>\n          {Boolean(heading) && <BannerPrimitive.Heading>{heading}</BannerPrimitive.Heading>}\n          <ConditionalDescription description={description} />\n        </BannerPrimitive.Content>\n      </BannerPrimitive.StaticLayout>\n    </BannerPrimitive.Root>\n  )\n}\n\nexport function ConditionalDescription({ description }: { description: descriptionUnion }) {\n  switch (true) {\n    case description === undefined:\n      return null\n    case isValidElement(description):\n      return description\n    default:\n      return <BannerPrimitive.Text>{description}</BannerPrimitive.Text>\n  }\n}\n"]}

package/build/components/display/banner_collapsible.d.ts

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+import { BannerProps } from './banner';
+interface BannerCollapsibleProps extends BannerProps {
+    /**
+     * Hidden by default and shown when the banner is expanded.
+     */
+    children?: ReactNode;
+}
+export declare function BannerCollapsible({ appearance, children, description, heading, iconName, showIcon, }: BannerCollapsibleProps): React.JSX.Element | null;
+export {};
+//# sourceMappingURL=banner_collapsible.d.ts.map

package/build/components/display/banner_collapsible.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"banner_collapsible.d.ts","sourceRoot":"","sources":["../../../src/components/display/banner_collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,EAAE,WAAW,EAA0B,MAAM,UAAU,CAAA;AAiC9D,UAAU,sBAAuB,SAAQ,WAAW;IAClD;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,UAAU,EACV,QAAQ,EACR,WAAW,EACX,OAAO,EACP,QAAQ,EACR,QAAe,GAChB,EAAE,sBAAsB,4BAsBxB"}

package/build/components/display/banner_collapsible.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { ConditionalDescription } from './banner';
+import BannerPrimitive from '../primitive/banner_primitive';
+import { LayoutAnimation } from 'react-native';
+// =================================
+// ====== Constants ================
+// =================================
+const OPACITY_DURATION = 100; // Ensures the content fades before the height rolls up
+const collapsibleAnimationConfig = {
+    duration: 300,
+    create: {
+        type: LayoutAnimation.Types.easeInEaseOut,
+        property: LayoutAnimation.Properties.opacity,
+        duration: OPACITY_DURATION,
+    },
+    update: {
+        type: LayoutAnimation.Types.easeInEaseOut,
+        property: LayoutAnimation.Properties.opacity,
+        duration: OPACITY_DURATION,
+    },
+    delete: {
+        type: LayoutAnimation.Types.easeInEaseOut,
+        property: LayoutAnimation.Properties.opacity,
+        duration: OPACITY_DURATION,
+    },
+};
+export function BannerCollapsible({ appearance, children, description, heading, iconName, showIcon = true, }) {
+    const [expanded, setExpanded] = React.useState(false);
+    const toggleCollapsible = () => {
+        LayoutAnimation.configureNext(collapsibleAnimationConfig);
+        setExpanded(prev => !prev);
+    };
+    if (!description && !heading)
+        return null;
+    return (<BannerPrimitive.Root appearance={appearance}>
+      <BannerPrimitive.CollapsibleLayout onPress={toggleCollapsible} expanded={expanded}>
+        {showIcon && <BannerPrimitive.StatusIcon iconName={iconName}/>}
+        <BannerPrimitive.Content>
+          {Boolean(heading) && <BannerPrimitive.Heading>{heading}</BannerPrimitive.Heading>}
+          <ConditionalDescription description={description}/>
+          {expanded ? children : null}
+        </BannerPrimitive.Content>
+      </BannerPrimitive.CollapsibleLayout>
+    </BannerPrimitive.Root>);
+}
+//# sourceMappingURL=banner_collapsible.js.map

package/build/components/display/banner_collapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"banner_collapsible.js","sourceRoot":"","sources":["../../../src/components/display/banner_collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AACxC,OAAO,EAAe,sBAAsB,EAAE,MAAM,UAAU,CAAA;AAC9D,OAAO,eAAe,MAAM,+BAA+B,CAAA;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAE9C,oCAAoC;AACpC,oCAAoC;AACpC,oCAAoC;AAEpC,MAAM,gBAAgB,GAAG,GAAG,CAAA,CAAC,uDAAuD;AAEpF,MAAM,0BAA0B,GAAG;IACjC,QAAQ,EAAE,GAAG;IACb,MAAM,EAAE;QACN,IAAI,EAAE,eAAe,CAAC,KAAK,CAAC,aAAa;QACzC,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,OAAO;QAC5C,QAAQ,EAAE,gBAAgB;KAC3B;IACD,MAAM,EAAE;QACN,IAAI,EAAE,eAAe,CAAC,KAAK,CAAC,aAAa;QACzC,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,OAAO;QAC5C,QAAQ,EAAE,gBAAgB;KAC3B;IACD,MAAM,EAAE;QACN,IAAI,EAAE,eAAe,CAAC,KAAK,CAAC,aAAa;QACzC,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,OAAO;QAC5C,QAAQ,EAAE,gBAAgB;KAC3B;CACF,CAAA;AAaD,MAAM,UAAU,iBAAiB,CAAC,EAChC,UAAU,EACV,QAAQ,EACR,WAAW,EACX,OAAO,EACP,QAAQ,EACR,QAAQ,GAAG,IAAI,GACQ;IACvB,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IAErD,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,eAAe,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAA;QACzD,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAA;IAC5B,CAAC,CAAA;IAED,IAAI,CAAC,WAAW,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAA;IAEzC,OAAO,CACL,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,CAC3C;MAAA,CAAC,eAAe,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,iBAAiB,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAChF;QAAA,CAAC,QAAQ,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAAG,CAC/D;QAAA,CAAC,eAAe,CAAC,OAAO,CACtB;UAAA,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CACjF;UAAA,CAAC,sBAAsB,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,EACjD;UAAA,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAC7B;QAAA,EAAE,eAAe,CAAC,OAAO,CAC3B;MAAA,EAAE,eAAe,CAAC,iBAAiB,CACrC;IAAA,EAAE,eAAe,CAAC,IAAI,CAAC,CACxB,CAAA;AACH,CAAC","sourcesContent":["import React, { ReactNode } from 'react'\nimport { BannerProps, ConditionalDescription } from './banner'\nimport BannerPrimitive from '../primitive/banner_primitive'\nimport { LayoutAnimation } from 'react-native'\n\n// =================================\n// ====== Constants ================\n// =================================\n\nconst OPACITY_DURATION = 100 // Ensures the content fades before the height rolls up\n\nconst collapsibleAnimationConfig = {\n  duration: 300,\n  create: {\n    type: LayoutAnimation.Types.easeInEaseOut,\n    property: LayoutAnimation.Properties.opacity,\n    duration: OPACITY_DURATION,\n  },\n  update: {\n    type: LayoutAnimation.Types.easeInEaseOut,\n    property: LayoutAnimation.Properties.opacity,\n    duration: OPACITY_DURATION,\n  },\n  delete: {\n    type: LayoutAnimation.Types.easeInEaseOut,\n    property: LayoutAnimation.Properties.opacity,\n    duration: OPACITY_DURATION,\n  },\n}\n\n// =================================\n// ====== Component ================\n// =================================\n\ninterface BannerCollapsibleProps extends BannerProps {\n  /**\n   * Hidden by default and shown when the banner is expanded.\n   */\n  children?: ReactNode\n}\n\nexport function BannerCollapsible({\n  appearance,\n  children,\n  description,\n  heading,\n  iconName,\n  showIcon = true,\n}: BannerCollapsibleProps) {\n  const [expanded, setExpanded] = React.useState(false)\n\n  const toggleCollapsible = () => {\n    LayoutAnimation.configureNext(collapsibleAnimationConfig)\n    setExpanded(prev => !prev)\n  }\n\n  if (!description && !heading) return null\n\n  return (\n    <BannerPrimitive.Root appearance={appearance}>\n      <BannerPrimitive.CollapsibleLayout onPress={toggleCollapsible} expanded={expanded}>\n        {showIcon && <BannerPrimitive.StatusIcon iconName={iconName} />}\n        <BannerPrimitive.Content>\n          {Boolean(heading) && <BannerPrimitive.Heading>{heading}</BannerPrimitive.Heading>}\n          <ConditionalDescription description={description} />\n          {expanded ? children : null}\n        </BannerPrimitive.Content>\n      </BannerPrimitive.CollapsibleLayout>\n    </BannerPrimitive.Root>\n  )\n}\n"]}

package/build/components/display/index.d.ts

@@ -2,6 +2,7 @@ export * from './avatar';
 export * from './avatar_group';
 export * from './badge';
 export * from './banner';
+export * from './banner_collapsible';
 export * from './button';
 export * from './heading';
 export * from './icon';

package/build/components/display/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,sBAAsB,CAAA;AACpC,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA"}

package/build/components/display/index.js

@@ -2,6 +2,7 @@ export * from './avatar';
 export * from './avatar_group';
 export * from './badge';
 export * from './banner';
+export * from './banner_collapsible';
 export * from './button';
 export * from './heading';
 export * from './icon';

package/build/components/display/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA","sourcesContent":["export * from './avatar'\nexport * from './avatar_group'\nexport * from './badge'\nexport * from './banner'\nexport * from './button'\nexport * from './heading'\nexport * from './icon'\nexport * from './icon_button'\nexport * from './image'\nexport * from './spinner'\nexport * from './switch'\nexport * from './text'\nexport * from './text_button'\nexport * from './text_inline_button'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,sBAAsB,CAAA;AACpC,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA","sourcesContent":["export * from './avatar'\nexport * from './avatar_group'\nexport * from './badge'\nexport * from './banner'\nexport * from './banner_collapsible'\nexport * from './button'\nexport * from './heading'\nexport * from './icon'\nexport * from './icon_button'\nexport * from './image'\nexport * from './spinner'\nexport * from './switch'\nexport * from './text'\nexport * from './text_button'\nexport * from './text_inline_button'\n"]}

package/build/components/primitive/banner_primitive.d.ts

@@ -3,6 +3,7 @@ import { type StatusAppearanceUnion } from '../display/utils/status_colors';
 type BannerComponents = {
     Root: FC<BannerRootProps>;
     StaticLayout: FC<BannerStaticLayoutProps>;
+    CollapsibleLayout: FC<BannerCollapsibleLayoutProps>;
     Content: FC<BannerContentProps>;
     StatusIcon: FC<BannerStatusIconProps>;
     Heading: FC<BannerHeadingProps>;
@@ -11,7 +12,7 @@ type BannerComponents = {
 };
 declare const _default: BannerComponents;
 export default _default;
-export type { BannerRootProps, BannerStaticLayoutProps, BannerContentProps, BannerStatusIconProps, BannerHeadingProps, BannerTextProps, BannerLinkProps, };
+export type { BannerRootProps, BannerStaticLayoutProps, BannerCollapsibleLayoutProps, BannerContentProps, BannerStatusIconProps, BannerHeadingProps, BannerTextProps, BannerLinkProps, };
 interface BannerRootProps {
     children: ReactNode;
     appearance?: StatusAppearanceUnion;
@@ -19,6 +20,11 @@ interface BannerRootProps {
 interface BannerStaticLayoutProps {
     children: ReactNode;
 }
+interface BannerCollapsibleLayoutProps {
+    children: ReactNode;
+    expanded?: boolean;
+    onPress?: () => void;
+}
 interface BannerContentProps {
     children: ReactNode;
 }

package/build/components/primitive/banner_primitive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"banner_primitive.d.ts","sourceRoot":"","sources":["../../../src/components/primitive/banner_primitive.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAiB,EAAE,EAAE,SAAS,EAAc,MAAM,OAAO,CAAA;AAEvE,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,gCAAgC,CAAA;AAoBvC,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,CAAA;IACzB,YAAY,EAAE,EAAE,CAAC,uBAAuB,CAAC,CAAA;IACzC,OAAO,EAAE,EAAE,CAAC,kBAAkB,CAAC,CAAA;IAC/B,UAAU,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAA;IACrC,OAAO,EAAE,EAAE,CAAC,kBAAkB,CAAC,CAAA;IAC/B,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,CAAA;IACzB,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,CAAA;CAC1B,CAAA;wBAEwB,gBAAgB;AAAzC,wBAAyC;AACzC,YAAY,EACV,eAAe,EACf,uBAAuB,EACvB,kBAAkB,EAClB,qBAAqB,EACrB,kBAAkB,EAClB,eAAe,EACf,eAAe,GAChB,CAAA;AAwBD,UAAU,eAAe;IACvB,QAAQ,EAAE,SAAS,CAAA;IACnB,UAAU,CAAC,EAAE,qBAAqB,CAAA;CACnC;AAYD,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,SAAS,CAAA;CACpB;AAeD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAA;CACpB;AAcD,UAAU,qBAAqB;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AA6BD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAA;CACpB;AAmBD,UAAU,eAAe;IACvB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAmBD,UAAU,eAAe;IACvB,QAAQ,EAAE,SAAS,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB"}
+{"version":3,"file":"banner_primitive.d.ts","sourceRoot":"","sources":["../../../src/components/primitive/banner_primitive.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAiB,EAAE,EAAE,SAAS,EAAc,MAAM,OAAO,CAAA;AAEvE,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,gCAAgC,CAAA;AA0BvC,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,CAAA;IACzB,YAAY,EAAE,EAAE,CAAC,uBAAuB,CAAC,CAAA;IACzC,iBAAiB,EAAE,EAAE,CAAC,4BAA4B,CAAC,CAAA;IACnD,OAAO,EAAE,EAAE,CAAC,kBAAkB,CAAC,CAAA;IAC/B,UAAU,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAA;IACrC,OAAO,EAAE,EAAE,CAAC,kBAAkB,CAAC,CAAA;IAC/B,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,CAAA;IACzB,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,CAAA;CAC1B,CAAA;wBAEwB,gBAAgB;AAAzC,wBAAyC;AACzC,YAAY,EACV,eAAe,EACf,uBAAuB,EACvB,4BAA4B,EAC5B,kBAAkB,EAClB,qBAAqB,EACrB,kBAAkB,EAClB,eAAe,EACf,eAAe,GAChB,CAAA;AAwBD,UAAU,eAAe;IACvB,QAAQ,EAAE,SAAS,CAAA;IACnB,UAAU,CAAC,EAAE,qBAAqB,CAAA;CACnC;AAYD,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,SAAS,CAAA;CACpB;AAeD,UAAU,4BAA4B;IACpC,QAAQ,EAAE,SAAS,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AA+BD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAA;CACpB;AAcD,UAAU,qBAAqB;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AA6BD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAA;CACpB;AAmBD,UAAU,eAAe;IACvB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAmBD,UAAU,eAAe;IACvB,QAAQ,EAAE,SAAS,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB"}

package/build/components/primitive/banner_primitive.js

@@ -1,16 +1,17 @@
 import React, { createContext, useContext } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { Pressable, StyleSheet, View } from 'react-native';
 import { useStatusColorAppearanceMap, } from '../display/utils/status_colors';
-import { MAX_FONT_SIZE_MULTIPLIER, platformFontWeightMedium, space } from '../../utils';
+import { MAX_FONT_SIZE_MULTIPLIER, platformFontWeightMedium, platformPressedOpacityStyle, space, } from '../../utils';
 import { tokens } from '../../vendor/tapestry/tokens';
 import { Heading, Icon, Text, TextInlineButton } from '../display';
-import { useFontScale } from '../../hooks';
+import { useCreateAndroidRippleColor, useFontScale } from '../../hooks';
 // ========================================
 // ====== Exports =========================
 // ========================================
 const Banner = {
     Root: BannerRoot,
     StaticLayout: BannerStaticLayout,
+    CollapsibleLayout: BannerCollapsibleLayout,
     Content: BannerContent,
     StatusIcon: BannerStatusIcon,
     Heading: BannerHeading,
@@ -36,6 +37,20 @@ function BannerStaticLayout({ children }) {
     return <View style={styles.staticLayout}>{children}</View>;
 }
 BannerStaticLayout.displayName = 'Banner.StaticLayout';
+function BannerCollapsibleLayout({ children, expanded, onPress }) {
+    const { appearance = 'neutral' } = useBannerContext();
+    const styles = useStyles({ appearance });
+    const iconName = expanded ? 'general.upCaret' : 'general.downCaret';
+    const statusColorMap = useStatusColorAppearanceMap();
+    const androidRippleColor = useCreateAndroidRippleColor({
+        color: statusColorMap[appearance].background,
+    });
+    return (<Pressable onPress={onPress} style={({ pressed }) => [styles.staticLayout, pressed && platformPressedOpacityStyle]} android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }} accessibilityState={{ expanded }} accessibilityRole="button">
+      {children}
+      <Icon name={iconName} style={styles.icon} maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
+    </Pressable>);
+}
+BannerCollapsibleLayout.displayName = 'Banner.CollapsibleLayout';
 function BannerContent({ children }) {
     const styles = useStyles();
     return <View style={styles.content}>{children}</View>;
@@ -81,6 +96,7 @@ BannerLink.displayName = 'Banner.Link';
 const useStyles = ({ appearance = 'neutral' } = {}) => {
     const statusColorMap = useStatusColorAppearanceMap();
     const fontScale = useFontScale();
+    const LINE_HEIGHT_OFFSET = 1;
     return StyleSheet.create({
         staticLayout: {
             flexDirection: 'row',
@@ -97,7 +113,7 @@ const useStyles = ({ appearance = 'neutral' } = {}) => {
         icon: {
             color: statusColorMap[appearance].icon,
             fontSize: tokens.fontSizeMd,
-            marginTop: space(0.5) * fontScale,
+            marginTop: space(0.5) - LINE_HEIGHT_OFFSET * fontScale,
         },
         heading: {
             color: statusColorMap[appearance].text,

package/build/components/primitive/banner_primitive.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner_primitive.js","sourceRoot":"","sources":["../../../src/components/primitive/banner_primitive.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { createContext, FC, ReactNode, useContext } from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport {\n  useStatusColorAppearanceMap,\n  type StatusAppearanceUnion,\n} from '../display/utils/status_colors'\nimport { MAX_FONT_SIZE_MULTIPLIER, platformFontWeightMedium, space } from '../../utils'\nimport { tokens } from '../../vendor/tapestry/tokens'\nimport { Heading, Icon, Text, TextInlineButton } from '../display'\nimport { useFontScale } from '../../hooks'\n\n// ========================================\n// ====== Exports =========================\n// ========================================\n\nconst Banner = {\n  Root: BannerRoot,\n  StaticLayout: BannerStaticLayout,\n  Content: BannerContent,\n  StatusIcon: BannerStatusIcon,\n  Heading: BannerHeading,\n  Text: BannerText,\n  Link: BannerLink,\n} as const\n\ntype BannerComponents = {\n  Root: FC<BannerRootProps>\n  StaticLayout: FC<BannerStaticLayoutProps>\n  Content: FC<BannerContentProps>\n  StatusIcon: FC<BannerStatusIconProps>\n  Heading: FC<BannerHeadingProps>\n  Text: FC<BannerTextProps>\n  Link: FC<BannerLinkProps>\n}\n\nexport default Banner as BannerComponents\nexport type {\n  BannerRootProps,\n  BannerStaticLayoutProps,\n  BannerContentProps,\n  BannerStatusIconProps,\n  BannerHeadingProps,\n  BannerTextProps,\n  BannerLinkProps,\n}\n\n// ========================================\n// ====== Context =========================\n// ========================================\n\ninterface BannerContextType {\n  appearance?: StatusAppearanceUnion\n}\n\nconst BannerContext = createContext<BannerContextType | null>(null)\n\nfunction useBannerContext() {\n  const context = useContext(BannerContext)\n  if (!context) {\n    throw new Error('Banner components must be used within Banner.Root')\n  }\n  return context\n}\n\n// ========================================\n// ====== BannerRoot ======================\n// ========================================\n\ninterface BannerRootProps {\n  children: ReactNode\n  appearance?: StatusAppearanceUnion\n}\n\nfunction BannerRoot({ children, appearance = 'neutral' }: BannerRootProps) {\n  return <BannerContext.Provider value={{ appearance }}>{children}</BannerContext.Provider>\n}\n\nBannerRoot.displayName = 'Banner.Root'\n\n// ========================================\n// ====== BannerStaticLayout ==============\n// ========================================\n\ninterface BannerStaticLayoutProps {\n  children: ReactNode\n}\n\nfunction BannerStaticLayout({ children }: BannerStaticLayoutProps) {\n  const { appearance } = useBannerContext()\n  const styles = useStyles({ appearance })\n\n  return <View style={styles.staticLayout}>{children}</View>\n}\n\nBannerStaticLayout.displayName = 'Banner.StaticLayout'\n\n// ========================================\n// ====== BannerContent ===================\n// ========================================\n\ninterface BannerContentProps {\n  children: ReactNode\n}\n\nfunction BannerContent({ children }: BannerContentProps) {\n  const styles = useStyles()\n\n  return <View style={styles.content}>{children}</View>\n}\n\nBannerContent.displayName = 'Banner.Content'\n\n// ========================================\n// ====== BannerStatusIcon ================\n// ========================================\n\ninterface BannerStatusIconProps {\n  iconName?: string\n}\n\nfunction BannerStatusIcon({ iconName }: BannerStatusIconProps) {\n  const { appearance = 'neutral' } = useBannerContext()\n  const styles = useStyles({ appearance })\n\n  const iconNameMap = {\n    error: 'general.exclamationTriangle',\n    info: 'general.outlinedInfoCircle',\n    neutral: 'general.outlinedInfoCircle',\n    success: 'general.check',\n    warning: 'general.exclamationTriangle',\n  } as const\n\n  return (\n    <Icon\n      name={iconName || iconNameMap[appearance]}\n      style={styles.icon}\n      maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n    />\n  )\n}\n\nBannerStatusIcon.displayName = 'Banner.StatusIcon'\n\n// ========================================\n// ====== BannerHeading ===================\n// ========================================\n\ninterface BannerHeadingProps {\n  children: ReactNode\n}\n\nfunction BannerHeading({ children }: BannerHeadingProps) {\n  const { appearance = 'neutral' } = useBannerContext()\n  const styles = useStyles({ appearance })\n\n  return (\n    <Heading variant=\"h3\" style={styles.heading}>\n      {children}\n    </Heading>\n  )\n}\n\nBannerHeading.displayName = 'Banner.Heading'\n\n// ========================================\n// ====== BannerText ======================\n// ========================================\n\ninterface BannerTextProps {\n  children: ReactNode\n}\n\nfunction BannerText({ children }: BannerTextProps) {\n  const { appearance = 'neutral' } = useBannerContext()\n  const styles = useStyles({ appearance })\n\n  return (\n    <Text variant=\"tertiary\" style={styles.text}>\n      {children}\n    </Text>\n  )\n}\n\nBannerText.displayName = 'Banner.Text'\n\n// ========================================\n// ====== BannerLink ======================\n// ========================================\n\ninterface BannerLinkProps {\n  children: ReactNode\n  onPress?: () => void\n}\n\nfunction BannerLink({ children, onPress }: BannerLinkProps) {\n  const { appearance = 'neutral' } = useBannerContext()\n  const styles = useStyles({ appearance })\n\n  return (\n    <TextInlineButton variant=\"tertiary\" style={styles.text} onPress={onPress}>\n      {children}\n    </TextInlineButton>\n  )\n}\n\nBannerLink.displayName = 'Banner.Link'\n\n// ========================================\n// ====== Styles ==========================\n// ========================================\n\ninterface Styles {\n  appearance?: StatusAppearanceUnion\n}\n\nconst useStyles = ({ appearance = 'neutral' }: Styles = {}) => {\n  const statusColorMap = useStatusColorAppearanceMap()\n  const fontScale = useFontScale()\n\n  return StyleSheet.create({\n    staticLayout: {\n      flexDirection: 'row',\n      backgroundColor: statusColorMap[appearance].background,\n      padding: space(1.5),\n      gap: space(1),\n      borderRadius: tokens.borderRadiusMd,\n      flex: 1,\n    },\n    content: {\n      gap: space(0.5),\n      flex: 1,\n    },\n    icon: {\n      color: statusColorMap[appearance].icon,\n      fontSize: tokens.fontSizeMd,\n      marginTop: space(0.5) * fontScale,\n    },\n    heading: {\n      color: statusColorMap[appearance].text,\n      fontWeight: platformFontWeightMedium,\n      fontSize: tokens.fontSizeMd,\n    },\n    text: {\n      color: statusColorMap[appearance].text,\n    },\n  })\n}\n"]}
+{"version":3,"file":"banner_primitive.js","sourceRoot":"","sources":["../../../src/components/primitive/banner_primitive.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { createContext, FC, ReactNode, useContext } from 'react'\nimport { Pressable, StyleSheet, View } from 'react-native'\nimport {\n  useStatusColorAppearanceMap,\n  type StatusAppearanceUnion,\n} from '../display/utils/status_colors'\nimport {\n  MAX_FONT_SIZE_MULTIPLIER,\n  platformFontWeightMedium,\n  platformPressedOpacityStyle,\n  space,\n} from '../../utils'\nimport { tokens } from '../../vendor/tapestry/tokens'\nimport { Heading, Icon, Text, TextInlineButton } from '../display'\nimport { useCreateAndroidRippleColor, useFontScale } from '../../hooks'\n\n// ========================================\n// ====== Exports =========================\n// ========================================\n\nconst Banner = {\n  Root: BannerRoot,\n  StaticLayout: BannerStaticLayout,\n  CollapsibleLayout: BannerCollapsibleLayout,\n  Content: BannerContent,\n  StatusIcon: BannerStatusIcon,\n  Heading: BannerHeading,\n  Text: BannerText,\n  Link: BannerLink,\n} as const\n\ntype BannerComponents = {\n  Root: FC<BannerRootProps>\n  StaticLayout: FC<BannerStaticLayoutProps>\n  CollapsibleLayout: FC<BannerCollapsibleLayoutProps>\n  Content: FC<BannerContentProps>\n  StatusIcon: FC<BannerStatusIconProps>\n  Heading: FC<BannerHeadingProps>\n  Text: FC<BannerTextProps>\n  Link: FC<BannerLinkProps>\n}\n\nexport default Banner as BannerComponents\nexport type {\n  BannerRootProps,\n  BannerStaticLayoutProps,\n  BannerCollapsibleLayoutProps,\n  BannerContentProps,\n  BannerStatusIconProps,\n  BannerHeadingProps,\n  BannerTextProps,\n  BannerLinkProps,\n}\n\n// ========================================\n// ====== Context =========================\n// ========================================\n\ninterface BannerContextType {\n  appearance?: StatusAppearanceUnion\n}\n\nconst BannerContext = createContext<BannerContextType | null>(null)\n\nfunction useBannerContext() {\n  const context = useContext(BannerContext)\n  if (!context) {\n    throw new Error('Banner components must be used within Banner.Root')\n  }\n  return context\n}\n\n// ========================================\n// ====== BannerRoot ======================\n// ========================================\n\ninterface BannerRootProps {\n  children: ReactNode\n  appearance?: StatusAppearanceUnion\n}\n\nfunction BannerRoot({ children, appearance = 'neutral' }: BannerRootProps) {\n  return <BannerContext.Provider value={{ appearance }}>{children}</BannerContext.Provider>\n}\n\nBannerRoot.displayName = 'Banner.Root'\n\n// ========================================\n// ====== BannerStaticLayout ==============\n// ========================================\n\ninterface BannerStaticLayoutProps {\n  children: ReactNode\n}\n\nfunction BannerStaticLayout({ children }: BannerStaticLayoutProps) {\n  const { appearance } = useBannerContext()\n  const styles = useStyles({ appearance })\n\n  return <View style={styles.staticLayout}>{children}</View>\n}\n\nBannerStaticLayout.displayName = 'Banner.StaticLayout'\n\n// ========================================\n// ====== BannerCollapsibleLayout =========\n// ========================================\n\ninterface BannerCollapsibleLayoutProps {\n  children: ReactNode\n  expanded?: boolean\n  onPress?: () => void\n}\n\nfunction BannerCollapsibleLayout({ children, expanded, onPress }: BannerCollapsibleLayoutProps) {\n  const { appearance = 'neutral' } = useBannerContext()\n  const styles = useStyles({ appearance })\n  const iconName = expanded ? 'general.upCaret' : 'general.downCaret'\n  const statusColorMap = useStatusColorAppearanceMap()\n  const androidRippleColor = useCreateAndroidRippleColor({\n    color: statusColorMap[appearance].background,\n  })\n\n  return (\n    <Pressable\n      onPress={onPress}\n      style={({ pressed }) => [styles.staticLayout, pressed && platformPressedOpacityStyle]}\n      android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}\n      accessibilityState={{ expanded }}\n      accessibilityRole=\"button\"\n    >\n      {children}\n      <Icon name={iconName} style={styles.icon} maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER} />\n    </Pressable>\n  )\n}\n\nBannerCollapsibleLayout.displayName = 'Banner.CollapsibleLayout'\n\n// ========================================\n// ====== BannerContent ===================\n// ========================================\n\ninterface BannerContentProps {\n  children: ReactNode\n}\n\nfunction BannerContent({ children }: BannerContentProps) {\n  const styles = useStyles()\n\n  return <View style={styles.content}>{children}</View>\n}\n\nBannerContent.displayName = 'Banner.Content'\n\n// ========================================\n// ====== BannerStatusIcon ================\n// ========================================\n\ninterface BannerStatusIconProps {\n  iconName?: string\n}\n\nfunction BannerStatusIcon({ iconName }: BannerStatusIconProps) {\n  const { appearance = 'neutral' } = useBannerContext()\n  const styles = useStyles({ appearance })\n\n  const iconNameMap = {\n    error: 'general.exclamationTriangle',\n    info: 'general.outlinedInfoCircle',\n    neutral: 'general.outlinedInfoCircle',\n    success: 'general.check',\n    warning: 'general.exclamationTriangle',\n  } as const\n\n  return (\n    <Icon\n      name={iconName || iconNameMap[appearance]}\n      style={styles.icon}\n      maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n    />\n  )\n}\n\nBannerStatusIcon.displayName = 'Banner.StatusIcon'\n\n// ========================================\n// ====== BannerHeading ===================\n// ========================================\n\ninterface BannerHeadingProps {\n  children: ReactNode\n}\n\nfunction BannerHeading({ children }: BannerHeadingProps) {\n  const { appearance = 'neutral' } = useBannerContext()\n  const styles = useStyles({ appearance })\n\n  return (\n    <Heading variant=\"h3\" style={styles.heading}>\n      {children}\n    </Heading>\n  )\n}\n\nBannerHeading.displayName = 'Banner.Heading'\n\n// ========================================\n// ====== BannerText ======================\n// ========================================\n\ninterface BannerTextProps {\n  children: ReactNode\n}\n\nfunction BannerText({ children }: BannerTextProps) {\n  const { appearance = 'neutral' } = useBannerContext()\n  const styles = useStyles({ appearance })\n\n  return (\n    <Text variant=\"tertiary\" style={styles.text}>\n      {children}\n    </Text>\n  )\n}\n\nBannerText.displayName = 'Banner.Text'\n\n// ========================================\n// ====== BannerLink ======================\n// ========================================\n\ninterface BannerLinkProps {\n  children: ReactNode\n  onPress?: () => void\n}\n\nfunction BannerLink({ children, onPress }: BannerLinkProps) {\n  const { appearance = 'neutral' } = useBannerContext()\n  const styles = useStyles({ appearance })\n\n  return (\n    <TextInlineButton variant=\"tertiary\" style={styles.text} onPress={onPress}>\n      {children}\n    </TextInlineButton>\n  )\n}\n\nBannerLink.displayName = 'Banner.Link'\n\n// ========================================\n// ====== Styles ==========================\n// ========================================\n\ninterface Styles {\n  appearance?: StatusAppearanceUnion\n}\n\nconst useStyles = ({ appearance = 'neutral' }: Styles = {}) => {\n  const statusColorMap = useStatusColorAppearanceMap()\n  const fontScale = useFontScale()\n  const LINE_HEIGHT_OFFSET = 1\n\n  return StyleSheet.create({\n    staticLayout: {\n      flexDirection: 'row',\n      backgroundColor: statusColorMap[appearance].background,\n      padding: space(1.5),\n      gap: space(1),\n      borderRadius: tokens.borderRadiusMd,\n      flex: 1,\n    },\n    content: {\n      gap: space(0.5),\n      flex: 1,\n    },\n    icon: {\n      color: statusColorMap[appearance].icon,\n      fontSize: tokens.fontSizeMd,\n      marginTop: space(0.5) - LINE_HEIGHT_OFFSET * fontScale,\n    },\n    heading: {\n      color: statusColorMap[appearance].text,\n      fontWeight: platformFontWeightMedium,\n      fontSize: tokens.fontSizeMd,\n    },\n    text: {\n      color: statusColorMap[appearance].text,\n    },\n  })\n}\n"]}

package/build/screens/design_system_screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"design_system_screen.d.ts","sourceRoot":"","sources":["../../src/screens/design_system_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAyDvC,wBAAgB,kBAAkB,sBAgBjC"}
+{"version":3,"file":"design_system_screen.d.ts","sourceRoot":"","sources":["../../src/screens/design_system_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AA0DvC,wBAAgB,kBAAkB,sBAgBjC"}

package/build/screens/design_system_screen.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Alert, Pressable, ScrollView, StyleSheet, View } from 'react-native';
 import { useTheme } from '../hooks';
-import { Avatar, AvatarGroup, Badge, Banner, Button, Heading, Icon, IconButton, Image, Spinner, Switch, Text, TextButton, TextInlineButton, } from '../components/display';
+import { Avatar, AvatarGroup, Badge, Banner, BannerCollapsible, Button, Heading, Icon, IconButton, Image, Spinner, Switch, Text, TextButton, TextInlineButton, } from '../components/display';
 import { space, MAX_FONT_SIZE_MULTIPLIER, platformPressedOpacityStyle, platformFontWeightMedium, } from '../utils';
 import BannerPrimitive from '../components/primitive/banner_primitive';
 // =================================
@@ -446,6 +446,42 @@ function StatusComponentsSection({ isLast }) {
           <Banner appearance="error" heading="Banner heading" description="Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt."/>
         </Column>
       </Group>
+      <Group title="BannerCollapsible" description="Same as `Banner` but takes children that can be hidden/revealed on a tap.">
+        <Column>
+          <BannerCollapsible appearance="neutral" showIcon={false} heading="Banner heading">
+            <BannerPrimitive.Text>
+              Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt.
+            </BannerPrimitive.Text>
+          </BannerCollapsible>
+          <BannerCollapsible appearance="info" heading="Banner heading">
+            <BannerPrimitive.Text>
+              Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt.
+            </BannerPrimitive.Text>
+          </BannerCollapsible>
+          <BannerCollapsible appearance="success" heading="Banner heading">
+            <BannerPrimitive.Text>
+              Et sint Quis non excepturi{' '}
+              <BannerPrimitive.Link onPress={buttonPress}>
+                enim et conseq atur porro est
+              </BannerPrimitive.Link>{' '}
+              galisum labore ea volupt.
+            </BannerPrimitive.Text>
+          </BannerCollapsible>
+          <BannerCollapsible appearance="warning" iconName="general.shieldExclamation" heading="13 members under age 13" description="Et sint Quis non excepturi enim et conse.">
+            <BannerPrimitive.Text>
+              More hdden content that can be revealed on a tap. Lorem ipsum dolor sit amet,
+              consectetur
+            </BannerPrimitive.Text>
+          </BannerCollapsible>
+          <BannerCollapsible appearance="error" heading="Banner heading" description="Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt.">
+            <BannerPrimitive.Text>
+              Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt. Et
+              sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt. Et
+              sint Quis non excepturi enim et .
+            </BannerPrimitive.Text>
+          </BannerCollapsible>
+        </Column>
+      </Group>
     </CollapsableSection>);
 }
 function CollapsableSection({ children, title, isLast = false }) {