@unif/react-native-chat 4.3.3 → 4.4.0

package/src/components/Message/Message.tsx

@@ -2,6 +2,7 @@ import { AlertOutlined } from '@unif/react-native-icons';
 import { Pressable, Text, View } from 'react-native';
 import {
   Button,
+  GlassLayer,
   IconButton,
   useThemedStyles,
   useColors,
@@ -59,6 +60,15 @@ export function Message(props: MessageProps) {
   ];
   const content = (
     <>
+      {surface === 'outlined' ||
+      (surface === 'bubble' && placement === 'start') ? (
+        <GlassLayer
+          style={[
+            styles.material,
+            waiting && surface === 'bubble' && styles.waitingMaterial,
+          ]}
+        />
+      ) : null}
       {header}
       {props.text !== undefined ? (
         props.format === 'markdown' ? (
@@ -145,7 +155,7 @@ export function Message(props: MessageProps) {
             <IconButton
               icon={AlertOutlined}
               size="sm"
-              variant="ghost"
+              variant="glass"
               color={colors.error}
               style={styles.failureAction}
               accessibilityLabel={failedAction.label}
@@ -166,7 +176,7 @@ export function Message(props: MessageProps) {
                   key={action.id}
                   icon={action.icon}
                   size="sm"
-                  variant="ghost"
+                  variant="glass"
                   color={colors.foregroundSubtle}
                   accessibilityLabel={action.label}
                   accessibilityHint={action.accessibilityHint}

package/src/components/Message/styles.ts

@@ -24,8 +24,9 @@ export const createStyles = (colors: ColorTokens) =>
       paddingHorizontal: space[5],
       paddingVertical: space[4],
       borderRadius: radius['2xl'],
-      backgroundColor: colors.surface,
     },
+    material: { borderRadius: radius['2xl'] },
+    waitingMaterial: { borderTopLeftRadius: 0 },
     outgoing: { backgroundColor: colors.primary },
     outgoingText: { color: colors.onPrimary },
     outlined: {

package/src/components/Process/Process.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { Text, View } from 'react-native';
 import {
   Button,
+  GlassLayer,
   r,
   useColors,
   useThemedStyles,
@@ -95,6 +96,13 @@ export function Process(props: ProcessProps): React.JSX.Element {
       ]}
       testID={testID}
     >
+      {variant === 'card' || variant === 'timeline' ? (
+        <GlassLayer
+          style={
+            variant === 'timeline' ? styles.timelineMaterial : styles.material
+          }
+        />
+      ) : null}
       {title || (identity && !inlineIdentity) ? (
         <View style={styles.heading}>
           {!inlineIdentity ? identity : null}

package/src/components/Process/styles.ts

@@ -54,8 +54,9 @@ export const createStyles = (colors: ColorTokens) =>
       paddingHorizontal: space[5],
       paddingVertical: space[4],
     },
+    timelineMaterial: { borderRadius: radius.lg },
+    material: { borderRadius: radius.xl },
     timelineRoot: {
-      backgroundColor: colors.surface,
       borderRadius: radius.lg,
       padding: space[5],
     },
@@ -134,7 +135,6 @@ export const createStyles = (colors: ColorTokens) =>
       borderRadius: radius.xl,
       borderWidth: 1,
       borderColor: colors.outline,
-      backgroundColor: colors.surface,
     },
     heading: {
       flexDirection: 'row',
@@ -191,7 +191,6 @@ export const createStyles = (colors: ColorTokens) =>
     details: {
       padding: space[4],
       borderRadius: radius.md,
-      backgroundColor: colors.surfaceContainer,
     },
     actions: {
       flexDirection: 'row',

package/src/components/ProcessingProgress/styles.ts

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native';
-import { r, space, type } from '@unif/react-native-design';
+import { leading, space, type } from '@unif/react-native-design';
 import type { ColorTokens } from '@unif/react-native-design';
 
 export const createStyles = (colors: ColorTokens) =>
@@ -12,6 +12,6 @@ export const createStyles = (colors: ColorTokens) =>
     text: {
       color: colors.foregroundMuted,
       fontSize: type.xs,
-      lineHeight: r(20),
+      lineHeight: leading.sm,
     },
   });

package/src/components/Sources/Sources.tsx

@@ -1,6 +1,12 @@
 import { ChevronRightOutlined } from '@unif/react-native-icons';
 import { Pressable, Text, View } from 'react-native';
-import { r, useColors, useThemedStyles } from '@unif/react-native-design';
+import {
+  GlassLayer,
+  pressedOpacity,
+  r,
+  useColors,
+  useThemedStyles,
+} from '@unif/react-native-design';
 import { DEFAULT_SOURCES_TITLE } from './constants';
 import { createStyles } from './styles';
 import type { SourceItem, SourcesProps } from './types';
@@ -17,20 +23,27 @@ export function Sources({
 
   if (items.length === 0) return null;
 
-  const renderItem = (item: SourceItem, showChevron: boolean) => (
+  const renderItem = (
+    item: SourceItem,
+    showChevron: boolean,
+    opacity: number
+  ) => (
     <>
-      <Text style={styles.label} testID={`source-label-${item.id}`}>
-        {item.label}
-      </Text>
-      <View style={styles.content}>
-        {item.title ? <Text style={styles.title}>{item.title}</Text> : null}
-        {item.description ? (
-          <Text style={styles.description}>{item.description}</Text>
+      <GlassLayer style={styles.material} />
+      <View style={[styles.itemContent, { opacity }]}>
+        <Text style={styles.label} testID={`source-label-${item.id}`}>
+          {item.label}
+        </Text>
+        <View style={styles.content}>
+          {item.title ? <Text style={styles.title}>{item.title}</Text> : null}
+          {item.description ? (
+            <Text style={styles.description}>{item.description}</Text>
+          ) : null}
+        </View>
+        {showChevron ? (
+          <ChevronRightOutlined size={r(18)} color={colors.foregroundMuted} />
         ) : null}
       </View>
-      {showChevron ? (
-        <ChevronRightOutlined size={r(18)} color={colors.foregroundMuted} />
-      ) : null}
     </>
   );
 
@@ -42,11 +55,7 @@ export function Sources({
           onPress ? (
             <Pressable
               key={item.id}
-              style={({ pressed }) => [
-                styles.item,
-                pressed && styles.pressed,
-                item.disabled && styles.disabled,
-              ]}
+              style={styles.item}
               onPress={item.disabled ? undefined : () => onPress(item)}
               disabled={item.disabled}
               accessibilityRole="button"
@@ -56,15 +65,21 @@ export function Sources({
               accessibilityState={{ disabled: item.disabled === true }}
               testID={`source-${item.id}`}
             >
-              {renderItem(item, true)}
+              {({ pressed }) =>
+                renderItem(
+                  item,
+                  true,
+                  item.disabled ? 0.5 : pressed ? pressedOpacity : 1
+                )
+              }
             </Pressable>
           ) : (
             <View
               key={item.id}
-              style={[styles.item, item.disabled && styles.disabled]}
+              style={styles.item}
               testID={`source-${item.id}`}
             >
-              {renderItem(item, false)}
+              {renderItem(item, false, item.disabled ? 0.5 : 1)}
             </View>
           )
         )}

package/src/components/Sources/styles.ts

@@ -1,12 +1,5 @@
 import { StyleSheet } from 'react-native';
-import {
-  fixed,
-  fw,
-  pressedOpacity,
-  radius,
-  space,
-  type,
-} from '@unif/react-native-design';
+import { fixed, fw, radius, space, type } from '@unif/react-native-design';
 import type { ColorTokens } from '@unif/react-native-design';
 
 export const createStyles = (colors: ColorTokens) =>
@@ -24,18 +17,14 @@ export const createStyles = (colors: ColorTokens) =>
     },
     item: {
       minHeight: fixed.hitTarget,
-      flexDirection: 'row',
-      alignItems: 'flex-start',
-      gap: space[3],
       padding: space[3],
       borderRadius: radius.md,
-      backgroundColor: colors.surfaceContainer,
-    },
-    pressed: {
-      opacity: pressedOpacity,
     },
-    disabled: {
-      opacity: 0.5,
+    material: { borderRadius: radius.md },
+    itemContent: {
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      gap: space[3],
     },
     label: {
       minWidth: space[7],